Merge pull request #2382 from proddy/dev

remove flash from web dashboard, add tooltip component
emsesp · Jan 29, 2025 · aff3ca3 · aff3ca3
2 parents bfff842 + b723d09
commit aff3ca3
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 93 deletions.
diff --git a/interface/package.json b/interface/package.json
@@ -24,8 +24,8 @@
     "@alova/adapter-xhr": "2.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.4.1",
-    "@mui/material": "^6.4.1",
+    "@mui/icons-material": "^6.4.2",
+    "@mui/material": "^6.4.2",
     "@table-library/react-table-library": "4.1.7",
     "alova": "3.2.8",
     "async-validator": "^4.2.5",

diff --git a/interface/src/app/main/Dashboard.tsx b/interface/src/app/main/Dashboard.tsx
@@ -14,15 +14,20 @@ import {
   IconButton,
   ToggleButton,
   ToggleButtonGroup,
-  Tooltip,
   Typography
 } from '@mui/material';
 
 import { Body, Cell, Row, Table } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
 import { CellTree, useTree } from '@table-library/react-table-library/tree';
 import { useRequest } from 'alova/client';
-import { FormLoader, MessageBox, SectionContent, useLayoutTitle } from 'components';
+import {
+  ButtonTooltip,
+  FormLoader,
+  MessageBox,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import { useInterval, usePersistState } from 'utils';
@@ -55,8 +60,7 @@ const Dashboard = () => {
   const {
     data,
     send: fetchDashboard,
-    error,
-    loading
+    error
   } = useRequest(readDashboard, {
     initialData: { connected: false, nodes: [] }
   }).onSuccess((event) => {
@@ -224,10 +228,6 @@ const Dashboard = () => {
       return <FormLoader onRetry={fetchDashboard} errorMessage={error?.message} />;
     }
 
-    if (loading) {
-      return;
-    }
-
     const hasFavEntities = data.nodes.filter(
       (item: DashboardItem) => item.id <= 90
     ).length;
@@ -264,20 +264,20 @@ const Dashboard = () => {
               exclusive
               onChange={handleShowAll}
             >
-              <Tooltip placement="top" title={LL.ALLVALUES()} arrow>
+              <ButtonTooltip title={LL.ALLVALUES()} arrow>
                 <ToggleButton value={true}>
                   <UnfoldMoreIcon sx={{ fontSize: 18 }} />
                 </ToggleButton>
-              </Tooltip>
-              <Tooltip placement="top" title={LL.COMPACT()} arrow>
+              </ButtonTooltip>
+              <ButtonTooltip title={LL.COMPACT()} arrow>
                 <ToggleButton value={false}>
                   <UnfoldLessIcon sx={{ fontSize: 18 }} />
                 </ToggleButton>
-              </Tooltip>
+              </ButtonTooltip>
             </ToggleButtonGroup>
-            <Tooltip placement="top" title={LL.DASHBOARD_1()} arrow>
+            <ButtonTooltip title={LL.DASHBOARD_1()} arrow>
               <HelpOutlineIcon color="primary" sx={{ ml: 1, fontSize: 20 }} />
-            </Tooltip>
+            </ButtonTooltip>
 
             <Box
               padding={1}
@@ -313,13 +313,11 @@ const Dashboard = () => {
                             <>
                               <Cell>{showName(di)}</Cell>
                               <Cell>
-                                <Tooltip
-                                  placement="left"
+                                <ButtonTooltip
                                   title={formatValue(LL, di.dv?.v, di.dv?.u)}
-                                  arrow
                                 >
                                   <span>{formatValue(LL, di.dv?.v, di.dv?.u)}</span>
-                                </Tooltip>
+                                </ButtonTooltip>
                               </Cell>
 
                               <Cell>

diff --git a/interface/src/app/main/Devices.tsx b/interface/src/app/main/Devices.tsx
@@ -35,11 +35,7 @@ import {
   List,
   ListItem,
   ListItemText,
-  Tooltip,
-  type TooltipProps,
-  Typography,
-  styled,
-  tooltipClasses
+  Typography
 } from '@mui/material';
 
 import { useRowSelect } from '@table-library/react-table-library/select';
@@ -57,7 +53,12 @@ import { useTheme } from '@table-library/react-table-library/theme';
 import type { Action, State } from '@table-library/react-table-library/types/common';
 import { dialogStyle } from 'CustomTheme';
 import { useRequest } from 'alova/client';
-import { MessageBox, SectionContent, useLayoutTitle } from 'components';
+import {
+  ButtonTooltip,
+  MessageBox,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import { useInterval } from 'utils';
@@ -221,20 +222,6 @@ const Devices = () => {
     }
   ]);
 
-  const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
-    <Tooltip {...props} arrow classes={{ popper: className }} />
-  ))(({ theme }) => ({
-    [`& .${tooltipClasses.arrow}`]: {
-      color: theme.palette.success.main
-    },
-    [`& .${tooltipClasses.tooltip}`]: {
-      backgroundColor: theme.palette.success.main,
-      color: 'rgba(0, 0, 0, 0.87)',
-      boxShadow: theme.shadows[1],
-      fontSize: 10
-    }
-  }));
-
   const getSortIcon = (state: State, sortKey: unknown) => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;

diff --git a/interface/src/components/ButtonTooltip.tsx b/interface/src/components/ButtonTooltip.tsx
@@ -0,0 +1,17 @@
+import { Tooltip, type TooltipProps, styled, tooltipClasses } from '@mui/material';
+
+export const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} placement="top" arrow classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.palette.success.main
+  },
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.success.main,
+    color: 'rgba(0, 0, 0, 0.87)',
+    boxShadow: theme.shadows[1],
+    fontSize: 10
+  }
+}));
+
+export default ButtonTooltip;
diff --git a/interface/src/components/index.ts b/interface/src/components/index.ts
@@ -7,3 +7,4 @@ export { default as SectionContent } from './SectionContent';
 export { default as ButtonRow } from './ButtonRow';
 export { default as MessageBox } from './MessageBox';
 export { default as BlockNavigation } from './routing/BlockNavigation';
+export { default as ButtonTooltip } from './ButtonTooltip';
diff --git a/interface/yarn.lock b/interface/yarn.lock
@@ -783,38 +783,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/core-downloads-tracker@npm:^6.4.1":
-  version: 6.4.1
-  resolution: "@mui/core-downloads-tracker@npm:6.4.1"
-  checksum: 10c0/5c35592eecb6b9b64b23003975a8ce20fadb9e9b712a78dd552b5ea835d06e8e4d7b7cb84f471f5658b5285de317a860b40597ad3c5e494e84f0ae0daf35fd6b
+"@mui/core-downloads-tracker@npm:^6.4.2":
+  version: 6.4.2
+  resolution: "@mui/core-downloads-tracker@npm:6.4.2"
+  checksum: 10c0/7df1784d2b79fc90b808b0f02c1f2f2f5ab58f7b4967c11703571202a5ab0cf9ebc20708d2c6c7b09c3bf6d03669ffa32ad7e47246439fbe2642f51a85744069
   languageName: node
   linkType: hard
 
-"@mui/icons-material@npm:^6.4.1":
-  version: 6.4.1
-  resolution: "@mui/icons-material@npm:6.4.1"
+"@mui/icons-material@npm:^6.4.2":
+  version: 6.4.2
+  resolution: "@mui/icons-material@npm:6.4.2"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
   peerDependencies:
-    "@mui/material": ^6.4.1
+    "@mui/material": ^6.4.2
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
     react: ^17.0.0 || ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/f551aea11f0c3a6ff0336333e1cf28b69d7965e5984643067e5f8563eabf1434dee910c9b4beb530f785f191b0ec14520d9c41fd8ee6649f4f8d26f831f02ba8
+  checksum: 10c0/b182f0ba58fd400852a4b7e3497f0ad5e6d3051f7a6d1b442e823d04c14f3e1d65958bfe41782573622cb77c4628078fd1f30d262642597c6aa2dca95e1554d7
   languageName: node
   linkType: hard
 
-"@mui/material@npm:^6.4.1":
-  version: 6.4.1
-  resolution: "@mui/material@npm:6.4.1"
+"@mui/material@npm:^6.4.2":
+  version: 6.4.2
+  resolution: "@mui/material@npm:6.4.2"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
-    "@mui/core-downloads-tracker": "npm:^6.4.1"
-    "@mui/system": "npm:^6.4.1"
+    "@mui/core-downloads-tracker": "npm:^6.4.2"
+    "@mui/system": "npm:^6.4.2"
     "@mui/types": "npm:^7.2.21"
-    "@mui/utils": "npm:^6.4.1"
+    "@mui/utils": "npm:^6.4.2"
     "@popperjs/core": "npm:^2.11.8"
     "@types/react-transition-group": "npm:^4.4.12"
     clsx: "npm:^2.1.1"
@@ -825,7 +825,7 @@ __metadata:
   peerDependencies:
     "@emotion/react": ^11.5.0
     "@emotion/styled": ^11.3.0
-    "@mui/material-pigment-css": ^6.4.1
+    "@mui/material-pigment-css": ^6.4.2
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
     react: ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -838,30 +838,30 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 10c0/c5ad8ab4339e145cac815cd9fdd9c909d5e2e5edf4997b8afe5edc320f3a020ddb857b5939f6a4453a34d996e3f334804c3858c5dc5f0bfede087e7d6b5e574e
+  checksum: 10c0/e77604a7f83a5f8526077a9b7394e644d919dee5661f676d8b60ec6a7b9ae6a11eb5cf6656e9383d45467b7eb8e6d7e559f942df494f0bec908ff018874b97ae
   languageName: node
   linkType: hard
 
-"@mui/private-theming@npm:^6.4.1":
-  version: 6.4.1
-  resolution: "@mui/private-theming@npm:6.4.1"
+"@mui/private-theming@npm:^6.4.2":
+  version: 6.4.2
+  resolution: "@mui/private-theming@npm:6.4.2"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
-    "@mui/utils": "npm:^6.4.1"
+    "@mui/utils": "npm:^6.4.2"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
     react: ^17.0.0 || ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/5b6936e6dff6218373579f901aabba01eea1953e97a5b4b695736aeebca2d39fc7c2b4d0e54ab064d1ba99a6ffce0d907098791ecec28795f7da25c1bd0d33cb
+  checksum: 10c0/23d5a51a91db3ff6849e3511d95c7726969c888ff67a06b9f1d91a6aa322d37f9376baaf9ac53a21fa1ec200c7be2a7c7eb6205bf3f20042460da19d52a6d83d
   languageName: node
   linkType: hard
 
-"@mui/styled-engine@npm:^6.4.0":
-  version: 6.4.0
-  resolution: "@mui/styled-engine@npm:6.4.0"
+"@mui/styled-engine@npm:^6.4.2":
+  version: 6.4.2
+  resolution: "@mui/styled-engine@npm:6.4.2"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
     "@emotion/cache": "npm:^11.13.5"
@@ -878,19 +878,19 @@ __metadata:
       optional: true
     "@emotion/styled":
       optional: true
-  checksum: 10c0/bff35147ca9ef586679b53786d840e98837f0c1e5bf10a3510d4b2b68c340ae4ab69befe94b69ef25f6846bada5b3c355d25fa3a179d1598499e28c51f28d5d2
+  checksum: 10c0/c60622d11d2f039d48c182674206b6117df8399dfe3f28a7b5ac21bc6f838ee3b6d2c637243c7bb39b067f042097d3ebf87e410c959435d419aaf8f9d78b366c
   languageName: node
   linkType: hard
 
-"@mui/system@npm:^6.4.1":
-  version: 6.4.1
-  resolution: "@mui/system@npm:6.4.1"
+"@mui/system@npm:^6.4.2":
+  version: 6.4.2
+  resolution: "@mui/system@npm:6.4.2"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
-    "@mui/private-theming": "npm:^6.4.1"
-    "@mui/styled-engine": "npm:^6.4.0"
+    "@mui/private-theming": "npm:^6.4.2"
+    "@mui/styled-engine": "npm:^6.4.2"
     "@mui/types": "npm:^7.2.21"
-    "@mui/utils": "npm:^6.4.1"
+    "@mui/utils": "npm:^6.4.2"
     clsx: "npm:^2.1.1"
     csstype: "npm:^3.1.3"
     prop-types: "npm:^15.8.1"
@@ -906,7 +906,7 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 10c0/34d731fb5faf1a6242c9faca5672a4b8722ac97cf5d1fd58cf85cce093cfbd2249ed57dd4c33e8f3b879c611e0fab56bb9e0e8fc1b7c8a49cbe4dd39ba32f98d
+  checksum: 10c0/4a298140eb354b4842bcb00c45da0a8803fd41a2c7fa3ef9fa1218c9931e6ba3bb3fcf44b92e628042b5420ff4979ae089d9327da89d3bfb0c67b38d8a432d64
   languageName: node
   linkType: hard
 
@@ -922,9 +922,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^6.4.1":
-  version: 6.4.1
-  resolution: "@mui/utils@npm:6.4.1"
+"@mui/utils@npm:^6.4.2":
+  version: 6.4.2
+  resolution: "@mui/utils@npm:6.4.2"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
     "@mui/types": "npm:^7.2.21"
@@ -938,7 +938,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/c0cfb8737db7c5709ce35ebdf739c5014914a1344e1b305d13a75b061b970656777eaf01f6fbdb8f209da91c086ab36dd3f5ddc1c94237c5868a383cdd1aad81
+  checksum: 10c0/981a267c87d4ed9e9880dd98e31a16b8ff9e268295d4bcc7d185bf5e19a0d7b0afe14e9e37263acb054694f4520a8c5bf6d8ced6f6df1cbef4e8163d44a52da4
   languageName: node
   linkType: hard
 
@@ -1597,8 +1597,8 @@ __metadata:
     "@emotion/react": "npm:^11.14.0"
     "@emotion/styled": "npm:^11.14.0"
     "@eslint/js": "npm:^9.19.0"
-    "@mui/icons-material": "npm:^6.4.1"
-    "@mui/material": "npm:^6.4.1"
+    "@mui/icons-material": "npm:^6.4.2"
+    "@mui/material": "npm:^6.4.2"
     "@preact/compat": "npm:^18.3.1"
     "@preact/preset-vite": "npm:^2.10.0"
     "@table-library/react-table-library": "npm:4.1.7"

diff --git a/mock-api/package.json b/mock-api/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@msgpack/msgpack": "^2.8.0",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.1",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "formidable": "^3.5.2",
     "itty-router": "^5.0.18",
     "prettier": "^3.4.2"