Modified dashboard

Birdmap.API/Birdmap.API.csproj

@@ -52,7 +52,7 @@
     <None Remove="ClientApp\src\components\auth\Auth.tsx" />
     <None Remove="ClientApp\src\components\auth\AuthClient.ts" />
     <None Remove="ClientApp\src\components\auth\AuthService.ts" />
-    <None Remove="ClientApp\src\components\dashboard\DashboardService.ts" />
+    <None Remove="ClientApp\src\components\dashboard\ServiceInfoService.ts" />
     <None Remove="ClientApp\src\components\devices\DeviceService.ts" />
   </ItemGroup>
 

Birdmap.API/ClientApp/src/components/dashboard/Dashboard.jsx

@@ -1,13 +1,8 @@
-import { Box, Grid, IconButton, Paper, Typography } from '@material-ui/core';
+import React, { Component } from 'react';
-import { blueGrey } from '@material-ui/core/colors';
-import { AddBox, Refresh } from '@material-ui/icons/';
 import { withStyles } from '@material-ui/styles';
-import { HubConnectionBuilder } from '@microsoft/signalr';
+import Services from './services/Services';
-import React, { Component } from 'react';
+import { blueGrey } from '@material-ui/core/colors';
-import AddNewDialog from './AddNewDialog';
+import { Box, Grid, IconButton, Paper, Typography } from '@material-ui/core';
-import DashboardService, { ServiceRequest } from './DashboardService';
-import ServiceInfoComponent from './ServiceInfoComponent';
-import ServiceInfoSkeleton from './ServiceInfoSkeleton';
 
 const styles = theme => ({
     root: {
@@ -18,136 +13,21 @@ const styles = theme => ({
     paper: {
         backgroundColor: blueGrey[50],
         height: '60px',
-    },
+    }
-    typo: {
-        fontSize: theme.typography.pxToRem(20),
-        fontWeight: theme.typography.fontWeightRegular,
-    },
 });
 
-const hub_url = "/hubs/services";
-const notify_method_name = "NotifyUpdatedAsync";
-
 class Dashboard extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            hubConnection: null,
-            isDialogOpen: false,
-            isLoading: false,
-            service: new DashboardService(),
-            services: [],
-            serviceCount: [1, 2, 3],
-        }
-
-        this.handleDevicesUpdated = this.handleDevicesUpdated.bind(this);
-        this.addDevice = this.addDevice.bind(this);
-    }
-
-    handleDevicesUpdated() {
-        this.setState({ isLoading: true });
-
-        this.state.service.getCount().then(result => {
-            const updatedCount = [];
-            for (var i = 0; i < result; i++) {
-                updatedCount.push(i);
-            }
-            this.setState({ serviceCount: updatedCount });
-        }).catch(ex => {
-            console.log(ex);
-        });
-
-        this.state.service.get().then(result => {
-            const updatedServices = [];
-            for (var s of result) {
-                updatedServices.push(s);
-            }
-            this.setState({ services: updatedServices });
-        }).catch(ex => {
-            console.log(ex);
-        }).finally(() => this.setState({ isLoading: false }));
-    }
-
-    componentDidMount() {
-        this.handleDevicesUpdated();
-        const newConnection = new HubConnectionBuilder()
-            .withUrl(hub_url)
-            .withAutomaticReconnect()
-            .build();
-
-        this.setState({ hubConnection: newConnection });
-
-        newConnection.start()
-            .then(_ => {
-                console.log('Services hub Connected!');
-                newConnection.on(notify_method_name, () => this.handleDevicesUpdated());
-            }).catch(e => console.log('Services hub Connection failed: ', e));
-    }
-
-    componentWillUnmount() {
-        if (this.state.hubConnection != null) {
-            this.state.hubConnection.off(notify_method_name);
-            console.log('Services hub Disconnected!');
-        }
-    }
-
-    addDevice(name, url) {
-        this.setState({ isDialogOpen: false });
-        let request = new ServiceRequest();
-        request.id = 0;
-        request.name = name;
-        request.uri = url;
-
-        this.state.service.post(request).catch(ex => {
-            console.log(ex);
-        });
-    }
-
     render() {
         const { classes } = this.props;
-
-        const Services = this.state.services.map((info, index) => (
-            <ServiceInfoComponent key={index} isAdmin={this.props.isAdmin} info={info} service={this.state.service} />
-        ));
-
-        const Skeletons = this.state.serviceCount.map((i, index) => (
-            <ServiceInfoSkeleton key={index} />
-            ));
-
         return (
             <Box className={classes.root}>
                 <Grid container spacing={3}>
                     <Grid item xs={8}>
-                        <Paper className={classes.paper} square>
+                        <Services isAdmin={this.props.isAdmin}/>
-                            <Grid container
-                                spacing={0}
-                                direction="row"
-                                justify="center"
-                                alignItems="center">
-                                <Grid item>
-                                    <Typography className={classes.typo}>Services</Typography>
-                                </Grid>
-                                <Grid item>
-                                    {this.props.isAdmin ?
-                                        <IconButton color="primary" onClick={() => this.setState({ isDialogOpen: true })}>
-                                            <AddBox fontSize="large" />
-                                        </IconButton>
-                                        : null
-                                    }
-                                </Grid>
-                                <Grid item>
-                                    <IconButton color="primary" onClick={this.handleDevicesUpdated}>
-                                        <Refresh fontSize="large" />
-                                    </IconButton>
-                                </Grid>
-                            <AddNewDialog open={this.state.isDialogOpen} handleClose={() => this.setState({ isDialogOpen: false })} handleAdd={this.addDevice}/>
-                            </Grid>
-                        </Paper>
-                        {this.state.isLoading ? Skeletons : Services}
                     </Grid>
                     <Grid item xs={4}>
                         <Paper className={classes.paper} />
+                        <Paper className={classes.paper} />
                     </Grid>
                     <Grid item xs={12}>
                         <Paper className={classes.paper} />

Birdmap.API/ClientApp/src/components/dashboard/services/ServiceInfoService.js

@@ -22,13 +22,13 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ApiException = exports.HttpStatusCode = exports.ServiceRequest = exports.ServiceInfo = void 0;
-var DashboardService = /** @class */ (function () {
+var ServiceInfoService = /** @class */ (function () {
-    function DashboardService(baseUrl, http) {
+    function ServiceInfoService(baseUrl, http) {
         this.jsonParseReviver = undefined;
         this.http = http ? http : window;
         this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "";
     }
-    DashboardService.prototype.getCount = function () {
+    ServiceInfoService.prototype.getCount = function () {
         var _this = this;
         var url_ = this.baseUrl + "/api/Services/count";
         url_ = url_.replace(/[?&]$/, "");
@@ -43,7 +43,7 @@ var DashboardService = /** @class */ (function () {
             return _this.processGetCount(_response);
         });
     };
-    DashboardService.prototype.processGetCount = function (response) {
+    ServiceInfoService.prototype.processGetCount = function (response) {
         var _this = this;
         var status = response.status;
         var _headers = {};
@@ -66,7 +66,7 @@ var DashboardService = /** @class */ (function () {
         }
         return Promise.resolve(null);
     };
-    DashboardService.prototype.get = function () {
+    ServiceInfoService.prototype.get = function () {
         var _this = this;
         var url_ = this.baseUrl + "/api/Services";
         url_ = url_.replace(/[?&]$/, "");
@@ -81,7 +81,7 @@ var DashboardService = /** @class */ (function () {
             return _this.processGet(_response);
         });
     };
-    DashboardService.prototype.processGet = function (response) {
+    ServiceInfoService.prototype.processGet = function (response) {
         var _this = this;
         var status = response.status;
         var _headers = {};
@@ -110,7 +110,7 @@ var DashboardService = /** @class */ (function () {
         }
         return Promise.resolve(null);
     };
-    DashboardService.prototype.post = function (request) {
+    ServiceInfoService.prototype.post = function (request) {
         var _this = this;
         var url_ = this.baseUrl + "/api/Services";
         url_ = url_.replace(/[?&]$/, "");
@@ -128,7 +128,7 @@ var DashboardService = /** @class */ (function () {
             return _this.processPost(_response);
         });
     };
-    DashboardService.prototype.processPost = function (response) {
+    ServiceInfoService.prototype.processPost = function (response) {
         var _this = this;
         var status = response.status;
         var _headers = {};
@@ -151,7 +151,7 @@ var DashboardService = /** @class */ (function () {
         }
         return Promise.resolve(null);
     };
-    DashboardService.prototype.put = function (request) {
+    ServiceInfoService.prototype.put = function (request) {
         var _this = this;
         var url_ = this.baseUrl + "/api/Services";
         url_ = url_.replace(/[?&]$/, "");
@@ -168,7 +168,7 @@ var DashboardService = /** @class */ (function () {
             return _this.processPut(_response);
         });
     };
-    DashboardService.prototype.processPut = function (response) {
+    ServiceInfoService.prototype.processPut = function (response) {
         var status = response.status;
         var _headers = {};
         if (response.headers && response.headers.forEach) {
@@ -187,7 +187,7 @@ var DashboardService = /** @class */ (function () {
         }
         return Promise.resolve(null);
     };
-    DashboardService.prototype.delete = function (id) {
+    ServiceInfoService.prototype.delete = function (id) {
         var _this = this;
         var url_ = this.baseUrl + "/api/Services/{id}";
         if (id === undefined || id === null)
@@ -204,7 +204,7 @@ var DashboardService = /** @class */ (function () {
             return _this.processDelete(_response);
         });
     };
-    DashboardService.prototype.processDelete = function (response) {
+    ServiceInfoService.prototype.processDelete = function (response) {
         var status = response.status;
         var _headers = {};
         if (response.headers && response.headers.forEach) {
@@ -223,9 +223,9 @@ var DashboardService = /** @class */ (function () {
         }
         return Promise.resolve(null);
     };
-    return DashboardService;
+    return ServiceInfoService;
 }());
-exports.default = DashboardService;
+exports.default = ServiceInfoService;
 var ServiceInfo = /** @class */ (function () {
     function ServiceInfo(data) {
         if (data) {
@@ -383,4 +383,4 @@ function throwException(message, status, response, headers, result) {
     else
         throw new ApiException(message, status, response, headers, null);
 }
-//# sourceMappingURL=DashboardService.js.map
+//# sourceMappingURL=SystemInfoService.js.map

Birdmap.API/ClientApp/src/components/dashboard/services/ServiceInfoService.ts

@@ -7,7 +7,7 @@
 //----------------------
 // ReSharper disable InconsistentNaming
 
-export default class DashboardService {
+export default class ServiceInfoService {
     private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
     private baseUrl: string;
     protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;

Birdmap.API/ClientApp/src/components/dashboard/services/Services.jsx

@@ -0,0 +1,146 @@
+import { Box, Grid, IconButton, Paper, Typography } from '@material-ui/core';
+import { blueGrey } from '@material-ui/core/colors';
+import { AddBox, Refresh } from '@material-ui/icons/';
+import { withStyles } from '@material-ui/styles';
+import { HubConnectionBuilder } from '@microsoft/signalr';
+import React, { Component } from 'react';
+import AddNewDialog from './AddNewDialog';
+import ServiceInfoService, { ServiceRequest } from './ServiceInfoService';
+import ServiceInfoComponent from './ServiceInfoComponent';
+import ServiceInfoSkeleton from './ServiceInfoSkeleton';
+
+const styles = theme => ({
+    typo: {
+        fontSize: theme.typography.pxToRem(20),
+        fontWeight: theme.typography.fontWeightRegular,
+    },
+    paper: {
+        backgroundColor: blueGrey[50],
+        height: '60px',
+    }
+});
+
+const hub_url = "/hubs/services";
+const notify_method_name = "NotifyUpdatedAsync";
+
+class Services extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            hubConnection: null,
+            isDialogOpen: false,
+            isLoading: false,
+            service: new ServiceInfoService(),
+            services: [],
+            serviceCount: [1, 2, 3],
+        }
+
+        this.handleDevicesUpdated = this.handleDevicesUpdated.bind(this);
+        this.addDevice = this.addDevice.bind(this);
+    }
+
+    handleDevicesUpdated() {
+        this.setState({ isLoading: true });
+
+        this.state.service.getCount().then(result => {
+            const updatedCount = [];
+            for (var i = 0; i < result; i++) {
+                updatedCount.push(i);
+            }
+            this.setState({ serviceCount: updatedCount });
+        }).catch(ex => {
+            console.log(ex);
+        });
+
+        this.state.service.get().then(result => {
+            const updatedServices = [];
+            for (var s of result) {
+                updatedServices.push(s);
+            }
+            this.setState({ services: updatedServices });
+        }).catch(ex => {
+            console.log(ex);
+        }).finally(() => this.setState({ isLoading: false }));
+    }
+
+    componentDidMount() {
+        this.handleDevicesUpdated();
+        const newConnection = new HubConnectionBuilder()
+            .withUrl(hub_url)
+            .withAutomaticReconnect()
+            .build();
+
+        this.setState({ hubConnection: newConnection });
+
+        newConnection.start()
+            .then(_ => {
+                console.log('Services hub Connected!');
+                newConnection.on(notify_method_name, () => this.handleDevicesUpdated());
+            }).catch(e => console.log('Services hub Connection failed: ', e));
+    }
+
+    componentWillUnmount() {
+        if (this.state.hubConnection != null) {
+            this.state.hubConnection.off(notify_method_name);
+            console.log('Services hub Disconnected!');
+        }
+    }
+
+    addDevice(name, url) {
+        this.setState({ isDialogOpen: false });
+        let request = new ServiceRequest();
+        request.id = 0;
+        request.name = name;
+        request.uri = url;
+
+        this.state.service.post(request).catch(ex => {
+            console.log(ex);
+        });
+    }
+
+    render() {
+        const { classes } = this.props;
+
+        const ServiceComponents = this.state.services.map((info, index) => (
+            <ServiceInfoComponent key={index} isAdmin={this.props.isAdmin} info={info} service={this.state.service} />
+        ));
+
+        const Skeletons = this.state.serviceCount.map((i, index) => (
+            <ServiceInfoSkeleton key={index} />
+            ));
+
+        return (
+            <React.Fragment>
+                <Paper className={classes.paper} square>
+                    <Grid container
+                        spacing={0}
+                        direction="row"
+                        justify="center"
+                        alignItems="center">
+                        <Grid item>
+                            <Typography className={classes.typo}>Services</Typography>
+                        </Grid>
+                        <Grid item>
+                            {this.props.isAdmin ?
+                                <IconButton color="primary" onClick={() => this.setState({ isDialogOpen: true })}>
+                                    <AddBox fontSize="large" />
+                                </IconButton>
+                                : null
+                            }
+                        </Grid>
+                        <Grid item>
+                            <IconButton color="primary" onClick={this.handleDevicesUpdated}>
+                                <Refresh fontSize="large" />
+                            </IconButton>
+                        </Grid>
+                    <AddNewDialog open={this.state.isDialogOpen} handleClose={() => this.setState({ isDialogOpen: false })} handleAdd={this.addDevice}/>
+                    </Grid>
+                </Paper>
+                {this.state.isLoading ? Skeletons : ServiceComponents}
+            </React.Fragment>
+        );
+    }
+}
+
+export default withStyles(styles)(Services);