From 33f90ae331fa0e6ddcd6afba193e31ce2168a953 Mon Sep 17 00:00:00 2001
From: zhangke <zhang.ke@99cloud.net>
Date: Wed, 19 Oct 2022 14:33:46 +0800
Subject: [PATCH] fix: No data disk is displayed on the ConfirmStep

1. get instance snapshot data disks when rendering data disk
2. support contentStyle property for Descriptions component
3. add contentStyle for the data disk item to present multiple data disk values

Closes-Bug: #1992739
Change-Id: I62d92620574a5ee4ffff8f8d20958ad42cc4221a
---
 .../FormItem/Descriptions/index.jsx           | 20 +++++++++++++------
 .../actions/StepCreate/ConfirmStep/index.jsx  | 19 +++++++++++++++---
 src/resources/cinder/snapshot.jsx             | 13 ++++++++++++
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/components/FormItem/Descriptions/index.jsx b/src/components/FormItem/Descriptions/index.jsx
index 9fe5800a..bdea8535 100644
--- a/src/components/FormItem/Descriptions/index.jsx
+++ b/src/components/FormItem/Descriptions/index.jsx
@@ -16,7 +16,6 @@ import React, { Component } from 'react';
 import { Descriptions, Button } from 'antd';
 import { FormOutlined } from '@ant-design/icons';
 import { isArray, isUndefined } from 'lodash';
-import { generateId } from 'utils/index';
 import styles from './index.less';
 
 export default class index extends Component {
@@ -26,7 +25,12 @@ export default class index extends Component {
     }
     if (isArray(value)) {
       // eslint-disable-next-line no-shadow
-      return value.map((it) => <div key={`value-${generateId()}`}>{it}</div>);
+      return value.map((it, itIndex) => (
+        <>
+          <div key={`value-${itIndex}`}>{it}</div>
+          {itIndex !== value.length - 1 && <br />}
+        </>
+      ));
     }
 
     return value;
@@ -49,18 +53,22 @@ export default class index extends Component {
 
   renderItem() {
     const { items } = this.props;
-    const desItems = items.map((it) => {
-      const { label, value, span } = it;
+    const desItems = items.map((it, iIndex) => {
+      const { label, value, span, contentStyle = {} } = it;
       const desContent = this.getValueContent(value);
       const options = {
         label,
-        key: `item-${generateId()}`,
+        key: `item-${label}-${iIndex}`,
         className: styles.label,
       };
       if (span) {
         options.span = span;
       }
-      return <Descriptions.Item {...options}>{desContent}</Descriptions.Item>;
+      return (
+        <Descriptions.Item contentStyle={contentStyle} {...options}>
+          {desContent}
+        </Descriptions.Item>
+      );
     });
     return (
       <Descriptions title={this.renderTitle()} colon={false}>
diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/ConfirmStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/ConfirmStep/index.jsx
index 743097fb..fd014cda 100644
--- a/src/pages/compute/containers/Instance/actions/StepCreate/ConfirmStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/ConfirmStep/index.jsx
@@ -17,6 +17,7 @@ import { inject, observer } from 'mobx-react';
 import Base from 'components/Form';
 import { physicalNodeTypes } from 'resources/nova/instance';
 import { Col, Row } from 'antd';
+import { getAllDataDisks } from 'resources/cinder/snapshot';
 
 export class ConfirmStep extends Base {
   init() {}
@@ -36,7 +37,7 @@ export class ConfirmStep extends Base {
   allowed = () => Promise.resolve();
 
   getDisk(diskInfo) {
-    const { size, typeOption, deleteTypeLabel } = diskInfo;
+    const { size, typeOption, deleteTypeLabel } = diskInfo || {};
     return `${typeOption.label} ${size}GiB ${deleteTypeLabel}`;
   }
 
@@ -66,8 +67,19 @@ export class ConfirmStep extends Base {
   getDataDisk() {
     if (!this.enableCinder) return null;
     const { context } = this.props;
-    const { dataDisk = [] } = context;
-    return dataDisk.map((it) => this.getDisk(it.value));
+    const {
+      dataDisk = [],
+      source: { value } = {},
+      instanceSnapshotDataVolumes = [],
+    } = context;
+    let allDataDisks = dataDisk;
+    if (
+      value === 'instanceSnapshot' &&
+      instanceSnapshotDataVolumes?.length > 0
+    ) {
+      allDataDisks = getAllDataDisks({ dataDisk, instanceSnapshotDataVolumes });
+    }
+    return allDataDisks.map((it) => this.getDisk(it.value));
   }
 
   getFlavor() {
@@ -213,6 +225,7 @@ export class ConfirmStep extends Base {
       {
         label: t('Data Disk'),
         value: this.getDataDisk(),
+        contentStyle: { display: 'inline-block' },
       },
       {
         label: t('Project'),
diff --git a/src/resources/cinder/snapshot.jsx b/src/resources/cinder/snapshot.jsx
index c0e3d4fe..9191e8df 100644
--- a/src/resources/cinder/snapshot.jsx
+++ b/src/resources/cinder/snapshot.jsx
@@ -14,6 +14,7 @@
 
 import globalVolumeTypeStore from 'stores/cinder/volume-type';
 import { toJS } from 'mobx';
+import { cloneDeep } from 'lodash';
 
 export const volumeTypes = () => {
   return (globalVolumeTypeStore.list.data || []).map((it) => ({
@@ -58,3 +59,15 @@ export const getInstanceSnapshotDataDisk = (disk) => {
   });
   return instanceSnapshotDataDisk;
 };
+
+export const getAllDataDisks = ({
+  dataDisk = [],
+  instanceSnapshotDataVolumes = [],
+}) => {
+  const allDataDisks = cloneDeep(dataDisk);
+  instanceSnapshotDataVolumes?.forEach((i) => {
+    const disk = getInstanceSnapshotDataDisk(i) || {};
+    allDataDisks.unshift({ value: disk });
+  });
+  return allDataDisks;
+};