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

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}>

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'),

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;
+};