feat: set default cluster

src/pages/cluster-management/apis/index.ts

@@ -198,3 +198,9 @@ export async function querySystemConfig() {
     method: 'GET'
   });
 }
+
+export async function setDefaultCluster(params: { id: number }) {
+  return request(`${CLUSTERS_API}/${params.id}/set-default`, {
+    method: 'POST'
+  });
+}

src/pages/cluster-management/cluster-create.tsx

@@ -8,7 +8,13 @@ import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { PageContainerInner } from '../_components/page-box';
-import { createCluster, queryClusterToken, queryCredentialList } from './apis';
+import {
+  createCluster,
+  queryClusterList,
+  queryClusterToken,
+  queryCredentialList,
+  setDefaultCluster
+} from './apis';
 import {
   DockerStepsFromCluster,
   K8sStepsFromCluter
@@ -248,6 +254,20 @@ const ClusterCreate = () => {
     return step?.showButtons ? step?.showButtons(extraData.provider) : {};
   }, [currentStep, steps, extraData.provider]);
 
+  const checkDefaultCluster = async () => {
+    try {
+      const res = await queryClusterList({ page: 1, perPage: 10 });
+      if (res.items.length === 1) {
+        const cluster = res.items[0];
+        if (!cluster.is_default) {
+          await setDefaultCluster({
+            id: cluster.id
+          });
+        }
+      }
+    } catch (error) {}
+  };
+
   const submit = async (values: ClusterFormData) => {
     const data = {
       ...extraData,
@@ -259,6 +279,7 @@ const ClusterCreate = () => {
       ...info,
       cluster_id: res.id
     });
+    checkDefaultCluster();
     return true;
   };
 

src/pages/cluster-management/clusters.tsx

@@ -26,6 +26,7 @@ import {
   queryClusterList,
   queryCredentialList,
   queryWorkerPools,
+  setDefaultCluster,
   updateCluster,
   WORKER_POOLS_API
 } from './apis';
@@ -192,6 +193,10 @@ const Clusters: React.FC = () => {
     } else if (val === 'register_cluster') {
       handleAddWorker(row);
       setStepList(K8sStepsFromCluter);
+    } else if (val === 'isDefault') {
+      setDefaultCluster({ id: row.id }).then(() => {
+        message.success(intl.formatMessage({ id: 'common.message.success' }));
+      });
     }
   });
 

src/pages/cluster-management/components/cluster-form.tsx

@@ -151,7 +151,11 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
             credentialList={credentialList}
           ></CloudProvider>
         )}
-        <Form.Item<FormData> name="description" rules={[{ required: false }]}>
+        <Form.Item<FormData>
+          name="description"
+          rules={[{ required: false }]}
+          style={{ marginBottom: 8 }}
+        >
           <SealTextArea
             autoSize={{ minRows: 2, maxRows: 4 }}
             label={intl.formatMessage({ id: 'common.table.description' })}

src/pages/cluster-management/config/index.ts

@@ -112,6 +112,11 @@ export const clusterActionList = [
     locale: true,
     icon: icons.Catalog1
   },
+  {
+    key: 'isDefault',
+    label: 'clusters.form.setDefault',
+    icon: icons.StarOutlined
+  },
   {
     key: 'delete',
     label: 'common.button.delete',

src/pages/cluster-management/config/types.ts

@@ -52,6 +52,7 @@ export interface NodePoolListItem extends NodePoolFormData {
 export interface ClusterListItem {
   name: string;
   display_name: string;
+  is_default: boolean;
   description: string;
   worker_config: Record<string, any>;
   provider: ProviderType;
@@ -72,6 +73,7 @@ export interface ClusterFormData {
   name: string;
   description: string;
   provider: ProviderType;
+  is_default?: boolean;
   credential_id: number;
   zone: string;
   region: string;

src/pages/cluster-management/hooks/use-cluster-columns.tsx

@@ -4,7 +4,9 @@ import DropdownButtons from '@/components/drop-down-buttons';
 import { SealColumnProps } from '@/components/seal-table/types';
 import StatusTag from '@/components/status-tag';
 import { tableSorter } from '@/config/settings';
+import { StarFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
+import { Tooltip } from 'antd';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import {
@@ -37,7 +39,20 @@ const useClusterColumns = (
         sorter: tableSorter(1),
         span: 3,
         render: (text: string, record: ClusterListItem) => (
-          <AutoTooltip ghost>{text}</AutoTooltip>
+          <>
+            <AutoTooltip ghost>{text}</AutoTooltip>
+            {record.is_default && (
+              <Tooltip
+                title={intl.formatMessage({
+                  id: 'clusters.form.setDefault.tips'
+                })}
+              >
+                <StarFilled
+                  style={{ color: 'var(--ant-gold-4)', marginLeft: 4 }}
+                />
+              </Tooltip>
+            )}
+          </>
         )
       },
       {