refactor: credential table columns

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

@@ -13,7 +13,7 @@ import {
   ClusterListItem as ListItem
 } from '../config/types';
 import CloudProvider from './cloud-provider-form';
-import RegisterClusterInner from './resiter-cluster-inner';
+import RegisterClusterInner from './register-cluster-inner';
 
 type AddModalProps = {
   title: string;

src/pages/cluster-management/components/add-credential.tsx

@@ -4,8 +4,8 @@ import SealInput from '@/components/seal-form/seal-input';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
-import { Button, Form } from 'antd';
-import React from 'react';
+import { Form } from 'antd';
+import React, { useEffect } from 'react';
 import { ProviderValueMap } from '../config';
 import {
   CredentialFormData as FormData,
@@ -41,32 +41,32 @@ const AddModal: React.FC<AddModalProps> = ({
     onOk(data);
   };
 
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+  useEffect(() => {
+    if (currentData) {
+      form.setFieldsValue(currentData);
+    }
+  }, [currentData]);
+
   return (
     <ScrollerModal
       title={title}
       open={open}
       centered={true}
       onOk={handleSumit}
-      onCancel={onCancel}
       destroyOnClose={true}
       closeIcon={false}
       maskClosable={false}
       keyboard={false}
       width={600}
       footer={
-        <ModalFooter
-          onOk={handleSumit}
-          onCancel={onCancel}
-          description={<Button>Validation Test</Button>}
-        ></ModalFooter>
+        <ModalFooter onOk={handleSumit} onCancel={handleCancel}></ModalFooter>
       }
     >
-      <Form
-        form={form}
-        onFinish={handleOk}
-        preserve={false}
-        initialValues={currentData}
-      >
+      <Form form={form} onFinish={handleOk} preserve={false}>
         <Form.Item<FormData>
           name="name"
           rules={[
@@ -88,7 +88,7 @@ const AddModal: React.FC<AddModalProps> = ({
         </Form.Item>
         {provider === ProviderValueMap.DigitalOcean && (
           <>
-            <Form.Item<FormData>
+            {/* <Form.Item<FormData>
               name="key"
               rules={[
                 {
@@ -103,20 +103,18 @@ const AddModal: React.FC<AddModalProps> = ({
                 label="Access Key"
                 required={action === PageAction.CREATE}
               ></SealInput.Password>
-            </Form.Item>
+            </Form.Item> */}
             <Form.Item<FormData>
               name="secret"
               rules={[
                 {
                   required: action === PageAction.CREATE,
-                  message: intl.formatMessage({
-                    id: 'users.form.rule.password'
-                  })
+                  message: 'Access Token is required'
                 }
               ]}
             >
               <SealInput.Password
-                label="Access Secret"
+                label="Access Token"
                 required={action === PageAction.CREATE}
               ></SealInput.Password>
             </Form.Item>

src/pages/cluster-management/components/cluster-detail-content.tsx

@@ -25,6 +25,12 @@ const metricsMap = {
     intl: false,
     color: 'rgba(114, 46, 209,.8)'
   },
+  allocated: {
+    label: 'Allocated',
+    type: 'Allocated',
+    intl: false,
+    color: 'rgba(250, 173, 20,.8)'
+  },
   gpu: {
     label: 'GPU',
     type: 'GPU',
@@ -186,7 +192,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
         </Row>
       </div>
       <SubTitle>System Load</SubTitle>
-      <Row style={{ marginBottom: 20 }} gutter={20}>
+      <Row style={{ marginBottom: 16 }} gutter={16}>
         <Col span={12}>
           <Card height={CardHeight} clickable={false} ghost>
             <TrendChart
@@ -208,14 +214,28 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
           </Card>
         </Col>
       </Row>
-      <Card height={CardHeight} clickable={false} ghost>
-        <TrendChart
-          data={detailContent?.history}
-          metrics={['cpu', 'gpu']}
-          metricsMap={metricsMap}
-          title="CPU & GPU"
-        ></TrendChart>
-      </Card>
+      <Row gutter={16}>
+        <Col span={12}>
+          <Card height={CardHeight} clickable={false} ghost>
+            <TrendChart
+              data={detailContent?.history}
+              metrics={['cpu']}
+              metricsMap={metricsMap}
+              title="CPU"
+            ></TrendChart>
+          </Card>
+        </Col>
+        <Col span={12}>
+          <Card height={CardHeight} clickable={false} ghost>
+            <TrendChart
+              data={detailContent?.history}
+              metrics={['gpu']}
+              metricsMap={metricsMap}
+              title="GPU"
+            ></TrendChart>
+          </Card>
+        </Col>
+      </Row>
       {data?.provider === ProviderValueMap.DigitalOcean && (
         <>
           <SubTitle>Worker Pools</SubTitle>

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

@@ -1,6 +1,6 @@
 import ScrollerModal from '@/components/scroller-modal/index';
 import React from 'react';
-import RegisterClusterInner from './resiter-cluster-inner';
+import RegisterClusterInner from './register-cluster-inner';
 
 type AddModalProps = {
   title: string;

src/pages/cluster-management/components/trend-chart.tsx

@@ -38,6 +38,7 @@ const TrendChart: React.FC<TrendChartProps> = ({
         : itemConfig.label;
       legendData.push(name);
       const itemDataList = _.get(data, item, []);
+      console.log('itemConfig:', itemConfig.color);
       return {
         name: name,
         color: itemConfig.color,