From f24eda0de3cc2fed5269c115096e93bc27b8f445 Mon Sep 17 00:00:00 2001
From: zhuyue <zhu.yue@99cloud.net>
Date: Tue, 7 Sep 2021 16:55:56 +0800
Subject: [PATCH] feat: Add error card for instance with 'fault'

add error card for instance with 'fault' in detail page

Change-Id: I781f9ea4f726c1b175c424d1b3f1cdd40e747eb8
---
 src/containers/BaseDetail/index.jsx           |  5 ++-
 src/containers/BaseDetail/index.less          |  4 +-
 src/locales/en.json                           |  5 ++-
 src/locales/zh.json                           |  3 ++
 .../Instance/Detail/BaseDetail/index.jsx      | 44 ++++++++++++++++++-
 .../Instance/Detail/BaseDetail/index.less     | 14 ++++--
 6 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/src/containers/BaseDetail/index.jsx b/src/containers/BaseDetail/index.jsx
index 3121f124..096bc5c8 100644
--- a/src/containers/BaseDetail/index.jsx
+++ b/src/containers/BaseDetail/index.jsx
@@ -135,7 +135,8 @@ export default class BaseDetail extends React.Component {
 
   renderRightCards() {
     return this.rightCards.map((it, index) => {
-      const { title, options, labelCol, titleHelp, render, button } = it;
+      const { title, options, labelCol, titleHelp, render, button, className } =
+        it;
       if (render) {
         return render();
       }
@@ -148,7 +149,7 @@ export default class BaseDetail extends React.Component {
       return (
         <Card
           key={`card-right-${index}`}
-          className="detail-right-card"
+          className={classnames('detail-right-card', className)}
           data={this.detailData}
           title={title}
           titleHelp={titleHelp}
diff --git a/src/containers/BaseDetail/index.less b/src/containers/BaseDetail/index.less
index d74cdfc8..37d3c614 100644
--- a/src/containers/BaseDetail/index.less
+++ b/src/containers/BaseDetail/index.less
@@ -1,4 +1,4 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 @min-space: 8px;
 @mid-space: 16px;
@@ -8,7 +8,6 @@
   padding: 0 @mid-space;
   display: flex;
 
-
   .left-side {
     width: 380px;
     padding-right: @mid-space;
@@ -16,6 +15,5 @@
 
   .right-side {
     flex: 1;
-    display: flex;
   }
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index baa84385..f5a4e522 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -249,6 +249,7 @@
   "Close external gateway": "Close external gateway",
   "Cloud": "Cloud",
   "Cloud Platform": "Cloud Platform",
+  "Code": "Code",
   "Cold Migrate": "Cold Migrate",
   "Commas ‘,’ are not allowed to be in a tag name in order to simplify requests that specify lists of tags": "Commas ‘,’ are not allowed to be in a tag name in order to simplify requests that specify lists of tags",
   "Common Server": "Common Server",
@@ -482,6 +483,7 @@
   "Detach interface": "Detach interface",
   "Detaching": "Detaching",
   "Detail": "Detail",
+  "Details": "Details",
   "Device ID": "Device ID",
   "Device Owner": "Device Owner",
   "Direct": "Direct",
@@ -862,6 +864,7 @@
   "Invalid: Please input a valid ip": "Invalid: Please input a valid ip",
   "Invalid: Please input a valid ipv4": "Invalid: Please input a valid ipv4",
   "Invalid: Please input a valid ipv6.": "Invalid: Please input a valid ipv6.",
+  "Invalid: Project name can not be chinese": "Invalid: Project name can not be chinese",
   "Invalid: Project name can not be duplicated": "Invalid: Project name can not be duplicated",
   "Invalid: Quota value(s) cannot be less than the current usage value(s): { used } used.": "Invalid: Quota value(s) cannot be less than the current usage value(s): { used } used.",
   "Invalid: User Group name can not be duplicated": "Invalid: User Group name can not be duplicated",
@@ -981,6 +984,7 @@
   "Memory Optimized": "Memory Optimized",
   "Memory Page": "Memory Page",
   "Memory usage Num (GB": "Memory usage Num (GB",
+  "Message": "Message",
   "Metadata": "Metadata",
   "Metadata Definitions": "Metadata Definitions",
   "Metadata Detail": "Metadata Detail",
@@ -1975,7 +1979,6 @@
   "subnet": "subnet",
   "subnets": "subnets",
   "suspend instance": "suspend instance",
-  "the instance only has one virtual adapter": "the instance only has one virtual adapter",
   "the policy is in use": "the policy is in use",
   "the router has connected subnet": "the router has connected subnet",
   "the vpn gateway is in use": "the vpn gateway is in use",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 1b3cd1fe..04ca0496 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -249,6 +249,7 @@
   "Close external gateway": "关闭公网网关",
   "Cloud": "云",
   "Cloud Platform": "云平台",
+  "Code": "编码",
   "Cold Migrate": "冷迁移",
   "Commas ‘,’ are not allowed to be in a tag name in order to simplify requests that specify lists of tags": "标记名称中不允许使用逗号“，”，以简化指定标记列表的请求",
   "Common Server": "云主机",
@@ -482,6 +483,7 @@
   "Detach interface": "卸载网卡",
   "Detaching": "卸载中",
   "Detail": "详情",
+  "Details": "详情",
   "Device ID": "设备ID",
   "Device Owner": "设备所属者",
   "Direct": "方向",
@@ -981,6 +983,7 @@
   "Memory Optimized": "内存型",
   "Memory Page": "内存页",
   "Memory usage Num (GB": "内存用量 (GB)",
+  "Message": "消息",
   "Metadata": "元数据",
   "Metadata Definitions": "元数据定义",
   "Metadata Detail": "元数据详情",
diff --git a/src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx b/src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx
index 3c1ab93a..5cb7e0fb 100644
--- a/src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx
+++ b/src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx
@@ -33,8 +33,9 @@ import classnames from 'classnames';
 import ImageType from 'components/ImageType';
 import { instanceStatus, isIronicInstance } from 'resources/instance';
 import { generateId } from 'utils/index';
-import { getSinceTime } from 'utils/time';
+import { getSinceTime, getLocalTimeStr } from 'utils/time';
 import AttachVolume from 'pages/compute/containers/Instance/actions/AttachVolume';
+import globalRootStore from 'stores/root';
 import styles from './index.less';
 
 export class BaseDetail extends Base {
@@ -67,7 +68,14 @@ export class BaseDetail extends Base {
   }
 
   get rightCards() {
-    return [this.topoCard];
+    const ret = [this.topoCard];
+    const {
+      detail: { fault },
+    } = this.props;
+    if (fault && fault.message) {
+      ret.splice(0, 0, this.errorCard);
+    }
+    return ret;
   }
 
   get networkCard() {
@@ -421,6 +429,38 @@ export class BaseDetail extends Base {
       button,
     };
   }
+
+  get errorCard() {
+    const {
+      detail: { fault },
+    } = this.props;
+    const options = [
+      {
+        label: t('Message'),
+        content: fault.message,
+      },
+      {
+        label: t('Code'),
+        content: fault.code,
+      },
+      {
+        label: t('Created At'),
+        content: getLocalTimeStr(fault.created),
+      },
+    ];
+    if (globalRootStore.hasAdminRole) {
+      options.splice(1, 0, {
+        label: t('Details'),
+        content: <pre className={styles.preWrap}>{fault.details}</pre>,
+      });
+    }
+    return {
+      labelCol: 4,
+      title: t('Error'),
+      options,
+      className: styles.errorCard,
+    };
+  }
 }
 
 export default inject('rootStore')(observer(BaseDetail));
diff --git a/src/pages/compute/containers/Instance/Detail/BaseDetail/index.less b/src/pages/compute/containers/Instance/Detail/BaseDetail/index.less
index 369cb562..e2578eae 100644
--- a/src/pages/compute/containers/Instance/Detail/BaseDetail/index.less
+++ b/src/pages/compute/containers/Instance/Detail/BaseDetail/index.less
@@ -3,7 +3,7 @@
 @min-space: 8px;
 @mid-space: 16px;
 @lg-space: 24px;
-@topo-line: 1px solid #D2D2D2;
+@topo-line: 1px solid #d2d2d2;
 @resource-box-bg: #fbfdff;
 @resource-box-border: 1px solid #cfe1ff;
 
@@ -34,8 +34,6 @@
     }
   }
 
-
-
   .vm {
     padding: @mid-space;
     background-color: @resource-box-bg;
@@ -131,7 +129,7 @@
         border-bottom: @topo-line;
         width: 60px;
         height: @lg-space;
-        margin-right: 10px
+        margin-right: 10px;
       }
     }
   }
@@ -143,4 +141,12 @@
   }
 }
 
+.errorCard {
+  flex-grow: 0;
 
+  .preWrap {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    font-family: Monaco, Menlo, Consolas, Courier New, monospace;
+  }
+}