feat: monitor button

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

@@ -1,7 +1,9 @@
+import { systemConfigAtom } from '@/atoms/system';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import ColumnWrapper from '@/pages/_components/column-wrapper';
 import { useIntl } from '@umijs/max';
+import { useAtom } from 'jotai';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -23,7 +25,6 @@ import { ProviderType, ProviderValueMap } from './config';
 import providerList from './config/providers';
 import { StepsContext } from './config/steps-context';
 import { ClusterFormData } from './config/types';
-import useSystemConfig from './services/use-system-config';
 import { moduleMap, moduleRegistry } from './step-forms/module-registry';
 import useStepList from './step-forms/use-step-list';
 
@@ -59,7 +60,7 @@ const ClusterCreate: React.FC<{
 }> = ({ onClose, action, setCurrentTitle }) => {
   const startStep = 0;
   const stepList = useStepList();
-  const { systemConfig } = useSystemConfig();
+  const [systemConfigState] = useAtom(systemConfigAtom);
   const intl = useIntl();
   const [credentialList, setCredentialList] = useState<
     Global.BaseOption<number, { provider: ProviderType }>[]
@@ -361,7 +362,7 @@ const ClusterCreate: React.FC<{
           <StepsContext.Provider
             value={{
               formValues: formValues,
-              systemConfig: systemConfig
+              systemConfig: systemConfigState
             }}
           >
             {renderModules()}

src/pages/cluster-management/clusters.tsx

@@ -19,6 +19,7 @@ import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import NoResult from '../_components/no-result';
 import PageBox from '../_components/page-box';
+import useGranfanaLink from '../resources/hooks/use-grafana-link';
 import {
   CLUSTERS_API,
   createWorkerPool,
@@ -38,6 +39,7 @@ import {
   K8sStepsFromCluter
 } from './components/add-worker/config';
 import PoolRows from './components/pool-rows';
+import RightActions from './components/right-actions';
 import { ProviderType, ProviderValueMap } from './config';
 import {
   ClusterListItem,
@@ -71,6 +73,10 @@ const Clusters: React.FC = () => {
     contentForDelete: 'menu.clusterManagement.clusters'
   });
   const navigate = useNavigate();
+  const { goToGrafana, ActionButton } = useGranfanaLink({
+    type: 'cluster',
+    dataList: dataSource.dataList || []
+  });
   const { watchDataList: allWorkerPoolList } = useWatchList(WORKER_POOLS_API);
   const [expandAtom] = useAtom(expandKeysAtom);
   const [clusterSession, setClusterSession] = useAtom(clusterSessionAtom);
@@ -196,6 +202,8 @@ const Clusters: React.FC = () => {
       setDefaultCluster({ id: row.id }).then(() => {
         message.success(intl.formatMessage({ id: 'common.message.success' }));
       });
+    } else if (val === 'metrics') {
+      goToGrafana(row);
     }
   });
 
@@ -337,6 +345,14 @@ const Clusters: React.FC = () => {
           handleSearch={handleSearch}
           handleDeleteByBatch={handleDeleteBatch}
           handleClickPrimary={handleClickDropdown}
+          right={
+            <RightActions
+              handleDeleteByBatch={handleDeleteBatch}
+              handleClickPrimary={handleClickDropdown}
+              rowSelection={rowSelection}
+              MonitorButton={ActionButton()}
+            ></RightActions>
+          }
         ></FilterBar>
         <TableContext.Provider
           value={{

src/pages/cluster-management/components/right-actions.tsx

@@ -0,0 +1,50 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Space } from 'antd';
+import React from 'react';
+
+export interface RightActionsProps {
+  handleDeleteByBatch: () => void;
+  handleClickPrimary?: () => void;
+  MonitorButton?: React.ReactNode;
+  rowSelection: {
+    selectedRowKeys: React.Key[];
+  };
+}
+
+const RightActions: React.FC<RightActionsProps> = ({
+  handleDeleteByBatch,
+  handleClickPrimary,
+  rowSelection,
+  MonitorButton
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Space size={16}>
+      {MonitorButton}
+      <Button
+        icon={<PlusOutlined />}
+        type="primary"
+        onClick={handleClickPrimary}
+      >
+        {intl.formatMessage({ id: 'clusters.button.add' })}
+      </Button>
+      <Button
+        icon={<DeleteOutlined />}
+        danger
+        onClick={handleDeleteByBatch}
+        disabled={!rowSelection?.selectedRowKeys?.length}
+      >
+        <span>
+          {intl.formatMessage({ id: 'common.button.delete' })}
+          {rowSelection?.selectedRowKeys?.length > 0 && (
+            <span>({rowSelection?.selectedRowKeys?.length})</span>
+          )}
+        </span>
+      </Button>
+    </Space>
+  );
+};
+
+export default RightActions;

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

@@ -94,6 +94,11 @@ export const clusterActionList = [
     label: 'common.button.edit',
     icon: icons.EditOutlined
   },
+  {
+    label: 'resources.metrics.details',
+    key: 'metrics',
+    icon: icons.Metrics
+  },
   {
     key: 'add_worker',
     label: 'resources.button.create',

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

@@ -84,7 +84,10 @@ export interface ClusterFormData {
 }
 
 export interface SystemConfig {
+  disable_builtin_observability?: boolean;
   debug: boolean;
-  server_external_url: string;
-  system_default_container_registry: string;
+  grafana_url?: string;
+  server_external_url: string | null;
+  system_default_container_registry: string | null;
+  showMonitoring?: boolean;
 }

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

@@ -1,4 +1,5 @@
 // columns.ts
+import { systemConfigAtom } from '@/atoms/system';
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
 import { SealColumnProps } from '@/components/seal-table/types';
@@ -8,6 +9,7 @@ import { StarFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Tooltip } from 'antd';
 import dayjs from 'dayjs';
+import { useAtomValue } from 'jotai';
 import { useMemo } from 'react';
 import {
   ClusterStatus,
@@ -17,20 +19,24 @@ import {
 } from '../config';
 import { ClusterListItem } from '../config/types';
 
-const setActionsItems = (row: ClusterListItem) => {
-  return clusterActionList.filter((item) => {
-    if (item.provider) {
-      return item.provider === row.provider;
-    }
-    return true;
-  });
-};
-
 const useClusterColumns = (
   handleSelect: (val: string, record: ClusterListItem) => void,
   onCellClick?: (record: ClusterListItem, dataIndex: string) => void
 ): SealColumnProps[] => {
   const intl = useIntl();
+  const systemConfig = useAtomValue(systemConfigAtom);
+
+  const setActionsItems = (row: ClusterListItem) => {
+    return clusterActionList.filter((item) => {
+      if (item.provider) {
+        return item.provider === row.provider;
+      }
+      if (item.key === 'metrics') {
+        return systemConfig?.showMonitoring;
+      }
+      return true;
+    });
+  };
 
   return useMemo(() => {
     return [
@@ -42,9 +48,6 @@ const useClusterColumns = (
         render: (text: string, record: ClusterListItem) => (
           <>
             <AutoTooltip ghost title={text}>
-              {/* <Typography.Link onClick={() => onCellClick?.(record, 'name')}>
-                {record.name}
-              </Typography.Link> */}
               {text}
             </AutoTooltip>
             {record.is_default && (