feat: add search filter for workload; add statefulset implementation

Signed-off-by: warjiang <1096409085@qq.com>

ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/index.tsx

@@ -5,6 +5,7 @@ import {
   Input,
   message,
   Popconfirm,
+  Segmented,
   Select,
   Space,
   Table,
@@ -13,8 +14,8 @@ import {
 } from 'antd';
 import { Icons } from '@/components/icons';
 import { GetNamespaces } from '@/services/namespace';
-import { GetWorkloads } from '@/services/workload';
 import type { DeploymentWorkload } from '@/services/workload';
+import { GetWorkloads } from '@/services/workload';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 import { DeleteResource, GetResource } from '@/services/unstructured.ts';
@@ -25,14 +26,25 @@ import WorkloadDetailDrawer, {
 import { useToggle, useWindowSize } from '@uidotdev/usehooks';
 import { stringify } from 'yaml';
 import TagList from '@/components/tag-list';
+import { WorkloadKind } from '@/services/base.ts';
 
 /*
 propagationpolicy.karmada.io/name: "nginx-propagation"
 propagationpolicy.karmada.io/namespace: "default"
 */
+
 const propagationpolicyKey = 'propagationpolicy.karmada.io/name';
 const WorkloadPage = () => {
-  const { data: nsData } = useQuery({
+  const [filter, setFilter] = useState<{
+    kind: WorkloadKind;
+    selectedWorkSpace: string;
+    searchText: string;
+  }>({
+    kind: WorkloadKind.Deployment,
+    selectedWorkSpace: '',
+    searchText: '',
+  });
+  const { data: nsData, isLoading: isNsDataLoading } = useQuery({
     queryKey: ['GetNamespaces'],
     queryFn: async () => {
       const clusters = await GetNamespaces({});
@@ -49,17 +61,21 @@ const WorkloadPage = () => {
     });
   }, [nsData]);
   const { data, isLoading, refetch } = useQuery({
-    queryKey: ['GetWorkloads'],
+    queryKey: ['GetWorkloads', JSON.stringify(filter)],
     queryFn: async () => {
-      const clusters = await GetWorkloads({});
+      const clusters = await GetWorkloads({
+        kind: filter.kind,
+        namespace: filter.selectedWorkSpace,
+        keyword: filter.searchText,
+      });
       return clusters.data || {};
     },
   });
   const [drawerData, setDrawerData] = useState<
     Omit<WorkloadDetailDrawerProps, 'onClose'>
   >({
     open: false,
-    kind: '',
+    kind: WorkloadKind.Unknown,
     namespace: '',
     name: '',
   });
@@ -113,7 +129,7 @@ const WorkloadPage = () => {
         return (
           <TagList
             tags={params}
-            maxLen={size && size.width! > 1800 ? undefined : 2}
+            maxLen={size && size.width! > 1800 ? undefined : 1}
           />
         );
       },
@@ -149,7 +165,7 @@ const WorkloadPage = () => {
               onClick={() => {
                 setDrawerData({
                   open: true,
-                  kind: r.typeMeta.kind,
+                  kind: r.typeMeta.kind as WorkloadKind,
                   name: r.objectMeta.name,
                   namespace: r.objectMeta.namespace,
                 });
@@ -204,20 +220,43 @@ const WorkloadPage = () => {
   ];
 
   const [messageApi, messageContextHolder] = message.useMessage();
+
   return (
     <Panel>
       <div className={'flex flex-row justify-between mb-4'}>
-        <div className={'flex flex-row justify-center space-x-4'}>
-          <h3 className={'leading-[32px]'}>
-            {i18nInstance.t('280c56077360c204e536eb770495bc5f')}
-          </h3>
-          <Select options={nsOptions} className={'w-[200px]'} />
-          <Input.Search
-            placeholder={i18nInstance.t('cfaff3e369b9bd51504feb59bf0972a0')}
-            className={'w-[300px]'}
+        <div>
+          <Segmented
+            value={filter.kind}
+            style={{ marginBottom: 8 }}
+            onChange={(value) => {
+              // reset filter when switch workload kind
+              const k = value as WorkloadKind;
+              if (k !== filter.kind) {
+                setFilter({
+                  ...filter,
+                  kind: value as WorkloadKind,
+                  selectedWorkSpace: '',
+                  searchText: '',
+                });
+              } else {
+                setFilter({
+                  ...filter,
+                  kind: value as WorkloadKind,
+                });
+              }
+            }}
+            options={[
+              {
+                label: 'Deployment',
+                value: 'deployment',
+              },
+              {
+                label: 'Statefulset',
+                value: 'statefulset',
+              },
+            ]}
           />
         </div>
-
         <Button
           type={'primary'}
           icon={<Icons.add width={16} height={16} />}
@@ -229,11 +268,41 @@ const WorkloadPage = () => {
           {i18nInstance.t('96d6b0fcc58b6f65dc4c00c6138d2ac0')}
         </Button>
       </div>
+      <div className={'flex flex-row space-x-4 mb-4'}>
+        <h3 className={'leading-[32px]'}>
+          {i18nInstance.t('280c56077360c204e536eb770495bc5f')}
+        </h3>
+        <Select
+          options={nsOptions}
+          className={'min-w-[200px]'}
+          value={filter.selectedWorkSpace}
+          loading={isNsDataLoading}
+          showSearch
+          allowClear
+          onChange={(v) => {
+            setFilter({
+              ...filter,
+              selectedWorkSpace: v,
+            });
+          }}
+        />
+        <Input.Search
+          placeholder={i18nInstance.t('cfaff3e369b9bd51504feb59bf0972a0')}
+          className={'w-[300px]'}
+          onPressEnter={(e) => {
+            const input = e.currentTarget.value;
+            setFilter({
+              ...filter,
+              searchText: input,
+            });
+          }}
+        />
+      </div>
       <Table
         rowKey={(r: DeploymentWorkload) => r.objectMeta.name || ''}
         columns={columns}
         loading={isLoading}
-        dataSource={data?.deployments || []}
+        dataSource={data ? data.deployments || data.statefulSets : []}
       />
 
       <NewWorkloadEditorModal
@@ -268,7 +337,7 @@ const WorkloadPage = () => {
         onClose={() => {
           setDrawerData({
             open: false,
-            kind: '',
+            kind: WorkloadKind.Unknown,
             namespace: '',
             name: '',
           });

ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/workload-detail-drawer.tsx

@@ -17,10 +17,11 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import styles from './index.module.less';
+import { WorkloadKind } from '@/services/base.ts';
 
 export interface WorkloadDetailDrawerProps {
   open: boolean;
-  kind: string;
+  kind: WorkloadKind;
   namespace: string;
   name: string;
   onClose: () => void;
@@ -32,22 +33,24 @@ const WorkloadDetailDrawer: FC<WorkloadDetailDrawerProps> = (props) => {
     return !!(kind && name && namespace);
   }, [kind, name, namespace]);
   const { data: detailData, isLoading: isDetailDataLoading } = useQuery({
-    queryKey: ['GetWorkloadDetail', kind, name, name],
+    queryKey: ['GetWorkloadDetail', kind, name, namespace],
     queryFn: async () => {
       const workloadDetailRet = await GetWorkloadDetail({
         namespace,
         name,
+        kind,
       });
       return workloadDetailRet.data || {};
     },
     enabled: enableFetch,
   });
   const { data: eventsData } = useQuery({
-    queryKey: ['GetWorkloadEvents', kind, name, name],
+    queryKey: ['GetWorkloadEvents', kind, name, namespace],
     queryFn: async () => {
       const workloadEventsRet = await GetWorkloadEvents({
         namespace,
         name,
+        kind,
       });
       return workloadEventsRet.data || {};
     },

ui/apps/dashboard/src/services/base.ts

@@ -55,3 +55,9 @@ export interface RollingUpdateStrategy {
   maxSurge: string;
   maxUnavailable: string;
 }
+
+export enum WorkloadKind {
+  Unknown = '',
+  Deployment = 'deployment',
+  Statefulset = 'statefulset',
+}

ui/apps/dashboard/src/services/workload.ts

@@ -1,8 +1,11 @@
 import {
+  convertDataSelectQuery,
+  DataSelectQuery,
   IResponse,
   karmadaClient,
   RollingUpdateStrategy,
   Selector,
+  WorkloadKind,
 } from '@/services/base.ts';
 import { ObjectMeta, TypeMeta } from '@/services/base';
 
@@ -14,6 +17,15 @@ export interface DeploymentWorkload {
   initContainerImages: any;
 }
 
+export interface StatefulsetWorkload {
+  objectMeta: ObjectMeta;
+  typeMeta: TypeMeta;
+  pods: Pods;
+  containerImages: string[];
+  initContainerImages: any;
+}
+export type Workload = DeploymentWorkload | StatefulsetWorkload;
+
 export interface Pods {
   current: number;
   desired: number;
@@ -32,19 +44,30 @@ export interface WorkloadStatus {
   terminating: number;
 }
 
-export async function GetWorkloads(params: { namespace?: string }) {
-  const { namespace } = params;
-  const url = namespace ? `/deployment/${namespace}` : '/deployment';
+export async function GetWorkloads(params: {
+  namespace?: string;
+  kind: WorkloadKind;
+  keyword?: string;
+}) {
+  const { kind, namespace } = params;
+  const requestData = {} as DataSelectQuery;
+  if (params.keyword) {
+    requestData.filterBy = ['name', params.keyword];
+  }
+  const url = namespace ? `/${kind}/${namespace}` : `/${kind}`;
   const resp = await karmadaClient.get<
     IResponse<{
       errors: string[];
       listMeta: {
         totalItems: number;
       };
       status: WorkloadStatus;
-      deployments: DeploymentWorkload[];
+      deployments?: Workload[];
+      statefulSets?: Workload[];
     }>
-  >(url);
+  >(url, {
+    params: convertDataSelectQuery(requestData),
+  });
   return resp.data;
 }
 
@@ -73,16 +96,18 @@ export interface WorkloadStatusInfo {
 export async function GetWorkloadDetail(params: {
   namespace?: string;
   name: string;
+  kind: WorkloadKind;
 }) {
   // /deployment/:namespace/:deployment
-  const { name, namespace } = params;
+  const { kind, name, namespace } = params;
+  const url = `/${kind}/${namespace}/${name}`;
   const resp = await karmadaClient.get<
     IResponse<
       {
         errors: string[];
       } & WorkloadDetail
     >
-  >(`/deployment/${namespace}/${name}`);
+  >(url);
   return resp.data;
 }
 
@@ -106,8 +131,10 @@ export interface WorkloadEvent {
 export async function GetWorkloadEvents(params: {
   namespace: string;
   name: string;
+  kind: WorkloadKind;
 }) {
-  const { name, namespace } = params;
+  const { kind, name, namespace } = params;
+  const url = `/${kind}/${namespace}/${name}/event`;
   const resp = await karmadaClient.get<
     IResponse<{
       errors: string[];
@@ -116,7 +143,7 @@ export async function GetWorkloadEvents(params: {
       };
       events: WorkloadEvent[];
     }>
-  >(`/deployment/${namespace}/${name}/event`);
+  >(url);
   return resp.data;
 }