display Min copies / node tag / disk tag in bi table

Signed-off-by: andy.lee <andy.lee@suse.com>

src/models/backingImage.js

@@ -1,5 +1,4 @@
-
-import { create, deleteBackingImage, query, deleteDisksOnBackingImage, uploadChunk, download, bulkDownload } from '../services/backingImage'
+import { create, deleteBackingImage, execAction, query, deleteDisksOnBackingImage, uploadChunk, download, bulkDownload } from '../services/backingImage'
 import { getNodeTags, getDiskTags } from '../services/volume'
 import { message, notification } from 'antd'
 import { delay } from 'dva/saga'
@@ -18,6 +17,7 @@ export default {
     nodeTags: [],
     diskTags: [],
     tagsLoading: true,
+    minCopiesCountModalVisible: false,
     createBackingImageModalVisible: false,
     createBackingImageModalKey: Math.random(),
     diskStateMapDetailModalVisible: false,
@@ -112,6 +112,13 @@ export default {
       yield call(deleteBackingImage, payload)
       yield put({ type: 'query' })
     },
+    *updateMinCopiesCount({
+      payload,
+    }, { call, put }) {
+      yield put({ type: 'hideUpdateMinCopiesCountModal' })
+      yield call(execAction, payload.url, payload.params)
+      yield put({ type: 'query' })
+    },
     *downloadBackingImage({
       payload,
     }, { call, put }) {
@@ -208,6 +215,13 @@ export default {
     showCreateBackingImageModal(state, action) {
       return { ...state, ...action.payload, createBackingImageModalVisible: true, createBackingImageModalKey: Math.random() }
     },
+    showUpdateMinCopiesCountModal(state, action) {
+      return {
+        ...state,
+        minCopiesCountModalVisible: true,
+        selected: action.payload,
+      }
+    },
     hideCreateBackingImageModal(state) {
       return { ...state, createBackingImageModalVisible: false }
     },
@@ -219,6 +233,13 @@ export default {
         diskStateMapDetailModalKey: Math.random(),
       }
     },
+    hideUpdateMinCopiesCountModal(state) {
+      return {
+        ...state,
+        minCopiesCountModalVisible: false,
+        selected: {},
+      }
+    },
     hideDiskStateMapDetailModal(state) {
       return { ...state, diskStateMapDetailModalVisible: false, diskStateMapDetailModalKey: Math.random() }
     },

src/routes/backingImage/BackingImageActions.js

@@ -5,7 +5,7 @@ import { DropOption } from '../../components'
 import { hasReadyBackingDisk } from '../../utils/status'
 const confirm = Modal.confirm
 
-function actions({ selected, deleteBackingImage, downloadBackingImage }) {
+function actions({ selected, deleteBackingImage, downloadBackingImage, showUpdateMinCopiesCount }) {
   const handleMenuClick = (event, record) => {
     event.domEvent?.stopPropagation?.()
     switch (event.key) {
@@ -20,15 +20,19 @@ function actions({ selected, deleteBackingImage, downloadBackingImage }) {
       case 'download':
         downloadBackingImage(record)
         break
+      case 'updateMinCopies':
+        showUpdateMinCopiesCount(record)
+        break
       default:
     }
   }
 
   const disableDownloadAction = !hasReadyBackingDisk(selected)
 
   const availableActions = [
-    { key: 'delete', name: 'Delete' },
+    { key: 'updateMinCopies', name: 'Update Minimum Copies Count', disabled: disableDownloadAction, tooltip: disableDownloadAction ? 'Missing disk with ready state' : '' },
     { key: 'download', name: 'Download', disabled: disableDownloadAction, tooltip: disableDownloadAction ? 'Missing disk with ready state' : '' },
+    { key: 'delete', name: 'Delete' },
   ]
 
   return (
@@ -42,6 +46,7 @@ actions.propTypes = {
   selected: PropTypes.object,
   deleteBackingImage: PropTypes.func,
   downloadBackingImage: PropTypes.func,
+  showUpdateMinCopiesCount: PropTypes.func,
 }
 
 export default actions

src/routes/backingImage/BackingImageList.js

@@ -1,14 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Table, Button, Icon, Tooltip } from 'antd'
+import { Table, Button, Icon, Tooltip, Tag } from 'antd'
 import BackingImageActions from './BackingImageActions'
 import { pagination } from '../../utils/page'
 import { formatMib } from '../../utils/formatter'
+import { nodeTagColor, diskTagColor } from '../../utils/constants'
 
-function list({ loading, dataSource, deleteBackingImage, showDiskStateMapDetail, rowSelection, downloadBackingImage, height }) {
+function list({ loading, dataSource, deleteBackingImage, showDiskStateMapDetail, rowSelection, downloadBackingImage, showUpdateMinCopiesCount, height }) {
   const backingImageActionsProps = {
     deleteBackingImage,
     downloadBackingImage,
+    showUpdateMinCopiesCount,
   }
   const state = (record) => {
     if (record.deletionTimestamp) {
@@ -26,7 +28,7 @@ function list({ loading, dataSource, deleteBackingImage, showDiskStateMapDetail,
       title: 'Name',
       dataIndex: 'name',
       key: 'name',
-      width: 200,
+      width: 150,
       sorter: (a, b) => a.name.localeCompare(b.name),
       render: (text, record) => {
         return (
@@ -39,7 +41,7 @@ function list({ loading, dataSource, deleteBackingImage, showDiskStateMapDetail,
       title: 'UUID',
       dataIndex: 'uuid',
       key: 'uuid',
-      width: 150,
+      width: 120,
       sorter: (a, b) => a.uuid.localeCompare(b.uuid),
       render: (text) => {
         return (
@@ -50,7 +52,7 @@ function list({ loading, dataSource, deleteBackingImage, showDiskStateMapDetail,
       title: 'Size',
       dataIndex: 'size',
       key: 'size',
-      width: 150,
+      width: 80,
       sorter: (a, b) => a.size - b.size,
       render: (text) => {
         return (
@@ -59,11 +61,12 @@ function list({ loading, dataSource, deleteBackingImage, showDiskStateMapDetail,
           </div>
         )
       },
-    }, {
+    },
+    {
       title: 'Created From',
       dataIndex: 'sourceType',
       key: 'sourceType',
-      width: 200,
+      width: 150,
       sorter: (a, b) => a.sourceType.localeCompare(b.sourceType),
       render: (text) => {
         return (
@@ -72,6 +75,62 @@ function list({ loading, dataSource, deleteBackingImage, showDiskStateMapDetail,
           </div>
         )
       },
+    }, {
+      title: 'Minimum Copies',
+      dataIndex: 'minNumberOfCopies',
+      key: 'minNumberOfCopies',
+      width: 120,
+      sorter: (a, b) => a.minNumberOfCopies.toString().localeCompare(b.minNumberOfCopies.toString()),
+      render: (text) => {
+        return (
+          <div>
+            {text}
+          </div>
+        )
+      },
+    }, {
+      title: 'Node Tags',
+      key: 'nodeSelector',
+      dataIndex: 'nodeSelector',
+      width: 120,
+      render: (_text, record) => {
+        const nodeTags = record.nodeSelector?.map((tag, index) => {
+          return (
+              <span style={{ marginBottom: '6px' }} key={index}>
+                <Tag color={nodeTagColor}>
+                  {tag}
+                </Tag>
+              </span>
+          )
+        }) || ''
+        return (
+          <div style={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'column', alignItems: 'center' }}>
+            {nodeTags}
+          </div>
+        )
+      },
+    },
+    {
+      title: 'Disk Tags',
+      key: 'diskSelector',
+      dataIndex: 'diskSelector',
+      width: 120,
+      render: (_text, record) => {
+        const diskTags = record.diskSelector?.sort().map((tag, index) => {
+          return (
+              <span style={{ marginBottom: '6px' }} key={index}>
+                <Tag color={diskTagColor}>
+                  {tag}
+                </Tag>
+              </span>
+          )
+        }) || ''
+        return (
+          <div style={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'column', alignItems: 'center' }}>
+            {diskTags}
+          </div>
+        )
+      },
     }, {
       title: 'Operation',
       key: 'operation',
@@ -107,6 +166,7 @@ list.propTypes = {
   dataSource: PropTypes.array,
   deleteBackingImage: PropTypes.func,
   showDiskStateMapDetail: PropTypes.func,
+  showUpdateMinCopiesCount: PropTypes.func,
   rowSelection: PropTypes.object,
   height: PropTypes.number,
 }

src/routes/backingImage/CreateBackingImage.js

@@ -197,7 +197,7 @@ const modal = ({
           })(<Input placeholder="Ask Longhorn to validate the SHA512 checksum if it is specified here." />)}
         </FormItem>
         <FormItem label="Minimum Number of Copies" {...formItemLayout}>
-          {getFieldDecorator('MinNumberOfCopies', {
+          {getFieldDecorator('minNumberOfCopies', {
             initialValue: defaultNumberOfReplicas,
             rules: [
               {

src/routes/backingImage/UpdateMinCopiesCount.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Form, InputNumber } from 'antd'
+import { ModalBlur } from '../../components'
+
+const FormItem = Form.Item
+
+const formItemLayout = {
+  labelCol: {
+    span: 12,
+  },
+  wrapperCol: {
+    span: 12,
+  },
+}
+
+const modal = ({
+  item,
+  defaultNumberOfReplicas,
+  visible,
+  onCancel,
+  onOk,
+  form: {
+    getFieldDecorator,
+    validateFields,
+    getFieldValue,
+  },
+}) => {
+  function handleOk() {
+    validateFields((errors) => {
+      if (errors) {
+        return
+      }
+      const minNumberOfCopies = getFieldValue('minNumberOfCopies')
+      onOk(item, minNumberOfCopies)
+    })
+  }
+
+  const modalOpts = {
+    title: 'Update Minimum Copies Count',
+    visible,
+    onCancel,
+    onOk: handleOk,
+  }
+  if (!item) {
+    return null
+  }
+  return (
+    <ModalBlur {...modalOpts}>
+      <Form layout="horizontal">
+        <FormItem label="Minimum Number of Copies" hasFeedback {...formItemLayout}>
+          {getFieldDecorator('minNumberOfCopies', {
+            initialValue: item.minNumberOfCopies || defaultNumberOfReplicas,
+            rules: [
+              {
+                required: true,
+                message: 'Please input the copies number',
+              },
+            ],
+          })(<InputNumber min={1} />)}
+        </FormItem>
+      </Form>
+    </ModalBlur>
+  )
+}
+
+modal.propTypes = {
+  defaultNumberOfReplicas: PropTypes.number,
+  form: PropTypes.object.isRequired,
+  visible: PropTypes.bool,
+  onCancel: PropTypes.func,
+  item: PropTypes.object,
+  onOk: PropTypes.func,
+}
+
+export default Form.create()(modal)