fix deleting and detail info showing of cluster

1. fix the delete condition of cluster instance
2. use card to show the health status reason
3. allowed jump to stack detail from cluster detail page
4. simplify the template card in cluster detail page

Change-Id: Ic932f3c9d0bd0d96af2ba01c1f3dfc3bf7b2fb52

src/locales/en.json

@@ -1037,6 +1037,7 @@
   "Hard Reboot": "Hard Reboot",
   "Hard Rebooting": "Hard Rebooting",
   "Hash": "Hash",
+  "Health Checking Log": "Health Checking Log",
   "Health Monitor Delay": "Health Monitor Delay",
   "Health Monitor Detail": "Health Monitor Detail",
   "Health Monitor Max Retries": "Health Monitor Max Retries",
@@ -1044,7 +1045,6 @@
   "Health Monitor Timeout": "Health Monitor Timeout",
   "Health Monitor Type": "Health Monitor Type",
   "Health Status": "Health Status",
-  "Health Status Reason": "Health Status Reason",
   "HealthMonitor": "HealthMonitor",
   "HealthMonitor Type": "HealthMonitor Type",
   "Healthy": "Healthy",
@@ -1144,7 +1144,6 @@
   "Image Backup": "Image Backup",
   "Image Detail": "Image Detail",
   "Image Driver": "Image Driver",
-  "Image ID": "Image ID",
   "Image Info": "Image Info",
   "Image Name": "Image Name",
   "Image Pending Upload": "Image Pending Upload",

src/locales/zh.json

@@ -1037,6 +1037,7 @@
   "Hard Reboot": "硬重启",
   "Hard Rebooting": "硬重启中",
   "Hash": "Hash",
+  "Health Checking Log": "健康检查日志",
   "Health Monitor Delay": "检查间隔(秒)",
   "Health Monitor Detail": "健康检查器详情",
   "Health Monitor Max Retries": "最大重试次数",
@@ -1044,7 +1045,6 @@
   "Health Monitor Timeout": "检查超时时间(秒)",
   "Health Monitor Type": "健康检查器类型",
   "Health Status": "健康状况",
-  "Health Status Reason": "健康状况原因",
   "HealthMonitor": "健康检查器",
   "HealthMonitor Type": "健康检查类型",
   "Healthy": "健康",
@@ -1144,7 +1144,6 @@
   "Image Backup": "镜像备份",
   "Image Detail": "镜像详情",
   "Image Driver": "镜像驱动程序",
-  "Image ID": "镜像ID",
   "Image Info": "镜像信息",
   "Image Name": "镜像名称",
   "Image Pending Upload": "镜像待上传",

src/pages/container-infra/containers/Clusters/Detail/BaseDetail.jsx

@@ -28,7 +28,7 @@ export class BaseDetail extends Base {
 
   get templateCard() {
     const { template = {} } = this.detailData;
-    const templateUrl = template
+    const templateUrl = template?.name
       ? this.getLinkRender(
           'containerInfraClusterTemplateDetail',
           template.name,
@@ -37,24 +37,17 @@ export class BaseDetail extends Base {
           }
         )
       : '-';
+
     const options = [
       {
         label: t('Name'),
         dataIndex: 'template.name',
         content: templateUrl,
       },
-      {
-        label: t('ID'),
-        dataIndex: 'template.uuid',
-      },
       {
         label: t('COE'),
         dataIndex: 'template.coe',
       },
-      {
-        label: t('Image ID'),
-        dataIndex: 'template.image_id',
-      },
     ];
 
     return {
@@ -251,10 +244,20 @@ export class BaseDetail extends Base {
   }
 
   get stackCard() {
+    const { stack: { id, stack_name: name } = {} } = this.detailData || {};
+
+    const stackUrl = id
+      ? this.getLinkRender('stackDetail', id, {
+          id,
+          name,
+        })
+      : '-';
+
     const options = [
       {
         label: t('Stack ID'),
         dataIndex: 'stack_id',
+        content: stackUrl,
       },
       {
         label: t('Stack Faults'),
@@ -282,6 +285,37 @@ export class BaseDetail extends Base {
       options,
     };
   }
+
+  get healthCard() {
+    const { health_status_reason = {} } = this.detailData || {};
+
+    const logContent = !isEmpty(health_status_reason) ? (
+      <ul>
+        {Object.entries(health_status_reason).map(([key, val]) => {
+          return (
+            <li key={key}>
+              {key} : {val}
+            </li>
+          );
+        })}
+      </ul>
+    ) : (
+      '-'
+    );
+
+    const options = [
+      {
+        label: t('Log'),
+        content: logContent,
+      },
+    ];
+
+    return {
+      title: t('Health Checking Log'),
+      labelCol: 2,
+      options,
+    };
+  }
 }
 
 export default inject('rootStore')(observer(BaseDetail));

src/pages/container-infra/containers/Clusters/Detail/index.jsx

@@ -16,7 +16,6 @@ import { inject, observer } from 'mobx-react';
 import Base from 'containers/TabDetail';
 import { clusterStatus, healthStatus } from 'resources/magnum/cluster';
 import globalClustersStore from 'src/stores/magnum/clusters';
-import { isEmpty } from 'lodash';
 import BaseDetail from './BaseDetail';
 import actionConfigs from '../actions';
 
@@ -74,11 +73,6 @@ export class ClustersDetail extends Base {
         dataIndex: 'health_status',
         render: (value) => healthStatus[value] || value || '-',
       },
-      {
-        title: t('Health Status Reason'),
-        dataIndex: 'health_status_reason',
-        render: (value) => (isEmpty(value) ? '-' : JSON.stringify(value)),
-      },
     ];
   }
 

src/pages/container-infra/containers/Clusters/actions/Delete.jsx

@@ -40,7 +40,11 @@ export default class DeleteClusters extends ConfirmAction {
 
   allowedCheckFunc = (item) => {
     const { stack_id, status } = item;
-    return !!stack_id && status !== 'DELETE_IN_PROGRESS';
+    const disableDelete =
+      status === 'DELETE_IN_PROGRESS' ||
+      (status === 'CREATE_IN_PROGRESS' && !stack_id);
+
+    return !disableDelete;
   };
 
   onSubmit = (data) => globalClustersStore.delete({ id: data.id });

src/pages/container-infra/containers/Clusters/actions/StepCreate/StepLabel/index.jsx

@@ -47,6 +47,11 @@ export class StepLabel extends Base {
         type: 'add-select',
         itemComponent: KeyValueInput,
         addText: t('Add Label'),
+        onChange: (value) => {
+          this.updateContext({
+            additionalLabels: value,
+          });
+        },
       },
     ];
   }

src/stores/magnum/clusters.js

@@ -37,6 +37,10 @@ export class ClustersStore extends Base {
     return client.neutron.subnets;
   }
 
+  get stackClient() {
+    return client.heat.stacks;
+  }
+
   get listWithDetail() {
     return true;
   }
@@ -70,16 +74,18 @@ export class ClustersStore extends Base {
     const masterFlavorId = item.master_flavor_id || templateMasterFlavorId;
     const fixedNetworkId = item.fixed_network || templateFixedNetworkId;
     const fixedSubnetId = item.fixed_subnet || templateSubnetId;
-    const [fr = {}, mfr = {}, fx = {}, sub = {}] = await Promise.all([
+    const [fr = {}, mfr = {}, fx = {}, sub = {}, stack] = await Promise.all([
       flavorId ? this.flavorClient.show(flavorId) : {},
       masterFlavorId ? this.flavorClient.show(masterFlavorId) : {},
       fixedNetworkId ? this.networkClient.show(fixedNetworkId) : {},
       fixedSubnetId ? this.subnetClient.show(fixedSubnetId) : {},
+      item.stack_id ? this.stackClient.list({ id: item.stack_id }) : {},
     ]);
     const { flavor } = fr;
     const { flavor: masterFlavor } = mfr;
     const { network: fixedNetwork } = fx;
     const { subnet: fixedSubnet } = sub;
+    const { stacks = [] } = stack;
     if (flavor) {
       item.flavor = flavor;
     }
@@ -92,6 +98,9 @@ export class ClustersStore extends Base {
     if (fixedSubnet) {
       item.fixedSubnet = fixedSubnet;
     }
+    if (stacks[0]) {
+      item.stack = stacks[0];
+    }
     return item;
   }