fix: docs select style & cronjob bug, desktop guide bug (#5386)

* fix: docs select style * fix: accumulate db cpu and memory * fix docs * fix cronjob * fix desktop
labring · Feb 21, 2025 · 6f3cb20 · 6f3cb20
1 parent 4a3b078
commit 6f3cb20
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 42 deletions.
diff --git a/docs/website/src/pages/self-hosting/plan/index.tsx b/docs/website/src/pages/self-hosting/plan/index.tsx
@@ -34,6 +34,7 @@ export default function Plan() {
   const [months, setMonths] = useState('3');
   const [cpu, setCpu] = useState(8);
   const [memory, setMemory] = useState(16);
+  const [isOpen, setIsOpen] = useState(false);
 
   const price = useMemo(() => {
     return calculatePrice({ cpu, memory, months });
@@ -295,41 +296,56 @@ export default function Plan() {
           <div className="flex items-center mt-10">
             <div className="w-28">月数</div>
             <div className="relative">
-              <select
-                value={months}
-                onChange={(e) => {
-                  setMonths(e.target.value);
-                }}
-                className="w-52 input-select h-8 border-gray-300 border-none bg-transparent text-white/80 text-xs rounded-md block focus-visible:outline-none lg:w-10"
+              <div
+                className="w-52 input-select min-w-[100px] h-8 flex items-center px-3 cursor-pointer text-white/80 text-xs lg:w-10"
+                onClick={() => setIsOpen(!isOpen)}
                 style={{
                   borderRadius: '6px',
                   border: '1px solid rgba(232, 235, 240, 0.10)',
                   background: 'rgba(247, 248, 250, 0.10)'
                 }}
               >
-                {MonthMapList.map((item) => (
-                  <option key={item.label} value={item.value}>
-                    {item.label}
-                  </option>
-                ))}
-              </select>
-              <div className="absolute top-[6px] right-[10px]">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="17"
-                  height="16"
-                  viewBox="0 0 17 16"
-                  fill="none"
-                >
-                  <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M4.32173 5.52851C4.58208 5.26816 5.00419 5.26816 5.26454 5.52851L8.79313 9.05711L12.3217 5.52851C12.5821 5.26816 13.0042 5.26816 13.2645 5.52851C13.5249 5.78886 13.5249 6.21097 13.2645 6.47132L9.26454 10.4713C9.00419 10.7317 8.58208 10.7317 8.32173 10.4713L4.32173 6.47132C4.06138 6.21097 4.06138 5.78886 4.32173 5.52851Z"
-                    fill="white"
-                    fillOpacity="0.7"
-                  />
-                </svg>
+                {MonthMapList.find((item) => item.value === months)?.label}
+                <div className="absolute top-[6px] right-[10px]">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="17"
+                    height="16"
+                    viewBox="0 0 17 16"
+                    fill="none"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M4.32173 5.52851C4.58208 5.26816 5.00419 5.26816 5.26454 5.52851L8.79313 9.05711L12.3217 5.52851C12.5821 5.26816 13.0042 5.26816 13.2645 5.52851C13.5249 5.78886 13.5249 6.21097 13.2645 6.47132L9.26454 10.4713C9.00419 10.7317 8.58208 10.7317 8.32173 10.4713L4.32173 6.47132C4.06138 6.21097 4.06138 5.78886 4.32173 5.52851Z"
+                      fill="white"
+                      fillOpacity="0.7"
+                    />
+                  </svg>
+                </div>
               </div>
+              {isOpen && (
+                <div
+                  className="absolute top-full left-0 w-52 mt-1 z-10 rounded-md overflow-hidden"
+                  style={{
+                    background: 'rgba(247, 248, 250, 0.10)',
+                    border: '1px solid rgba(232, 235, 240, 0.10)'
+                  }}
+                >
+                  {MonthMapList.map((item) => (
+                    <div
+                      key={item.value}
+                      className="px-3 py-2 hover:bg-white/10 cursor-pointer text-white/80 text-xs"
+                      onClick={() => {
+                        setMonths(item.value);
+                        setIsOpen(false);
+                      }}
+                    >
+                      {item.label}
+                    </div>
+                  ))}
+                </div>
+              )}
             </div>
           </div>
 

diff --git a/frontend/desktop/src/components/task/useDriver.tsx b/frontend/desktop/src/components/task/useDriver.tsx
@@ -1,6 +1,7 @@
 import { checkUserTask, getUserTasks, updateTask } from '@/api/platform';
 import { AppStoreIcon, DBproviderIcon, DriverStarIcon, LaunchpadIcon } from '@/components/icons';
 import useAppStore from '@/stores/app';
+import useCallbackStore from '@/stores/callback';
 import { useConfigStore } from '@/stores/config';
 import { useDesktopConfigStore } from '@/stores/desktopConfig';
 import { UserTask } from '@/types/task';
@@ -22,6 +23,7 @@ export default function useDriver() {
   const { taskComponentState, setTaskComponentState } = useDesktopConfigStore();
   const { canShowGuide } = useDesktopConfigStore();
   const { installedApps } = useAppStore();
+  const { workspaceInviteCode } = useCallbackStore();
 
   useEffect(() => {
     const fetchUserTasks = async () => {
@@ -51,13 +53,13 @@ export default function useDriver() {
       }
     };
 
-    if (isPC && conf?.guideEnabled && canShowGuide) {
+    if (isPC && conf?.guideEnabled && canShowGuide && !workspaceInviteCode) {
       handleUserGuide();
     } else {
       setDesktopGuide(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [conf?.guideEnabled, isPC, canShowGuide]);
+  }, [conf?.guideEnabled, isPC, canShowGuide, workspaceInviteCode]);
 
   const completeGuide = async () => {
     try {

diff --git a/frontend/providers/cronjob/src/utils/json2Yaml.ts b/frontend/providers/cronjob/src/utils/json2Yaml.ts
@@ -33,6 +33,7 @@ export const json2CronJob = (data: CronJobEditType) => {
   if (data.jobType === 'url') {
     data.imageName = 'curlimages/curl';
     data.cmdParam = `["/bin/sh", "-c", "curl ${data.url}"]`;
+    data.runCMD = '';
   }
 
   if (data.jobType === 'launchpad') {

diff --git a/frontend/providers/dbprovider/src/pages/db/detail/components/AppBaseInfo.tsx b/frontend/providers/dbprovider/src/pages/db/detail/components/AppBaseInfo.tsx
@@ -139,7 +139,7 @@ const AppBaseInfo = ({ db = defaultDBDetail }: { db: DBDetailType }) => {
   const externalNetWork = useMemo(() => {
     const host = `${SystemEnv?.domain}`;
     const port = service?.spec?.ports?.[0]?.nodePort?.toString() || '';
-    let connection = `${DBTypeSecretMap[db.dbType].connectKey}://${secret?.username}:${
+    let connection = `${DBTypeSecretMap[db.dbType]?.connectKey}://${secret?.username}:${
       secret?.password
     }@${host}:${port}`;
 

diff --git a/frontend/providers/dbprovider/src/pages/dbs/components/dbList.tsx b/frontend/providers/dbprovider/src/pages/dbs/components/dbList.tsx
@@ -170,7 +170,8 @@ const DBList = ({
       },
       {
         accessorKey: 'storage',
-        header: () => t('storage')
+        header: () => t('storage'),
+        cell: ({ row }) => <>{row.original.storage}Gi</>
       },
       {
         id: 'actions',

diff --git a/frontend/providers/dbprovider/src/utils/adapt.ts b/frontend/providers/dbprovider/src/utils/adapt.ts
@@ -62,6 +62,17 @@ export const getDBSource = (
 };
 
 export const adaptDBListItem = (db: KbPgClusterType): DBListItemType => {
+  let cpu = 0;
+  let memory = 0;
+  let storage = 0;
+  db.spec?.componentSpecs.forEach((comp) => {
+    cpu += cpuFormatToM(comp?.resources?.limits?.cpu || '0');
+    memory += memoryFormatToMi(comp?.resources?.limits?.memory || '0');
+    storage += storageFormatToNum(
+      comp?.volumeClaimTemplates?.[0]?.spec?.resources?.requests?.storage || '0'
+    );
+  });
+
   // compute store amount
   return {
     id: db.metadata?.uid || ``,
@@ -72,11 +83,9 @@ export const adaptDBListItem = (db: KbPgClusterType): DBListItemType => {
         ? dbStatusMap[db?.status?.phase]
         : dbStatusMap.UnKnow,
     createTime: dayjs(db.metadata?.creationTimestamp).format('YYYY/MM/DD HH:mm'),
-    cpu: cpuFormatToM(db.spec?.componentSpecs?.[0]?.resources?.limits?.cpu),
-    memory: cpuFormatToM(db.spec?.componentSpecs?.[0]?.resources?.limits?.memory),
-    storage:
-      db.spec?.componentSpecs?.[0]?.volumeClaimTemplates?.[0]?.spec?.resources?.requests?.storage ||
-      '-',
+    cpu,
+    memory,
+    storage: storage.toString() || '-',
     conditions: db?.status?.conditions || [],
     isDiskSpaceOverflow: false,
     labels: db.metadata.labels || {},
@@ -85,6 +94,17 @@ export const adaptDBListItem = (db: KbPgClusterType): DBListItemType => {
 };
 
 export const adaptDBDetail = (db: KbPgClusterType): DBDetailType => {
+  let cpu = 0;
+  let memory = 0;
+  let storage = 0;
+  db.spec?.componentSpecs.forEach((comp) => {
+    cpu += cpuFormatToM(comp?.resources?.limits?.cpu || '0');
+    memory += memoryFormatToMi(comp?.resources?.limits?.memory || '0');
+    storage += storageFormatToNum(
+      comp?.volumeClaimTemplates?.[0]?.spec?.resources?.requests?.storage || '0'
+    );
+  });
+
   return {
     id: db.metadata?.uid || ``,
     createTime: dayjs(db.metadata?.creationTimestamp).format('YYYY/MM/DD HH:mm'),
@@ -96,11 +116,9 @@ export const adaptDBDetail = (db: KbPgClusterType): DBDetailType => {
     dbVersion: db?.metadata?.labels['clusterversion.kubeblocks.io/name'] || '',
     dbName: db.metadata?.name || 'db name',
     replicas: db.spec?.componentSpecs?.[0]?.replicas || 1,
-    cpu: cpuFormatToM(db.spec?.componentSpecs?.[0]?.resources.limits.cpu),
-    memory: memoryFormatToMi(db.spec?.componentSpecs?.[0]?.resources.limits.memory),
-    storage: storageFormatToNum(
-      db.spec?.componentSpecs?.[0]?.volumeClaimTemplates?.[0]?.spec?.resources?.requests?.storage
-    ),
+    cpu,
+    memory,
+    storage,
     conditions: db?.status?.conditions || [],
     isDiskSpaceOverflow: false,
     labels: db.metadata.labels || {},