optimize dashboard ui (#1038)

.github/workflows/dashboard-ci.yaml

@@ -8,19 +8,19 @@ on:
       - 'Makefile'
       - 'docker/Makefile'
       - 'docker/dashboard.Dockerfile'
-      - 'dashboard-ui-v2/*'
-      - 'cmd/dashboard/*'
-      - 'pkg/dashboard/*'
+      - 'dashboard-ui-v2/**'
+      - 'cmd/dashboard/**'
+      - 'pkg/dashboard/**'
   pull_request:
     branches:
       - master
     paths:
       - 'Makefile'
       - 'docker/Makefile'
       - 'docker/dashboard.Dockerfile'
-      - 'dashboard-ui-v2/*'
-      - 'cmd/dashboard/*'
-      - 'pkg/dashboard/*'
+      - 'dashboard-ui-v2/**'
+      - 'cmd/dashboard/**'
+      - 'pkg/dashboard/**'
 
 jobs:
   build:

dashboard-ui-v2/src/App.tsx

@@ -17,6 +17,7 @@
 import { loader } from '@monaco-editor/react'
 import { ConfigProvider } from 'antd'
 import * as monaco from 'monaco-editor'
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
 import { SWRConfig } from 'swr'
 
@@ -31,6 +32,12 @@ async function fetcher<T>(url: string, init?: RequestInit): Promise<T> {
   return res.json()
 }
 
+self.MonacoEnvironment = {
+  getWorker() {
+    return new editorWorker()
+  },
+}
+
 loader.config({ monaco })
 
 const App = () => (
@@ -44,7 +51,6 @@ const App = () => (
         token: {
           colorPrimary: '#00b96b',
           borderRadius: 3,
-          colorBgContainer: '#f5f5f5',
         },
         components: {
           Layout: {

dashboard-ui-v2/src/components/containers.tsx

@@ -15,13 +15,14 @@
  */
 
 import { ProCard } from '@ant-design/pro-components'
-import { Button, Space, Table, Tag } from 'antd'
+import { Button, Space, Table, Tag, Tooltip } from 'antd'
 import { ContainerStatus } from 'kubernetes-types/core/v1'
 import { FormattedMessage } from 'react-intl'
 import { useParams } from 'react-router-dom'
 
 import LogModal from './log-modal'
 import XTermModal from './xterm-modal'
+import { AccessLogIcon, LogIcon, TerminalIcon } from '@/icons'
 import { DetailParams } from '@/types'
 import { Pod } from '@/types/k8s'
 import { isMountPod } from '@/utils'
@@ -69,35 +70,24 @@ const Containers: React.FC<{
             render: (startAt) => new Date(startAt).toLocaleString(),
           },
           {
-            title: <FormattedMessage id="log" />,
+            title: <FormattedMessage id="action" />,
             key: 'action',
             render: (record, c) => (
               <Space>
-                {isMountPod(pod) ? (
-                  <LogModal
-                    namespace={namespace!}
-                    name={name!}
-                    container={record.name}
-                    hasPrevious={false}
-                    type="accesslog"
-                  >
-                    {({ onClick }) => (
-                      <Button type="primary" onClick={onClick}>
-                        Access Log
-                      </Button>
-                    )}
-                  </LogModal>
-                ) : null}
                 <LogModal
                   namespace={namespace!}
                   name={name!}
                   container={record.name}
                   hasPrevious={c.restartCount > 0}
                 >
                   {({ onClick }) => (
-                    <Button type="primary" onClick={onClick}>
-                      Log
-                    </Button>
+                    <Tooltip title="Log">
+                      <Button
+                        className="action-button"
+                        onClick={onClick}
+                        icon={<LogIcon />}
+                      />
+                    </Tooltip>
                   )}
                 </LogModal>
                 <XTermModal
@@ -106,11 +96,34 @@ const Containers: React.FC<{
                   container={record.name}
                 >
                   {({ onClick }) => (
-                    <Button type="primary" onClick={onClick}>
-                      Exec
-                    </Button>
+                    <Tooltip title="Exec in container">
+                      <Button
+                        className="action-button"
+                        icon={<TerminalIcon />}
+                        onClick={onClick}
+                      />
+                    </Tooltip>
                   )}
                 </XTermModal>
+                {isMountPod(pod) ? (
+                  <LogModal
+                    namespace={namespace!}
+                    name={name!}
+                    container={record.name}
+                    hasPrevious={false}
+                    type="accesslog"
+                  >
+                    {({ onClick }) => (
+                      <Tooltip title="Access Log">
+                        <Button
+                          className="action-button"
+                          onClick={onClick}
+                          icon={<AccessLogIcon />}
+                        />
+                      </Tooltip>
+                    )}
+                  </LogModal>
+                ) : null}
               </Space>
             ),
           },

dashboard-ui-v2/src/components/layout.tsx

@@ -15,22 +15,27 @@
  */
 
 import { ReactNode, useEffect, useState } from 'react'
-import { QuestionCircleOutlined } from '@ant-design/icons'
+import {
+  GithubOutlined,
+  QuestionCircleOutlined,
+  SettingOutlined,
+} from '@ant-design/icons'
 import {
   Layout as AntdLayout,
   Button,
   ConfigProvider,
   Menu,
   MenuProps,
   Space,
+  Tooltip,
 } from 'antd'
 import enUS from 'antd/locale/en_US'
 import zhCN from 'antd/locale/zh_CN'
 import { FormattedMessage, IntlProvider } from 'react-intl'
 import { Link, useLocation } from 'react-router-dom'
 
 import ConfigModal from './config-modal'
-import { DSIcon, PODIcon, PVCIcon, PVIcon, SCIcon } from '@/icons'
+import { DSIcon, LocaleIcon, PODIcon, PVCIcon, PVIcon, SCIcon } from '@/icons'
 import en from '@/locales/en-US'
 import cn from '@/locales/zh-CN'
 
@@ -99,37 +104,54 @@ export default function Layout(props: { children: ReactNode }) {
             display: 'flex',
             alignItems: 'center',
             fontSize: '14px',
-            padding: '0 40px',
+            padding: '0 20px',
           }}
         >
           <h2>JuiceFS CSI</h2>
-          <Space style={{ marginLeft: 'auto' }}>
-            <QuestionCircleOutlined
-              width={20}
-              onClick={() => {
-                // open a new tab to the JuiceFS CSI documentation
-                window.open(
-                  'https://juicefs.com/docs/csi/introduction/',
-                  '_blank',
-                )
-              }}
-            />
-
+          <Space size={'middle'} style={{ marginLeft: 'auto' }}>
+            <Tooltip title="Docs">
+              <Button
+                icon={<QuestionCircleOutlined />}
+                className="header-button"
+                onClick={() => {
+                  // open a new tab to the JuiceFS CSI documentation
+                  window.open(
+                    'https://juicefs.com/docs/csi/introduction/',
+                    '_blank',
+                  )
+                }}
+              />
+            </Tooltip>
             <ConfigModal>
               {({ onClick }) => (
-                <Button size="small" onClick={onClick}>
-                  <FormattedMessage id="config" />
-                </Button>
+                <Tooltip title={<FormattedMessage id="config" />}>
+                  <Button
+                    icon={<SettingOutlined />}
+                    className="header-button"
+                    onClick={onClick}
+                  />
+                </Tooltip>
               )}
             </ConfigModal>
+            <Tooltip title="English / 中文">
+              <Button
+                icon={<LocaleIcon />}
+                className="header-button"
+                onClick={() => {
+                  setLocale(locale === 'cn' ? 'en' : 'cn')
+                }}
+              />
+            </Tooltip>
             <Button
-              size="small"
+              icon={<GithubOutlined />}
+              className="header-button"
               onClick={() => {
-                setLocale(locale === 'cn' ? 'en' : 'cn')
+                window.open(
+                  'https://github.com/juicedata/juicefs-csi-driver',
+                  '_blank',
+                )
               }}
-            >
-              {(locale == 'cn' ? 'en' : 'cn').toUpperCase()}
-            </Button>
+            />
           </Space>
         </Header>
         <ConfigProvider locale={locale == 'cn' ? zhCN : enUS}>

dashboard-ui-v2/src/components/log-modal.tsx

@@ -36,6 +36,7 @@ const LogModal: React.FC<{
     const [editor, setEditor] = useState<editor.IStandaloneCodeEditor | null>(
       null,
     )
+    const [autoReveal, setAutoReveal] = useState<boolean>(true)
     const [state, actions] = useDownloadPodLogs(namespace, name, container)
 
     useWebsocket(
@@ -45,6 +46,16 @@ const LogModal: React.FC<{
           previous: previous ? 'true' : 'false',
         },
         onMessage: (msg) => {
+          if (editor) {
+            const model = editor.getModel()
+            if (!model) return
+            const visibleLine = editor.getVisibleRanges()[0]
+            if (visibleLine.endLineNumber < model.getLineCount()) {
+              setAutoReveal(false)
+            } else {
+              setAutoReveal(true)
+            }
+          }
           setData((prev) => prev + msg.data)
         },
       },
@@ -55,12 +66,10 @@ const LogModal: React.FC<{
       if (!editor) return
       const model = editor.getModel()
       if (!model) return
-      const visibleLine = editor.getVisibleRanges()[0]
-      if (visibleLine.endLineNumber + 5 < model.getLineCount()) {
-        return
+      if (autoReveal) {
+        editor.revealLine(model.getLineCount())
       }
-      editor.revealLine(model.getLineCount())
-    }, [data, editor])
+    }, [data, editor, autoReveal])
 
     const showModal = () => {
       setIsModalOpen(true)

dashboard-ui-v2/src/components/pod-basic.tsx

@@ -16,12 +16,13 @@
 
 import React, { useState } from 'react'
 import { ProCard, ProDescriptions } from '@ant-design/pro-components'
-import { Button } from 'antd'
+import { Button, Tooltip } from 'antd'
 import { Badge } from 'antd/lib'
 import { FormattedMessage } from 'react-intl'
 import YAML from 'yaml'
 
 import YamlModal from './yaml-modal'
+import { YamlIcon } from '@/icons'
 import { Pod } from '@/types/k8s'
 import { getPodStatusBadge, omitPod, podStatus } from '@/utils'
 
@@ -41,7 +42,27 @@ const PodBasic: React.FC<{
   }
 
   return (
-    <ProCard title={<FormattedMessage id="basic" />}>
+    <ProCard
+      title={<FormattedMessage id="basic" />}
+      extra={
+        <>
+          <Tooltip title="Show Yaml">
+            <Button
+              className="action-button"
+              onClick={showModal}
+              icon={<YamlIcon />}
+            >
+              Yaml
+            </Button>
+            <YamlModal
+              isOpen={isModalOpen}
+              onClose={handleCancel}
+              content={YAML.stringify(omitPod(pod))}
+            />
+          </Tooltip>
+        </>
+      }
+    >
       <ProDescriptions
         column={2}
         dataSource={pod}
@@ -75,22 +96,6 @@ const PodBasic: React.FC<{
                 row.metadata?.creationTimestamp as string,
               ).toLocaleString(),
           },
-          {
-            title: 'Yaml',
-            key: 'yaml',
-            render: () => (
-              <>
-                <Button type="primary" onClick={showModal}>
-                  Yaml
-                </Button>
-                <YamlModal
-                  isOpen={isModalOpen}
-                  onClose={handleCancel}
-                  content={YAML.stringify(omitPod(pod))}
-                />
-              </>
-            ),
-          },
         ]}
       />
     </ProCard>