feat: add container format column for image

1. add container format column for image list page
2. fix request body for create docker image
3. update container format value display

Change-Id: I40ad82385d2f014b1066428e4b30ddd99435d01c

src/pages/compute/containers/Image/Detail/BaseDetail.jsx

@@ -18,6 +18,7 @@ import {
   imageProperties,
   imageVisibility,
   imageOS,
+  imageContainerFormats,
 } from 'resources/glance/image';
 import Base from 'containers/BaseDetail';
 import { isObject, isArray } from 'lodash';
@@ -69,7 +70,7 @@ export class BaseDetail extends Base {
       {
         label: t('Container Format'),
         dataIndex: 'container_format',
-        valueRender: 'uppercase',
+        valueMap: imageContainerFormats,
       },
     ];
     return {

src/pages/compute/containers/Image/Image.jsx

@@ -22,6 +22,7 @@ import {
   imageUsage,
   imageFormats,
   transitionStatusList,
+  imageContainerFormats,
 } from 'resources/glance/image';
 import { ImageStore } from 'stores/glance/image';
 import { getOptions } from 'utils/index';
@@ -141,6 +142,12 @@ export class Image extends Base {
       valueMap: imageUsage,
       sorter: false,
     },
+    {
+      title: t('Container Format'),
+      dataIndex: 'container_format',
+      valueMap: imageContainerFormats,
+      isHideable: true,
+    },
     {
       title: t('Type'),
       dataIndex: 'os_distro',

src/pages/compute/containers/Image/actions/Create.jsx

@@ -21,6 +21,7 @@ import {
   imageFormats,
   imageFormatsConsole,
   imageVisibility,
+  imageContainerFormats,
 } from 'resources/glance/image';
 import { cpuPolicyList, cpuThreadPolicyList } from 'resources/nova/flavor';
 import { NoSetValue, getOptionsWithNoSet, getOptions } from 'utils/index';
@@ -109,16 +110,7 @@ export class CreateForm extends FormAction {
   }
 
   get containerFormatList() {
-    return [
+    return getOptions(imageContainerFormats);
-      {
-        value: 'bare',
-        label: 'Bare',
-      },
-      {
-        value: 'docker',
-        label: 'Docker',
-      },
-    ];
   }
 
   get osList() {
@@ -189,6 +181,21 @@ export class CreateForm extends FormAction {
     return Promise.resolve();
   };
 
+  onChangeContainerFormat = (value) => {
+    this.setState({
+      container_format: value,
+    });
+  };
+
+  get showContainerFormatFormItem() {
+    return this.containerFormatList.length > 1;
+  }
+
+  get isBareFormat() {
+    const { container_format = 'bare' } = this.state;
+    return container_format === 'bare';
+  }
+
   get formItems() {
     const { more, visibility, uploadType } = this.state;
     const isShare = this.isAdminPage && visibility === 'shared';
@@ -245,34 +252,31 @@ export class CreateForm extends FormAction {
         label: t('Container Format'),
         type: 'select',
         options: this.containerFormatList,
-        onChange: (value) => {
+        onChange: this.onChangeContainerFormat,
-          this.setState({
+        hidden: !this.showContainerFormatFormItem,
-            isContainer: value === 'docker' ? true : false,
+        required: this.showContainerFormatFormItem,
-          });
-        },
-        required: true,
       },
       {
         name: 'os_distro',
         label: t('OS'),
         type: 'select',
         options: this.osList,
-        required: !this.state.isContainer,
+        required: this.isBareFormat,
-        hidden: this.state.isContainer,
+        hidden: !this.isBareFormat,
       },
       {
         name: 'os_version',
         label: t('OS Version'),
         type: 'input',
-        hidden: this.state.isContainer,
+        hidden: !this.isBareFormat,
-        required: !this.state.isContainer,
+        required: this.isBareFormat,
       },
       {
         name: 'os_admin_user',
         label: t('OS Admin'),
         type: 'input',
-        required: !this.state.isContainer,
+        required: this.isBareFormat,
-        hidden: this.state.isContainer,
+        hidden: !this.isBareFormat,
         extra: t(
           'In general, administrator for Windows,root for Linux, please fill by image uploading.'
         ),
@@ -376,6 +380,8 @@ export class CreateForm extends FormAction {
       usage_type = 'common',
       members,
       os_distro,
+      os_version,
+      os_admin_user,
       container_format = 'bare',
       ...rest
     } = values;
@@ -383,7 +389,6 @@ export class CreateForm extends FormAction {
       visibility: visibility || 'private',
       container_format,
       usage_type,
-      os_distro,
       ...rest,
     };
     if (min_ram) {
@@ -398,9 +403,15 @@ export class CreateForm extends FormAction {
     if (this.isAdminPage) {
       body.owner = owner.selectedRowKeys[0];
     }
+    if (this.isBareFormat) {
+      body.os_distro = os_distro;
+      body.os_version = os_version;
+      body.os_admin_user = os_admin_user;
       if (os_distro === 'windows') {
         body.os_type = 'windows';
       }
+    }
+
     const mems = visibility === 'shared' ? members.selectedRowKeys : [];
     const config = this.getUploadRequestConf();
     const actualFile = uploadType === 'file' ? file : url;

src/resources/glance/image.jsx

@@ -69,6 +69,11 @@ export const volumeCreateImageTypes = {
   qcow2: t('QCOW2 - QEMU image format'),
 };
 
+export const imageContainerFormats = {
+  bare: 'Bare',
+  docker: 'Docker',
+};
+
 export const imageFormatsAdmin = {
   aki: t('AKI - Amazon kernel image format'),
   ari: t('ARI - Amazon ramdisk image format'),