feat: add stack delete/action (#1383)

* feat: add stack delete/action

* feat: add workspace list paganation

Author: hai-tian

ui/src/components/descriptionWithTooltip/index.tsx

@@ -3,7 +3,12 @@ import { Tooltip } from 'antd'
 
 import styles from './styles.module.less'
 
-const DescriptionWithTooltip = ({ desc, width }) => {
+type IProps = {
+  desc: string
+  width?: number | string
+}
+
+const DescriptionWithTooltip = ({ desc, width }: IProps) => {
 
   return (<Tooltip placement="topLeft" title={desc}>
     <div className={styles.descriptionWithTooltip} style={{ width }}>

ui/src/components/topologyMap/index.tsx

@@ -159,7 +159,7 @@ const OverviewTooltip: React.FC<OverviewTooltipProps> = ({
       <div style={itemStyle}>
         <span style={labelStyle}>Status: </span>
         <span style={statusStyle}>
-        {nodeData?.status}
+          {nodeData?.status}
         </span>
       </div>
       <div style={itemStyle}>
@@ -481,6 +481,10 @@ const TopologyMap = forwardRef((props: IProps, drawRef) => {
 
   function drawGraph(topologyData) {
     if (topologyData) {
+      if (graphRef.current) {
+        graphRef.current?.destroy()
+        graphRef.current = null
+      }
       if (!graphRef.current) {
         graphRef.current = initGraph()
         graphRef.current?.read(topologyData)

ui/src/index.tsx

@@ -13,6 +13,7 @@ import './index.less'
 
 const portAPI = 'api/server-port';
 const defaultPort = '80';
+const defalutUrl = 'http://localhost';
 
 async function loadServerConfig() {
   const isDevelopment = process.env.NODE_ENV === 'development';
@@ -22,11 +23,11 @@ async function loadServerConfig() {
     const port = config?.port || defaultPort;
 
     client.setConfig({
-      baseUrl: isDevelopment ? `http://localhost:${port}` : ''
+      baseUrl: isDevelopment ? `${defalutUrl}:${port}` : ''
     });
   } catch (error) {
     client.setConfig({
-      baseUrl: isDevelopment ? `http://localhost:${defaultPort}` : ''
+      baseUrl: isDevelopment ? `${defalutUrl}:${defaultPort}` : ''
     });
   }
 }

ui/src/pages/backends/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Button, message, Popconfirm, Space, Table, Tag } from 'antd'
+import type { TableColumnsType } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 import { BackendService } from '@kusionstack/kusion-api-client-sdk'
 import { josn2yaml } from '@/utils/tools'
@@ -80,10 +81,11 @@ const BackendsPage = () => {
   }
 
 
-  const columns = [
+  const columns: TableColumnsType<any> = [
     {
       title: 'Name',
       dataIndex: 'name',
+      fixed: 'left',
     },
     {
       title: 'Type',
@@ -95,7 +97,6 @@ const BackendsPage = () => {
     {
       title: 'Description',
       dataIndex: 'description',
-      width: 500,
       render: (desc) => {
         return <DescriptionWithTooltip desc={desc} width={500} />
       }
@@ -110,6 +111,8 @@ const BackendsPage = () => {
     {
       title: 'Action',
       dataIndex: 'action',
+      fixed: 'right',
+      width: 150,
       render: (_, record) => {
         return (
           <Space>
@@ -206,6 +209,7 @@ const BackendsPage = () => {
           rowKey="id"
           columns={columns}
           dataSource={dataSource}
+          scroll={{ x: 1300 }}
         />
       </div>
       <ConfigYamlDrawer {...configYamlProps} />

ui/src/pages/modules/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Button, Form, Input, message, Popconfirm, Space, Table, Select } from 'antd'
+import type { TableColumnsType } from 'antd';
 import { PlusOutlined } from '@ant-design/icons'
 import { ModuleService } from '@kusionstack/kusion-api-client-sdk'
 import DescriptionWithTooltip from '@/components/descriptionWithTooltip'
@@ -103,31 +104,34 @@ const ModulePage = () => {
 
 
 
-  const columns = [
+  const columns: TableColumnsType<any> = [
     {
       title: 'Name',
       dataIndex: 'name',
       width: 300,
+      fixed: 'left',
     },
     {
       title: 'Registry',
       dataIndex: 'registry',
-      width: 450,
+      
       render: (_, record) => {
         return `${record?.url?.Scheme}://${record?.url?.Host}${record?.url?.Path}`;
       }
     },
     {
       title: 'Description',
       dataIndex: 'description',
-      width: 400,
+      
       render: (desc) => {
         return <DescriptionWithTooltip desc={desc} width={400} />
       }
     },
     {
       title: 'Action',
       dataIndex: 'action',
+      fixed: 'right',
+      width: 200,
       render: (_, record) => {
         return (
           <Space>
@@ -232,6 +236,7 @@ const ModulePage = () => {
           title={() => <h4>Module List</h4>}
           rowKey="id"
           columns={columns}
+          scroll={{ x: 1300 }}
           dataSource={dataSource}
           pagination={{
             total: searchParams?.total,

ui/src/pages/projects/components/projectForm/index.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { Modal, Button, Form, Select, Input, message } from 'antd';
 
-const ProjectForm = ({ open, actionType, handleClose, handleSubmit, sourceList,formData }: any) => {
+const ProjectForm = ({ open, actionType, handleClose, handleSubmit, sourceList, formData }: any) => {
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
-  
+
   useEffect(() => {
     if (formData) {
       form.setFieldsValue({
         name: formData?.name,
-        projectSource: formData?.source?.name,
+        projectSource: formData?.source?.id,
         path: formData?.path,
         description: formData?.description,
       })
@@ -38,7 +38,7 @@ const ProjectForm = ({ open, actionType, handleClose, handleSubmit, sourceList,f
     form.resetFields()
     handleClose()
   }
-  
+
   function getTitle() {
     return actionType === 'ADD'
       ? 'New Project'

ui/src/pages/projects/components/resourceGraph/index.tsx

@@ -6,7 +6,6 @@ import { generateG6GraphData } from '@/utils/tools'
 
 const ResourceGraph = ({ stackId }) => {
   const drawRef = useRef(null)
-
   const [graphData, setGraphData] = useState()
   const [topologyLoading, setTopologyLoading] = useState(false)