fix(console): polish speedtest, sidebar, and help chrome

Vonng · claude · Vonng · commit fef8fabeaf8e · 2026-08-06T08:38:16.000+08:00
- Speedtest: status+progress on their own row, wrapping control row
  whose button can no longer overflow; duration accepts seconds or
  minutes (converted to seconds for the backend); size default MiB to
  match the unit list; unique unit-menu DOM ids
- InputUnitMenu renders the selected unit's label instead of its raw
  value, fixing untranslated/raw unit chips everywhere
- Sidebar bucket rows: virtual row pitch now matches the 44px item, so
  selected and hovered highlights no longer overlap; empty states are
  translated
- Help menu drops the previous language's feed immediately when
  switching to an uncached language; &lt;html lang&gt; applies before first
  paint; drive expansion "of"/Login leftovers translated

Dictionary follow-ups ride along: chart-legend prefixes, speedtest
duration units, storage tiering renames (存储分层/分层存储/性能测试),
"LDAP 是否启用", table empty states, and the license page Trademark entry.

Co-Authored-By: Claude Fable 5 &lt;noreply@anthropic.com&gt;
diff --git a/web-app/src/StyleHandler.tsx b/web-app/src/StyleHandler.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Fragment, useEffect } from "react";
+import React, { Fragment, useLayoutEffect } from "react";
 import { GlobalStyles, ThemeHandler } from "mds";
 import { ThemeProvider } from "styled-components";
 import merge from "lodash/merge";
@@ -41,8 +41,9 @@ const StyleHandler = ({ children }: IStyleHandler) => {
   const language = useSelector((state: AppState) => state.system.language);
 
   // Keep <html lang> in sync for accessibility and the zh CSS overrides in
-  // index.css; this wraps both the login page and the console.
-  useEffect(() => {
+  // index.css; this wraps both the login page and the console. Layout effect
+  // so a persisted Chinese preference applies before first paint.
+  useLayoutEffect(() => {
     document.documentElement.lang = language === "zh" ? "zh-CN" : "en";
   }, [language]);
 
diff --git a/web-app/src/i18n/zh.ts b/web-app/src/i18n/zh.ts
@@ -67,12 +67,12 @@ export const zh: Record<string, string> = {
   Watch: "监视",
   Encryption: "加密",
   Events: "事件",
-  Tiering: "分层",
+  Tiering: "存储分层",
   "Site Replication": "站点复制",
   Configuration: "配置",
   Tools: "工具",
   Health: "健康报告",
-  Performance: "吞吐测试",
+  Performance: "性能测试",
   Profile: "性能剖析",
   Inspect: "对象检查",
   "Create Bucket": "创建存储桶",
@@ -109,7 +109,7 @@ export const zh: Record<string, string> = {
   "IAM Policies": "IAM 策略",
   "Key Management Service": "密钥管理服务",
   "Key Management Service Keys": "密钥管理服务密钥",
-  Tiers: "存储层",
+  Tiers: "分层存储",
   "OPENID Configurations": "OPENID 配置",
   "LDAP Configurations": "LDAP 配置",
 
@@ -176,6 +176,28 @@ export const zh: Record<string, string> = {
   "Drives Free Inodes": "磁盘空闲 Inode",
   Upload: "上传",
 
+  // ---- Dashboard: chart legends (instance suffixes like "[server]" are
+  // preserved by translateLegend; only these static prefixes translate) ------
+  "Data Received": "数据接收",
+  "Data Sent": "数据发送",
+  "Internode Bytes Received": "节点间接收字节",
+  "Internode Bytes Sent": "节点间发送字节",
+  "CPU Usage Rate": "CPU 使用率",
+  "Memory Used": "内存使用",
+  "Open FDs": "打开文件描述符",
+  "Read Syscalls": "读系统调用",
+  "Write Syscalls": "写系统调用",
+  "Node RChar": "节点读取字节",
+  "Node WChar": "节点写入字节",
+  "Free Inodes": "空闲 Inode",
+  "Total Usable": "总可用",
+  "Usable Free": "可用空闲",
+  "Used Space": "已用空间",
+
+  // ---- Duration units (speedtest) -----------------------------------------
+  s: "秒",
+  min: "分钟",
+
   // ---- Common buttons and dialogs -----------------------------------------
   Cancel: "取消",
   Confirm: "确认",
diff --git a/web-app/src/i18n/zhScreens.ts b/web-app/src/i18n/zhScreens.ts
@@ -812,7 +812,7 @@ export const zhScreens: Record<string, string> = {
   "Last modified:": "最后修改：",
   "Last Modified:": "最后修改：",
   "Latency Histogram": "延迟直方图",
-  "LDAP Enabled": "LDAP 已启用",
+  "LDAP Enabled": "LDAP 是否启用",
   "Learn more about {link}.": "了解更多关于{link}的内容。",
   "Learn more about Access Keys": "了解访问密钥",
   "Learn more about ACCESS KEYS": "了解访问密钥",
@@ -1679,6 +1679,9 @@ export const zhScreens: Record<string, string> = {
     "你需要额外的权限才能{name}。请联系 SILO 管理员为你授予 {scopes} 权限，以便{name}。",
   "You require additional permissions in order to create a new Tier. Please ask your SILO administrator to grant you {permission} permission in order to create a Tier.":
     "你需要额外权限才能创建新的存储层。请联系 SILO 管理员为你授予 {permission} 权限。",
+  "No buckets yet.": "暂无存储桶。",
+  "No buckets match this filter.": "没有符合筛选条件的存储桶。",
+  Trademark: "商标",
 };
 
 export default zhScreens;
diff --git a/web-app/src/screens/AnonymousAccess/AnonymousAccess.tsx b/web-app/src/screens/AnonymousAccess/AnonymousAccess.tsx
@@ -24,6 +24,7 @@ import { resetSystem } from "../../systemSlice";
 import LoadingComponent from "../../common/LoadingComponent";
 import ObjectManagerButton from "../Console/Common/ObjectManager/ObjectManagerButton";
 import { SiloBrand } from "../../common/SiloBrand";
+import { useT } from "i18n";
 
 const ObjectBrowser = React.lazy(
   () => import("../Console/ObjectBrowser/ObjectBrowser"),
@@ -33,6 +34,7 @@ const ObjectManager = React.lazy(
 );
 
 const AnonymousAccess = () => {
+  const t = useT();
   const dispatch = useAppDispatch();
 
   return (
@@ -63,7 +65,7 @@ const AnonymousAccess = () => {
             }}
             sx={{ color: "white", textTransform: "initial" }}
           >
-            Login
+            {t("Login")}
           </Button>
           <ObjectManagerButton />
         </div>
diff --git a/web-app/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx b/web-app/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx
@@ -65,10 +65,11 @@ const InputUnitMenu = ({
         disabled={disabled}
         type={"button"}
       >
-        {unitSelected}
+        {unitsList.find((unit) => unit.value === unitSelected)?.label ??
+          unitSelected}
       </UnitMenuButton>
       <DropdownSelector
-        id={"upload-main-menu"}
+        id={`${id}-menu`}
         options={unitsList}
         selectedOption={""}
         onSelect={(value) => handleClose(value)}
diff --git a/web-app/src/screens/Console/Dashboard/BasicDashboard/DriveInfoItem.tsx b/web-app/src/screens/Console/Dashboard/BasicDashboard/DriveInfoItem.tsx
@@ -222,7 +222,9 @@ const DriveInfoItem = ({ drive }: ICardProps) => {
               <Box className="percentage-value">
                 {availablePercentage.toFixed(2)}%
               </Box>
-              <Box>of {niceBytes(totalSpace.toString())}</Box>
+              <Box>
+                {t("of")} {niceBytes(totalSpace.toString())}
+              </Box>
             </Box>
           </Box>
         </Box>
diff --git a/web-app/src/screens/Console/HelpMenu.tsx b/web-app/src/screens/Console/HelpMenu.tsx
@@ -208,6 +208,9 @@ const HelpMenu = () => {
       setHelpItemsBlog(cached);
       return;
     }
+    // Nothing cached for this language yet: drop the other language's items
+    // right away so a failed fetch can't leave them on screen.
+    setHelpItemsBlog(SILO_BLOG_FALLBACK);
 
     const abortController = new AbortController();
 
diff --git a/web-app/src/screens/Console/Menu/Listing/BucketsListing.tsx b/web-app/src/screens/Console/Menu/Listing/BucketsListing.tsx
@@ -28,13 +28,15 @@ import BucketListItem from "./BucketListItem";
 import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList";
 import get from "lodash/get";
 import { useTheme } from "styled-components";
+import { useT } from "i18n";
 import BucketFiltering from "./BucketFiltering";
 import { useSelector } from "react-redux";
 import { useLocation } from "react-router-dom";
 
 const ListBuckets = () => {
   const dispatch = useAppDispatch();
   const theme = useTheme();
+  const t = useT();
   const { pathname = "" } = useLocation();
 
   const filterBuckets = useSelector(
@@ -100,7 +102,7 @@ const ListBuckets = () => {
             color: get(theme, "menu.vertical.sectionLabelColor", "#8093AC"),
           }}
         >
-          No buckets yet.
+          {t("No buckets yet.")}
         </Box>
       )}
       {!loadingBuckets && records.length !== 0 && (
@@ -145,7 +147,7 @@ const ListBuckets = () => {
                 <VirtualizedList
                   rowRenderFunction={renderItemLine}
                   totalItems={filteredRecords.length}
-                  defaultHeight={35}
+                  defaultHeight={44}
                 />
               </Box>
             )}
@@ -164,7 +166,7 @@ const ListBuckets = () => {
                     ),
                   }}
                 >
-                  No buckets match this filter.
+                  {t("No buckets match this filter.")}
                 </Box>
               )}
           </Box>
diff --git a/web-app/src/screens/Console/Speedtest/Speedtest.tsx b/web-app/src/screens/Console/Speedtest/Speedtest.tsx
@@ -54,8 +54,9 @@ const Speedtest = () => {
     null,
   );
   const [size, setSize] = useState<string>("64");
-  const [sizeUnit, setSizeUnit] = useState<string>("MB");
+  const [sizeUnit, setSizeUnit] = useState<string>("MiB");
   const [duration, setDuration] = useState<string>("10");
+  const [durationUnit, setDurationUnit] = useState<string>("s");
   const [topDate, setTopDate] = useState<number>(0);
   const [currentValue, setCurrentValue] = useState<number>(0);
   const [totalSeconds, setTotalSeconds] = useState<number>(0);
@@ -73,8 +74,11 @@ const Speedtest = () => {
       const baseUrl = baseLocation.pathname;
 
       const wsProt = wsProtocol(url.protocol);
+      // Minutes are a display convenience; the backend always takes seconds.
+      const durationSeconds =
+        durationUnit === "m" ? String(Number(duration) * 60) : duration;
       const socket = new WebSocket(
-        `${wsProt}://${url.hostname}:${port}${baseUrl}ws/speedtest?&size=${size}${sizeUnit}&duration=${duration}s`,
+        `${wsProt}://${url.hostname}:${port}${baseUrl}ws/speedtest?&size=${size}${sizeUnit}&duration=${durationSeconds}s`,
       );
 
       const baseDate = DateTime.now();
@@ -132,7 +136,7 @@ const Speedtest = () => {
       // reset start status
       setStart(false);
     }
-  }, [size, sizeUnit, start, duration]);
+  }, [size, sizeUnit, start, duration, durationUnit]);
 
   useEffect(() => {
     const actualSeconds = (topDate - currentValue) / 1000;
@@ -177,6 +181,47 @@ const Speedtest = () => {
             resource={CONSOLE_UI_RESOURCE}
           >
             <Box withBorders>
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 16,
+                  marginBottom: 18,
+                }}
+              >
+                <Box
+                  sx={{
+                    fontSize: 13,
+                    whiteSpace: "nowrap",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                  }}
+                >
+                  {start ? (
+                    <Fragment>
+                      {t("Speedtest in progress...")}
+                      <Loader style={{ width: 15, height: 15 }} />
+                    </Fragment>
+                  ) : (
+                    <Fragment>
+                      {currStatus && !start ? (
+                        <b>{t("Speed Test results:")}</b>
+                      ) : (
+                        <b>{t("Performance test")}</b>
+                      )}
+                    </Fragment>
+                  )}
+                </Box>
+                <Box sx={{ flex: 1, minWidth: 120 }}>
+                  <ProgressBarWrapper
+                    value={speedometerValue}
+                    ready={currStatus !== null && !start}
+                    indeterminate={start}
+                    size={"small"}
+                  />
+                </Box>
+              </Box>
               <Box
                 sx={{
                   display: "flex",
@@ -186,38 +231,7 @@ const Speedtest = () => {
                   rowGap: 14,
                 }}
               >
-                <Box sx={{ flex: "1 1 200px", minWidth: 180, maxWidth: 300 }}>
-                  <Box
-                    sx={{
-                      fontSize: 13,
-                      marginBottom: 8,
-                    }}
-                  >
-                    {start ? (
-                      <Fragment>
-                        {t("Speedtest in progress...")}
-                        <Loader style={{ width: 15, height: 15 }} />
-                      </Fragment>
-                    ) : (
-                      <Fragment>
-                        {currStatus && !start ? (
-                          <b>{t("Speed Test results:")}</b>
-                        ) : (
-                          <b>{t("Performance test")}</b>
-                        )}
-                      </Fragment>
-                    )}
-                  </Box>
-                  <Box>
-                    <ProgressBarWrapper
-                      value={speedometerValue}
-                      ready={currStatus !== null && !start}
-                      indeterminate={start}
-                      size={"small"}
-                    />
-                  </Box>
-                </Box>
-                <Box sx={{ flex: "1 1 240px", minWidth: 220, maxWidth: 320 }}>
+                <Box sx={{ flex: "1 1 260px", minWidth: 240, maxWidth: 360 }}>
                   <InputBox
                     id={"size"}
                     name={"size"}
@@ -243,7 +257,7 @@ const Speedtest = () => {
                     }
                   />
                 </Box>
-                <Box sx={{ flex: "1 1 240px", minWidth: 220, maxWidth: 320 }}>
+                <Box sx={{ flex: "1 1 260px", minWidth: 240, maxWidth: 360 }}>
                   <InputBox
                     id={"duration"}
                     name={"duration"}
@@ -258,10 +272,13 @@ const Speedtest = () => {
                     disabled={start}
                     overlayObject={
                       <InputUnitMenu
-                        id={"size-unit"}
-                        onUnitChange={() => {}}
-                        unitSelected={"s"}
-                        unitsList={[{ label: "s", value: "s" }]}
+                        id={"duration-unit"}
+                        onUnitChange={setDurationUnit}
+                        unitSelected={durationUnit}
+                        unitsList={[
+                          { label: t("s"), value: "s" },
+                          { label: t("min"), value: "m" },
+                        ]}
                         disabled={start}
                       />
                     }

Original file line number	Diff line number	Diff line change
`@@ -208,6 +208,9 @@ const HelpMenu = () => {`
`208`	`208`	`setHelpItemsBlog(cached);`
`209`	`209`	`return;`
`210`	`210`	`}`
	`211`	`+ // Nothing cached for this language yet: drop the other language's items`
	`212`	`+ // right away so a failed fetch can't leave them on screen.`
	`213`	`+ setHelpItemsBlog(SILO_BLOG_FALLBACK);`
`211`	`214`
`212`	`215`	`const abortController = new AbortController();`
`213`	`216`