Merge pull request #2380 from proddy/dev

tidy up dashboard text and alerts
emsesp · Jan 28, 2025 · 9188d03 · 9188d03
2 parents 0ab7eb4 + 3df2d36
commit 9188d03
Show file tree

Hide file tree

Showing 17 changed files with 245 additions and 218 deletions.
diff --git a/interface/package.json b/interface/package.json
@@ -45,9 +45,9 @@
     "@eslint/js": "^9.19.0",
     "@preact/compat": "^18.3.1",
     "@preact/preset-vite": "^2.10.0",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.1",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/formidable": "^3",
-    "@types/node": "^22.10.10",
+    "@types/node": "^22.12.0",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "concurrently": "^9.1.2",
@@ -57,7 +57,7 @@
     "prettier": "^3.4.2",
     "rollup-plugin-visualizer": "^5.14.0",
     "terser": "^5.37.0",
-    "typescript-eslint": "8.21.0",
+    "typescript-eslint": "8.22.0",
     "vite": "^6.0.11",
     "vite-plugin-imagemin": "^0.6.1",
     "vite-tsconfig-paths": "^5.1.4"

diff --git a/interface/src/api/app.ts b/interface/src/api/app.ts
@@ -5,7 +5,7 @@ import type {
   Action,
   Activity,
   CoreData,
-  DashboardItem,
+  DashboardData,
   DeviceData,
   DeviceEntity,
   Entities,
@@ -22,7 +22,7 @@ import type {
 
 // Dashboard
 export const readDashboard = () =>
-  alovaInstance.Get<DashboardItem[]>('/rest/dashboardData', {
+  alovaInstance.Get<DashboardData>('/rest/dashboardData', {
     responseType: 'arraybuffer' // uses msgpack
   });
 

diff --git a/interface/src/app/main/Dashboard.tsx b/interface/src/app/main/Dashboard.tsx
@@ -6,11 +6,11 @@ import { toast } from 'react-toastify';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import EditIcon from '@mui/icons-material/Edit';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import {
   Box,
-  Grid2 as Grid,
   IconButton,
   ToggleButton,
   ToggleButtonGroup,
@@ -58,10 +58,10 @@ const Dashboard = () => {
     error,
     loading
   } = useRequest(readDashboard, {
-    initialData: []
+    initialData: { connected: false, nodes: [] }
   }).onSuccess((event) => {
-    if (event.data.length !== parentNodes) {
-      setParentNodes(event.data.length); // count number of parents/devices
+    if (event.data.nodes.length !== parentNodes) {
+      setParentNodes(event.data.nodes.length); // count number of parents/devices
     }
   });
 
@@ -121,7 +121,7 @@ const Dashboard = () => {
   });
 
   const tree = useTree(
-    { nodes: data },
+    { nodes: data.nodes },
     {
       onChange: undefined // not used but needed
     },
@@ -154,7 +154,7 @@ const Dashboard = () => {
 
   useEffect(() => {
     showAll
-      ? tree.fns.onAddAll(data.map((item: DashboardItem) => item.id)) // expand tree
+      ? tree.fns.onAddAll(data.nodes.map((item: DashboardItem) => item.id)) // expand tree
       : tree.fns.onRemoveAll(); // collapse tree
   }, [parentNodes]);
 
@@ -224,47 +224,22 @@ const Dashboard = () => {
       return <FormLoader onRetry={fetchDashboard} errorMessage={error?.message} />;
     }
 
-    const hasFavEntities = data.filter(
+    if (loading) {
+      return;
+    }
+
+    const hasFavEntities = data.nodes.filter(
       (item: DashboardItem) => item.id <= 90
     ).length;
 
     return (
       <>
-        <Box
-          sx={{
-            backgroundColor: 'black',
-            pt: 1,
-            pl: 2
-          }}
-        >
-          <Grid container spacing={0} justifyContent="flex-start">
-            <Grid size={11}>
-              <Typography mb={2} variant="body1" color="warning">
-                {LL.DASHBOARD_1()}
-              </Typography>
-            </Grid>
-
-            <Grid size={1} alignItems="end">
-              <ToggleButtonGroup
-                color="primary"
-                size="small"
-                value={showAll}
-                exclusive
-                onChange={handleShowAll}
-              >
-                <ToggleButton value={true}>
-                  <UnfoldMoreIcon sx={{ fontSize: 18 }} />
-                </ToggleButton>
-                <ToggleButton value={false}>
-                  <UnfoldLessIcon sx={{ fontSize: 18 }} />
-                </ToggleButton>
-              </ToggleButtonGroup>
-            </Grid>
-          </Grid>
-        </Box>
+        {!data.connected && (
+          <MessageBox mb={2} level="error" message={LL.EMS_BUS_WARNING()} />
+        )}
 
-        {!loading && !hasFavEntities && (
-          <MessageBox my={1} level="info">
+        {data.connected && !hasFavEntities && (
+          <MessageBox mb={2} level="warning">
             <Typography>
               {LL.NO_DATA_1()}&nbsp;
               <Link to="/customizations" style={{ color: 'white' }}>
@@ -280,80 +255,107 @@ const Dashboard = () => {
           </MessageBox>
         )}
 
-        {data.length > 0 && (
-          <Box
-            padding={1}
-            justifyContent="center"
-            flexDirection="column"
-            sx={{
-              borderRadius: 1,
-              border: '1px solid grey'
-            }}
-          >
-            <IconContext.Provider
-              value={{
-                color: 'lightblue',
-                size: '18',
-                style: { verticalAlign: 'middle' }
+        {data.nodes.length > 0 && (
+          <>
+            <ToggleButtonGroup
+              color="primary"
+              size="small"
+              value={showAll}
+              exclusive
+              onChange={handleShowAll}
+            >
+              <Tooltip placement="top" title={LL.ALLVALUES()} arrow>
+                <ToggleButton value={true}>
+                  <UnfoldMoreIcon sx={{ fontSize: 18 }} />
+                </ToggleButton>
+              </Tooltip>
+              <Tooltip placement="top" title={LL.COMPACT()} arrow>
+                <ToggleButton value={false}>
+                  <UnfoldLessIcon sx={{ fontSize: 18 }} />
+                </ToggleButton>
+              </Tooltip>
+            </ToggleButtonGroup>
+            <Tooltip placement="top" title={LL.DASHBOARD_1()} arrow>
+              <HelpOutlineIcon color="primary" sx={{ ml: 1, fontSize: 20 }} />
+            </Tooltip>
+
+            <Box
+              padding={1}
+              justifyContent="center"
+              flexDirection="column"
+              sx={{
+                borderRadius: 1,
+                border: '1px solid grey'
               }}
             >
-              <Table
-                data={{ nodes: data }}
-                theme={dashboard_theme}
-                layout={{ custom: true }}
-                tree={tree}
+              <IconContext.Provider
+                value={{
+                  color: 'lightblue',
+                  size: '18',
+                  style: { verticalAlign: 'middle' }
+                }}
               >
-                {(tableList: DashboardItem[]) => (
-                  <Body>
-                    {tableList.map((di: DashboardItem) => (
-                      <Row
-                        key={di.id}
-                        item={di}
-                        onClick={() => editDashboardValue(di)}
-                      >
-                        {di.id > 99 ? (
-                          <>
-                            <Cell>{showName(di)}</Cell>
-                            <Cell>
-                              <Tooltip
-                                placement="left"
-                                title={formatValue(LL, di.dv?.v, di.dv?.u)}
-                                arrow
-                              >
-                                <span>{formatValue(LL, di.dv?.v, di.dv?.u)}</span>
-                              </Tooltip>
-                            </Cell>
+                <Table
+                  data={{ nodes: data.nodes }}
+                  theme={dashboard_theme}
+                  layout={{ custom: true }}
+                  tree={tree}
+                >
+                  {(tableList: DashboardItem[]) => (
+                    <Body>
+                      {tableList.map((di: DashboardItem) => (
+                        <Row
+                          key={di.id}
+                          item={di}
+                          onClick={() => editDashboardValue(di)}
+                        >
+                          {di.id > 99 ? (
+                            <>
+                              <Cell>{showName(di)}</Cell>
+                              <Cell>
+                                <Tooltip
+                                  placement="left"
+                                  title={formatValue(LL, di.dv?.v, di.dv?.u)}
+                                  arrow
+                                >
+                                  <span>{formatValue(LL, di.dv?.v, di.dv?.u)}</span>
+                                </Tooltip>
+                              </Cell>
 
-                            <Cell>
-                              {me.admin &&
-                                di.dv?.c &&
-                                !hasMask(di.dv.id, DeviceEntityMask.DV_READONLY) && (
-                                  <IconButton
-                                    size="small"
-                                    onClick={() => editDashboardValue(di)}
-                                  >
-                                    <EditIcon
-                                      color="primary"
-                                      sx={{ fontSize: 16 }}
-                                    />
-                                  </IconButton>
-                                )}
-                            </Cell>
-                          </>
-                        ) : (
-                          <>
-                            <CellTree item={di}>{showName(di)}</CellTree>
-                            <Cell />
-                            <Cell />
-                          </>
-                        )}
-                      </Row>
-                    ))}
-                  </Body>
-                )}
-              </Table>
-            </IconContext.Provider>
-          </Box>
+                              <Cell>
+                                {me.admin &&
+                                  di.dv?.c &&
+                                  !hasMask(
+                                    di.dv.id,
+                                    DeviceEntityMask.DV_READONLY
+                                  ) && (
+                                    <IconButton
+                                      size="small"
+                                      onClick={() => editDashboardValue(di)}
+                                    >
+                                      <EditIcon
+                                        color="primary"
+                                        sx={{ fontSize: 16 }}
+                                      />
+                                    </IconButton>
+                                  )}
+                              </Cell>
+                            </>
+                          ) : (
+                            <>
+                              <CellTree item={di}>{showName(di)}</CellTree>
+                              <Cell />
+                              <Cell />
+                            </>
+                          )}
+                        </Row>
+                      ))}
+                    </Body>
+                  )}
+                </Table>
+              </IconContext.Provider>
+            </Box>
+          </>
         )}
       </>
     );

diff --git a/interface/src/app/main/types.ts b/interface/src/app/main/types.ts
@@ -124,6 +124,11 @@ export interface DashboardItem {
   nodes?: DashboardItem[]; // children nodes, optional
 }
 
+export interface DashboardData {
+  connected: boolean; // true if connected to EMS bus
+  nodes: DashboardItem[];
+}
+
 export interface DeviceValue {
   id: string; // index, contains mask+name
   v?: unknown; // value, Number, String or Boolean - can be undefined

diff --git a/interface/src/i18n/cz/index.ts b/interface/src/i18n/cz/index.ts
@@ -344,7 +344,7 @@ const cz: Translation = {
   DUPLICATE: 'Duplikát',
   UPGRADE: 'Upgrade',
   DASHBOARD_1: 'All EMS entities that are active and marked as Favorite, plus all Custom Entities, Schedules and external Sensors data are displayed below.', // TODO translate
-  NO_DATA_1: 'No favourite EMS entities found. Use the', // TODO translate
+  NO_DATA_1: 'No favourite EMS entities found yet. Use the', // TODO translate
   NO_DATA_2: 'module to mark them.', // TODO translate
   NO_DATA_3: 'To see all available entities go to' // TODO translate
 };

diff --git a/interface/src/i18n/en/index.ts b/interface/src/i18n/en/index.ts
@@ -344,7 +344,7 @@ const en: Translation = {
   DEVELOPER_MODE: 'Developer Mode',
   DUPLICATE: 'Duplicate',
   UPGRADE: 'Upgrade',
-  NO_DATA_1: 'No favourite EMS entities found! Use the',
+  NO_DATA_1: 'No favourite EMS entities found yet. Use the',
   NO_DATA_2: 'module to mark them.',
   NO_DATA_3: 'To see all available entities go to'
 };

diff --git a/interface/src/i18n/fr/index.ts b/interface/src/i18n/fr/index.ts
@@ -344,7 +344,7 @@ const fr: Translation = {
   DUPLICATE: 'Duplicate', // TODO translate
   UPGRADE: 'Upgrade', // TODO translate
   DASHBOARD_1: 'All EMS entities that are active and marked as Favorite, plus all Custom Entities, Schedules and external Sensors data are displayed below.', // TODO translate
-  NO_DATA_1: 'No favourite EMS entities found. Use the', // TODO translate
+  NO_DATA_1: 'No favourite EMS entities found yet. Use the', // TODO translate
   NO_DATA_2: 'module to mark them.', // TODO translate
   NO_DATA_3: 'To see all available entities go to' // TODO translate
 };

diff --git a/interface/src/i18n/it/index.ts b/interface/src/i18n/it/index.ts
@@ -344,7 +344,7 @@ const it: Translation = {
   DUPLICATE: 'Duplicate', // TODO translate
   UPGRADE: 'Upgrade', // TODO translate
   DASHBOARD_1: 'All EMS entities that are active and marked as Favorite, plus all Custom Entities, Schedules and external Sensors data are displayed below.', // TODO translate
-  NO_DATA_1: 'No favourite EMS entities found. Use the', // TODO translate
+  NO_DATA_1: 'No favourite EMS entities found yet. Use the', // TODO translate
   NO_DATA_2: 'module to mark them.', // TODO translate
   NO_DATA_3: 'To see all available entities go to' // TODO translate
 };

diff --git a/interface/src/i18n/nl/index.ts b/interface/src/i18n/nl/index.ts
@@ -344,7 +344,7 @@ const nl: Translation = {
   DUPLICATE: 'Duplicaat',
   UPGRADE: 'Upgraden',
   DASHBOARD_1: 'All EMS entities that are active and marked as Favorite, plus all Custom Entities, Schedules and external Sensors data are displayed below.', // TODO translate
-  NO_DATA_1: 'No favourite EMS entities found. Use the', // TODO translate
+  NO_DATA_1: 'No favourite EMS entities found yet. Use the', // TODO translate
   NO_DATA_2: 'module to mark them.', // TODO translate
   NO_DATA_3: 'To see all available entities go to' // TODO translate
 };

diff --git a/interface/src/i18n/no/index.ts b/interface/src/i18n/no/index.ts
@@ -344,7 +344,7 @@ const no: Translation = {
   DUPLICATE: 'Duplicate', // TODO translate
   UPGRADE: 'Upgrade', // TODO translate
   DASHBOARD_1: 'All EMS entities that are active and marked as Favorite, plus all Custom Entities, Schedules and external Sensors data are displayed below.', // TODO translate
-  NO_DATA_1: 'No favourite EMS entities found. Use the', // TODO translate
+  NO_DATA_1: 'No favourite EMS entities found yet. Use the', // TODO translate
   NO_DATA_2: 'module to mark them.', // TODO translate
   NO_DATA_3: 'To see all available entities go to' // TODO translate
 };

diff --git a/interface/src/i18n/pl/index.ts b/interface/src/i18n/pl/index.ts
@@ -344,7 +344,7 @@ const pl: BaseTranslation = {
   DUPLICATE: 'Duplicate', // TODO translate
   UPGRADE: 'Upgrade', // TODO translate
   DASHBOARD_1: 'All EMS entities that are active and marked as Favorite, plus all Custom Entities, Schedules and external Sensors data are displayed below.', // TODO translate
-  NO_DATA_1: 'No favourite EMS entities found. Use the', // TODO translate
+  NO_DATA_1: 'No favourite EMS entities found yet. Use the', // TODO translate
   NO_DATA_2: 'module to mark them.', // TODO translate
   NO_DATA_3: 'To see all available entities go to' // TODO translate
 };