Merge pull request #12 from SiriDB/development

Added error to failed jobs & added realtime config option
SiriDB · Dec 9, 2021 · 3788cb9 · 3788cb9
2 parents f0ab92e + 74d2e3d
commit 3788cb9
Show file tree

Hide file tree

Showing 17 changed files with 894 additions and 203 deletions.
diff --git a/app/.env b/app/.env
@@ -1 +1 @@
-REACT_APP_ENODO_HUB_URI="http://localhost:8001"
+REACT_APP_ENODO_HUB_URI="http://localhost"
diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.0",
@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.2.2",
+    "chroma-js": "^2.1.2",
     "create-react-app": "^4.0.3",
     "moment": "2.29.1",
     "react": "^16.14.0",

diff --git a/app/src/App.js b/app/src/App.js
@@ -3,6 +3,7 @@ import DashboardIcon from '@material-ui/icons/Dashboard';
 import Divider from '@material-ui/core/Divider';
 import DnsIcon from '@material-ui/icons/Dns';
 import Drawer from '@material-ui/core/Drawer';
+import LabelIcon from '@material-ui/icons/Label';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -19,6 +20,7 @@ import './App.css';
 import * as ROUTES from './constants/routes';
 import DashboardPage from './pages/Dashboard';
 import FailedJobsPage from "./pages/FailedJobs";
+import LabelsPage from './pages/Labels';
 import NetworkPage from "./pages/Network";
 import OutputStreamsPage from "./pages/OutputStreams";
 import SettingsPage from "./pages/Settings";
@@ -90,6 +92,12 @@ const App = (props) => {
                         <ListItemText primary="" />
                     </ListItem>
                 </NavLink>
+                <NavLink to={ROUTES.LABELS} exact activeClassName="menu-link-selected">
+                    <ListItem button className={classes.leftmenubtn}>
+                        <ListItemIcon><LabelIcon /></ListItemIcon>
+                        <ListItemText primary="" />
+                    </ListItem>
+                </NavLink>
                 <NavLink to={ROUTES.NETWORK} exact activeClassName="menu-link-selected">
                     <ListItem button className={classes.leftmenubtn}>
                         <ListItemIcon><DnsIcon /></ListItemIcon>
@@ -139,6 +147,7 @@ const App = (props) => {
                     <Switch>
                         <Route exact path={ROUTES.LANDING} component={DashboardPage} />
                         <Route exact path={ROUTES.TIME_SERIES} component={TimeSeriesPage} />
+                        <Route exact path={ROUTES.LABELS} component={LabelsPage} />
                         <Route path={ROUTES.NETWORK} component={NetworkPage} />
                         <Route path={ROUTES.OUTPUT_STREAMS} component={OutputStreamsPage} />
                         <Route path={ROUTES.SETTINGS} component={SettingsPage} />

diff --git a/app/src/components/BasicPageLayout/index.js b/app/src/components/BasicPageLayout/index.js
@@ -14,9 +14,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import { socket } from '../../store';
 
 const useStyles = makeStyles(theme => ({
-    leftmenubtn: {
-        marginLeft: theme.spacing(2)
-    },
     toolbar: theme.mixins.toolbar,
     sidebar: {
         width: 350,
@@ -32,7 +29,7 @@ const useStyles = makeStyles(theme => ({
     }
 }));
 
-const BasicPageLayout = ({ title, buttonAction, buttonText, hideJobDrawer, children }) => {
+const BasicPageLayout = ({ title, buttonAction, buttonText, hideJobDrawer, titleButton, children }) => {
     const classes = useStyles();
 
     const [stats, setStats] = useState(null);
@@ -62,18 +59,25 @@ const BasicPageLayout = ({ title, buttonAction, buttonText, hideJobDrawer, child
             <Grid item style={{ flex: 1 }}>
                 <Grid container direction='column' spacing={2} >
                     <Grid item>
-                        <div>
-                            <div style={{ float: "left" }}>
-                                <Typography variant='h4' gutterBottom>{title}</Typography>
-                            </div>
-                            <div style={{ float: "right" }}>
+                        <Grid container justify='space-between'>
+                            <Grid item>
+                                <Grid container spacing={1} alignItems='center'>
+                                    <Grid item>
+                                        <Typography variant='h4'>{title}</Typography>
+                                    </Grid>
+                                    {titleButton ?
+                                        <Grid item>
+                                            {titleButton}
+                                        </Grid> : null}
+                                </Grid>
+                            </Grid>
+                            <Grid>
                                 {buttonAction && buttonText &&
                                     <Button variant='contained' color='primary' onClick={buttonAction}>
                                         {buttonText}
                                     </Button>}
-                            </div>
-                            <div style={{ clear: "both" }}></div>
-                        </div>
+                            </Grid>
+                        </Grid>
                     </Grid>
                     <Grid item>
                         {children}
@@ -115,7 +119,7 @@ const BasicPageLayout = ({ title, buttonAction, buttonText, hideJobDrawer, child
                             <Typography>
                                 {`Currently there are ${stats ? stats.no_active_jobs : 0} jobs being processed by a worker.`}
                             </Typography>
-                            <Divider className={classes.divider}/>
+                            <Divider className={classes.divider} />
                             <Typography variant='h6' gutterBottom>
                                 {'Failed'}
                                 <Badge badgeContent={stats ? stats.no_failed_jobs : null} color="primary" style={{ marginLeft: 12 }}>

diff --git a/app/src/components/FailedJobs/ErrorDialog.js b/app/src/components/FailedJobs/ErrorDialog.js
@@ -0,0 +1,29 @@
+import React from 'react';
+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';
+
+export default function ErrorDialog({open, handleClose, error}) {
+
+  return (
+      <Dialog
+        open={open}
+        onClose={handleClose}
+      >
+        <DialogTitle>{"Error"}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {error}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color='primary'>
+            {'Close'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+  );
+}
diff --git a/app/src/components/Labels/AddLabelDialog.js b/app/src/components/Labels/AddLabelDialog.js
@@ -0,0 +1,22 @@
+import React from "react";
+
+import SerieConfigurator from '../Serie/SerieConfigurator';
+import { socket } from '../../store';
+
+export default function AddLabelDialog({ handleClose }) {
+
+    const onSubmit = (config) => {
+        socket.emit('/api/enodo/labels/create', config, () => {
+            handleClose();
+        });
+    };
+
+    return (
+        <SerieConfigurator
+            title='Add label'
+            onSubmit={onSubmit}
+            onClose={handleClose}
+            dialog='addLabel'
+        />
+    );
+}
diff --git a/app/src/components/Labels/ConfigDialog.js b/app/src/components/Labels/ConfigDialog.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+import SerieConfigurator from '../Serie/SerieConfigurator';
+
+export default function ConfigDialog({ handleClose, label }) {
+
+    return (
+        <SerieConfigurator
+            title='Label configuration'
+            onClose={handleClose}
+            dialog='infoLabel'
+            currentConfig={label}
+        />
+    );
+}
diff --git a/app/src/components/Labels/DeleteLabelDialog.js b/app/src/components/Labels/DeleteLabelDialog.js
@@ -0,0 +1,41 @@
+import React from 'react';
+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 { socket } from '../../store';
+
+export default function DeleteLabelDialog({ open, handleClose, selectedLabel }) {
+
+    const onDelete = () => {
+        const data = { selector: selectedLabel.name };
+        socket.emit('/api/enodo/labels/delete', data, () => {
+            handleClose();
+        });
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+        >
+            <DialogTitle>{'Delete label?'}</DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                    {'Are you sure you want to delete this label? This results in the removal of all related series from Enodo.'}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose}>
+                    {'Cancel'}
+                </Button>
+                <Button onClick={onDelete} color="primary">
+                    {'Confirm'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/app/src/components/Serie/Dialog.js b/app/src/components/Serie/Dialog.js
@@ -15,9 +15,8 @@ const SerieDetails = (props) => {
             maxWidth='lg'
             open={true}
             onClose={closeCb}
-            aria-labelledby="max-width-dialog-title"
         >
-            <DialogTitle id="max-width-dialog-title">Serie Data</DialogTitle>
+            <DialogTitle>{'Series data'}</DialogTitle>
             <DialogContent>
                 {props.children}
             </DialogContent>

diff --git a/app/src/components/Serie/Edit.js b/app/src/components/Serie/Edit.js
@@ -23,7 +23,7 @@ function EditSerie({ close, currentSerie }) {
             }}
             onClose={close}
             dialog='edit'
-            currentSerie={currentSerie}
+            currentConfig={currentSerie}
             socketError={socketError}
         />
     )
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		REACT_APP_ENODO_HUB_URI="http://localhost:8001"
		REACT_APP_ENODO_HUB_URI="http://localhost"