fix: Display of UI and functional integration in Kube Panel (#4365)

* feat: Replaced mobx with zustand

* fix: displayed wrong time and info

* fix: The content of badge overflow

* style: Collected theme and added dumpKubeObject function

frontend/plugins/kubepanel/src/components/kube/kube-badge.tsx

@@ -21,7 +21,7 @@ export const KubeBadge = ({
     const { offsetWidth = 0, scrollWidth = 0 } = elem.current ?? {};
 
     setIsExpandable(expandable && offsetWidth < scrollWidth);
-  }, [expandable, elem.current]);
+  }, [expandable]);
 
   const onClick = (e: React.MouseEvent<HTMLSpanElement>) => {
     console.log(e.target);
@@ -36,15 +36,18 @@ export const KubeBadge = ({
 
   return (
     <div
-      className={`inline-block py-2 px-2 mr-1 max-w-full rounded-[4px] text-xs font-medium ${disabledClass}
-        ${isExpanded ? '' : 'truncate'} ${
-        backgroundColor ? `bg-${backgroundColor}` : 'bg-[#EFF0F1]'
-      }
-      `}
-      onClick={onClick}
+      className={`inline-block py-2 px-2 mr-1 my-1 max-w-full rounded-[4px] ${disabledClass}
+    ${backgroundColor ? `bg-${backgroundColor}` : 'bg-[#EFF0F1]'} ${
+        isExpanded ? 'break-words' : 'truncate'
+      } `}
       ref={elem}
+      onClick={onClick}
     >
-      <span className={textColor ? `text-${textColor}` : 'text-black'}>{label}</span>
+      <span
+        className={`w-full text-xs font-medium ${textColor ? `text-${textColor}` : 'text-black'} `}
+      >
+        {label}
+      </span>
     </div>
   );
 };

frontend/plugins/kubepanel/src/components/kube/reactive-duration.tsx

@@ -45,11 +45,11 @@ export const ReactiveDuration = ({ timestamp, compact = true }: ReactiveDuration
   if (!timestamp) {
     return <>&lt;unknown&gt;</>;
   }
-  const [duration, setDuration] = useState(0);
-  const [ms, setMs] = useState(1000);
-
   const timestampSeconds = new Date(timestamp).getTime();
 
+  const [duration, setDuration] = useState(Date.now() - timestampSeconds);
+  const [ms, setMs] = useState(computeUpdateInterval(timestampSeconds, compact));
+
   useEffect(() => {
     const interval = setInterval(() => {
       const nextMs = computeUpdateInterval(timestampSeconds, compact);

frontend/plugins/kubepanel/src/constants/theme.ts

@@ -0,0 +1,13 @@
+import { ThemeConfig } from 'antd';
+
+export const theme: ThemeConfig = {
+  components: {
+    Menu: {
+      itemSelectedBg: '#9699B41A',
+      itemColor: '#485058'
+    },
+    Collapse: {
+      headerPadding: 0
+    }
+  }
+};

frontend/plugins/kubepanel/src/pages/api/update.ts

@@ -7,7 +7,7 @@ import { jsonRes } from '@/services/backend/response';
 import { NextApiRequest, NextApiResponse } from 'next';
 import yaml from 'js-yaml';
 import { mustGetTypedProperty } from '@/utils/api';
-import { isString } from 'lodash';
+import { entries, isString } from 'lodash';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
@@ -30,6 +30,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       name,
       resourceData
     );
+    console.log(data);
 
     jsonRes(res, {
       code: 200,

frontend/plugins/kubepanel/src/pages/kubepanel/components/action-button/update-editor-modal.tsx

@@ -1,8 +1,8 @@
 import { KubeObject } from '@/k8slens/kube-object';
 import { ApiResp } from '@/services/kubernet';
+import { dumpKubeObject } from '@/utils/yaml';
 import { Editor } from '@monaco-editor/react';
 import { Button, Modal, message } from 'antd';
-import yaml from 'js-yaml';
 import { editor } from 'monaco-editor';
 import { useEffect, useRef, useState } from 'react';
 
@@ -42,13 +42,7 @@ const UpdateEditorModal = <K extends KubeObject = KubeObject>({
     updateRequest();
   }, [clickedUpdate]);
 
-  const editorValue = yaml.dump({
-    apiVersion: obj.apiVersion,
-    kind: obj.kind,
-    metadata: obj.metadata,
-    status: obj.status,
-    spec: obj.spec
-  });
+  const editorValue = dumpKubeObject<KubeObject>(obj);
 
   return (
     <>

frontend/plugins/kubepanel/src/pages/kubepanel/components/drawer/drawer-collapse.tsx

@@ -1,5 +1,5 @@
 import { DrawerItem } from '@/pages/kubepanel/components/drawer/drawer-item';
-import { Collapse, ConfigProvider } from 'antd';
+import { Collapse } from 'antd';
 
 interface Props {
   children: React.ReactNode;
@@ -11,28 +11,14 @@ interface Props {
 const DrawerCollapse = ({ children, header }: Props) => {
   if (!header) return null;
   return (
-    <ConfigProvider
-      theme={{
-        components: {
-          Collapse: {
-            headerPadding: 0
-          }
-        }
-      }}
-    >
-      <Collapse
-        className="bg-transparent rounded-none"
-        expandIconPosition="end"
-        bordered={false}
+    <Collapse className="bg-transparent rounded-none" expandIconPosition="end" bordered={false}>
+      <Collapse.Panel
+        header={<DrawerItem padding={false} name={header.name} value={header.value} />}
+        key="1"
       >
-        <Collapse.Panel
-          header={<DrawerItem padding={false} name={header.name} value={header.value} />}
-          key="1"
-        >
-          {children}
-        </Collapse.Panel>
-      </Collapse>
-    </ConfigProvider>
+        {children}
+      </Collapse.Panel>
+    </Collapse>
   );
 };
 

frontend/plugins/kubepanel/src/pages/kubepanel/components/drawer/drawer.tsx

@@ -13,8 +13,9 @@ const Drawer = ({ title, children, open, onClose }: Props) => {
       open={open}
       closeIcon={<CloseOutlined style={{ color: 'white', fontSize: '32px' }} />}
       title={<span className="pl-2 text-white font-medium text-base">{title}</span>}
-      width="60vh"
+      width="550px"
       onClose={onClose}
+      destroyOnClose
     >
       <div className="flex flex-col gap-6">{children}</div>
     </AntdDrawer>

frontend/plugins/kubepanel/src/pages/kubepanel/components/layout.tsx

@@ -1,5 +1,6 @@
-import { Layout } from 'antd';
+import { ConfigProvider, Layout } from 'antd';
 import ResourceSideNav, { SideNavItemKey } from './sidebar/sidebar';
+import { theme } from '@/constants/theme';
 
 const { Header, Footer, Sider, Content } = Layout;
 
@@ -10,13 +11,15 @@ interface Props {
 
 export default function AppLayout({ children, onClickSideNavItem }: Props) {
   return (
-    <Layout>
-      <Sider width={256} theme="light" breakpoint="lg" collapsedWidth="0">
-        <ResourceSideNav onClick={onClickSideNavItem} />
-      </Sider>
+    <ConfigProvider theme={theme}>
       <Layout>
-        <Content style={{ padding: '24px', backgroundColor: "white" }}>{children}</Content>
+        <Sider width={256} theme="light" breakpoint="lg" collapsedWidth="0">
+          <ResourceSideNav onClick={onClickSideNavItem} />
+        </Sider>
+        <Layout>
+          <Content style={{ padding: '24px', backgroundColor: 'white' }}>{children}</Content>
+        </Layout>
       </Layout>
-    </Layout>
+    </ConfigProvider>
   );
 }

frontend/plugins/kubepanel/src/utils/yaml.ts

@@ -0,0 +1,13 @@
+import { KubeObject } from '@/k8slens/kube-object';
+import { dump } from 'js-yaml';
+import { PartialDeep } from 'type-fest';
+
+export function dumpKubeObject<K extends KubeObject = KubeObject>(obj: PartialDeep<K>) {
+  const objWithoutFunction: Record<string, any> = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value !== 'function') {
+      objWithoutFunction[key] = value;
+    }
+  }
+  return dump(objWithoutFunction);
+}