refactor: connector api

src/views/application-management/environments/pages/list.vue

@@ -303,7 +303,7 @@
   const action = ref(PageAction.EDIT);
   const projectName = route.params.projectName as string;
   const queryParams = reactive({
-    projectName,
+    namespace: projectName,
     fieldSelector: '',
     limit: appStore.perPage || 20,
     continue: ''
@@ -361,8 +361,7 @@
     try {
       loading.value = true;
       const params: any = {
-        ...pickBy(queryParams, (val) => !!val),
-        sort: [sort.value]
+        ...pickBy(queryParams, (val) => !!val)
       };
       const { data } = await queryEnvironments(params);
       dataList.value = _.map(data.items || [], (item) => {

src/views/application-management/projects/routes/connectors/index.ts

@@ -4,7 +4,7 @@ import { PageAction } from '@/views/config';
 
 export default [
   {
-    path: 'project/:projectId/connector/k8s-detail/:action',
+    path: 'project/:projectName/connector/k8s-detail/:action',
     name: 'ProjectConnectorK8sDetail',
     component: () => import('../../pages/connector/kubernetes.vue'),
     meta: {
@@ -25,7 +25,7 @@ export default [
     }
   },
   {
-    path: 'project/:projectId/connector/scm-detail/:action',
+    path: 'project/:projectName/connector/scm-detail/:action',
     name: 'ProjectConnectorScmDetail',
     component: () => import('../../pages/connector/version-control.vue'),
     meta: {
@@ -46,7 +46,7 @@ export default [
     }
   },
   {
-    path: 'project/:projectId/connector/custom-detail/:action',
+    path: 'project/:projectName/connector/custom-detail/:action',
     name: 'ProjectConnectorCustomDetail',
     component: () => import('../../pages/connector/custom.vue'),
     meta: {
@@ -67,7 +67,7 @@ export default [
     }
   },
   {
-    path: 'project/:projectId/connector/cloud-provider/:action',
+    path: 'project/:projectName/connector/cloud-provider/:action',
     name: 'ProjectConnectorProviderDetail',
     component: () => import('../../pages/connector/cloud-provider.vue'),
     meta: {

src/views/config/index.ts

@@ -260,30 +260,35 @@ export const QAlinkMap = {
 };
 export const USER_DEFAULT_PROJECT = 'USER_DEFAULT_PROJECT';
 
+const EnvironmentMaps = {
+  Development: 'Development',
+  Production: 'Production',
+  Staging: 'Staging'
+};
 export const EnvironmentTypeMap = {
-  development: 'common.environment.development',
-  production: 'common.environment.production',
-  staging: 'common.environment.staging'
+  [EnvironmentMaps.Development]: 'common.environment.development',
+  [EnvironmentMaps.Production]: 'common.environment.production',
+  [EnvironmentMaps.Staging]: 'common.environment.staging'
 };
 
 export const EnvironmentTypeList = [
   {
     label: 'common.environment.development',
-    value: 'development'
+    value: EnvironmentMaps.Development
   },
   {
     label: 'common.environment.staging',
-    value: 'staging'
+    value: EnvironmentMaps.Staging
   },
   {
     label: 'common.environment.production',
-    value: 'production'
+    value: EnvironmentMaps.Production
   }
 ];
 export const EnvironmentTypeOrder = {
-  development: 1,
-  production: 3,
-  staging: 2
+  [EnvironmentMaps.Development]: 1,
+  [EnvironmentMaps.Production]: 3,
+  [EnvironmentMaps.Staging]: 2
 };
 
 export const CommonButtonValue = {

src/views/config/resource-kinds.ts

@@ -7,7 +7,8 @@ export default {
   Setting: 'Setting',
   Settings: 'Settings',
   Project: 'Project',
-  Variable: 'Variable'
+  Variable: 'Variable',
+  Connector: 'Connector'
 };
 
 export const apiVersion = 'walrus.seal.io/v1';

src/views/operation-hub/connectors/api/index.ts

@@ -49,13 +49,13 @@ export interface ResultType {
   items: ConnectorRowData[];
 }
 
-export function queryConnectors(params: QueryType, cancelToken?) {
+export function queryConnectors(params: ListQuery, cancelToken?) {
   const url = generateConnectorAPI({
     name: params.name,
     namespace: params.namespace
   });
 
-  return axios.get<ListResult<DataListItem>>(url, {
+  return axios.get<ListResult<ConnectorRowData>>(url, {
     params: _.omit(params, ['name', 'namespace']),
     cancelToken,
     paramsSerializer: (obj) => {

src/views/operation-hub/connectors/components/table-list.vue

@@ -107,7 +107,7 @@
         >
           <template #cell="{ record }">
             <a-link
-              v-if="isLocalConnectorType(record.category)"
+              v-if="isLocalConnectorType(record.spec.category)"
               type="text"
               size="small"
               :hoverable="false"
@@ -127,7 +127,9 @@
         >
           <template #cell="{ record }">
             <span
-              v-if="_.includes([ConnectorCategory.Custom], record.category)"
+              v-if="
+                _.includes([ConnectorCategory.Custom], record.spec.category)
+              "
               class="mright-5"
             >
               <i
@@ -136,9 +138,13 @@
               ></i>
             </span>
             <span v-else class="mright-5">
-              <ProviderIcon :provider="toLower(record.type)"></ProviderIcon>
+              <ProviderIcon
+                :provider="toLower(record.spec.type)"
+              ></ProviderIcon>
             </span>
-            <span>{{ get(gitType, record.type) || record.type }}</span>
+            <span>{{
+              get(gitType, record.spec.type) || record.spec.type
+            }}</span>
           </template>
         </a-table-column>
         <a-table-column
@@ -151,7 +157,7 @@
         >
           <template #cell="{ record }">
             <StatusLabel
-              v-if="record.category !== ConnectorCategory.Custom"
+              v-if="record.spec.category !== ConnectorCategory.Custom"
               :status="get(record, 'status', {})"
             ></StatusLabel>
             <span v-else>-</span>
@@ -167,7 +173,9 @@
         >
           <template #cell="{ record }">
             <span>{{
-              $t(EnvironmentTypeMap[record.applicableEnvironmentType] || '')
+              $t(
+                EnvironmentTypeMap[record.spec.applicableEnvironmentType] || ''
+              )
             }}</span>
           </template>
         </a-table-column>
@@ -439,7 +447,7 @@
         ? item.disabled?.(row)
         : item.disabled;
       if (item.value === 'enableFinops') {
-        item.label = row.enableFinOps
+        item.label = row.spec.enableFinOps
           ? 'operation.connectors.table.disableFin'
           : 'operation.connectors.table.enableFin';
       }
@@ -479,8 +487,7 @@
     try {
       loading.value = true;
       const params: any = {
-        ...pickBy(queryParams, (val) => !!val),
-        sort: [sort.value]
+        ...pickBy(queryParams, (val) => !!val)
       };
       const { data } = await queryConnectors(params, axiosToken?.token);
       dataList.value = _.map(data?.items || [], (item) => {
@@ -544,7 +551,7 @@
   const handleView = (row, action?) => {
     const data = _.find(
       props.connectorTypeList,
-      (item) => item.value === row.category
+      (item) => item.value === row.spec.category
     );
     if (props.scope === 'global') {
       router.push({
@@ -572,7 +579,7 @@
   const handleCellClick = (row, col) => {
     if (
       col.dataIndex === 'metadata.name' &&
-      isLocalConnectorType(row.category)
+      isLocalConnectorType(row.spec.category)
     ) {
       handleView(row);
     }
@@ -635,7 +642,7 @@
       loading.value = true;
       const row = cloneDeep(data);
       row.enableFinOps = enable;
-      row.configData = null;
+      row.spec.config.data = null;
       await updateConnector(row);
       loading.value = false;
       Message.success(t('common.message.success'));
@@ -657,7 +664,7 @@
         handleFetchCost(row);
         break;
       case 'enableFinops':
-        handleEnableFinOps(!row.enableFinOps, row);
+        handleEnableFinOps(!row.spec.enableFinOps, row);
         break;
       case 'reinstall':
         handleReinstall(row);

src/views/operation-hub/connectors/config/index.ts

@@ -59,7 +59,8 @@ export const ConnectorCategory = {
   VersionControl: 'VersionControl',
   Custom: 'Custom',
   CloudProvider: 'CloudProvider',
-  Kubernetes: 'Kubernetes'
+  Kubernetes: 'Kubernetes',
+  Docker: 'Docker'
 };
 
 export const ConnectorType = {
@@ -216,7 +217,7 @@ export const actionList: MoreAction[] = [
     icon: 'icon-edit',
     status: 'normal',
     filterFun({ itemInfo, projectID }) {
-      if (!ConnectorCategory[itemInfo.category]) {
+      if (!ConnectorCategory[itemInfo.spec.category]) {
         return false;
       }
       return projectID

src/views/operation-hub/connectors/config/interface.ts

@@ -1,6 +1,23 @@
 import { DataListItem, AxiosRequestPayload } from '@/types/global';
 
-export type ConnectorRowData = DataListItem;
+export interface ConnectorRowData extends DataListItem {
+  spec: {
+    enableFinOps?: boolean;
+    applicableEnvironmentType: string;
+    category: string;
+    type: string;
+    config: {
+      version: string;
+      data: {
+        kubeconfig: {
+          visible: boolean;
+          value: string;
+          type: string;
+        };
+      };
+    };
+  };
+}
 
 export interface CustomAttrbute {
   key: string;
@@ -14,7 +31,27 @@ export interface CustomAttrbute {
   style?: object;
 }
 
-export type ConnectorFormData = AxiosRequestPayload;
+export interface ConnectorFormData extends AxiosRequestPayload {
+  configDataFormat?: string;
+  customConfig?: string;
+  spec: {
+    enableFinOps?: boolean;
+    applicableEnvironmentType: string;
+    category: string;
+    type: string;
+    description?: string;
+    config: {
+      version: string;
+      data: {
+        [key: string]: {
+          visible: boolean;
+          value: string;
+          type: string;
+        };
+      };
+    };
+  };
+}
 
 export interface ConnectorTypeData {
   label: string;