fix: Fix columns and download file

1. Split column of XXX ID/NAME when download file
2. Remove useless stringify in columns
3. Remove some columns in volume backup list which is useless
4. Add the data judgment to prevent the wrong content of the downloaded file

Change-Id: I412975e3fdb87c255d8252efa0240f4593b5f95d

src/components/Tables/Base/Download/index.jsx

@@ -91,11 +91,13 @@ export default class index extends Component {
     }
     if (isObject(value)) {
       if (React.isValidElement(value)) {
-        return (data[dataIndex] && data[dataIndex].toString()) || '-';
+        return [undefined, '', null].includes(data[dataIndex])
+          ? '-'
+          : data[dataIndex].toString();
       }
       return data[dataIndex];
     }
-    return value;
+    return [undefined, '', null].includes(value) ? '-' : value;
   };
 
   getColumnData = (data, column) => {

src/components/Tables/Base/index.jsx

@@ -543,6 +543,40 @@ export default class BaseTable extends React.Component {
     }
   };
 
+  filterDownloadColumns(columns) {
+    const { rowKey } = this.props;
+    const downloadColumns = columns
+      .filter((it) => !it.hidden)
+      .map((it) => {
+        if (it.title.includes('/')) {
+          const [fTitle, sTitle] = it.title.split('/');
+          let sName = sTitle;
+          if (fTitle.length > 2) {
+            sName = `${fTitle.split('ID')[0]}${sTitle}`;
+          }
+          let fIndex = it.idKey || rowKey;
+          if (
+            it.title.includes(t('Project')) &&
+            it.dataIndex === 'project_name'
+          ) {
+            fIndex = 'project_id';
+          }
+          return [
+            {
+              title: fTitle,
+              dataIndex: fIndex,
+            },
+            {
+              ...it,
+              title: sName,
+            },
+          ];
+        }
+        return it;
+      });
+    return [].concat(...downloadColumns);
+  }
+
   renderBatchActions() {
     const {
       batchActions,
@@ -717,7 +751,7 @@ export default class BaseTable extends React.Component {
       return null;
     }
     const { total } = pagination;
-    const downloadColumns = columns.filter((it) => !it.hidden);
+    const downloadColumns = this.filterDownloadColumns(columns);
     const props = {
       datas,
       columns: downloadColumns,

src/pages/storage/containers/Backup/index.jsx

@@ -12,14 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
 import { observer, inject } from 'mobx-react';
-import { Link } from 'react-router-dom';
 import Base from 'containers/List';
 import globalBackupStore, { BackupStore } from 'stores/cinder/backup';
 import CreateBackup from 'pages/storage/containers/Volume/actions/CreateBackup';
-import { FolderOutlined, FolderAddOutlined } from '@ant-design/icons';
-import { backupStatus } from 'resources/backup';
 import actionConfigs from './actions';
 
 @inject('rootStore')
@@ -84,47 +80,26 @@ export default class Backup extends Base {
         sortKey: 'project_id',
       },
       {
-        title: t('Size'),
+        title: t('Volume ID/Name'),
-        dataIndex: 'size',
+        dataIndex: 'volume_name',
-        isHideable: true,
+        isName: true,
-        render: (value) => `${value} GB`,
+        linkFunc: (value, record) =>
-      },
+          `/storage/${this.getUrl('volume')}/detail/${
-      {
+            record.volume_id
-        title: t('Status'),
+          }?tab=backup`,
-        dataIndex: 'status',
+        idKey: 'volume_id',
-        render: (value) => backupStatus[value] || value,
+        sortKey: 'volume_id',
       },
       {
         title: t('Backup Mode'),
-        dataIndex: 'is_incremental',
+        dataIndex: 'backup_node',
-        isHideable: true,
+        render: (_, record) => {
-        render: (value) => {
+          const {
-          if (value) {
+            metadata: { auto = false },
-            return (
+          } = record;
-              <>
+          return auto ? t('Automatic backup') : t('Manual backup');
-                <FolderAddOutlined />
-                <span style={{ marginLeft: 8 }}>{t('Incremental Backup')}</span>
-              </>
-            );
-          }
-          return (
-            <>
-              <FolderOutlined />
-              <span style={{ marginLeft: 8 }}>{t('Full Backup')}</span>
-            </>
-          );
         },
-        stringify: (value) =>
+        sorter: false,
-          value ? t('Incremental Backup') : t('Full Backup'),
-      },
-      {
-        title: t('Volume ID'),
-        dataIndex: 'volume_id',
-        render: (value) => (
-          <Link to={`${this.getUrl('/storage/volume')}/detail/${value}`}>
-            {value}
-          </Link>
-        ),
       },
       {
         title: t('Created At'),
@@ -145,10 +120,6 @@ export default class Backup extends Base {
         label: t('Name'),
         name: 'name',
       },
-      {
-        label: t('Volume ID'),
-        name: 'volume_id',
-      },
     ];
   }
 

src/pages/storage/containers/Snapshot/index.jsx

@@ -124,10 +124,6 @@ export default class Snapshots extends Base {
         }?tab=snapshot`,
       isHideable: true,
       sorter: false,
-      stringify: (value, record) => {
-        const { volume_name } = record;
-        return `${volume_name || value.volume_id}`;
-      },
     },
     {
       title: t('Created At'),