tkestack · leoryu · Sep 8, 2021 · Sep 8, 2021
@@ -28,10 +28,11 @@ import { Clip } from '../../../../common/components';
 import { DialogNameEnum } from '../../../models';
 import { RootProps } from '../../ClusterApp';
 import { ClusterStatus } from '../../clusterManage/ClusterTablePanel';
+import { ContainerRuntimeEnum } from '@src/modules/cluster/constants/Config';
 
 export class ClusterDetailBasicInfoPanel extends React.Component<RootProps, {}> {
   render() {
-    let { cluster } = this.props;
+    const { cluster } = this.props;
 
     return (
       <FormPanel title={t('基本信息')}>
@@ -44,20 +45,20 @@ export class ClusterDetailBasicInfoPanel extends React.Component<RootProps, {}>
     );
   }
   _renderNodeMax() {
-    let { cluster } = this.props;
-    let clusterInfo: Cluster = cluster.selection;
+    const { cluster } = this.props;
+    const clusterInfo: Cluster = cluster.selection;
     if (clusterInfo && clusterInfo.spec.clusterCIDR) {
-      let b = clusterInfo.spec.clusterCIDR.split('/')[1];
-      let { maxNodePodNum, maxClusterServiceNum } = clusterInfo.spec.properties;
+      const b = clusterInfo.spec.clusterCIDR.split('/')[1];
+      const { maxNodePodNum, maxClusterServiceNum } = clusterInfo.spec.properties;
       return Math.pow(2, 32 - parseInt(b)) / maxNodePodNum - Math.ceil(maxClusterServiceNum / maxNodePodNum);
     } else {
       return '';
     }
   }
   /** 处理开关日志采集组件的的操作 */
   private _handleSwitch(cluster: Cluster) {
-    let { actions, route } = this.props;
-    let enableLogAgent = !cluster.spec.logAgentName;
+    const { actions, route } = this.props;
+    const enableLogAgent = !cluster.spec.logAgentName;
     if (enableLogAgent) {
       actions.cluster.enableLogAgent(cluster);
     } else {
@@ -70,9 +71,9 @@ export class ClusterDetailBasicInfoPanel extends React.Component<RootProps, {}>
   }
   /** 展示集群的基本信息 */
   private _renderClusterInfo() {
-    let { actions, cluster } = this.props;
-    let clusterInfo: Cluster = cluster.selection;
-    let nodeMax = this._renderNodeMax();
+    const { actions, cluster } = this.props;
+    const clusterInfo: Cluster = cluster.selection;
+    const nodeMax = this._renderNodeMax();
     return cluster.selection ? (
       <React.Fragment>
         <FormPanel.Item label={t('集群名称')} text>
@@ -89,6 +90,9 @@ export class ClusterDetailBasicInfoPanel extends React.Component<RootProps, {}>
         <FormPanel.Item label={t('Kubernetes版本')} text>
           {clusterInfo.status.version}
         </FormPanel.Item>
+        <FormPanel.Item label={t('运行时组件')} text>
+          {clusterInfo?.spec?.features?.enableContainerRuntime ?? ContainerRuntimeEnum.DOCKER}
+        </FormPanel.Item>
         {clusterInfo.spec.networkDevice && (
           <FormPanel.Item label={t('网卡名称')} text>
             {clusterInfo.spec.networkDevice}

@@ -15,22 +15,24 @@
  * WARRANTIES OF ANY KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations under the License.
  */
-import React, { useEffect } from 'react';
+import React from 'react';
 import { FormPanel } from '@tencent/ff-component';
-import { Table, TableColumn, Button, Icon } from '@tea/component';
+import { Table, TableColumn, Button, Icon, Bubble } from '@tea/component';
 import { RootProps } from '../../ClusterApp';
 import { FetchState } from '@tencent/ff-redux';
 import { router } from '../../../router';
+import { ContainerRuntimeEnum } from '@src/modules/cluster/constants/Config';
 
 enum PlugType {
   Promethus,
   LogAgent
 }
 
-export const ClusterPlugInfoPanel: React.FC<RootProps> = ({ cluster, actions, clusterVersion, route }) => {
-  const targetCluster = cluster.selection;
-  const { promethus = null, logAgent = null } = targetCluster ? cluster.selection.spec : {};
-  const clusterId = targetCluster ? targetCluster.metadata.name : '';
+export const ClusterPlugInfoPanel: React.FC<RootProps> = ({ cluster, actions, route }) => {
+  const { promethus = null, logAgent = null } = cluster?.selection?.spec ?? {};
+  const clusterId = cluster?.selection?.metadata?.name ?? '';
+
+  const isContainerd = cluster?.selection?.spec?.features?.enableContainerRuntime === ContainerRuntimeEnum.CONTAINERD;
 
   const open = (type: PlugType) => () => {
     switch (type) {
@@ -66,16 +68,20 @@ export const ClusterPlugInfoPanel: React.FC<RootProps> = ({ cluster, actions, cl
       key: 'action',
       header: '操作',
       render({ action, type }) {
+        const disabled = type === PlugType.LogAgent && isContainerd;
+
         return action ? (
           <>
             <Button type="link" onClick={close(type)}>
               关闭
             </Button>
           </>
         ) : (
-          <Button type="link" onClick={open(type)}>
-            开启
-          </Button>
+          <Bubble content={disabled ? '运行时为containerd的集群不支持开启日志采集' : ''}>
+            <Button type="link" disabled={disabled} onClick={open(type)}>
+              开启
+            </Button>
+          </Bubble>
         );
       }
     }
@@ -104,7 +110,12 @@ export const ClusterPlugInfoPanel: React.FC<RootProps> = ({ cluster, actions, cl
       {cluster.list.fetched !== true || cluster.list.fetchState === FetchState.Fetching ? (
         <Icon type="loading" />
       ) : (
-        <Table columns={columns} records={records} recordKey="des" />
+        <Table
+          columns={columns}
+          records={records}
+          recordKey="des"
+          rowDisabled={({ type }) => type === PlugType.LogAgent && isContainerd}
+        />
       )}
     </FormPanel>
   );

@@ -15,6 +15,7 @@
  * WARRANTIES OF ANY KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations under the License.
  */
+import { ContainerRuntimeEnum } from '@src/modules/cluster/constants/Config';
 import { Identifiable } from '@tencent/ff-redux';
 import { Resource } from './Resource';
 
@@ -56,6 +57,7 @@ interface ClusterSpec {
   features?: {
     ipvs: boolean;
     public: boolean;
+    enableContainerRuntime?: ContainerRuntimeEnum;
   };
 
   /** 集群类型 */