chore(webui): change language to English, code style and minor fixes

Signed-off-by: xiayu.lyt <xiayu.lyt@alibaba-inc.com>
alibaba · Jan 16, 2024 · 5003605 · 5003605
1 parent d9970b1
commit 5003605
Show file tree

Hide file tree

Showing 43 changed files with 324 additions and 356 deletions.
diff --git a/deploy/skoopbundle.yaml b/deploy/skoopbundle.yaml
@@ -31,15 +31,15 @@ spec:
       dnsPolicy: ClusterFirstWithHostNet
       initContainers:
         - name: inspector-prepare
-          image: "kubeskoop/kubeskoop:latest"
+          image: kubeskoop/kubeskoop:v1.0.0
           volumeMounts:
             - name: btf-rawdata
               mountPath: /etc/net-exporter/btf
             - mountPath: /boot/
               name: boot
           command: [btfhack, discover, -p, /etc/net-exporter/btf/]
       containers:
-      - image: "kubeskoop/kubeskoop:latest"
+      - image: kubeskoop/kubeskoop:v1.0.0
         name: inspector
         env:
         - name: INSPECTOR_NODENAME
@@ -383,7 +383,7 @@ spec:
             name: grafana-datasources
             readOnly: false
       - name: register-dashboard
-        image: kubeskoop/kubeskoop:latest
+        image: kubeskoop/kubeskoop:v1.0.0
         env:
           - name: GRAFANA_PASSWORD
             value: "kubeskoop"
@@ -579,7 +579,7 @@ spec:
     spec:
       containers:
       - name: controller
-        image: registry.aliyuncs.com/wangbs/kubeskoop:latest
+        image: kubeskoop/kubeskoop:v1.0.0
         command: ["/bin/controller"]
         env:
           - name: PROMETHEUS_ENDPOINT
@@ -627,7 +627,7 @@ spec:
     spec:
       containers:
       - name: controller
-        image: registry.aliyuncs.com/wangbs/kubeskoop:latest
+        image: kubeskoop/kubeskoop:v1.0.0
         command: ["/bin/webconsole"]
         env:
           - name: CONTROLLER_ENDPOINT

diff --git a/webui/README.md b/webui/README.md
diff --git a/webui/package.json b/webui/package.json
@@ -1,14 +1,16 @@
 {
   "name": "@ice/fusion-pro-scaffold",
-  "version": "1.2.0",
-  "description": "ice.js 3 Pro 模板（基于 Fusion Design）",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "description": "KubeSkoop Web Console",
   "dependencies": {
     "@alifd/next": "^1.26.8",
     "@alifd/theme-design-pro": "^0.8.0",
     "@antv/g6": "^4.8.23",
     "@antv/g6-react-node": "^1.4.5",
     "@ice/runtime": "^1.2.7",
     "bizcharts": "^3.5.10",
+    "build-plugin-ice-i18n": "^0.2.2",
     "d3": "^7.8.5",
     "moment": "^2.28.0",
     "react": "^18.2.0",
@@ -41,6 +43,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "repository": "git@github.com:ice-lab/react-materials.git"
+  }
 }
diff --git a/webui/src/components/HeaderAvatar/index.module.css b/webui/src/components/HeaderAvatar/index.module.css
@@ -26,7 +26,7 @@
   flex: 1 1 auto;
   align-items: flex-start;
   min-width: 250px;
-  padding: 8px 16px 4px 16px;
+  padding: 8px 16px 4px;
   font-size: 0;
 }
 

diff --git a/webui/src/components/Logo/index.tsx b/webui/src/components/Logo/index.tsx
@@ -12,11 +12,9 @@ export interface ILogoProps {
 
 export default function Logo({ image, text, url, imageStyle, textStyle }: ILogoProps) {
   return (
-    <div>
-      <Link to={url || '/'} className={styles.logo}>
+    <div className={styles.logo}>
         {image && <img src={image} alt="logo" style={imageStyle} />}
         <span style={textStyle}>{text}</span>
-      </Link>
     </div>
   );
 }
diff --git a/webui/src/components/WebFrameCard/index.module.css b/webui/src/components/WebFrameCard/index.module.css
@@ -1,17 +1,17 @@
 .webFrame {
-    border: none;
-    width: 100%;
-    height: 80vh;
-    min-height: 860px;
+  border: none;
+  width: 100%;
+  height: 80vh;
+  min-height: 860px;
 }
 
 .cardAction {
-    display: flex;
-    justify-content: flex-end;
-    padding: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 0;
 }
 
 .cardContent {
-    padding: 0;
-    margin-top: 0;
+  padding: 0;
+  margin-top: 0;
 }
diff --git a/webui/src/components/WebFrameCard/index.tsx b/webui/src/components/WebFrameCard/index.tsx
@@ -12,11 +12,6 @@ const WebFrameCard: React.FC<WebFrameProps> = (props: WebFrameProps): JSX.Elemen
             <Card.Content className={styles.cardContent}>
                 <iframe className={styles.webFrame} src={props.src}></iframe>
             </Card.Content>
-            <Card.Actions className={styles.cardAction}>
-                <Button text onClick={props.onSetting}>
-                    <Icon type="set" />设置
-                </Button>
-            </Card.Actions>
         </Card>
     )
 }

diff --git a/webui/src/menuConfig.tsx b/webui/src/menuConfig.tsx
@@ -1,51 +1,50 @@
 const asideMenuConfig = [
   {
-    name: "主页",
+    name: "Network Graph",
     path: "/",
   },
   {
-    name: '监控',
+    name: 'Monitoring',
     children: [
       {
-        name: "大盘",
+        name: "Dashboard",
         path: "/monitoring/dashboard"
       },
       {
-        name: "事件",
+        name: "Events",
         path: "/monitoring/events"
       },
       {
-        name: "链路图",
-        path: "/flow"
+        name: "Network Graph",
+        path: "/monitoring/flow"
       }
     ]
   },
   {
-    name: '诊断',
+    name: 'Diagnosis',
     children: [
       {
-        name: "连通性诊断",
+        name: "Connectivity Diagnosis",
         path: "/diagnosis",
       },
       {
-        name: "抓包",
+        name: "Packet Capturing",
         path: "/capture"
       },
       {
-        name: "延迟探测(PingMesh)",
+        name: "Latency Detection",
         path: "/pingmesh"
       }
     ]
   },
   {
-    name: '配置',
+    name: 'Configuration',
     children: [
       {
-        name: '节点配置',
+        name: 'Node Configuration',
         path: '/config',
       }
     ],
   },
 ];
-
 export { asideMenuConfig };
diff --git a/webui/src/pages/$.tsx b/webui/src/pages/$.tsx
@@ -9,23 +9,11 @@ const { Cell } = ResponsiveGrid;
 const FeedbackNotFound = () => {
   return (
     <ResponsiveGrid gap={20}>
-      <Cell colSpan={12}>
-        <PageHeader
-          title="404页面"
-          breadcrumbs={[
-            { name: 'Feedback页面' },
-            { name: '结果页面' },
-            { name: '404页面' },
-          ]}
-          description="404页面描述"
-        />
-      </Cell>
-
       <Cell colSpan={12}>
         <Exception
           title="404"
           image="https://img.alicdn.com/tfs/TB14c1VoET1gK0jSZFhXXaAtVXa-200-200.png"
-          description="服务器好像挂了你要等会了"
+          description="Oops! Page not found."
         />
       </Cell>
     </ResponsiveGrid>

diff --git a/webui/src/pages/capture/components/captureForm/index.module.css b/webui/src/pages/capture/components/captureForm/index.module.css
@@ -1,8 +1,8 @@
 .btn {
-    margin-left: 5px;
+  margin-left: 5px;
 }
 .custom {
-    border: 1px dashed;
-    padding: 4px;
-    display: inline-block;
+  border: 1px dashed;
+  padding: 4px;
+  display: inline-block;
 }
diff --git a/webui/src/pages/capture/components/captureForm/index.tsx b/webui/src/pages/capture/components/captureForm/index.tsx
@@ -1,5 +1,5 @@
-import {Form, Input, Select, Radio, Checkbox, TimePicker, Button, Message} from '@alifd/next';
-import {useEffect, useState} from "react";
+import { Form, Input, Select, Radio, Checkbox, TimePicker, Button, Message } from '@alifd/next';
+import { useEffect, useState } from "react";
 import styles from "./index.module.css"
 import moment from 'moment';
 import k8sService from "@/services/k8s";
@@ -17,17 +17,15 @@ interface CaptureFormData {
 
 const CaptureForm: React.FunctionComponent<CaptureFormProps> = (props: CaptureFormProps) => {
   const { onSubmit } = props;
-  const [formCaptureType, setformCaptureType] = useState("Pod")
-  const [formNamespace, setformNamespace] = useState("")
-  const [showSelectorDialog, setshowSelectorDialog] = useState(false)
+  const [showSelectorDialog, setShowSelectorDialog] = useState(false)
 
   const [capturelist, setCapturelist] = useState([])
   const handleSubmit = (values: CaptureFormData, errors: any) => {
     if (errors) {
       return
     }
-    if(capturelist.length == 0) {
-      Message.error("未选择抓包对象")
+    if (capturelist.length == 0) {
+      Message.error("Please select at least one target.")
       return
     }
     values["capture_list"] = capturelist
@@ -38,49 +36,49 @@ const CaptureForm: React.FunctionComponent<CaptureFormProps> = (props: CaptureFo
 
   return (
     <Form inline labelAlign='left'>
-      <Form.Item label="抓包对象列表" >
+      <Form.Item label="Targets" >
         <div className={styles.custom}>
           {capturelist.map((v, i) => {
-            if(v.type == "Node") {
+            if (v.type == "Node") {
               return <Button className={styles.btn} key={i}>{v.type + ": " + v.name}</Button>;
             } else {
-                return <Button className={styles.btn} key={i}>{v.type+": "+v.namespace+"/"+v.name}</Button>;
+              return <Button className={styles.btn} key={i}>{v.type + ": " + v.namespace + "/" + v.name}</Button>;
             }
           })}
-          <Button className={styles.btn} type="primary" onClick={()=>{setshowSelectorDialog(!showSelectorDialog)}}>
+          <Button className={styles.btn} type="primary" onClick={() => { setShowSelectorDialog(!showSelectorDialog) }}>
             Add ＋{" "}
           </Button>
-          <Button className={styles.btn} warning type="primary" onClick={()=>{setCapturelist([])}}>
-            清空
+          <Button className={styles.btn} warning type="primary" onClick={() => { setCapturelist([]) }}>
+            Clear
           </Button>
           <SelectorDialog visible={showSelectorDialog}
-                          submitSelector={(value) => {
-                            let toAdd = []
-                            skip: for(const v of value.values()) {
-                              for(const c of capturelist.values()) {
-                                if(v.name == c.name) {
-                                  continue skip
-                                }
-                              }
-                              toAdd = [...toAdd, v]
-                            }
-                            setCapturelist([...capturelist, ...toAdd])
-                            setshowSelectorDialog(!showSelectorDialog)
-                          }}
-                          onClose={()=>{setshowSelectorDialog(!showSelectorDialog)}}></SelectorDialog>
+            submitSelector={(value) => {
+              let toAdd = []
+              skip: for (const v of value.values()) {
+                for (const c of capturelist.values()) {
+                  if (v.name == c.name) {
+                    continue skip
+                  }
+                }
+                toAdd = [...toAdd, v]
+              }
+              setCapturelist([...capturelist, ...toAdd])
+              setShowSelectorDialog(!showSelectorDialog)
+            }}
+            onClose={() => { setShowSelectorDialog(!showSelectorDialog) }}></SelectorDialog>
         </div>
       </Form.Item>
-      <br/>
-      <Form.Item label="抓包过滤条件" >
-        <Input name="filter" defaultValue={""} placeholder={"抓包的条件，参考tcpdump的抓包命令文档"} style={{ width: 500 }} />
+      <br />
+      <Form.Item label="Filter" >
+        <Input name="filter" defaultValue={""} placeholder={"Filter expression, same as tcpdump."} style={{ width: 500 }} />
       </Form.Item>
-      <br/>
-      <Form.Item label="抓包持续时长">
+      <br />
+      <Form.Item label="Duration">
         <TimePicker name="duration" format="mm:ss" defaultValue={moment("00:30", "mm:ss", true)} />
       </Form.Item>
       <Form.Item>
         <Form.Submit type="primary" validate onClick={handleSubmit}>
-          发起抓包任务
+          Submit Task
         </Form.Submit>
       </Form.Item>
     </Form>