Best optimization so far

Added GetCount endpoint
Added ServiceInfo Skeletons

Birdmap.API/Birdmap.API.csproj

@@ -49,21 +49,19 @@
 
   <ItemGroup>
     <None Remove="ClientApp\src\common\components\BirdmapTitle.tsx" />
-    <None Remove="ClientApp\src\common\ErrorDispatcher.ts" />
-    <None Remove="ClientApp\src\common\ServiceBase.ts" />
     <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\ServiceInfoService.ts" />
     <None Remove="ClientApp\src\components\devices\DeviceService.ts" />
   </ItemGroup>
 
   <ItemGroup>
     <TypeScriptCompile Include="ClientApp\src\components\auth\Auth.tsx" />
-	<TypeScriptCompile Include="ClientApp\src\common\components\BirdmapTitle.tsx" />
   </ItemGroup>
 
   <ItemGroup>
-    <Folder Include="ClientApp\src\components\dashboard\" />
+    <Folder Include="ClientApp\src\common\components\" />
   </ItemGroup>
 
   <ItemGroup>

Birdmap.API/ClientApp/package-lock.json

@@ -1610,6 +1610,25 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@rollup/plugin-babel": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.2.1.tgz",
+      "integrity": "sha512-Jd7oqFR2dzZJ3NWANDyBjwTtX/lYbZpVcmkHrfQcpvawHs9E4c0nYk5U2mfZ6I/DZcIvy506KZJi54XK/jxH7A==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.10.4",
+        "@rollup/pluginutils": "^3.1.0"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      }
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -1761,6 +1780,11 @@
       "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
       "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag=="
     },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
+    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -2356,6 +2380,20 @@
         "normalize-path": "^2.1.1"
       }
     },
+    "apexcharts": {
+      "version": "3.22.2",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.22.2.tgz",
+      "integrity": "sha512-pR+cmApk7dhfYILBpe8RVb+FdLfVCt/RDWvAJO1F5feeSQ8lKDgFkRuVu9KOeEarHVXjUpnhLqHNMx7YaprK8A==",
+      "requires": {
+        "@rollup/plugin-babel": "^5.2.1",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -5566,6 +5604,11 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
     },
+    "estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg=="
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -10799,6 +10842,14 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-apexcharts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.3.7.tgz",
+      "integrity": "sha512-2OFhEHd70/WHN0kmrJtVx37UfaL71ZogVkwezmDqwQWgwhK6upuhlnEEX7tEq4xvjA+RFDn6hiUTNIuC/Q7Zqw==",
+      "requires": {
+        "prop-types": "^15.5.7"
+      }
+    },
     "react-app-polyfill": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz",
@@ -13066,6 +13117,70 @@
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "svgo": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz",

Birdmap.API/ClientApp/package.json

@@ -7,6 +7,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@microsoft/signalr": "^5.0.0",
+    "apexcharts": "^3.22.2",
     "bootstrap": "^4.3.1",
     "connected-react-router": "6.5.2",
     "google-map-react": "^2.1.9",
@@ -17,6 +18,7 @@
     "merge": "1.2.1",
     "popper.js": "^1.16.0",
     "react": "^16.11.0",
+    "react-apexcharts": "^1.3.7",
     "react-dom": "16.11.0",
     "react-google-maps": "^9.4.5",
     "react-redux": "7.1.1",

Birdmap.API/ClientApp/public/index.html

@@ -22,11 +22,11 @@
     -->
     <title>Birdmap</title>
   </head>
-  <body>
+  <body style="height: 100vh;">
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
+    <div id="root" style="height: 100vh;"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

Birdmap.API/ClientApp/src/App.tsx

@@ -1,8 +1,6 @@
 import { Box, Container, IconButton, Menu, MenuItem, MenuList, Paper, Grow, Popper } from '@material-ui/core';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 import AppBar from '@material-ui/core/AppBar';
-import blue from '@material-ui/core/colors/blue';
-import orange from '@material-ui/core/colors/orange';
 import { positions } from '@material-ui/system';
 import { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -10,20 +8,26 @@ import Typography from '@material-ui/core/Typography';
 import { ThemeProvider } from '@material-ui/styles';
 import React, { useState, } from 'react';
 import { BrowserRouter, NavLink, Redirect, Route, Switch, Link } from 'react-router-dom';
-import BirdmapTitle from './common/components/BirdmapTitle';
+import BirdmapTitle from './components/appBar/BirdmapTitle';
 import Auth from './components/auth/Auth';
 import AuthService from './components/auth/AuthService';
 import { ClickAwayListener } from '@material-ui/core';
 import MapContainer from './components/heatmap/Heatmap';
+import Devices from './components/devices/Devices';
+import { blueGrey, blue, orange, grey } from '@material-ui/core/colors';
+import DevicesContextProvider from './contexts/DevicesContextProvider'
+import Dashboard from './components/dashboard/Dashboard';
 
 
 const theme = createMuiTheme({
     palette: {
         primary: {
-            main: blue[900],
+            main: blueGrey[900],
+            dark: grey[400],
         },
         secondary: {
             main: orange[200],
+            dark: blueGrey[50],
         }
     },
 });
@@ -45,11 +49,11 @@ function App() {
     }
 
     const DashboardComponent = () => {
-        return <Typography>Dashboard</Typography>;
+        return <Dashboard isAdmin={isAdmin}/>;
     };
 
     const DevicesComponent = () => {
-        return <Typography>Devices</Typography>;
+        return <Devices isAdmin={isAdmin}/>;
 
     };
     const HeatmapComponent = () => {
@@ -65,9 +69,11 @@ function App() {
             <BrowserRouter>
                 <Switch>
                     <PublicRoute path="/login" component={AuthComponent} />
-                        <PrivateRoute path="/" exact authenticated={authenticated} isAdmin={isAdmin} component={DashboardComponent} />
-                        <PrivateRoute path="/devices" exact authenticated={authenticated} isAdmin={isAdmin} component={DevicesComponent} />
-                        <PrivateRoute path="/heatmap" exact authenticated={authenticated} isAdmin={isAdmin} component={HeatmapComponent} />
+                    <DevicesContextProvider>
+                        <PrivateRoute path="/" exact authenticated={authenticated} component={DashboardComponent} />
+                        <PrivateRoute path="/devices/:id?" exact authenticated={authenticated} component={DevicesComponent} />
+                        <PrivateRoute path="/heatmap" exact authenticated={authenticated} component={HeatmapComponent} />
+                    </DevicesContextProvider>
                 </Switch>
             </BrowserRouter>
         </ThemeProvider>
@@ -84,17 +90,17 @@ const PublicRoute = ({ component: Component, ...rest }: { [x: string]: any, comp
     );
 }
 
-const PrivateRoute = ({ component: Component, authenticated: Authenticated, isAdmin: IsAdmin, ...rest }: { [x: string]: any, component: any, authenticated: any, isAdmin: any }) => {
+const PrivateRoute = ({ component: Component, authenticated: Authenticated, ...rest }: { [x: string]: any, component: any, authenticated: any }) => {
     return (
         <Route {...rest} render={matchProps => (
             Authenticated
-                ? <DefaultLayout component={Component} authenticated={Authenticated} isAdmin={IsAdmin} {...matchProps} />
+                ? <DefaultLayout component={Component} authenticated={Authenticated} {...matchProps} />
                 : <Redirect to='/login' />
         )} />
     );
 };
 
-const DefaultLayout = ({ component: Component, authenticated: Authenticated, isAdmin: IsAdmin, ...rest }: { [x: string]: any, component: any, authenticated: any, isAdmin: any }) => {
+const DefaultLayout = ({ component: Component, authenticated: Authenticated, ...rest }: { [x: string]: any, component: any, authenticated: any }) => {
     const classes = useDefaultLayoutStyles();
     const [open, setOpen] = React.useState(false);
     const anchorRef = React.useRef<HTMLButtonElement>(null);
@@ -141,7 +147,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
         return Authenticated
             ? <Container className={classes.nav_menu}>
                 <NavLink exact to="/" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Dashboard</NavLink>
-                <NavLink exact to="/devices" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Devices</NavLink>
+                <NavLink to="/devices" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Devices</NavLink>
                 <NavLink exact to="/heatmap" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Heatmap</NavLink>
                 <IconButton className={classes.nav_menu_icon}
                     ref={anchorRef}
@@ -172,7 +178,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
 
     return (
         <React.Fragment>
-            <AppBar position="static">
+            <AppBar position="static" className={classes.bar_root}>
                 <Toolbar>
                     <BirdmapTitle />
                     <Typography component={'span'} className={classes.typo}>
@@ -180,8 +186,8 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
                     </Typography>
                 </Toolbar>
             </AppBar>
-            <Box zIndex="modal">
-                <Component isAdmin={IsAdmin} {...rest} />
+            <Box zIndex="modal" className={classes.box_root}>
+                <Component {...rest} />
             </Box>
         </React.Fragment>
     );
@@ -189,6 +195,13 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
 
 const useDefaultLayoutStyles = makeStyles((theme: Theme) =>
     createStyles({
+        bar_root: {
+            height: '7%',
+        },
+        box_root: {
+            backgroundColor: theme.palette.primary.dark,
+            height: '93%',
+        },
         typo: {
             marginLeft: 'auto',
             color: 'white',

Birdmap.API/ClientApp/src/common/Constants.js

@@ -0,0 +1,5 @@
+export default {
+    probability_method_name: 'NotifyDeviceAsync',
+    update_method_name: 'NotifyDeviceUpdatedAsync',
+    update_all_method_name: 'NotifyAllUpdatedAsync',
+};

Birdmap.API/ClientApp/src/common/DeviceService.js

@@ -21,7 +21,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ApiException = exports.SensorStatus = exports.Coordinates = exports.DeviceStatus = exports.Sensor = exports.Device = exports.DeviceService = void 0;
+exports.ApiException = exports.SensorStatus = exports.Coordinates = exports.DeviceStatus = exports.Sensor = exports.Device = void 0;
 var DeviceService = /** @class */ (function () {
     function DeviceService(baseUrl, http) {
         this.jsonParseReviver = undefined;
@@ -430,7 +430,9 @@ var DeviceService = /** @class */ (function () {
         url_ = url_.replace(/[?&]$/, "");
         var options_ = {
             method: "POST",
-            headers: {}
+            headers: {
+                'Authorization': sessionStorage.getItem('user')
+            }
         };
         return this.http.fetch(url_, options_).then(function (_response) {
             return _this.processOnlinesensor(_response);
@@ -462,7 +464,7 @@ var DeviceService = /** @class */ (function () {
     };
     return DeviceService;
 }());
-exports.DeviceService = DeviceService;
+exports.default = DeviceService;
 var Device = /** @class */ (function () {
     function Device(data) {
         if (data) {

Birdmap.API/ClientApp/src/common/DeviceService.ts

@@ -7,7 +7,7 @@
 //----------------------
 // ReSharper disable InconsistentNaming
 
-export class DeviceService {
+export default class DeviceService {
     private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
     private baseUrl: string;
     protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
@@ -391,6 +391,7 @@ export class DeviceService {
         let options_ = <RequestInit>{
             method: "POST",
             headers: {
+                'Authorization': sessionStorage.getItem('user')
             }
         };
 

Birdmap.API/ClientApp/src/common/ErrorDispatcher.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var ErrorDispatcher = {
-    errorHandlers: [],
-    registerErrorHandler: function (errorHandlerFn) {
-        this.errorHandlers.push(errorHandlerFn);
-    },
-    raiseError: function (errorMessage) {
-        for (var i = 0; i < this.errorHandlers.length; i++)
-            this.errorHandlers[i](errorMessage);
-    }
-};
-exports.default = ErrorDispatcher;
-//# sourceMappingURL=ErrorDispatcher.js.map

Birdmap.API/ClientApp/src/common/ErrorDispatcher.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ErrorDispatcher.js","sourceRoot":"","sources":["ErrorDispatcher.ts"],"names":[],"mappings":";;AAAA,IAAM,eAAe,GAAG;IACtB,aAAa,EAAE,EAAE;IAEjB,oBAAoB,YAAC,cAAc;QACjC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC;IAED,UAAU,YAAC,YAAY;QACrB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE;YAChD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;IACxC,CAAC;CACF,CAAC;AAEF,kBAAe,eAAe,CAAC"}

Birdmap.API/ClientApp/src/common/ErrorDispatcher.ts

@@ -1,14 +0,0 @@
-const ErrorDispatcher = {
-  errorHandlers: [],
-
-  registerErrorHandler(errorHandlerFn) {
-    this.errorHandlers.push(errorHandlerFn);
-  },
-
-  raiseError(errorMessage) {
-    for (let i = 0; i < this.errorHandlers.length; i++)
-      this.errorHandlers[i](errorMessage);
-  }
-};
-
-export default ErrorDispatcher;

Birdmap.API/ClientApp/src/common/ServiceBase.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var ErrorDispatcher_1 = require("./ErrorDispatcher");
-function get(url) {
-    var options = {
-        method: 'GET',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': sessionStorage.getItem('user')
-        }
-    };
-    return makeRequest(url, options);
-}
-function post(url, request) {
-    var options = {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': sessionStorage.getItem('user')
-        },
-        body: "",
-    };
-    if (request)
-        options.body = JSON.stringify(request);
-    return makeRequest(url, options);
-}
-function makeRequest(url, options) {
-    return fetch(url, options)
-        .then(ensureResponseSuccess)
-        .catch(errorHandler);
-}
-function ensureResponseSuccess(response) {
-    if (!response.ok)
-        return response.json()
-            .then(function (data) { return errorHandler(data); });
-    return response.text()
-        .then(function (text) { return text.length ? JSON.parse(text) : {}; });
-}
-function errorHandler(response) {
-    console.log(response);
-    if (response && response.Error)
-        ErrorDispatcher_1.default.raiseError(response.Error);
-    return Promise.reject();
-}
-exports.default = {
-    get: get,
-    post: post,
-    makeRequest: makeRequest
-};
-//# sourceMappingURL=ServiceBase.js.map

Birdmap.API/ClientApp/src/common/ServiceBase.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ServiceBase.js","sourceRoot":"","sources":["ServiceBase.ts"],"names":[],"mappings":";;AAAA,qDAAgD;AAEhD,SAAS,GAAG,CAAC,GAAW;IACpB,IAAI,OAAO,GAAG;QACV,MAAM,EAAE,KAAK;QACb,OAAO,EAAE;YACL,cAAc,EAAE,kBAAkB;YAClC,eAAe,EAAE,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC;SAClD;KACJ,CAAC;IAEF,OAAO,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,IAAI,CAAC,GAAW,EAAE,OAAY;IACnC,IAAI,OAAO,GAAG;QACV,MAAM,EAAE,MAAM;QACd,OAAO,EAAE;YACL,cAAc,EAAE,kBAAkB;YAClC,eAAe,EAAE,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC;SAClD;QACD,IAAI,EAAE,EAAE;KACX,CAAC;IAEF,IAAI,OAAO;QACP,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE3C,OAAO,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,WAAW,CAAC,GAAW,EAAE,OAAY;IAC1C,OAAO,KAAK,CAAC,GAAG,EAAE,OAAO,CAAC;SACrB,IAAI,CAAC,qBAAqB,CAAC;SAC3B,KAAK,CAAC,YAAY,CAAC,CAAC;AAC7B,CAAC;AAED,SAAS,qBAAqB,CAAC,QAAa;IACxC,IAAI,CAAC,QAAQ,CAAC,EAAE;QACZ,OAAO,QAAQ,CAAC,IAAI,EAAE;aACjB,IAAI,CAAC,UAAC,IAAS,IAAK,OAAA,YAAY,CAAC,IAAI,CAAC,EAAlB,CAAkB,CAAC,CAAC;IAEjD,OAAO,QAAQ,CAAC,IAAI,EAAE;SACjB,IAAI,CAAC,UAAC,IAAS,IAAK,OAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,EAAnC,CAAmC,CAAC,CAAC;AAClE,CAAC;AAED,SAAS,YAAY,CAAC,QAAa;IAC/B,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAEtB,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK;QAC1B,yBAAe,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE/C,OAAO,OAAO,CAAC,MAAM,EAAE,CAAC;AAC5B,CAAC;AAED,kBAAe;IACX,GAAG,KAAA;IACH,IAAI,MAAA;IACJ,WAAW,aAAA;CACd,CAAC"}

Birdmap.API/ClientApp/src/common/ServiceBase.ts

@@ -1,59 +0,0 @@
-import ErrorDispatcher from './ErrorDispatcher';
-
-function get(url: string) {
-    let options = {
-        method: 'GET',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': sessionStorage.getItem('user')
-        }
-    };
-
-    return makeRequest(url, options);
-}
-
-function post(url: string, request: any) {
-    let options = {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': sessionStorage.getItem('user')
-        },
-        body: "",
-    };
-
-    if (request)
-        options.body = JSON.stringify(request);
-
-    return makeRequest(url, options);
-}
-
-function makeRequest(url: string, options: any) {
-    return fetch(url, options)
-        .then(ensureResponseSuccess)
-        .catch(errorHandler);
-}
-
-function ensureResponseSuccess(response: any) {
-    if (!response.ok)
-        return response.json()
-            .then((data: any) => errorHandler(data));
-
-    return response.text()
-        .then((text: any) => text.length ? JSON.parse(text) : {});
-}
-
-function errorHandler(response: any) {
-    console.log(response);
-
-    if (response && response.Error)
-        ErrorDispatcher.raiseError(response.Error);
-
-    return Promise.reject();
-}
-
-export default {
-    get,
-    post,
-    makeRequest
-};

Birdmap.API/ClientApp/src/components/auth/AuthService.js

@@ -20,7 +20,7 @@ exports.default = {
         });
         return service.authenticate(request)
             .then(function (response) {
-            console.log(response);
+            //console.log(response);
             sessionStorage.setItem('user', response.tokenType + " " + response.accessToken);
             sessionStorage.setItem('role', response.userRole);
             return Promise.resolve();

Birdmap.API/ClientApp/src/components/auth/AuthService.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthService.js","sourceRoot":"","sources":["AuthService.ts"],"names":[],"mappings":";;AAAA,2CAA+D;AAE/D,kBAAe;IACX,eAAe;QACX,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IACnG,CAAC;IAED,OAAO;QACH,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;IACtD,CAAC;IAED,MAAM;QACF,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAClC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,KAAK,EAAL,UAAM,QAAgB,EAAE,QAAgB;QACpC,IAAM,OAAO,GAAG,IAAI,oBAAU,EAAE,CAAC;QAEjC,IAAI,OAAO,GAAG,IAAI,gCAAmB,CAAC;YAClC,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;QAEH,OAAO,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;aAC/B,IAAI,CAAC,UAAA,QAAQ;YACV,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YACtB,cAAc,CAAC,OAAO,CAAC,MAAM,EAAK,QAAQ,CAAC,SAAS,SAAI,QAAQ,CAAC,WAAa,CAAC,CAAC;YAChF,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAClD,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACX,CAAC;CACJ,CAAA"}
+{"version":3,"file":"AuthService.js","sourceRoot":"","sources":["AuthService.ts"],"names":[],"mappings":";;AAAA,2CAA+D;AAE/D,kBAAe;IACX,eAAe;QACX,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IACnG,CAAC;IAED,OAAO;QACH,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;IACtD,CAAC;IAED,MAAM;QACF,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAClC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,KAAK,EAAL,UAAM,QAAgB,EAAE,QAAgB;QACpC,IAAM,OAAO,GAAG,IAAI,oBAAU,EAAE,CAAC;QAEjC,IAAI,OAAO,GAAG,IAAI,gCAAmB,CAAC;YAClC,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;QAEH,OAAO,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;aAC/B,IAAI,CAAC,UAAA,QAAQ;YACV,wBAAwB;YACxB,cAAc,CAAC,OAAO,CAAC,MAAM,EAAK,QAAQ,CAAC,SAAS,SAAI,QAAQ,CAAC,WAAa,CAAC,CAAC;YAChF,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAClD,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACX,CAAC;CACJ,CAAA"}

Birdmap.API/ClientApp/src/components/auth/AuthService.ts

@@ -24,7 +24,7 @@ export default {
 
         return service.authenticate(request)
             .then(response => {
-                console.log(response);
+                //console.log(response);
                 sessionStorage.setItem('user', `${response.tokenType} ${response.accessToken}`);
                 sessionStorage.setItem('role', response.userRole);
                 return Promise.resolve();

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

@@ -0,0 +1,322 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/styles';
+import Services from './services/Services';
+import { blueGrey } from '@material-ui/core/colors';
+import { Box, Grid, IconButton, Paper, Typography } from '@material-ui/core';
+import DonutChart from './charts/DonutChart';
+import HeatmapChart from './charts/HeatmapChart';
+import BarChart from './charts/BarChart';
+import LineChart from './charts/LineChart';
+import DevicesContext from '../../contexts/DevicesContext';
+import C from '../../common/Constants';
+
+const styles = theme => ({
+    root: {
+        flexGrow: 1,
+        padding: '64px',
+        backgroundColor: theme.palette.primary.dark,
+    },
+    typo: {
+        fontSize: theme.typography.pxToRem(20),
+        fontWeight: theme.typography.fontWeightRegular,
+    },
+    paper: {
+        backgroundColor: blueGrey[50],
+        padding: '16px',
+    }
+});
+
+class Dashboard extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            deviceSeries: [],
+            sensorSeries: [],
+            heatmapSecondsSeries: [],
+            heatmapMinutesSeries: [],
+            barSeries: [],
+            barCategories: [],
+            lineSeries: [],
+        };
+
+        this.updateSeries = this.updateSeries.bind(this);
+        this.updateDynamic = this.updateDynamic.bind(this);
+        this.performTask = this.performTask.bind(this);
+    }
+
+    static contextType = DevicesContext;
+
+    componentDidMount() {
+        this.context.addHandler(C.update_all_method_name, this.updateSeries);
+        this.context.addHandler(C.update_method_name, this.updateSeries);
+        this.updateSeries();
+        this.updateDynamic();
+    }
+
+    componentWillUnmount() {
+        this.context.removeHandler(C.update_all_method_name, this.updateSeries);
+        this.context.removeHandler(C.update_method_name, this.updateSeries);
+    }
+
+    getItemsWithStatus(iterate, status) {
+        const items = [];
+
+        for (var d of iterate) {
+            if (d.status == status) {
+                items.push(d);
+            }
+        }
+
+        return items;
+    }
+
+    getDevicesWithStatus(status) {
+        return this.getItemsWithStatus(this.context.devices, status);
+    }
+
+    getSensorsWithStatus(status) {
+        const sensors = [];
+
+        for (var d of this.context.devices) {
+            sensors.push(...d.sensors)
+        }
+
+        return this.getItemsWithStatus(sensors, status);
+    }
+
+    getDeviceSeries() {
+        var online = this.getDevicesWithStatus("Online").length;
+        var offline = this.getDevicesWithStatus("Offline").length;
+        var error = this.getDevicesWithStatus("Error").length;
+
+        return [online, offline, error]
+    }
+
+    getSensorSeries() {
+        var online = this.getSensorsWithStatus("Online").length;
+        var offline = this.getSensorsWithStatus("Offline").length;
+        var unknown = this.getSensorsWithStatus("Unknown").length;
+
+        return [online, offline, unknown]
+    }
+
+    updateSeries() {
+        this.setState({
+            deviceSeries: this.getDeviceSeries(),
+            sensorSeries: this.getSensorSeries()
+        });
+    }
+
+    updateDynamic = () => {
+        const secondAgo = new Date();
+        secondAgo.setMilliseconds(0);
+        const minuteAgo = new Date( Date.now() - 1000 * 60 );
+        const hourAgo = new Date( Date.now() - 1000 * 60 * 60 );
+
+        const minuteDevicePoints = {};
+        const hourDevicePoints = {};
+        const barDevicePoints = {};
+        const linePoints = {};
+
+        for (var d of this.context.devices) {
+            minuteDevicePoints[d.id] = Array(60).fill(0);
+            hourDevicePoints[d.id] = Array(60).fill(0);
+            barDevicePoints[d.id] = Array(3).fill(0);
+        }
+
+        const processMethod = (items, index) => {
+            const p = items[index];
+            if (p.date > minuteAgo) {
+                var seconds = Math.floor((p.date.getTime() - minuteAgo.getTime()) / 1000);
+                var oldProb = minuteDevicePoints[p.deviceId][seconds];
+                if (oldProb < p.prob) {
+                    minuteDevicePoints[p.deviceId][seconds] = p.prob;
+                }
+            }
+
+            if (p.date > hourAgo) {
+                var minutes = Math.floor((p.date.getTime() - hourAgo.getTime()) / (1000 * 60));
+                var oldProb = hourDevicePoints[p.deviceId][minutes];
+                if (oldProb < p.prob) {
+                    hourDevicePoints[p.deviceId][minutes] = p.prob;
+                }
+            }
+            
+            if (p.prob > 0.5 && p.prob <= 0.7) {
+                barDevicePoints[p.deviceId][0] += 1;
+            }
+            if (p.prob > 0.7 && p.prob <= 0.9) {
+                barDevicePoints[p.deviceId][1] += 1;
+            }
+            if (p.prob > 0.9) {
+                barDevicePoints[p.deviceId][2] += 1;
+            }
+
+            if (p.date < secondAgo) {
+                var shortDate = p.date.toUTCString();
+                var point = linePoints[shortDate];
+                if (point === undefined) {
+                    linePoints[shortDate] = 1;
+                } else {
+                    linePoints[shortDate] += 1;
+                }
+            }
+        }
+
+        const finishMethod = () => {
+            const minuteHeatmapSeries = [];
+
+            var i = 0;
+            for (var p in minuteDevicePoints) {
+                minuteHeatmapSeries.push({
+                    name: "Device " + i,
+                    data: minuteDevicePoints[p].map((value, index) => ({
+                        x: new Date( Date.now() - (60 - index) * 1000 ).toLocaleTimeString('hu-HU'),
+                        y: value
+                    })),
+                });
+                i++;
+            };
+    
+            const hourHeatmapSeries = [];
+    
+            var i = 0;
+            for (var p in hourDevicePoints) {
+                hourHeatmapSeries.push({
+                    name: "Device " + i,
+                    data: hourDevicePoints[p].map((value, index) => ({
+                        x: new Date( Date.now() - (60 - index) * 1000 * 60 ).toLocaleTimeString('hu-HU').substring(0, 5),
+                        y: value
+                    })),
+                });
+                i++;
+            };
+            
+            const barSeries = [];
+    
+            const getCount = column => {
+                var counts = [];
+    
+                for (var p in barDevicePoints) {
+                    counts.unshift(barDevicePoints[p][column]);
+                }
+    
+                return counts;
+            };
+    
+            barSeries.push({
+                name: "Prob > 0.5",
+                data: getCount(0),
+            });
+            barSeries.push({
+                name: "Prob > 0.7",
+                data: getCount(1),
+            });
+            barSeries.push({
+                name: "Prob > 0.9",
+                data: getCount(2),
+            });
+    
+            const lineSeries = [{name: "message/sec", data: []}];
+            for (var m in linePoints) {
+                lineSeries[0].data.push({
+                    x: new Date(m).getTime(),
+                    y: linePoints[m],
+                })
+            }
+    
+            const getBarCategories = () => {
+                const categories = [];
+        
+                for (var i = this.context.devices.length - 1; i >= 0; i--) {
+                    categories.push("Device " + i)
+                }
+        
+                return categories;
+            }
+    
+            this.setState({
+                heatmapSecondsSeries: minuteHeatmapSeries,
+                heatmapMinutesSeries: hourHeatmapSeries,
+                barSeries: barSeries,
+                barCategories: getBarCategories(),
+                lineSeries: lineSeries,
+            });
+
+            setTimeout(this.updateDynamic, 1000);
+        }
+
+        const processHeatmapItem = processMethod.bind(this);
+        const onFinished = finishMethod.bind(this)
+
+        this.performTask(this.context.heatmapPoints, Math.ceil(this.context.heatmapPoints.length / 100), 10,
+            processHeatmapItem, onFinished);
+    }
+    
+    performTask(items, numToProcess, wait, processItem, onFinished) {
+        var pos = 0;
+        // This is run once for every numToProcess items.
+        function iteration() {
+            // Calculate last position.
+            var j = Math.min(pos + numToProcess, items.length);
+            // Start at current position and loop to last position.
+            for (var i = pos; i < j; i++) {
+                processItem(items, i);
+            }
+            // Increment current position.
+            pos += numToProcess;
+            // Only continue if there are more items to process.
+            if (pos < items.length)
+                setTimeout(iteration, wait); // Wait 10 ms to let the UI update.
+            else
+                onFinished();
+        }
+        iteration();
+    }
+
+    render() {
+        const { classes } = this.props;
+        return (
+            <Box className={classes.root}>
+                <Grid container spacing={3}>
+                    <Grid item xs={12}>
+                        <Services isAdmin={this.props.isAdmin}/>
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Paper className={classes.paper}>
+                            <DonutChart totalLabel="Devices" series={this.state.deviceSeries}/>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Paper className={classes.paper}>
+                            <DonutChart totalLabel="Sensors" series={this.state.sensorSeries}/>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                            <HeatmapChart label="Highest probability per second by devices" series={this.state.heatmapSecondsSeries}/>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                            <HeatmapChart label="Highest probability per minute by devices" series={this.state.heatmapMinutesSeries}/>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Paper className={classes.paper}>
+                            <BarChart label="# of messages by devices" series={this.state.barSeries} categories={this.state.barCategories}/>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Paper className={classes.paper}>
+                            <LineChart label="# of messages per second" series={this.state.lineSeries}/>
+                        </Paper>
+                    </Grid>
+                </Grid>
+            </Box>
+        );
+    }
+}
+
+export default withStyles(styles)(Dashboard);

Birdmap.API/ClientApp/src/components/dashboard/charts/BarChart.jsx

@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import Chart from 'react-apexcharts';
+import { blueGrey, green, red, orange, amber } from '@material-ui/core/colors';
+
+export class BarChart extends Component {
+    constructor(props) {
+        super(props)
+    
+        this.state = {
+            options: {},
+        };
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.categories !== this.props.categories) {
+            this.setState({options: {
+                chart: {
+                  stacked: true,
+                  animations: {
+                      enabled: true,
+                      easing: 'linear',
+                      speed: 250,
+                      animateGradually: {
+                          enabled: false,
+                      },
+                      dynamicAnimation: {
+                          enabled: true,
+                          speed: 250
+                      }
+                  },
+                },
+                plotOptions: {
+                  bar: {
+                    horizontal: true,
+                  },
+                },
+                colors: [blueGrey[500], blueGrey[700], blueGrey[900]],
+                stroke: {
+                  width: 1,
+                  colors: ['#fff']
+                },
+                title: {
+                  text: this.props.label,
+                  style: {
+                    fontSize: '22px',
+                    fontWeight: 600,
+                    fontFamily: 'Helvetica, Arial, sans-serif',
+                  },
+                },
+                xaxis: {
+                  categories: this.props.categories,
+                  labels: {
+                    formatter: function (val) {
+                      return val;
+                    }
+                  }
+                },
+                yaxis: {
+                  title: {
+                    text: undefined
+                  },
+                },
+                tooltip: {
+                  y: {
+                    formatter: function (val) {
+                      return val;
+                    }
+                  }
+                },
+                fill: {
+                  opacity: 1
+                },
+                legend: {
+                    position: 'top',
+                }
+            }});
+        }
+    }
+
+    render() {
+        return (
+            <Chart 
+                options={this.state.options} 
+                series={this.props.series} 
+                type="bar" 
+                height={600}
+            />
+        )
+    }
+}
+
+export default BarChart;

Birdmap.API/ClientApp/src/components/dashboard/charts/DonutChart.jsx

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import Chart from 'react-apexcharts';
+import { blueGrey, green, red } from '@material-ui/core/colors';
+
+
+export class DonutChart extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            options: {
+                legend: {
+                    fontSize: '18px',
+                },
+                plotOptions: {
+                    pie: {
+                    startAngle: 0,
+                    expandOnClick: false,
+                    offsetX: 0,
+                    offsetY: 0,
+                    customScale: 1,
+                    dataLabels: {
+                        offset: 0,
+                        minAngleToShowLabel: 10
+                    }, 
+                    donut: {
+                        size: '65%',
+                        background: 'transparent',
+                        labels: {
+                            show: true,
+                            total: {
+                                show: true,
+                                showAlways: true,
+                                label: props.totalLabel,
+                                fontSize: '22px',
+                                fontFamily: 'Helvetica, Arial, sans-serif',
+                                fontWeight: 600,
+                                color: '#373d3f',
+                                formatter: function (w) {
+                                    return w.globals.seriesTotals.reduce((a, b) => {
+                                      return a + b
+                                    }, 0)
+                                }
+                            }
+                        }
+                    },      
+                    }
+                },
+                dataLabels: {
+                  enabled: false
+                },
+                colors: [green[500], blueGrey[500], red[500]],
+                labels: ['Online', 'Offline', 'Error / Unknown']},
+          }
+    }
+
+    render() {
+        return (
+            <Chart 
+            options={this.state.options} 
+            series={this.props.series} 
+            type="donut"/>
+        )
+    }
+}
+
+export default DonutChart;

Birdmap.API/ClientApp/src/components/dashboard/charts/HeatmapChart.jsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import Chart from 'react-apexcharts';
+import { blueGrey, green, red } from '@material-ui/core/colors';
+
+export class HeatmapChart extends Component {
+    constructor(props) {
+        super(props)
+    
+        this.state = {
+            options: {
+                dataLabels: {
+                  enabled: false
+                },
+                colors: [blueGrey[900]],
+                title: {
+                  text: props.label,
+                  style: {
+                    fontSize: '22px',
+                    fontWeight: 600,
+                    fontFamily: 'Helvetica, Arial, sans-serif',
+                  },
+                },
+              },
+        }
+    }
+    
+
+    render() {
+        return (
+            <Chart
+                options={this.state.options} 
+                series={this.props.series} 
+                type="heatmap"
+                height={600}
+            />
+        )
+    }
+}
+
+export default HeatmapChart

Birdmap.API/ClientApp/src/components/dashboard/charts/LineChart.jsx

@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import Chart from 'react-apexcharts';
+import { blueGrey, green, red } from '@material-ui/core/colors';
+
+export class LineChart extends Component {
+    constructor(props) {
+        super(props)
+    
+        this.state = {
+            options: {
+                chart: {
+                    animations: {
+                        enabled: true,
+                        easing: 'linear',
+                        speed: 250,
+                        animateGradually: {
+                            enabled: false,
+                        },
+                        dynamicAnimation: {
+                            enabled: true,
+                            speed: 250
+                        }
+                    },
+                    zoom: {
+                        enabled: false
+                    }
+                },
+                colors: [blueGrey[900]],
+                dataLabels: {
+                    enabled: false
+                },
+                stroke: {
+                    curve: 'straight'
+                },
+                title: {
+                    text: this.props.label,
+                    align: 'left',
+                    style: {
+                      fontSize: '22px',
+                      fontWeight: 600,
+                      fontFamily: 'Helvetica, Arial, sans-serif',
+                    },
+                },
+                grid: {
+                    row: {
+                        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+                        opacity: 0.5
+                    },
+                },
+                xaxis: {
+                    type: 'datetime',
+                    labels: {
+                      formatter: function (val) {
+                        return new Date(val).toLocaleTimeString('hu-HU');
+                      }
+                    }
+                }
+          },
+        }
+    }
+
+    render() {
+        return (
+            <Chart 
+                options={this.state.options} 
+                series={this.props.series} 
+                type="line" 
+                height={600}
+            />
+        )
+    }
+}
+
+export default LineChart

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

@@ -0,0 +1,61 @@
+import { TextField } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import React, { useState } from 'react';
+
+export default function AddNewDialog(props) {
+    const [name, setName] = useState("");
+    const [url, setUrl] = useState("");
+
+    const onNameChange = (event) => {
+        setName(event.target.value);
+    }
+
+    const onUrlChange = (event) => {
+        setUrl(event.target.value);
+    }
+
+    return (
+        <div>
+            <Dialog
+                open={props.open}
+                onClose={props.handleClose}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title">{"Add new service."}</DialogTitle>
+                <DialogContent>
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        id="name"
+                        label="Name"
+                        type="text"
+                        onChange={onNameChange}
+                        fullWidth
+                    />
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        id="url"
+                        label="Url"
+                        type="text"
+                        onChange={onUrlChange}
+                        fullWidth
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={props.handleClose} color="primary">
+                        Cancel
+                    </Button>
+                    <Button onClick={() => props.handleAdd(name, url)} color="primary" autoFocus>
+                        Add
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+}

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

@@ -0,0 +1,35 @@
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import React from 'react';
+
+export default function DeleteDialog(props) {
+    return (
+        <div>
+            <Dialog
+                open={props.open}
+                onClose={() => props.handleClose(false)}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title">{"Are you sure?"}</DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        Deleting is permament.
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => props.handleClose(false)} color="primary">
+                        Cancel
+                    </Button>
+                    <Button onClick={() => props.handleClose(true)} color="primary" autoFocus>
+                        OK
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+}

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

@@ -0,0 +1,234 @@
+import { Box, FormControlLabel, Grid, IconButton, Paper, TextField, Typography } from '@material-ui/core';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import { blueGrey, green, red } from '@material-ui/core/colors';
+import { CancelRounded, CheckCircleRounded, Delete, Edit } from '@material-ui/icons/';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { withStyles } from '@material-ui/styles';
+import React, { Component } from 'react';
+import DeleteDialog from './DeleteDialog';
+
+const styles = theme => ({
+    root: {
+        flexGrow: 1,
+        padding: '64px',
+        backgroundColor: theme.palette.primary.dark,
+    },
+    acc_summary: {
+        backgroundColor: blueGrey[50],
+        padding: theme.spacing(2),
+        textAlign: 'center',
+        height: '75px',
+    },
+    acc_details: {
+        backgroundColor: blueGrey[100],
+    },
+    grid_typo: {
+        fontSize: theme.typography.pxToRem(20),
+        fontWeight: theme.typography.fontWeightRegular,
+    },
+    grid_typo_2: {
+        marginLeft: '5px',
+        fontSize: theme.typography.pxToRem(15),
+        fontWeight: theme.typography.fontWeightRegular,
+        color: theme.palette.text.secondary,
+    },
+    typo: {
+        fontSize: theme.typography.pxToRem(20),
+        fontWeight: theme.typography.fontWeightRegular,
+    },
+    icon_box: {
+        marginLeft: '30px',
+    },
+    paper: {
+        backgroundColor: blueGrey[50],
+        padding: theme.spacing(2),
+        textAlign: 'center',
+        height: '75px',
+    }
+});
+
+class ServiceInfoComponent extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isDialogOpen: false,
+            isEditing: false,
+            name: "",
+            url: "",
+        }
+
+        this.handleDialogClose = this.handleDialogClose.bind(this);
+        this.onNameChange = this.onNameChange.bind(this);
+        this.onUrlChange = this.onUrlChange.bind(this);
+        this.handleSaveCancel = this.handleSaveCancel.bind(this);
+    }
+
+    componentDidMount() {
+        this.setState({ name: this.props.info.service.name, url: this.props.info.service.uri });
+
+        if (this.props.isEditing !== undefined) {
+            this.setState({ isEditing: this.props.isEditing });
+        }
+    }
+
+    onNameChange(event) {
+        this.setState({ name: event.target.value });
+    }
+
+    onUrlChange(event) {
+        this.setState({ url: event.target.value });
+    }
+
+    getColor(status) {
+        if (status === "OK")
+            return { color: green[600] };
+        else
+            return { color: red[600] };
+    }
+
+    handleDialogClose(result) {
+        this.setState({ isDialogOpen: false });
+        if (result === true) {
+            this.props.service.delete(this.props.info.service.id);
+        }
+    }
+
+    handleEditCancel(value) {
+        this.setState({ isEditing: value });
+    }
+
+    handleSaveCancel() {
+        let request = {
+            ...this.props.info.service
+        };
+
+        request.name = this.state.name;
+        request.uri = this.state.url;
+
+        if (request.id > 0) {
+            this.props.service.put(request).catch(ex => {
+                console.log(ex);
+            });
+        }
+        else {
+            this.props.service.post(request).catch(ex => {
+                console.log(ex);
+            });
+        }
+
+        this.setState({ isEditing: false });
+    }
+
+    renderSaveCancel() {
+        return (
+            <Box styles={{ marginLeft: 'auto' }}>
+                <IconButton color="primary" onClick={this.handleSaveCancel}>
+                    <CheckCircleRounded fontSize="large" />
+                </IconButton>
+                <IconButton color="primary" onClick={() => this.setState({ isEditing: false })}>
+                    <CancelRounded fontSize="large" />
+                </IconButton>
+            </Box>
+        );
+    }
+
+    renderButtons() {
+        const renderEditDelete = () => {
+            return (
+                <React.Fragment>
+                    <DeleteDialog open={this.state.isDialogOpen} handleClose={this.handleDialogClose}/>
+                    <IconButton color="primary" onClick={() => this.handleEditCancel(true)}>
+                        <Edit fontSize="large"/>
+                    </IconButton>
+                    <IconButton style={{color: red[600]}} onClick={() => this.setState({ isDialogOpen: true })}>
+                        <Delete fontSize="large"/>
+                    </IconButton>
+                </React.Fragment>
+            );
+        }
+
+        const { classes } = this.props;
+        return (
+            <Box className={classes.icon_box}>
+                {this.props.isAdmin && this.props.info.service.name !== "Mqtt Client Service" ? renderEditDelete() : null}
+            </Box>
+        );
+    }
+
+    render() {
+        const { classes } = this.props;
+
+        const renderAccordion = () => {
+            return (
+                <Accordion>
+                    <AccordionSummary className={classes.acc_summary}
+                        expandIcon={<ExpandMoreIcon />}
+                        aria-controls={"device-panel-/" + this.props.info.service.name}
+                        id={"device-panel-/" + this.props.info.service.name}>
+                        <Grid container
+                            spacing={1}
+                            direction="row"
+                            justify="flex-start"
+                            alignItems="center">
+                            <Grid item>
+                                <Typography className={classes.grid_typo}>{this.props.info.service.name}</Typography>
+                            </Grid>
+                            <Grid item>
+                                <Typography className={classes.grid_typo_2}>{this.props.info.service.uri}</Typography>
+                            </Grid>
+                            <Grid item style={{ marginLeft: 'auto' }}>
+                                <Grid container
+                                    spacing={1}
+                                    direction="row"
+                                    justify="flex-start"
+                                    alignItems="center">
+                                    <Grid item>
+                                        <FormControlLabel
+                                            onClick={(event) => event.stopPropagation()}
+                                            onFocus={(event) => event.stopPropagation()}
+                                            control={this.renderButtons()} />
+                                    </Grid>
+                                    <Grid item>
+                                        <Typography style={this.getColor(this.props.info.statusCode)}>Status: <b>{this.props.info.statusCode}</b></Typography>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                    </AccordionSummary>
+                    <AccordionDetails className={classes.acc_details}>
+                        {this.props.info.response}
+                    </AccordionDetails>
+                </Accordion>
+            );
+        };
+
+        const renderTextFields = () => {
+            return (
+                <Paper className={classes.acc_summary}>
+                    <Grid container
+                        spacing={1}
+                        direction="row"
+                        justify="flex-start"
+                        alignItems="center">
+                        <Grid item xs>
+                            <TextField label="Name" type="text" defaultValue={this.props.info.service.name} onChange={this.onNameChange} />
+                        </Grid>
+                        <Grid item xs={6}>
+                            <TextField label="Url" type="text" fullWidth defaultValue={this.props.info.service.uri} onChange={this.onUrlChange}/>
+                        </Grid>
+                        <Grid item xs>
+                            {this.renderSaveCancel()}
+                        </Grid>
+                    </Grid>
+                </Paper>
+                );
+        };
+
+        return this.state.isEditing ? renderTextFields() : renderAccordion();
+    }
+}
+
+export default withStyles(styles)(ServiceInfoComponent);

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

@@ -0,0 +1,386 @@
+"use strict";
+/* tslint:disable */
+/* eslint-disable */
+//----------------------
+// <auto-generated>
+//     Generated using the NSwag toolchain v13.8.2.0 (NJsonSchema v10.2.1.0 (Newtonsoft.Json v12.0.0.0)) (http://NSwag.org)
+// </auto-generated>
+//----------------------
+// ReSharper disable InconsistentNaming
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiException = exports.HttpStatusCode = exports.ServiceRequest = exports.ServiceInfo = void 0;
+var ServiceInfoService = /** @class */ (function () {
+    function ServiceInfoService(baseUrl, http) {
+        this.jsonParseReviver = undefined;
+        this.http = http ? http : window;
+        this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "";
+    }
+    ServiceInfoService.prototype.getCount = function () {
+        var _this = this;
+        var url_ = this.baseUrl + "/api/Services/count";
+        url_ = url_.replace(/[?&]$/, "");
+        var options_ = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json",
+                'Authorization': sessionStorage.getItem('user')
+            }
+        };
+        return this.http.fetch(url_, options_).then(function (_response) {
+            return _this.processGetCount(_response);
+        });
+    };
+    ServiceInfoService.prototype.processGetCount = function (response) {
+        var _this = this;
+        var status = response.status;
+        var _headers = {};
+        if (response.headers && response.headers.forEach) {
+            response.headers.forEach(function (v, k) { return _headers[k] = v; });
+        }
+        ;
+        if (status === 200) {
+            return response.text().then(function (_responseText) {
+                var result200 = null;
+                var resultData200 = _responseText === "" ? null : JSON.parse(_responseText, _this.jsonParseReviver);
+                result200 = resultData200 !== undefined ? resultData200 : null;
+                return result200;
+            });
+        }
+        else if (status !== 200 && status !== 204) {
+            return response.text().then(function (_responseText) {
+                return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve(null);
+    };
+    ServiceInfoService.prototype.get = function () {
+        var _this = this;
+        var url_ = this.baseUrl + "/api/Services";
+        url_ = url_.replace(/[?&]$/, "");
+        var options_ = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json",
+                'Authorization': sessionStorage.getItem('user')
+            }
+        };
+        return this.http.fetch(url_, options_).then(function (_response) {
+            return _this.processGet(_response);
+        });
+    };
+    ServiceInfoService.prototype.processGet = function (response) {
+        var _this = this;
+        var status = response.status;
+        var _headers = {};
+        if (response.headers && response.headers.forEach) {
+            response.headers.forEach(function (v, k) { return _headers[k] = v; });
+        }
+        ;
+        if (status === 200) {
+            return response.text().then(function (_responseText) {
+                var result200 = null;
+                var resultData200 = _responseText === "" ? null : JSON.parse(_responseText, _this.jsonParseReviver);
+                if (Array.isArray(resultData200)) {
+                    result200 = [];
+                    for (var _i = 0, resultData200_1 = resultData200; _i < resultData200_1.length; _i++) {
+                        var item = resultData200_1[_i];
+                        result200.push(ServiceInfo.fromJS(item));
+                    }
+                }
+                return result200;
+            });
+        }
+        else if (status !== 200 && status !== 204) {
+            return response.text().then(function (_responseText) {
+                return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve(null);
+    };
+    ServiceInfoService.prototype.post = function (request) {
+        var _this = this;
+        var url_ = this.baseUrl + "/api/Services";
+        url_ = url_.replace(/[?&]$/, "");
+        var content_ = JSON.stringify(request);
+        var options_ = {
+            body: content_,
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json",
+                'Authorization': sessionStorage.getItem('user')
+            }
+        };
+        return this.http.fetch(url_, options_).then(function (_response) {
+            return _this.processPost(_response);
+        });
+    };
+    ServiceInfoService.prototype.processPost = function (response) {
+        var _this = this;
+        var status = response.status;
+        var _headers = {};
+        if (response.headers && response.headers.forEach) {
+            response.headers.forEach(function (v, k) { return _headers[k] = v; });
+        }
+        ;
+        if (status === 201) {
+            return response.text().then(function (_responseText) {
+                var result201 = null;
+                var resultData201 = _responseText === "" ? null : JSON.parse(_responseText, _this.jsonParseReviver);
+                result201 = ServiceRequest.fromJS(resultData201);
+                return result201;
+            });
+        }
+        else if (status !== 200 && status !== 204) {
+            return response.text().then(function (_responseText) {
+                return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve(null);
+    };
+    ServiceInfoService.prototype.put = function (request) {
+        var _this = this;
+        var url_ = this.baseUrl + "/api/Services";
+        url_ = url_.replace(/[?&]$/, "");
+        var content_ = JSON.stringify(request);
+        var options_ = {
+            body: content_,
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+                'Authorization': sessionStorage.getItem('user')
+            }
+        };
+        return this.http.fetch(url_, options_).then(function (_response) {
+            return _this.processPut(_response);
+        });
+    };
+    ServiceInfoService.prototype.processPut = function (response) {
+        var status = response.status;
+        var _headers = {};
+        if (response.headers && response.headers.forEach) {
+            response.headers.forEach(function (v, k) { return _headers[k] = v; });
+        }
+        ;
+        if (status === 204) {
+            return response.text().then(function (_responseText) {
+                return;
+            });
+        }
+        else if (status !== 200 && status !== 204) {
+            return response.text().then(function (_responseText) {
+                return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve(null);
+    };
+    ServiceInfoService.prototype.delete = function (id) {
+        var _this = this;
+        var url_ = this.baseUrl + "/api/Services/{id}";
+        if (id === undefined || id === null)
+            throw new Error("The parameter 'id' must be defined.");
+        url_ = url_.replace("{id}", encodeURIComponent("" + id));
+        url_ = url_.replace(/[?&]$/, "");
+        var options_ = {
+            method: "DELETE",
+            headers: {
+                'Authorization': sessionStorage.getItem('user')
+            }
+        };
+        return this.http.fetch(url_, options_).then(function (_response) {
+            return _this.processDelete(_response);
+        });
+    };
+    ServiceInfoService.prototype.processDelete = function (response) {
+        var status = response.status;
+        var _headers = {};
+        if (response.headers && response.headers.forEach) {
+            response.headers.forEach(function (v, k) { return _headers[k] = v; });
+        }
+        ;
+        if (status === 204) {
+            return response.text().then(function (_responseText) {
+                return;
+            });
+        }
+        else if (status !== 200 && status !== 204) {
+            return response.text().then(function (_responseText) {
+                return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve(null);
+    };
+    return ServiceInfoService;
+}());
+exports.default = ServiceInfoService;
+var ServiceInfo = /** @class */ (function () {
+    function ServiceInfo(data) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    this[property] = data[property];
+            }
+        }
+    }
+    ServiceInfo.prototype.init = function (_data) {
+        if (_data) {
+            this.service = _data["service"] ? ServiceRequest.fromJS(_data["service"]) : undefined;
+            this.statusCode = _data["statusCode"];
+            this.response = _data["response"];
+        }
+    };
+    ServiceInfo.fromJS = function (data) {
+        data = typeof data === 'object' ? data : {};
+        var result = new ServiceInfo();
+        result.init(data);
+        return result;
+    };
+    ServiceInfo.prototype.toJSON = function (data) {
+        data = typeof data === 'object' ? data : {};
+        data["service"] = this.service ? this.service.toJSON() : undefined;
+        data["statusCode"] = this.statusCode;
+        data["response"] = this.response;
+        return data;
+    };
+    return ServiceInfo;
+}());
+exports.ServiceInfo = ServiceInfo;
+var ServiceRequest = /** @class */ (function () {
+    function ServiceRequest(data) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    this[property] = data[property];
+            }
+        }
+    }
+    ServiceRequest.prototype.init = function (_data) {
+        if (_data) {
+            this.id = _data["id"];
+            this.name = _data["name"];
+            this.uri = _data["uri"];
+        }
+    };
+    ServiceRequest.fromJS = function (data) {
+        data = typeof data === 'object' ? data : {};
+        var result = new ServiceRequest();
+        result.init(data);
+        return result;
+    };
+    ServiceRequest.prototype.toJSON = function (data) {
+        data = typeof data === 'object' ? data : {};
+        data["id"] = this.id;
+        data["name"] = this.name;
+        data["uri"] = this.uri;
+        return data;
+    };
+    return ServiceRequest;
+}());
+exports.ServiceRequest = ServiceRequest;
+var HttpStatusCode;
+(function (HttpStatusCode) {
+    HttpStatusCode["Continue"] = "Continue";
+    HttpStatusCode["SwitchingProtocols"] = "SwitchingProtocols";
+    HttpStatusCode["Processing"] = "Processing";
+    HttpStatusCode["EarlyHints"] = "EarlyHints";
+    HttpStatusCode["OK"] = "OK";
+    HttpStatusCode["Created"] = "Created";
+    HttpStatusCode["Accepted"] = "Accepted";
+    HttpStatusCode["NonAuthoritativeInformation"] = "NonAuthoritativeInformation";
+    HttpStatusCode["NoContent"] = "NoContent";
+    HttpStatusCode["ResetContent"] = "ResetContent";
+    HttpStatusCode["PartialContent"] = "PartialContent";
+    HttpStatusCode["MultiStatus"] = "MultiStatus";
+    HttpStatusCode["AlreadyReported"] = "AlreadyReported";
+    HttpStatusCode["IMUsed"] = "IMUsed";
+    HttpStatusCode["MultipleChoices"] = "Ambiguous";
+    HttpStatusCode["Ambiguous"] = "Ambiguous";
+    HttpStatusCode["MovedPermanently"] = "Moved";
+    HttpStatusCode["Moved"] = "Moved";
+    HttpStatusCode["Found"] = "Redirect";
+    HttpStatusCode["Redirect"] = "Redirect";
+    HttpStatusCode["SeeOther"] = "RedirectMethod";
+    HttpStatusCode["RedirectMethod"] = "RedirectMethod";
+    HttpStatusCode["NotModified"] = "NotModified";
+    HttpStatusCode["UseProxy"] = "UseProxy";
+    HttpStatusCode["Unused"] = "Unused";
+    HttpStatusCode["TemporaryRedirect"] = "TemporaryRedirect";
+    HttpStatusCode["RedirectKeepVerb"] = "TemporaryRedirect";
+    HttpStatusCode["PermanentRedirect"] = "PermanentRedirect";
+    HttpStatusCode["BadRequest"] = "BadRequest";
+    HttpStatusCode["Unauthorized"] = "Unauthorized";
+    HttpStatusCode["PaymentRequired"] = "PaymentRequired";
+    HttpStatusCode["Forbidden"] = "Forbidden";
+    HttpStatusCode["NotFound"] = "NotFound";
+    HttpStatusCode["MethodNotAllowed"] = "MethodNotAllowed";
+    HttpStatusCode["NotAcceptable"] = "NotAcceptable";
+    HttpStatusCode["ProxyAuthenticationRequired"] = "ProxyAuthenticationRequired";
+    HttpStatusCode["RequestTimeout"] = "RequestTimeout";
+    HttpStatusCode["Conflict"] = "Conflict";
+    HttpStatusCode["Gone"] = "Gone";
+    HttpStatusCode["LengthRequired"] = "LengthRequired";
+    HttpStatusCode["PreconditionFailed"] = "PreconditionFailed";
+    HttpStatusCode["RequestEntityTooLarge"] = "RequestEntityTooLarge";
+    HttpStatusCode["RequestUriTooLong"] = "RequestUriTooLong";
+    HttpStatusCode["UnsupportedMediaType"] = "UnsupportedMediaType";
+    HttpStatusCode["RequestedRangeNotSatisfiable"] = "RequestedRangeNotSatisfiable";
+    HttpStatusCode["ExpectationFailed"] = "ExpectationFailed";
+    HttpStatusCode["MisdirectedRequest"] = "MisdirectedRequest";
+    HttpStatusCode["UnprocessableEntity"] = "UnprocessableEntity";
+    HttpStatusCode["Locked"] = "Locked";
+    HttpStatusCode["FailedDependency"] = "FailedDependency";
+    HttpStatusCode["UpgradeRequired"] = "UpgradeRequired";
+    HttpStatusCode["PreconditionRequired"] = "PreconditionRequired";
+    HttpStatusCode["TooManyRequests"] = "TooManyRequests";
+    HttpStatusCode["RequestHeaderFieldsTooLarge"] = "RequestHeaderFieldsTooLarge";
+    HttpStatusCode["UnavailableForLegalReasons"] = "UnavailableForLegalReasons";
+    HttpStatusCode["InternalServerError"] = "InternalServerError";
+    HttpStatusCode["NotImplemented"] = "NotImplemented";
+    HttpStatusCode["BadGateway"] = "BadGateway";
+    HttpStatusCode["ServiceUnavailable"] = "ServiceUnavailable";
+    HttpStatusCode["GatewayTimeout"] = "GatewayTimeout";
+    HttpStatusCode["HttpVersionNotSupported"] = "HttpVersionNotSupported";
+    HttpStatusCode["VariantAlsoNegotiates"] = "VariantAlsoNegotiates";
+    HttpStatusCode["InsufficientStorage"] = "InsufficientStorage";
+    HttpStatusCode["LoopDetected"] = "LoopDetected";
+    HttpStatusCode["NotExtended"] = "NotExtended";
+    HttpStatusCode["NetworkAuthenticationRequired"] = "NetworkAuthenticationRequired";
+})(HttpStatusCode = exports.HttpStatusCode || (exports.HttpStatusCode = {}));
+var ApiException = /** @class */ (function (_super) {
+    __extends(ApiException, _super);
+    function ApiException(message, status, response, headers, result) {
+        var _this = _super.call(this) || this;
+        _this.isApiException = true;
+        _this.message = message;
+        _this.status = status;
+        _this.response = response;
+        _this.headers = headers;
+        _this.result = result;
+        return _this;
+    }
+    ApiException.isApiException = function (obj) {
+        return obj.isApiException === true;
+    };
+    return ApiException;
+}(Error));
+exports.ApiException = ApiException;
+function throwException(message, status, response, headers, result) {
+    if (result !== null && result !== undefined)
+        throw result;
+    else
+        throw new ApiException(message, status, response, headers, null);
+}
+//# sourceMappingURL=SystemInfoService.js.map

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

@@ -0,0 +1,389 @@
+/* tslint:disable */
+/* eslint-disable */
+//----------------------
+// <auto-generated>
+//     Generated using the NSwag toolchain v13.8.2.0 (NJsonSchema v10.2.1.0 (Newtonsoft.Json v12.0.0.0)) (http://NSwag.org)
+// </auto-generated>
+//----------------------
+// ReSharper disable InconsistentNaming
+
+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;
+
+    constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
+        this.http = http ? http : <any>window;
+        this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "";
+    }
+
+    getCount(): Promise<number> {
+        let url_ = this.baseUrl + "/api/Services/count";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "GET",
+            headers: {
+                "Accept": "application/json",
+                'Authorization': sessionStorage.getItem('user')
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGetCount(_response);
+        });
+    }
+
+    protected processGetCount(response: Response): Promise<number> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+                let result200: any = null;
+                let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                result200 = resultData200 !== undefined ? resultData200 : <any>null;
+                return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+                return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<number>(<any>null);
+    }
+
+    get(): Promise<ServiceInfo[]> {
+        let url_ = this.baseUrl + "/api/Services";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "GET",
+            headers: {
+                "Accept": "application/json",
+                'Authorization': sessionStorage.getItem('user')
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGet(_response);
+        });
+    }
+
+    protected processGet(response: Response): Promise<ServiceInfo[]> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+            if (Array.isArray(resultData200)) {
+                result200 = [] as any;
+                for (let item of resultData200)
+                    result200!.push(ServiceInfo.fromJS(item));
+            }
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<ServiceInfo[]>(<any>null);
+    }
+
+    post(request: ServiceRequest): Promise<ServiceRequest> {
+        let url_ = this.baseUrl + "/api/Services";
+        url_ = url_.replace(/[?&]$/, "");
+
+        const content_ = JSON.stringify(request);
+
+        let options_ = <RequestInit>{
+            body: content_,
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json",
+                'Authorization': sessionStorage.getItem('user')
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processPost(_response);
+        });
+    }
+
+    protected processPost(response: Response): Promise<ServiceRequest> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 201) {
+            return response.text().then((_responseText) => {
+            let result201: any = null;
+            let resultData201 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+            result201 = ServiceRequest.fromJS(resultData201);
+            return result201;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<ServiceRequest>(<any>null);
+    }
+
+    put(request: ServiceRequest): Promise<void> {
+        let url_ = this.baseUrl + "/api/Services";
+        url_ = url_.replace(/[?&]$/, "");
+
+        const content_ = JSON.stringify(request);
+
+        let options_ = <RequestInit>{
+            body: content_,
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+                'Authorization': sessionStorage.getItem('user')
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processPut(_response);
+        });
+    }
+
+    protected processPut(response: Response): Promise<void> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 204) {
+            return response.text().then((_responseText) => {
+            return;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<void>(<any>null);
+    }
+
+    delete(id: number): Promise<void> {
+        let url_ = this.baseUrl + "/api/Services/{id}";
+        if (id === undefined || id === null)
+            throw new Error("The parameter 'id' must be defined.");
+        url_ = url_.replace("{id}", encodeURIComponent("" + id));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "DELETE",
+            headers: {
+                'Authorization': sessionStorage.getItem('user')
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processDelete(_response);
+        });
+    }
+
+    protected processDelete(response: Response): Promise<void> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 204) {
+            return response.text().then((_responseText) => {
+            return;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<void>(<any>null);
+    }
+}
+
+export class ServiceInfo implements IServiceInfo {
+    service?: ServiceRequest | undefined;
+    statusCode!: HttpStatusCode;
+    response?: string | undefined;
+
+    constructor(data?: IServiceInfo) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    (<any>this)[property] = (<any>data)[property];
+            }
+        }
+    }
+
+    init(_data?: any) {
+        if (_data) {
+            this.service = _data["service"] ? ServiceRequest.fromJS(_data["service"]) : <any>undefined;
+            this.statusCode = _data["statusCode"];
+            this.response = _data["response"];
+        }
+    }
+
+    static fromJS(data: any): ServiceInfo {
+        data = typeof data === 'object' ? data : {};
+        let result = new ServiceInfo();
+        result.init(data);
+        return result;
+    }
+
+    toJSON(data?: any) {
+        data = typeof data === 'object' ? data : {};
+        data["service"] = this.service ? this.service.toJSON() : <any>undefined;
+        data["statusCode"] = this.statusCode;
+        data["response"] = this.response;
+        return data;
+    }
+}
+
+export interface IServiceInfo {
+    service?: ServiceRequest | undefined;
+    statusCode: HttpStatusCode;
+    response?: string | undefined;
+}
+
+export class ServiceRequest implements IServiceRequest {
+    id!: number;
+    name?: string | undefined;
+    uri?: string | undefined;
+
+    constructor(data?: IServiceRequest) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    (<any>this)[property] = (<any>data)[property];
+            }
+        }
+    }
+
+    init(_data?: any) {
+        if (_data) {
+            this.id = _data["id"];
+            this.name = _data["name"];
+            this.uri = _data["uri"];
+        }
+    }
+
+    static fromJS(data: any): ServiceRequest {
+        data = typeof data === 'object' ? data : {};
+        let result = new ServiceRequest();
+        result.init(data);
+        return result;
+    }
+
+    toJSON(data?: any) {
+        data = typeof data === 'object' ? data : {};
+        data["id"] = this.id;
+        data["name"] = this.name;
+        data["uri"] = this.uri;
+        return data;
+    }
+}
+
+export interface IServiceRequest {
+    id: number;
+    name?: string | undefined;
+    uri?: string | undefined;
+}
+
+export enum HttpStatusCode {
+    Continue = "Continue",
+    SwitchingProtocols = "SwitchingProtocols",
+    Processing = "Processing",
+    EarlyHints = "EarlyHints",
+    OK = "OK",
+    Created = "Created",
+    Accepted = "Accepted",
+    NonAuthoritativeInformation = "NonAuthoritativeInformation",
+    NoContent = "NoContent",
+    ResetContent = "ResetContent",
+    PartialContent = "PartialContent",
+    MultiStatus = "MultiStatus",
+    AlreadyReported = "AlreadyReported",
+    IMUsed = "IMUsed",
+    MultipleChoices = "Ambiguous",
+    Ambiguous = "Ambiguous",
+    MovedPermanently = "Moved",
+    Moved = "Moved",
+    Found = "Redirect",
+    Redirect = "Redirect",
+    SeeOther = "RedirectMethod",
+    RedirectMethod = "RedirectMethod",
+    NotModified = "NotModified",
+    UseProxy = "UseProxy",
+    Unused = "Unused",
+    TemporaryRedirect = "TemporaryRedirect",
+    RedirectKeepVerb = "TemporaryRedirect",
+    PermanentRedirect = "PermanentRedirect",
+    BadRequest = "BadRequest",
+    Unauthorized = "Unauthorized",
+    PaymentRequired = "PaymentRequired",
+    Forbidden = "Forbidden",
+    NotFound = "NotFound",
+    MethodNotAllowed = "MethodNotAllowed",
+    NotAcceptable = "NotAcceptable",
+    ProxyAuthenticationRequired = "ProxyAuthenticationRequired",
+    RequestTimeout = "RequestTimeout",
+    Conflict = "Conflict",
+    Gone = "Gone",
+    LengthRequired = "LengthRequired",
+    PreconditionFailed = "PreconditionFailed",
+    RequestEntityTooLarge = "RequestEntityTooLarge",
+    RequestUriTooLong = "RequestUriTooLong",
+    UnsupportedMediaType = "UnsupportedMediaType",
+    RequestedRangeNotSatisfiable = "RequestedRangeNotSatisfiable",
+    ExpectationFailed = "ExpectationFailed",
+    MisdirectedRequest = "MisdirectedRequest",
+    UnprocessableEntity = "UnprocessableEntity",
+    Locked = "Locked",
+    FailedDependency = "FailedDependency",
+    UpgradeRequired = "UpgradeRequired",
+    PreconditionRequired = "PreconditionRequired",
+    TooManyRequests = "TooManyRequests",
+    RequestHeaderFieldsTooLarge = "RequestHeaderFieldsTooLarge",
+    UnavailableForLegalReasons = "UnavailableForLegalReasons",
+    InternalServerError = "InternalServerError",
+    NotImplemented = "NotImplemented",
+    BadGateway = "BadGateway",
+    ServiceUnavailable = "ServiceUnavailable",
+    GatewayTimeout = "GatewayTimeout",
+    HttpVersionNotSupported = "HttpVersionNotSupported",
+    VariantAlsoNegotiates = "VariantAlsoNegotiates",
+    InsufficientStorage = "InsufficientStorage",
+    LoopDetected = "LoopDetected",
+    NotExtended = "NotExtended",
+    NetworkAuthenticationRequired = "NetworkAuthenticationRequired",
+}
+
+export class ApiException extends Error {
+    message: string;
+    status: number;
+    response: string;
+    headers: { [key: string]: any; };
+    result: any;
+
+    constructor(message: string, status: number, response: string, headers: { [key: string]: any; }, result: any) {
+        super();
+
+        this.message = message;
+        this.status = status;
+        this.response = response;
+        this.headers = headers;
+        this.result = result;
+    }
+
+    protected isApiException = true;
+
+    static isApiException(obj: any): obj is ApiException {
+        return obj.isApiException === true;
+    }
+}
+
+function throwException(message: string, status: number, response: string, headers: { [key: string]: any; }, result?: any): any {
+    if (result !== null && result !== undefined)
+        throw result;
+    else
+        throw new ApiException(message, status, response, headers, null);
+}

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

@@ -0,0 +1,88 @@
+import { Grid, Typography } from '@material-ui/core';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import { blueGrey } from '@material-ui/core/colors';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { Skeleton } from '@material-ui/lab';
+import { withStyles } from '@material-ui/styles';
+import React, { Component } from 'react';
+
+const styles = theme => ({
+    acc_summary: {
+        backgroundColor: blueGrey[50],
+        padding: theme.spacing(2),
+        textAlign: 'center',
+        height: '75px',
+    },
+    acc_details: {
+        backgroundColor: blueGrey[100],
+    },
+    grid_typo: {
+        fontSize: theme.typography.pxToRem(20),
+        fontWeight: theme.typography.fontWeightRegular,
+    },
+    grid_typo_2: {
+        marginLeft: '5px',
+        fontSize: theme.typography.pxToRem(15),
+        fontWeight: theme.typography.fontWeightRegular,
+        color: theme.palette.text.secondary,
+    },
+});
+
+class ServiceInfoSkeleton extends Component {
+
+    render() {
+        const { classes } = this.props;
+
+        return (
+            <Accordion>
+                <AccordionSummary className={classes.acc_summary}
+                    expandIcon={<ExpandMoreIcon />}>
+                    <Grid container
+                        spacing={1}
+                        direction="row"
+                        justify="flex-start"
+                        alignItems="center">
+                        <Grid item>
+                            <Typography className={classes.grid_typo}><Skeleton width={200} /></Typography>
+                        </Grid>
+                        <Grid item>
+                            <Typography className={classes.grid_typo_2}><Skeleton width={300} /></Typography>
+                        </Grid>
+                        <Grid item style={{ marginLeft: 'auto' }}>
+                            <Grid container
+                                spacing={1}
+                                direction="row"
+                                justify="flex-start"
+                                alignItems="center">
+                                <Grid item>
+                                    <Typography><Skeleton width={150} /></Typography>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </AccordionSummary>
+                <AccordionDetails className={classes.acc_details}>
+                    <Grid container
+                        spacing={1}
+                        direction="column"
+                        justify="flex-start"
+                        alignItems="flex-start">
+                        <Grid item>
+                            <Typography><Skeleton width={800} /></Typography>
+                        </Grid>
+                        <Grid item>
+                            <Typography><Skeleton width={300} /></Typography>
+                        </Grid>
+                        <Grid item>
+                            <Typography><Skeleton width={500} /></Typography>
+                        </Grid>
+                    </Grid>
+                </AccordionDetails>
+            </Accordion>
+        );
+    }
+}
+
+export default withStyles(styles)(ServiceInfoSkeleton);

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

@@ -0,0 +1,146 @@
+import { 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);

Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx

@@ -0,0 +1,192 @@
+import { Box, FormControlLabel, Grid, IconButton, Typography } from '@material-ui/core';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import { blueGrey, green, orange, red } from '@material-ui/core/colors';
+import { Power, PowerOff, Refresh } from '@material-ui/icons/';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { withStyles } from '@material-ui/styles';
+import React, { Component } from 'react';
+import { withRouter } from "react-router";
+import DeviceService from '../../common/DeviceService';
+import DevicesContext from '../../contexts/DevicesContext';
+
+const styles = theme => ({
+    acc_summary: {
+        backgroundColor: blueGrey[50],
+    },
+    acc_details: {
+        backgroundColor: blueGrey[100],
+    },
+    grid_typo: {
+        fontSize: theme.typography.pxToRem(20),
+        fontWeight: theme.typography.fontWeightRegular,
+    },
+    grid_typo_2: {
+        marginLeft: '5px',
+        fontSize: theme.typography.pxToRem(15),
+        fontWeight: theme.typography.fontWeightRegular,
+        color: theme.palette.text.secondary,
+    },
+    grid_item: {
+        width: '100%',
+        marginLeft: '5px',
+        marginRight: '30px',
+    },
+    grid_item_typo: {
+        fontSize: theme.typography.pxToRem(15),
+        fontWeight: theme.typography.fontWeightRegular,
+    },
+    grid_item_typo_2: {
+        marginLeft: '5px',
+        fontSize: theme.typography.pxToRem(15),
+        fontWeight: theme.typography.fontWeightRegular,
+        color: theme.palette.text.secondary,
+    },
+    icon_box: {
+        marginRight: '15px',
+    }
+});
+
+class DeviceComponent extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            expanded: "",
+        }
+    }
+
+    static contextType = DevicesContext;
+
+    getColor(status) {
+        if (status == "Online") {
+            return { color: green[600] };
+        } else if (status == "Offline") {
+            return { color: blueGrey[500] };
+        } else /* if (device.status == "Unknown" || device.status == "Error") */ {
+            return { color: red[800] };
+        }
+    }
+
+    componentDidMount() {
+        const id = this.props.match.params.id;
+        this.setState({ expanded: id });
+    }
+
+    renderSensorButtons(device, sensor) {
+        var service = new DeviceService();
+        return this.renderButtons(
+            () => service.onlinesensor(device.id, sensor.id),
+            () => service.offlinesensor(device.id, sensor.id),
+            () => this.context.updateDevice(device.id)
+        );
+    }
+
+    renderDeviceButtons(device) {
+        var service = new DeviceService();
+        return this.renderButtons(
+            () => service.onlinedevice(device.id),
+            () => service.offlinedevice(device.id),
+            () => this.context.updateDevice(device.id)
+        );
+    }
+
+    renderButtons(onPower, onPowerOff, onRefresh) {
+        const renderOnOff = () => {
+            return (
+                <React.Fragment>
+                    <IconButton color="primary" onClick={onPower}>
+                        <Power />
+                    </IconButton>
+                    <IconButton color="primary" onClick={onPowerOff}>
+                        <PowerOff />
+                    </IconButton>
+                </React.Fragment>
+            );
+        }
+
+        const { classes } = this.props;
+        return (
+        <Box className={classes.icon_box}>
+                {this.props.isAdmin ? renderOnOff() : null}
+                <IconButton color="primary" onClick={onRefresh}>
+                    <Refresh />
+                </IconButton>
+            </Box>
+        );
+    }
+
+    render() {
+        const { classes } = this.props;
+        const Sensors = this.props.device.sensors.map((sensor, index) => (
+            <Grid item className={classes.grid_item} key={sensor.id}>
+                <Grid container
+                    spacing={3}
+                    direction="row"
+                    justify="space-between"
+                    alignItems="center">
+                    <Grid item>
+                        <Typography className={classes.grid_item_typo}>Sensor {index}</Typography>
+                    </Grid>
+                    <Grid item>
+                        <Typography className={classes.grid_item_typo_2}>{sensor.id}</Typography>
+                    </Grid>
+                    <Grid item>
+                        <Typography style={this.getColor(sensor.status)}>Status: <b>{sensor.status}</b></Typography>
+                    </Grid>
+                    <Grid item>
+                        {this.renderSensorButtons(this.props.device, sensor)}
+                    </Grid>
+                </Grid>
+            </Grid>
+        ));
+
+        const handleChange = (panel) => (event, isExpanded) => {
+            this.setState({ expanded: isExpanded ? panel : "" });
+        };
+
+        return (
+            <Accordion expanded={this.state.expanded === this.props.device.id} onChange={handleChange(this.props.device.id)}>
+                <AccordionSummary className={classes.acc_summary}
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls={"device-panel-/" + this.props.device.id}
+                    id={"device-panel-/" + this.props.device.id}>
+                    <Grid container
+                        spacing={3}
+                        direction="row"
+                        justify="space-between"
+                        alignItems="center">
+                        <Grid item>
+                            <Typography className={classes.grid_typo}>Device {this.props.index}</Typography>
+                        </Grid>
+                        <Grid item>
+                            <Typography className={classes.grid_typo_2}>{this.props.device.id}</Typography>
+                        </Grid>
+                        <Grid item>
+                            <Typography style={this.getColor(this.props.device.status)}>Status: <b>{this.props.device.status}</b></Typography>
+                        </Grid>
+                        <Grid item>
+                            <FormControlLabel
+                                onClick={(event) => event.stopPropagation()}
+                                onFocus={(event) => event.stopPropagation()}
+                                control={this.renderDeviceButtons(this.props.device)}/>
+                        </Grid>
+                    </Grid>
+                </AccordionSummary>
+                <AccordionDetails className={classes.acc_details}>
+                    <Grid className={classes.grid_item}
+                        container
+                        spacing={3}
+                        direction="column"
+                        justify="center"
+                        alignItems="flex-start">
+                        {Sensors}
+                    </Grid>
+                </AccordionDetails>
+            </Accordion>
+        );
+    }
+}
+
+export default withRouter(withStyles(styles)(DeviceComponent));

Birdmap.API/ClientApp/src/components/devices/Devices.jsx

@@ -1,5 +1,89 @@
-import React, { Component } from 'react'
+import { Box, Grid, IconButton, Paper, Typography } from '@material-ui/core';
+import { blueGrey } from '@material-ui/core/colors';
+import { Power, PowerOff, Refresh } from '@material-ui/icons/';
+import { withStyles } from '@material-ui/styles';
+import React from 'react';
+import DeviceService from '../../common/DeviceService';
+import DevicesContext from '../../contexts/DevicesContext';
+import DeviceComponent from './DeviceComponent';
 
-export default class Devices extends React.Component {
+const styles = theme => ({
+    root: {
+        padding: '64px',
+        backgroundColor: theme.palette.primary.dark,
+    },
+    paper: {
+        backgroundColor: blueGrey[50],
+        height: '60px',
+    },
+    typo: {
+        fontSize: theme.typography.pxToRem(20),
+        fontWeight: theme.typography.fontWeightRegular,
+    },
+});
 
+class Devices extends React.Component {
+    constructor(props) {
+        super(props);
     }
+
+    static contextType = DevicesContext;
+
+    componentDidMount() {
+    }
+
+    renderButtons() {
+        var service = new DeviceService();
+
+        const renderOnOff = () => {
+            return (
+                <React.Fragment>
+                    <IconButton color="primary" onClick={() => service.onlineall()}>
+                        <Power />
+                    </IconButton>
+                    <IconButton color="primary" onClick={() => service.offlineall()}>
+                        <PowerOff />
+                    </IconButton>
+                </React.Fragment>
+            );
+        }
+
+        return (
+            <Box>
+                {this.props.isAdmin ? renderOnOff() : null}
+                <IconButton color="primary" onClick={() => this.context.updateAllDevices()}>
+                    <Refresh />
+                </IconButton>
+            </Box>
+        );
+    }
+
+    render() {
+        const { classes } = this.props;
+        const Devices = this.context.devices.map((device, index) => (
+            <DeviceComponent isAdmin={this.props.isAdmin} device={device} index={index} key={device.id}/>
+        ));
+
+        return (
+            <Box className={classes.root}>
+                <Paper className={classes.paper} square>
+                    <Grid container
+                        spacing={0}
+                        direction="row"
+                        justify="center"
+                        alignItems="center">
+                        <Grid item>
+                            <Typography className={classes.typo}>All Devices</Typography>
+                        </Grid>
+                        <Grid item>
+                            {this.renderButtons()}
+                        </Grid>
+                    </Grid>
+                </Paper>
+                {Devices}
+            </Box>
+        );
+    }
+}
+
+export default withStyles(styles)(Devices);

Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx

@@ -0,0 +1,61 @@
+import { Box, Tooltip } from '@material-ui/core';
+import { blue, red, yellow } from '@material-ui/core/colors';
+import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
+import { makeStyles } from '@material-ui/styles';
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+
+class DeviceMarker extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            AnchorEl: null
+        }
+    }
+
+    getColor() {
+        const { device } = this.props;
+        if (device.status === "Online") {
+            return { color: blue[800] };
+        } else if (device.status === "Offline") {
+            return { color: yellow[800] };
+        } else /* if (device.status == "unknown") */ {
+            return { color: red[800] };
+        }
+    }
+
+    useStyles() {
+        return makeStyles(theme => ({
+            root: {
+                display: 'grid'
+            },
+            icon: {
+
+            }
+        }));
+    }
+
+    render() {
+        const classes = this.useStyles(this.props);
+        const { device } = this.props;
+
+        const onClick = () => {
+            this.props.history.push('/devices/' + device.id)
+        };
+
+        const open = Boolean(this.state.AnchorEl);
+
+        return (
+            <Box className={classes.root} boxShadow={5}>
+                <Tooltip title={<div>ID: {device.id}<br />Status: {device.status}</div>} placement="top" leaveDelay={200} arrow>
+                    <RadioButtonCheckedIcon fontSize="small" style={this.getColor()}
+                        onClick={onClick}>
+                    </RadioButtonCheckedIcon>
+                </Tooltip>
+            </Box>
+        );
+    }
+}
+
+export default withRouter(DeviceMarker);

Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx

@@ -1,93 +1,59 @@
 /*global google*/
 import GoogleMapReact from 'google-map-react';
 import React, { Component } from 'react';
-import DevicesService, { DeviceService } from '../devices/DeviceService'
-import { HubConnectionBuilder } from '@microsoft/signalr';
+import C from '../../common/Constants';
+import DevicesContext from '../../contexts/DevicesContext';
+import DeviceMarker from './DeviceMarker';
 
-const hub_url = '/hubs/devices';
-const probability_method_name = 'NotifyDeviceAsync';
-const update_method_name = 'NotifyDeviceUpdatedAsync';
-const update_all_method_name = 'NotifyAllUpdatedAsync';
+const lat_offset = 0.000038;
+const lng_offset = -0.000058;
 
 export default class MapContainer extends Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            devices: [],
             center: {
                 lat: 48.275939, lng: 21.469640
             },
-            points: [],
             heatmapPoints: [],
-            connection: null,
-        }
+        };
+
+        this.probabilityHandler = this.probabilityHandler.bind(this);
     }
 
-    handleAllDevicesUpdated(service = null) {
-        if (service === null) {
-            service = new DevicesService();
-        }
-        service.getall().then(result => {
-            this.setState({ devices: result });
-        }).catch(ex => {
-            console.log(ex);
-        });
-    }
+    static contextType = DevicesContext;
 
-    componentDidMount() {
-        const service = new DeviceService();
-        this.handleAllDevicesUpdated(service);
+    probabilityHandler(point) {
+        if (point.prob > 0.5) {
 
-        const newConnection = new HubConnectionBuilder()
-            .withUrl(hub_url)
-            .withAutomaticReconnect()
-            .build();
-
-        this.setState({ connection: newConnection });
-
-        newConnection.start()
-            .then(result => {
-                console.log('Hub Connected!');
-
-                newConnection.on(probability_method_name, (id, date, prob) => {
-                    this.state.points.push({ id, date, prob });
-                    //console.log(method_name + " recieved: [id: " + id + ", date: " + date + ", prob: " + prob + "]");
-                    if (prob > 0.5) {
-                        var device = this.state.devices.filter(function (x) { return x.id === id })[0]
-                        var newPoint = { lat: device.coordinates.latitude, lng: device.coordinates.longitude };
             this.setState({
-                            heatmapPoints: [...this.state.heatmapPoints, newPoint]
+                heatmapPoints: [...this.state.heatmapPoints, point]
             });
 
             if (this._googleMap !== undefined) {
-                            const point = { location: new google.maps.LatLng(newPoint.lat, newPoint.lng), weight: prob };
-                            this._googleMap.heatmap.data.push(point)
+                const newPoint = { location: new google.maps.LatLng(point.lat, point.lng), weight: point.prob };
+                if (this._googleMap.heatmap !== null) {
+                    this._googleMap.heatmap.data.push(newPoint)
+                }
+            }
         }
     }
-                });
 
-                newConnection.on(update_all_method_name, () => {
-                    this.handleAllDevicesUpdated(service);
-                });
+    componentDidMount() {
+        this.context.addHandler(C.probability_method_name, this.probabilityHandler);
+        const newPoints = [];
+        for (var p of this.context.heatmapPoints) {
+            if (p.prob > 0.5) {
+                newPoints.push(p)
+            }
+        }
 
-                newConnection.on(update_method_name, (id) => {
-                    service.getdevice(id).then(result => {
-                        var index = this.state.devices.findIndex((d => d.id == id));
-                        const newDevices = [...this.state.devices];
-                        newDevices[index] = result;
-                        this.setState({ devices: newDevices });
-                    }).catch(ex => console.log("Device update failed.", ex));
-                })
-            }).catch(e => console.log('Hub Connection failed: ', e));
+        this.setState({ heatmapPoints: newPoints });
     }
 
     componentWillUnmount() {
-        if (this.state.connection) {
-            this.state.connection.off(probability_method_name);
-            this.state.connection.off(update_all_method_name);
-            this.state.connection.off(update_method_name);
-        }
+        this.context.removeHandler(C.probability_method_name, this.probabilityHandler);
     }
 
     render() {
@@ -100,12 +66,26 @@ export default class MapContainer extends Component {
         }
 
         const mapOptions = {
+            disableDefaultUI: true,
+            zoomControl: true,
+            mapTypeControl: true,
             overviewMapControl: true,
-            mapTypeId: 'terrain'
+            streetViewControl: false,
+            scaleControl: true,
+            mapTypeId: 'satellite'
         }
 
+        const Markers = this.context.devices.map((device, index) => (
+            <DeviceMarker
+                key={device.id}
+                lat={device.coordinates.latitude + lat_offset}
+                lng={device.coordinates.longitude + lng_offset}
+                device={device}
+            />
+        ));
+
         return (
-            <div style={{ height: '91vh', width: '100%' }}>
+            <div style={{ height: '93vh', width: '100%' }}>
                 <GoogleMapReact
                     bootstrapURLKeys={{
                         key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],
@@ -117,6 +97,7 @@ export default class MapContainer extends Component {
                     heatmapLibrary={true}
                     heatmap={heatMapData}
                     defaultCenter={this.state.center}>
+                    {Markers}
                 </GoogleMapReact>
             </div>
         );

Birdmap.API/ClientApp/src/contexts/DevicesContext.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default React.createContext({
+    devices: [],
+    heatmapPoints: [],
+
+    addHandler: (_, __) => { },
+    removeHandler: (_, __) => { },
+
+    updateDevice: () => { },
+    updateAllDevices: () => { },
+});

Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js

@@ -0,0 +1,148 @@
+import Context from './DevicesContext'
+import { HubConnectionBuilder } from '@microsoft/signalr';
+import DeviceService from '../common/DeviceService';
+import C from '../common/Constants'
+import React, { Component } from 'react'
+
+const hub_url = '/hubs/devices';
+
+export default class DevicesContextProvider extends Component {
+    constructor(props) {
+        super(props);
+
+        const handlers = {};
+        for (var property in C) {
+            handlers[C[property]] = [];
+        };
+
+        this.state = {
+            hubConnection: null,
+            devices: [],
+            heatmapPoints: [],
+            handlers: handlers,
+        };
+    }
+
+    addHandler = (methodName, handler) => {
+        const updatedHandlers = this.state.handlers;
+        updatedHandlers[methodName].push(handler);
+        //console.log("Added '" + methodName + "' handler.");
+        this.setState({ handlers: updatedHandlers });
+    }
+
+    removeHandler = (methodName, handler) => {
+        const updatedHandlers = this.state.handlers;
+        var index = updatedHandlers[methodName].findIndex((h => h === handler));
+        if (index > -1) {
+            updatedHandlers[methodName].splice(index, 1);
+            //console.log("Removed '" + methodName + "' handler.");
+        }
+        this.setState({ handlers: updatedHandlers });
+    }
+
+    updateDevice = (id) => {
+        this.updateDeviceInternal(id);
+    }
+
+    updateAllDevices = () => {
+        this.updateAllDevicesInternal();
+    }
+
+    invokeHandlers(methodName, context) {
+        this.state.handlers[methodName].forEach(function (handler) {
+            handler(context);
+        });
+    }
+
+    updateAllDevicesInternal(service = null) {
+        if (service === null) {
+            service = new DeviceService();
+        }
+        service.getall().then(result => {
+            this.setState({ devices: result });
+            this.invokeHandlers(C.update_all_method_name, null);
+        }).catch(ex => {
+            console.log(ex);
+        });
+    }
+
+    updateDeviceInternal(id, service = null) {
+        if (service === null) {
+            service = new DeviceService();
+        }
+        service.getdevice(id).then(result => {
+            const updatedDevices = [...this.state.devices];
+            var index = updatedDevices.findIndex((d => d.id == id));
+            if (index > -1) {
+                updatedDevices[index] = result;
+            }
+            else {
+                updatedDevices.push(result);
+            }
+            this.setState({ devices: updatedDevices });
+            this.invokeHandlers(C.update_method_name, result);
+        }).catch(ex => console.log("Device update failed.", ex));
+    }
+
+    componentDidMount() {
+        const service = new DeviceService();
+        this.updateAllDevicesInternal(service);
+
+        const newConnection = new HubConnectionBuilder()
+            .withUrl(hub_url)
+            .withAutomaticReconnect()
+            .build();
+
+        this.setState({ hubConnection: newConnection });
+
+        newConnection.start()
+            .then(_ => {
+                console.log('Devices hub Connected!');
+
+                newConnection.on(C.probability_method_name, (id, date, prob) => {
+                    //console.log(method_name + " recieved: [id: " + id + ", date: " + date + ", prob: " + prob + "]");
+                    var device = this.state.devices.filter(function (x) { return x.id === id })[0]
+                    var newPoint = { deviceId: device.id, lat: device.coordinates.latitude, lng: device.coordinates.longitude, prob: prob, date: new Date(date) };
+                    this.setState({
+                        heatmapPoints: [...this.state.heatmapPoints, newPoint]
+                    });
+
+                    this.invokeHandlers(C.probability_method_name, newPoint);
+                });
+
+                newConnection.on(C.update_all_method_name, () => {
+                    this.updateAllDevicesInternal(service);
+                });
+
+                newConnection.on(C.update_method_name, (id) => this.updateDeviceInternal(id, service));
+            }).catch(e => console.log('Devices hub Connection failed: ', e));
+    }
+
+    componentWillUnmount() {
+        if (this.state.hubConnection != null) {
+            this.state.hubConnection.off(C.probability_method_name);
+            this.state.hubConnection.off(C.update_all_method_name);
+            this.state.hubConnection.off(C.update_method_name);
+            console.log('Devices hub Disconnected!');
+        }
+    }
+
+    render() {
+        return (
+            <Context.Provider
+                value={{
+                    devices: this.state.devices,
+                    heatmapPoints: this.state.heatmapPoints,
+
+                    addHandler: this.addHandler,
+                    removeHandler: this.removeHandler,
+
+                    updateDevice: this.updateDevice,
+                    updateAllDevices: this.updateAllDevices,
+                }}
+            >
+                {this.props.children}
+                </Context.Provider>
+            );
+    };
+}

Birdmap.API/Controllers/DevicesController.cs

@@ -131,6 +131,7 @@ namespace Birdmap.API.Controllers
             _logger.LogInformation($"Turning off sensor [{sensorID}] of device [{deviceID}]...");
 
             await _service.OfflinesensorAsync(deviceID, sensorID);
+            await _hubContext.Clients.All.NotifyDeviceUpdatedAsync(deviceID);
 
             return Ok();
         }
@@ -146,6 +147,7 @@ namespace Birdmap.API.Controllers
             _logger.LogInformation($"Turning on sensor [{sensorID}] of device [{deviceID}]...");
 
             await _service.OnlinesensorAsync(deviceID, sensorID);
+            await _hubContext.Clients.All.NotifyDeviceUpdatedAsync(deviceID);
 
             return Ok();
         }

Birdmap.API/Controllers/ServicesController.cs

@@ -1,14 +1,19 @@
 using AutoMapper;
 using Birdmap.API.DTOs;
+using Birdmap.API.Services;
+using Birdmap.API.Services.Hubs;
+using Birdmap.API.Services.Mqtt;
 using Birdmap.BLL.Interfaces;
 using Birdmap.DAL.Entities;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.SignalR;
 using Microsoft.Extensions.Logging;
 using System;
 using System.Collections.Generic;
 using System.Linq;
+using System.Net;
 using System.Net.Http;
 using System.Threading.Tasks;
 
@@ -21,21 +26,34 @@ namespace Birdmap.API.Controllers
     {
         private readonly IServiceService _service;
         private readonly IMapper _mapper;
+        private readonly IMqttClientService _mqttClientService;
+        private readonly IHubContext<ServicesHub, IServicesHubClient> _hubContext;
         private readonly ILogger<ServicesController> _logger;
 
-        public ServicesController(IServiceService service, IMapper mapper, ILogger<ServicesController> logger)
+        public ServicesController(IServiceService service, IMapper mapper, MqttClientServiceProvider mqttClientProvider,
+            IHubContext<ServicesHub, IServicesHubClient> hubContext, ILogger<ServicesController> logger)
         {
             _service = service;
             _mapper = mapper;
+            _mqttClientService = mqttClientProvider.MqttClientService;
+            _hubContext = hubContext;
             _logger = logger;
         }
 
+        [HttpGet("count"), ProducesResponseType(StatusCodes.Status200OK)]
+        public async Task<ActionResult<int>> GetCountAsync()
+        {
+            _logger.LogInformation($"Getting service count from db...");
+
+            return await _service.GetServiceCountAsync() + 1;
+        }
+
         [HttpGet, ProducesResponseType(StatusCodes.Status200OK)]
         public async Task<ActionResult<List<ServiceInfo>>> GetAsync()
         {
             _logger.LogInformation($"Getting all services from db...");
             var serviceInfos = (await _service.GetAllServicesAsync())
-                .Select(s => new ServiceInfo { Service = _mapper.Map<ServiceRequest>(s) });
+                .Select(s => new ServiceInfo { Service = _mapper.Map<ServiceRequest>(s) }).ToList();
 
             var client = new HttpClient();
             foreach (var si in serviceInfos)
@@ -50,11 +68,23 @@ namespace Birdmap.API.Controllers
                 catch (Exception ex)
                 {
                     _logger.LogWarning($"Requesting service [{si.Service.Name}] faulted.");
-                    si.StatusCode = System.Net.HttpStatusCode.ServiceUnavailable;
+                    si.StatusCode = HttpStatusCode.ServiceUnavailable;
                     si.Response = ex.ToString();
                 }
             }
 
+            serviceInfos.Add(new()
+            {
+                Service = new()
+                {
+                    Id = 0,
+                    Name = "Mqtt Client Service",
+                    Uri = "localhost",
+                },
+                Response = $"IsConnected: {_mqttClientService.IsConnected}",
+                StatusCode = _mqttClientService.IsConnected ? HttpStatusCode.OK : HttpStatusCode.ServiceUnavailable,
+            });
+
             return serviceInfos.ToList();
         }
 
@@ -67,6 +97,7 @@ namespace Birdmap.API.Controllers
                 _mapper.Map<Service>(request));
 
             _logger.LogInformation($"Created service [{created.Id}].");
+            await _hubContext.Clients.All.NotifyUpdatedAsync();
 
             return CreatedAtAction(
                 nameof(GetAsync),
@@ -82,6 +113,7 @@ namespace Birdmap.API.Controllers
             service.IsFromConfig = false;
 
             await _service.UpdateServiceAsync(service);
+            await _hubContext.Clients.All.NotifyUpdatedAsync();
 
             return NoContent();
         }
@@ -93,6 +125,7 @@ namespace Birdmap.API.Controllers
             _logger.LogInformation($"Deleting service [{id}]...");
 
             await _service.DeleteServiceAsync(id);
+            await _hubContext.Clients.All.NotifyUpdatedAsync();
 
             return NoContent();
         }

Birdmap.API/Services/Hubs/DevicesHub.cs

@@ -16,31 +16,16 @@ namespace Birdmap.API.Services.Hubs
 
         public override Task OnConnectedAsync()
         {
-            _logger.LogInformation("Hub Client connected.");
+            _logger.LogInformation("Devices Hub Client connected.");
 
             return base.OnConnectedAsync();
         }
 
         public override Task OnDisconnectedAsync(Exception exception)
         {
-            _logger.LogInformation("Hub Client disconnected.");
+            _logger.LogInformation("Devices Hub Client disconnected.");
 
             return base.OnDisconnectedAsync(exception);
         }
-
-        public Task SendProbabilityAsync(Guid deviceId, DateTime date, double probability)
-        {
-            return Clients.All.NotifyDeviceAsync(deviceId, date, probability);
-        }
-
-        public Task SendDeviceUpdateAsync(Guid deviceId)
-        {
-            return Clients.All.NotifyDeviceUpdatedAsync(deviceId);
-        }
-
-        public Task SendAllUpdatedAsync()
-        {
-            return Clients.All.NotifyAllUpdatedAsync();
-        }
     }
 }

Birdmap.API/Services/Hubs/IServicesHubClient.cs

@@ -0,0 +1,9 @@
+using System.Threading.Tasks;
+
+namespace Birdmap.API.Services.Hubs
+{
+    public interface IServicesHubClient
+    {
+        Task NotifyUpdatedAsync();
+    }
+}

Birdmap.API/Services/Hubs/ServicesHub.cs

@@ -0,0 +1,31 @@
+using Microsoft.AspNetCore.SignalR;
+using Microsoft.Extensions.Logging;
+using System;
+using System.Threading.Tasks;
+
+namespace Birdmap.API.Services.Hubs
+{
+    public class ServicesHub : Hub<IServicesHubClient>
+    {
+        private readonly ILogger<ServicesHub> _logger;
+
+        public ServicesHub(ILogger<ServicesHub> logger)
+        {
+            _logger = logger;
+        }
+
+        public override Task OnConnectedAsync()
+        {
+            _logger.LogInformation("Services Hub Client connected.");
+
+            return base.OnConnectedAsync();
+        }
+
+        public override Task OnDisconnectedAsync(Exception exception)
+        {
+            _logger.LogInformation("Services Hub Client disconnected.");
+
+            return base.OnDisconnectedAsync(exception);
+        }
+    }
+}

Birdmap.API/Services/IMqttClientService.cs

@@ -10,6 +10,6 @@ namespace Birdmap.API.Services
                                           IMqttClientDisconnectedHandler,
                                           IMqttApplicationMessageReceivedHandler
     {
-
+        public bool IsConnected { get; }
     }
 }

Birdmap.API/Services/Mqtt/MqttClientService.cs

@@ -9,7 +9,6 @@ using MQTTnet.Client.Disconnecting;
 using MQTTnet.Client.Options;
 using Newtonsoft.Json;
 using System;
-using System.Collections.Generic;
 using System.Linq;
 using System.Threading;
 using System.Threading.Tasks;
@@ -24,6 +23,8 @@ namespace Birdmap.API.Services.Mqtt
         private readonly IInputService _inputService;
         private readonly IHubContext<DevicesHub, IDevicesHubClient> _hubContext;
 
+        public bool IsConnected => _mqttClient.IsConnected;
+
         public MqttClientService(IMqttClientOptions options, ILogger<MqttClientService> logger, IInputService inputService, IHubContext<DevicesHub, IDevicesHubClient> hubContext)
         {
             _options = options;

Birdmap.API/Startup.cs

@@ -139,6 +139,7 @@ namespace Birdmap.API
                 endpoints.MapHealthChecks("/health");
                 endpoints.MapControllers();
                 endpoints.MapHub<DevicesHub>("/hubs/devices");
+                endpoints.MapHub<ServicesHub>("/hubs/services");
             });
 
             app.UseSpa(spa =>

Birdmap.API/libman.json

@@ -0,0 +1,5 @@
+{
+  "version": "1.0",
+  "defaultProvider": "cdnjs",
+  "libraries": []
+}

Birdmap.API/nlog.config

@@ -20,6 +20,9 @@
 	<target xsi:type="File" name="mqttFile" fileName="${basedir}Log/birdmap-mqtt-${shortdate}.log"
 			layout="${longdate} [${threadname:whenEmpty=${threadid}}] ${uppercase:${level}} ${logger} - ${message} ${exception:format=tostring}" />
 
+	  <target xsi:type="File" name="hubsFile" fileName="${basedir}Log/birdmap-hubs-${shortdate}.log"
+			  layout="${longdate} [${threadname:whenEmpty=${threadid}}] ${uppercase:${level}} ${logger} - ${message} ${exception:format=tostring}" />
+
     <!-- another file log, only own logs. Uses some ASP.NET core renderers -->
     <target xsi:type="File" name="ownFile" fileName="${basedir}Log/birdmap-own-${shortdate}.log"
             layout="${longdate} [${threadname:whenEmpty=${threadid}}] ${uppercase:${level}} ${callsite} - ${message} ${exception:format=tostring} (url: ${aspnet-request-url})(action: ${aspnet-mvc-action})" />
@@ -33,6 +36,9 @@
     <!--Skip non-critical Mqtt logs-->
 	<logger name="*.*Mqtt*.*" minlevel="Trace" maxlevel="Warning" writeTo="mqttFile" final="true"/>
 
+	<!--Skip non-critical Hub logs-->
+	<logger name="*.*Hubs*.*" minlevel="Trace" maxlevel="Warning" writeTo="hubsFile" final="true"/>
+
     <!--Skip non-critical Microsoft logs-->
     <logger name="Microsoft.*" maxlevel="Info" final="true" />
 

Birdmap.BLL/Interfaces/IServiceService.cs

@@ -6,6 +6,7 @@ namespace Birdmap.BLL.Interfaces
 {
     public interface IServiceService
     {
+        Task<int> GetServiceCountAsync();
         Task<List<Service>> GetAllServicesAsync();
         Task<Service> GetServiceAsync(int id);
         Task<Service> CreateServiceAsync(Service service);

Birdmap.BLL/Services/DummyDeviceAndInputService.cs

@@ -10,18 +10,18 @@ namespace Birdmap.BLL.Services
 {
     public class DummyDeviceAndInputService : DeviceAndInputServiceBase
     {
-        private const int numberOfDevices = 50;
+        private const int numberOfDevices = 15;
 
         private const double centerLong = 21.469640;
         private const double centerLat = 48.275939;
         private const double radius = 0.001;
 
-        private static readonly Random Rand = new Random();
+        private static readonly Random Rand = new();
 
-        private static readonly Lazy<ICollection<Device>> Devices = new Lazy<ICollection<Device>>(GenerateDevices);
+        private static readonly Lazy<ICollection<Device>> Devices = new(GenerateDevices);
 
-        private static readonly Dictionary<Guid, InputSingeResponse> TagToInput = new Dictionary<Guid, InputSingeResponse>();
-        private static readonly object InputLock = new object();
+        private static readonly Dictionary<Guid, InputSingeResponse> TagToInput = new();
+        private static readonly object InputLock = new();
 
         private static ListOfDevices GenerateDevices()
         {
@@ -43,20 +43,20 @@ namespace Birdmap.BLL.Services
                 var sensors = new ArrayofSensors();
                 for (int s = 0; s < Rand.Next(1, 6); s++)
                 {
-                    sensors.Add(new Sensor
+                    sensors.Add(new()
                     {
                         Id = Guid.NewGuid(),
                         Status = GetRandomEnum<SensorStatus>(),
                     });
                 }
 
-                devices.Add(new Device
+                devices.Add(new()
                 {
                     Id = Guid.NewGuid(),
                     Sensors = sensors,
                     Status = GetRandomEnum<DeviceStatus>(),
                     Url = "dummyservice.device.url",
-                    Coordinates = new Coordinates
+                    Coordinates = new()
                     {
                         Latitude = GetPlusMinus(centerLat, radius),
                         Longitude = GetPlusMinus(centerLong, radius),
@@ -150,10 +150,10 @@ namespace Birdmap.BLL.Services
             {
                 if (!TagToInput.TryGetValue(tagID, out var value))
                 {
-                    value = new InputSingeResponse
+                    value = new()
                     {
                         Status = "Dummy_OK",
-                        Message = new InputObject
+                        Message = new()
                         {
                             Tag = tagID,
                             Date = DateTime.Now,

Birdmap.BLL/Services/ServiceService.cs

@@ -17,6 +17,11 @@ namespace Birdmap.BLL.Services
             _context = context;
         }
 
+        public Task<int> GetServiceCountAsync()
+        {
+            return _context.Services.CountAsync();
+        }
+
         public async Task<Service> CreateServiceAsync(Service service)
         {
             _context.Services.Add(service);