style(kubepanel): improve the overall style (#4494)

* chore(kubepanel): remove unused packages * style(kubepanel): adjust workload pie * style(kubepanel): cascader style improve * style(kubepanel): modal fullscreen * chore: deal with conflict * style: editor style perf * perf: editor feature perf * style(kubepanel): tooltip style perf * style(kubepanel): pagination style perf * fix: zustand * fix: fix node:fs
labring · Jan 20, 2024 · 2057bca · 2057bca
1 parent 0948afe
commit 2057bca
Show file tree

Hide file tree

Showing 19 changed files with 454 additions and 370 deletions.
diff --git a/frontend/plugins/kubepanel/package.json b/frontend/plugins/kubepanel/package.json
@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "@ant-design/charts": "^1.4.2",
-    "@ant-design/cssinjs": "^1.17.2",
     "@ant-design/icons": "^5.2.6",
     "@ant-design/plots": "^1.2.5",
     "@chakra-ui/react": "^2.8.1",
@@ -25,7 +24,6 @@
     "byline": "^5.0.0",
     "eventsource": "^2.0.2",
     "framer-motion": "^10.16.4",
-    "fs": "0.0.1-security",
     "immer": "^10.0.3",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
@@ -36,7 +34,6 @@
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "request": "^2.88.2",
     "rfc6902": "^5.0.1",
     "sealos-desktop-sdk": "workspace:*",
     "type-fest": "^4.4.0",
@@ -62,6 +59,7 @@
     "eslint-plugin-xss": "^0.1.12",
     "monaco-editor": "^0.44.0",
     "postcss": "^8.4.31",
+    "postcss-import": "^16.0.0",
     "postcss-nesting": "^12.0.1",
     "tailwindcss": "^3.3.4",
     "typescript": "^5"

diff --git a/frontend/plugins/kubepanel/pnpm-lock.yaml b/frontend/plugins/kubepanel/pnpm-lock.yaml
diff --git a/frontend/plugins/kubepanel/src/components/chart/pie-chart.tsx b/frontend/plugins/kubepanel/src/components/chart/pie-chart.tsx
@@ -23,7 +23,9 @@ export const PieChart = ({ title, data, color }: PieChartProps) => {
     angleField: 'value',
     colorField: 'type',
     color: (datum: Datum) => color(datum['type']),
+    padding: 0.1, //Try to avoid dial misalignment caused by different legends' number
     width: 200,
+    height: 400,
     radius: 1,
     innerRadius: 0.75,
     statistic: {
@@ -41,8 +43,23 @@ export const PieChart = ({ title, data, color }: PieChartProps) => {
     },
     label: false,
     legend: {
-      layout: 'vertical' as 'vertical',
-      position: 'bottom' as 'bottom'
+      layout: 'vertical',
+      position: 'bottom',
+      offsetY: -15,
+      marker: {
+        symbol: (x: number, y: number, r: number) => {
+          const width = r * 4;
+          const height = width * 0.5;
+          return [
+            ['M', x - width / 2, y - height / 2],
+            ['L', x + width / 2, y - height / 2],
+            ['L', x + width / 2, y + height / 2],
+            ['L', x - width / 2, y + height / 2],
+            ['Z']
+          ];
+        },
+        spacing: 13
+      }
     }
   };
   return <DynamicPie {...config} animation={false} />;

diff --git a/frontend/plugins/kubepanel/src/components/common/action/create-resource-modal.tsx b/frontend/plugins/kubepanel/src/components/common/action/create-resource-modal.tsx
@@ -105,7 +105,6 @@ export const CreateResourceModal = ({ open, setClose }: Props) => {
       {contextHolder}
       <Modal
         open={open}
-        width={'90vw'}
         onCancel={setClose}
         onOk={setClose}
         footer={[
@@ -133,7 +132,22 @@ export const CreateResourceModal = ({ open, setClose }: Props) => {
               value={template}
               language="yaml"
               onMount={onEditorMount}
-              options={{ readOnly: disabled }}
+              options={{
+                readOnly: disabled,
+                minimap: { enabled: false },
+                scrollbar: {
+                  vertical: 'auto',
+                  horizontal: 'auto'
+                },
+                contextmenu: false,
+                cursorBlinking: 'smooth',
+                scrollBeyondLastLine: false,
+                overviewRulerBorder: false,
+                codeLens: false,
+                acceptSuggestionOnCommitCharacter: false,
+                acceptSuggestionOnEnter: 'off',
+                accessibilitySupport: 'off'
+              }}
             />
           </Spin>
         </Flex>

diff --git a/frontend/plugins/kubepanel/src/components/common/editor/styled.tsx b/frontend/plugins/kubepanel/src/components/common/editor/styled.tsx
@@ -2,8 +2,8 @@ import { Editor, EditorProps } from '@monaco-editor/react';
 
 export default function StyledEditor(props: EditorProps) {
   return (
-    <div className="p-0.5 border-solid border-[1px] border-color-border rounded-lg bg-[#FBFBFC]">
-      <Editor {...props} height={'60vh'} theme="kubepanel" />
+    <div className="pt-5 border-solid border-[1px] border-color-border rounded-lg bg-[#FBFBFC]">
+      <Editor {...props} height={'70vh'} theme="kubepanel" />
     </div>
   );
 }
diff --git a/frontend/plugins/kubepanel/src/components/common/panel-table/pagination.tsx b/frontend/plugins/kubepanel/src/components/common/panel-table/pagination.tsx
@@ -81,7 +81,7 @@ export function usePaginationProps(total: number): PaginationProps {
   );
 
   return {
-    showTotal: (total) => <div>{`Total ${total} items`}</div>,
+    showTotal: (total) => <span>{`Total Items: ${total}`}</span>,
     current: nxtPage,
     pageSize,
     size: 'default',

diff --git a/frontend/plugins/kubepanel/src/components/common/sidebar/sidebar.tsx b/frontend/plugins/kubepanel/src/components/common/sidebar/sidebar.tsx
@@ -74,7 +74,7 @@ export const ResourceSideNav = ({ onClick = () => {} }: Props) => {
         </div>
       </div>
       <Menu
-        style={{ backgroundColor: '#F2F2F4', borderRight: 'none' }}
+        style={{ backgroundColor: '#F2F2F4', borderRight: 'none', fontWeight: 500 }}
         defaultSelectedKeys={['overview']}
         defaultOpenKeys={['workload']}
         mode="inline"

diff --git a/frontend/plugins/kubepanel/src/constants/theme.ts b/frontend/plugins/kubepanel/src/constants/theme.ts
@@ -16,6 +16,10 @@ export const theme: ThemeConfig = {
     Table: {
       headerBorderRadius: 0,
       headerBg: '#F6F8F9'
+    },
+    Tooltip: {
+      colorBgSpotlight: '#FFFFFF',
+      colorTextLightSolid: '#000000'
     }
   },
   token: {

diff --git a/frontend/plugins/kubepanel/src/hooks/useLoading.tsx b/frontend/plugins/kubepanel/src/hooks/useLoading.tsx
@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
-import { Spinner, Flex } from '@chakra-ui/react';
-
+import { Flex } from '@chakra-ui/react';
+import { Spin } from 'antd';
 export const useLoading = (props?: { defaultLoading: boolean }) => {
   const [isLoading, setIsLoading] = useState(props?.defaultLoading || false);
 
@@ -19,7 +19,7 @@ export const useLoading = (props?: { defaultLoading: boolean }) => {
           justifyContent={'center'}
           visibility={isLoading || loading ? 'visible' : 'hidden'}
         >
-          <Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="blue.500" size="xl" />
+          <Spin size="large" spinning={loading} />
         </Flex>
       );
     },

diff --git a/frontend/plugins/kubepanel/src/pages/_app.tsx b/frontend/plugins/kubepanel/src/pages/_app.tsx
@@ -2,8 +2,7 @@ import type { AppProps } from 'next/app';
 import { Router, useRouter } from 'next/router';
 import NProgress from 'nprogress';
 import { useGlobalStore } from '@/store/global';
-import { useLoading } from '@/hooks/useLoading';
-import { useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 import { useConfirm } from '@/hooks/useConfirm';
 import { throttle } from 'lodash';
 import { sealosApp, createSealosApp } from 'sealos-desktop-sdk/app';
@@ -13,18 +12,17 @@ import { useMonaco } from '@monaco-editor/react';
 import { monacoTheme } from '@/constants/theme';
 
 import 'nprogress/nprogress.css';
-import '@ant-design/flowchart/dist/index.css';
 import '@/styles/globals.css';
 
-//Binding events.
+//Binding router events.
 Router.events.on('routeChangeStart', () => NProgress.start());
 Router.events.on('routeChangeComplete', () => NProgress.done());
 Router.events.on('routeChangeError', () => NProgress.done());
 
 export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
-  const { setScreenWidth, loading, setLastRoute } = useGlobalStore();
-  const { Loading } = useLoading();
+  const { setScreenWidth, setLastRoute } = useGlobalStore();
+  // const { Loading } = useLoading();
   const { openConfirm, ConfirmChild } = useConfirm({
     title: '跳转提示',
     content: '该应用不允许单独使用，点击确认前往 Sealos Desktop 使用。'
@@ -38,8 +36,10 @@ export default function App({ Component, pageProps }: AppProps) {
     }
   }, [monaco]);
 
+  // app init
   useEffect(() => {
     NProgress.start();
+
     const response = createSealosApp();
 
     (async () => {
@@ -88,7 +88,6 @@ export default function App({ Component, pageProps }: AppProps) {
       setLastRoute(router.asPath);
     };
   }, [router.asPath, router.pathname, setLastRoute]);
-
   return (
     <>
       <Head>
@@ -99,7 +98,6 @@ export default function App({ Component, pageProps }: AppProps) {
       </Head>
       <Component {...pageProps} />
       <ConfirmChild />
-      <Loading loading={loading} />
     </>
   );
 }
diff --git a/...nd/plugins/kubepanel/src/pages/kubepanel/kube-object/workload/overview/event-overview.tsx b/...nd/plugins/kubepanel/src/pages/kubepanel/kube-object/workload/overview/event-overview.tsx
@@ -28,13 +28,17 @@ const columns: ColumnsType<KubeEvent> = [
       let renderedMessage: React.ReactNode;
       switch (event.type) {
         case 'Warning':
-          renderedMessage = <span className="text-color-error">{message}</span>;
+          renderedMessage = <span className="text-color-error ">{message}</span>;
           break;
         case 'Normal':
         default:
           renderedMessage = message;
       }
-      return <Tooltip title={message}>{renderedMessage}</Tooltip>;
+      return (
+        <Tooltip title={message} className="inline-block overflow-hidden w-full text-ellipsis">
+          {renderedMessage}
+        </Tooltip>
+      );
     }
   },
   {
@@ -43,7 +47,7 @@ const columns: ColumnsType<KubeEvent> = [
     dataIndex: 'involvedObject',
     render: (involvedObject: Required<ObjectReference> | undefined) => {
       if (!involvedObject) return '<unknown>';
-      return <span className="text-blue-300">{involvedObject.name}</span>;
+      return <span className="text-[#0884DD]">{involvedObject.name}</span>;
     }
   },
   {

diff --git a/frontend/plugins/kubepanel/src/pages/kubepanel/kube-object/workload/overview/overview.tsx b/frontend/plugins/kubepanel/src/pages/kubepanel/kube-object/workload/overview/overview.tsx
@@ -15,9 +15,22 @@ import EventOverview from './event-overview';
 import { useWatcher } from '@/hooks/useWatcher';
 
 const OverviewPage = () => {
-  const { items: pods, initialize: initializePods, watch: watchPods, getStatuses: getPodStatuses } = usePodStore();
-  const { items: deps, initialize: initializeDeployments, watch: watchDeployments } = useDeploymentStore();
-  const { items: stats, initialize: initializeStatefulSets, watch: watchStatefulSets } = useStatefulSetStore();
+  const {
+    items: pods,
+    initialize: initializePods,
+    watch: watchPods,
+    getStatuses: getPodStatuses
+  } = usePodStore();
+  const {
+    items: deps,
+    initialize: initializeDeployments,
+    watch: watchDeployments
+  } = useDeploymentStore();
+  const {
+    items: stats,
+    initialize: initializeStatefulSets,
+    watch: watchStatefulSets
+  } = useStatefulSetStore();
 
   const cxtHolder = useWatcher({
     initializers: [initializePods, initializeDeployments, initializeStatefulSets],

diff --git a/...tend/plugins/kubepanel/src/pages/kubepanel/kube-object/workload/overview/status-chart.tsx b/...tend/plugins/kubepanel/src/pages/kubepanel/kube-object/workload/overview/status-chart.tsx
@@ -20,16 +20,16 @@ export type WorkloadStatusData = {
 };
 
 const statusBackgroundColorMapping = {
-  Running: '#399c3d',
+  Running: '#039855',
   Scheduled: '#399c3d',
-  Pending: '#ff9800',
+  Pending: '#F79009',
   Suspended: '#ff9800',
   Evicted: '#ce3933',
   Succeeded: '#206923',
-  Failed: '#ce3933',
+  Failed: '#D92D20',
   Terminated: '#9dabb5',
   Terminating: '#9dabb5',
-  Unknown: '#ededed',
+  Unknown: '#EDEDED',
   Empty: '#ededed',
   Complete: '#206923'
 } as { [key in WorkloadStatusType]: string };
@@ -39,6 +39,7 @@ const WorkloadStatus = ({ title, data }: { title: string; data?: Array<WorkloadS
   if (data.length === 0) {
     data = [{ type: 'Empty', value: 0 }];
   }
+  console.log(data);
 
   return (
     <PieChart

diff --git a/frontend/plugins/kubepanel/src/pages/kubepanel/kube-object/workload/pod/container-status.tsx b/frontend/plugins/kubepanel/src/pages/kubepanel/kube-object/workload/pod/container-status.tsx
@@ -69,14 +69,14 @@ export const renderContainerStateTooltipTitle = (
 
   return (
     <>
-      <div className="text-center">
+      <div className="text-left font-medium">
         {name} {<ContainerStatus state={key} status={status} />}
       </div>
-      <div className="flex flex-col align-center flex-wrap w-max">
+      <div className="flex flex-col align-center flex-wrap">
         {entries(state[key]).map(([name, value]) => (
-          <div className="grid gap-2.5 grid-cols-[max-content_1fr] grid-flow-row" key={name}>
-            <div className="text-right font-medium">{startCase(name)}</div>
-            <div className="text-left font-light text-gray-300">{value}</div>
+          <div className="grid gap-3 grid-cols-[max-content_1fr] grid-flow-row 	" key={name}>
+            <div className="text-left font-medium">{startCase(name)}</div>
+            <div className="text-left font-[#131A26]">{value}</div>
           </div>
         ))}
       </div>

diff --git a/frontend/plugins/kubepanel/src/services/request.ts b/frontend/plugins/kubepanel/src/services/request.ts
@@ -53,13 +53,15 @@ export function GET<T = any>(
     ...config
   });
 }
+
 export function POST<T = any>(
   url: string,
   data?: { [key: string]: any },
   config?: AxiosRequestConfig
 ): Promise<T> {
   return request.post(url, data, config);
 }
+
 export function DELETE<T = any>(
   url: string,
   data?: { [key: string]: any },
@@ -70,6 +72,7 @@ export function DELETE<T = any>(
     ...config
   });
 }
+
 export function PUT<T = any>(
   url: string,
   data?: { [key: string]: any },

diff --git a/frontend/plugins/kubepanel/src/store/global.ts b/frontend/plugins/kubepanel/src/store/global.ts
@@ -1,37 +1,15 @@
 import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
-import { immer } from 'zustand/middleware/immer';
 
 type State = {
   screenWidth: number;
   setScreenWidth: (e: number) => void;
-  loading: boolean;
-  setLoading: (val: boolean) => void;
   lastRoute: string;
   setLastRoute: (val: string) => void;
 };
 
-export const useGlobalStore = create<State>()(
-  devtools(
-    immer((set, get) => ({
-      screenWidth: 1440,
-      setScreenWidth(e: number) {
-        set((state) => {
-          state.screenWidth = e;
-        });
-      },
-      loading: false,
-      setLoading(val: boolean) {
-        set((state) => {
-          state.loading = val;
-        });
-      },
-      lastRoute: '/',
-      setLastRoute(val) {
-        set((state) => {
-          state.lastRoute = val;
-        });
-      }
-    }))
-  )
-);
+export const useGlobalStore = create<State>()((set) => ({
+  screenWidth: 1440,
+  setScreenWidth: (e) => set({ screenWidth: e }),
+  lastRoute: '/',
+  setLastRoute: (val) => set({ lastRoute: val })
+}));