feat: support snapshot info in the volume detail page

1. Support the snapshot info in the detail page,  which is the source of the volume creation.
2. Fix the instance links for the volume attachments.

Change-Id: If89e93088c3d23ecb06945420a3a3e04dab596a5

src/pages/storage/containers/Volume/Detail/BaseDetail.jsx

@@ -19,10 +19,14 @@ import Base from 'containers/BaseDetail';
 export class BaseDetail extends Base {
   get leftCards() {
     const cards = [this.attachmentsCard];
-    if (this.detailData.volume_image_metadata) {
+    const { snapshot_id, volume_image_metadata, transfer } = this.detailData;
+    if (snapshot_id) {
+      cards.push(this.snapshotCard);
+    }
+    if (volume_image_metadata) {
       cards.push(this.imageCard);
     }
-    if (this.detailData.transfer) {
+    if (transfer) {
       cards.push(this.transferCard);
     }
     return cards;
@@ -42,7 +46,7 @@ export class BaseDetail extends Base {
               {it.device} on{' '}
               {this.getLinkRender(
                 'instanceDetail',
-                it.server_name,
+                it.server_name || it.server_id,
                 { id: it.server_id },
                 { tab: 'volumes' }
               )}
@@ -60,6 +64,7 @@ export class BaseDetail extends Base {
   get imageCard() {
     const {
       volume_image_metadata: { image_id, image_name },
+      snapshot_id,
     } = this.detailData;
     const options = [
       {
@@ -69,6 +74,29 @@ export class BaseDetail extends Base {
           this.getLinkRender('imageDetail', image_name, { id: image_id }, null),
       },
     ];
+    const title = snapshot_id ? t('Image Info') : t('Volume Source');
+
+    return {
+      title,
+      options,
+    };
+  }
+
+  get snapshotCard() {
+    const { snapshot_id } = this.detailData;
+    const options = [
+      {
+        label: t('Volume Snapshot'),
+        dataIndex: 'snapshot.name',
+        render: (value) =>
+          this.getLinkRender(
+            'snapshotDetail',
+            value || snapshot_id,
+            { id: snapshot_id },
+            null
+          ),
+      },
+    ];
 
     return {
       title: t('Volume Source'),

src/stores/cinder/volume.js

@@ -111,6 +111,11 @@ export class VolumeStore extends Base {
       item.itemInList = result[0];
       item.attachmentsContrib = result[0].attachments;
     } catch (e) {}
+    const { snapshot_id } = item;
+    if (snapshot_id) {
+      const snapshot = await client.cinder.snapshots.show(snapshot_id);
+      item.snapshot = snapshot.snapshot;
+    }
     return item;
   }