Handled YAML Errors on dashboard

dashboard.yml

@@ -17,7 +17,7 @@ Exposure Time [ms]:
   - widget: slider
     path: devices/cmv12000/computed/exposure_time_ms
     min: 100
-    max: 10000
+    max: *10000
 
   - widget: spacing
     px: 30

frontend/routes/Dashboard.jsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Box,
   Button,
   Dialog,
   DialogActions,
@@ -19,7 +20,10 @@ import { usePromiseGenerator } from '../util/usePromiseGenerator';
 import { NctrlValueWidgets } from '../components/*.jsx';
 import Typography from '@material-ui/core/Typography';
 import { NCTRL_BASE_PATH } from '../util/nctrl';
+import { Player } from '@lottiefiles/react-lottie-player';
 
+const apertus_animation = require('../util/animations/aperture.json');
+const yaml_error = require('../util/animations/error.json');
 export const title = 'Dashboard';
 export const route = '/dashboard';
 export const explanation = `
@@ -35,6 +39,25 @@ const useStyles = makeStyles(theme => ({
     right: 0,
     margin: '50px',
   },
+  error_message: {
+    padding: theme.spacing(2),
+  },
+  error_wrapper: {
+    textAlign: 'left',
+    width: '100%',
+  },
+  error_player: {
+    height: '10px',
+    width: '10px',
+    alignItems: 'center',
+    display: 'flex',
+  },
+  load_player: {
+    height: '10px',
+    width: '10px',
+    alignItems: 'center',
+    display: 'flex',
+  },
   ul: {
     listStyle: 'none',
     padding: 0,
@@ -62,13 +85,13 @@ export function Component(props) {
     }
   }, [file_yml]);
 
-  const parsed = useYaml(yaml) || [];
+  const parsed = useYaml(yaml);
 
   const [rerenderDep, setRerenderDep] = useState(0);
   const rerender = () => setRerenderDep(rerenderDep + 1);
 
   return (
-    <div>
+    <Box>
       {
         <EditDashboard
           current_yml={yaml}
@@ -79,32 +102,62 @@ export function Component(props) {
         />
       }
       <div className={classes.ul}>
-        {Object.keys(parsed).map((heading, i) => {
-          return (
-            <div className={classes.notWide} key={i}>
-              <Typography variant="h6">{heading}:</Typography>
-              <Paper className={classes.paper}>
-                {parsed[heading].map((x, i) => {
-                  const InputWidget =
-                    NctrlValueWidgets[
-                      `NctrlValue${x.widget.replace(/^(.)/, v => v.toUpperCase())}`
-                    ];
-                  return (
-                    <InputWidget
-                      key={i}
-                      rerender={rerender}
-                      rerenderDep={rerenderDep}
-                      {...x}
-                      path={`${NCTRL_BASE_PATH}${x.path}`}
-                    />
-                  );
-                })}
-              </Paper>
-            </div>
-          );
-        })}
+        {!parsed ? (
+          <Player
+            src={apertus_animation}
+            autoplay={true}
+            loop={true}
+            controls={false}
+            style={{ height: '500px', width: '500px', alignItems: 'center', display: 'flex' }}
+            speed={3}
+          />
+        ) : parsed.error_message ? (
+          <div className={classes.error_wrapper}>
+            <Player
+              src={yaml_error}
+              autoplay={true}
+              loop={true}
+              controls={false}
+              style={{ height: '200px', width: '200px', alignItems: 'center', display: 'flex' }}
+            />
+            <Typography color="error" className={classes.error_message}>
+              An Error has Occured : <br />
+              <br />
+              <b>Name</b> : {parsed.error_name} <br />
+              <br />
+              <b>Message</b> : {parsed.error_message} <br />
+              <br />
+              <b>Stack</b> : {parsed.error_stack}
+            </Typography>
+          </div>
+        ) : (
+          Object.keys(parsed).map((heading, i) => {
+            return (
+              <div className={classes.notWide} key={i}>
+                <Typography variant="h6">{heading}:</Typography>
+                <Paper className={classes.paper}>
+                  {parsed[heading].map((x, i) => {
+                    const InputWidget =
+                      NctrlValueWidgets[
+                        `NctrlValue${x.widget.replace(/^(.)/, v => v.toUpperCase())}`
+                      ];
+                    return (
+                      <InputWidget
+                        key={i}
+                        rerender={rerender}
+                        rerenderDep={rerenderDep}
+                        {...x}
+                        path={`${NCTRL_BASE_PATH}${x.path}`}
+                      />
+                    );
+                  })}
+                </Paper>
+              </div>
+            );
+          })
+        )}
       </div>
-    </div>
+    </Box>
   );
 }
 
@@ -166,11 +219,20 @@ function EditDashboard({ current_yml: currentYaml, setYaml }) {
 function useYaml(yamlString) {
   const [deserialized, setDeserialized] = useState(null);
   useEffect(() => {
-    setDeserialized(safeLoad(yamlString));
+    try {
+      setDeserialized(safeLoad(yamlString));
+    } catch (error) {
+      console.log(error);
+      return setDeserialized({
+        error_name: error.name,
+        error_message: error.message,
+        error_stack: error.stack,
+      });
+    }
   }, [yamlString]);
   return deserialized;
 }
 
 function saveYaml(yamlString) {
   Fs.of(YAML_PATH).upload(yamlString);
-}
+}

frontend/util/animations/error.json

@@ -0,0 +1 @@
+{"v":"5.1.5","fr":29.9700012207031,"ip":0,"op":42.0000017106951,"w":32,"h":32,"nm":"System-states-Sin conexión","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":3,"ty":4,"nm":"! contornos","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[16,16,0],"ix":2},"a":{"a":0,"k":[8.25,8.25,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.847,0.847,0.667],"y":[1,1,1]},"o":{"x":[1,1,0.333],"y":[0,0,0]},"n":["0p847_1_1_0","0p847_1_1_0","0p667_1_0p333_0"],"t":0,"s":[100,100,100],"e":[130,130,100]},{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0.127,0.127,0.333],"y":[0,0,0]},"n":["0_1_0p127_0","0_1_0p127_0","0p667_1_0p333_0"],"t":21,"s":[130,130,100],"e":[100,100,100]},{"t":42.0000017106951}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.442,0],[0,-0.443],[-0.442,0],[0,0.441]],"o":[[-0.442,0],[0,0.441],[0.442,0],[0,-0.443]],"v":[[0,-0.8],[-0.8,0],[0,0.8],[0.8,0]],"c":true},"ix":2},"nm":"Trazado 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Relleno 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[8.25,12.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformar"}],"nm":"Grupo 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.221,0],[0,0.221],[0,0],[0.221,0],[0,-0.221],[0,0]],"o":[[0.221,0],[0,0],[0,-0.221],[-0.221,0],[0,0],[0,0.221]],"v":[[0,2.544],[0.4,2.144],[0.4,-2.144],[0,-2.544],[-0.4,-2.144],[-0.4,2.144]],"c":true},"ix":2},"nm":"Trazado 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Relleno 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[8.25,7.194],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformar"}],"nm":"Grupo 2","np":2,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-4.416],[-4.416,0],[0,4.416],[4.416,0]],"o":[[0,4.416],[4.416,0],[0,-4.416],[-4.416,0]],"v":[[-8,0],[0,8],[8,0],[0,-8]],"c":true},"ix":2},"nm":"Trazado 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.987999949736,0.172999991623,0.340999977261,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Relleno 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[8.25,8.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformar"}],"nm":"Grupo 3","np":2,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3597.00014650881,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Sombra contornos","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":8.4,"s":[100],"e":[0]},{"t":23.8000009693939}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[16,16,0],"ix":2},"a":{"a":0,"k":[8.25,8.25,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.847,0.847,0.667],"y":[1,1,1]},"o":{"x":[1,1,0.333],"y":[0,0,0]},"n":["0p847_1_1_0","0p847_1_1_0","0p667_1_0p333_0"],"t":0,"s":[100,100,100],"e":[180,180,100]},{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0.127,0.127,0.333],"y":[0,0,0]},"n":["0_1_0p127_0","0_1_0p127_0","0p667_1_0p333_0"],"t":21,"s":[180,180,100],"e":[100,100,100]},{"t":42.0000017106951}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-4.416],[-4.416,0],[0,4.416],[4.416,0]],"o":[[0,4.416],[4.416,0],[0,-4.416],[-4.416,0]],"v":[[-8,0],[0,8],[8,0],[0,-8]],"c":true},"ix":2},"nm":"Trazado 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.987999949736,0.172999991623,0.340999977261,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Relleno 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[8.25,8.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformar"}],"nm":"Grupo 3","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3597.00014650881,"st":0,"bm":0}],"markers":[]}

package.json

@@ -14,6 +14,7 @@
     "last 10 Firefox versions"
   ],
   "dependencies": {
+    "@lottiefiles/react-lottie-player": "^3.1.2",
     "express": "~4.17.1",
     "socketio": "^1.0.0"
   },

yarn.lock

@@ -706,6 +706,13 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
   integrity sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==
 
+"@lottiefiles/react-lottie-player@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@lottiefiles/react-lottie-player/-/react-lottie-player-3.1.2.tgz#077e581ffa0469d6499bf9dae21b758334143c01"
+  integrity sha512-u8ApmkpV4bpiQ2hqHyZGy9mmsTKxFvrQBgIJC1epPjs8NdYuAyN//33UXMFzddmvmrVCMzM4WdJb8sPoN+bIIg==
+  dependencies:
+    lottie-web "^5.7.8"
+
 "@material-ui/core@^4.8.0":
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.8.0.tgz#8fb4f4df2b35e3e781b1eec17d4aaf388edf3099"
@@ -3577,6 +3584,11 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-web@^5.7.8:
+  version "5.7.8"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.7.8.tgz#c7a2e42983bcb42093590a03ccdde8741d3f960e"
+  integrity sha512-VxKCZk33GwZac6mVHvT3grUFR/zrMsW85M7vxQPrgpJOP2IhcnjMbuD0h7muBkXgw84K9KmGulmcyzvhpzSMAg==
+
 magic-string@^0.22.4:
   version "0.22.5"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"