feat: add lock icon and adjust column width

Signed-off-by: Yi-Ya Chen <[email protected]>

Author: houhoucoop

src/routes/backingImage/BackingImageList.js

@@ -5,6 +5,7 @@ import BackingImageActions from './BackingImageActions'
 import { pagination } from '../../utils/page'
 import { formatMib } from '../../utils/formatter'
 import { nodeTagColor, diskTagColor } from '../../utils/constants'
+import styles from './BackingImageList.less'
 
 function list({ loading, dataSource, backupProps, deleteBackingImage, showDiskStateMapDetail, rowSelection, createBackupBackingImage, downloadBackingImage, showUpdateMinCopiesCount, height }) {
   const backingImageActionsProps = {
@@ -50,13 +51,13 @@ function list({ loading, dataSource, backupProps, deleteBackingImage, showDiskSt
       title: 'Name',
       dataIndex: 'name',
       key: 'name',
-      width: 150,
+      width: 180,
       sorter: (a, b) => a.name.localeCompare(b.name),
       render: (text, record) => {
         return (
-          <div onClick={() => { showDiskStateMapDetail(record) }} style={{ width: '100%', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <div onClick={() => { showDiskStateMapDetail(record) }}>
             {staticStateIcon(record)}
-            <Button type="link" style={{ width: 'fit-content', paddingLeft: 8, paddingRight: 8 }} block>{text}</Button>
+            <Button type="link" className={styles.encryptedBackingImage}>{text}</Button>
             {dynamicStateIcon(record)}
           </div>
         )
@@ -76,7 +77,7 @@ function list({ loading, dataSource, backupProps, deleteBackingImage, showDiskSt
       title: 'Size',
       dataIndex: 'size',
       key: 'size',
-      width: 80,
+      width: 100,
       sorter: (a, b) => a.size - b.size,
       render: (text) => {
         return (
@@ -90,7 +91,7 @@ function list({ loading, dataSource, backupProps, deleteBackingImage, showDiskSt
       title: 'Created From',
       dataIndex: 'sourceType',
       key: 'sourceType',
-      width: 150,
+      width: 120,
       sorter: (a, b) => a.sourceType.localeCompare(b.sourceType),
       render: (text) => {
         return (
@@ -103,7 +104,7 @@ function list({ loading, dataSource, backupProps, deleteBackingImage, showDiskSt
       title: 'Minimum Copies',
       dataIndex: 'minNumberOfCopies',
       key: 'minNumberOfCopies',
-      width: 120,
+      width: 130,
       sorter: (a, b) => a.minNumberOfCopies.toString().localeCompare(b.minNumberOfCopies.toString()),
       render: (text) => {
         return (

src/routes/backingImage/BackingImageList.less

@@ -0,0 +1,4 @@
+.encryptedBackingImage {
+  white-space: unset;
+	height: auto;
+}

src/routes/backingImage/BackupBackingImageList.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Table, message } from 'antd'
+import { Table, message, Icon, Tooltip } from 'antd'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import BackupBackingImageActions from './BackupBackingImageActions'
 import { pagination } from '../../utils/page'
 import { formatMib } from '../../utils/formatter'
 import { formatDate } from '../../utils/formatDate'
-
+import styles from './BackupBackingImageList.less'
 function list({ loading, dataSource, deleteBackupBackingImage, restoreBackingImage, rowSelection, height }) {
   const actionsProps = {
     deleteBackupBackingImage,
@@ -26,10 +26,20 @@ function list({ loading, dataSource, deleteBackupBackingImage, restoreBackingIma
       title: 'Name',
       dataIndex: 'name',
       key: 'name',
-      width: 120,
+      width: 180,
       sorter: (a, b) => a.name.localeCompare(b.name),
-      render: (text) => {
-        return (<div>{text}</div>)
+      render: (text, record) => {
+        const isEncrypted = Boolean(record.secret || record.secretNamespace)
+        return (
+          <>
+            {isEncrypted && (
+              <Tooltip title="Encrypted Backing Image Backup">
+                <Icon className="color-warning" type="lock" />
+              </Tooltip>
+            )}
+            <span className={styles.encryptedBackup}>{text}</span>
+          </>
+        )
       },
     }, {
       title: 'State',
@@ -75,7 +85,7 @@ function list({ loading, dataSource, deleteBackupBackingImage, restoreBackingIma
       title: 'Created Time',
       dataIndex: 'created',
       key: 'created',
-      width: 80,
+      width: 100,
       sorter: (a, b) => a.created.localeCompare(b.created),
       render: (text) => {
         return (

src/routes/backingImage/BackupBackingImageList.less

@@ -0,0 +1,4 @@
+.encryptedBackup {
+	padding: 0 8px;
+	display: inline-block;
+}