From d56f8ea6ce98e536ff9488b252aae1fb8b046289 Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Thu, 12 Oct 2023 11:31:26 +0800
Subject: [PATCH] refactor: update columns function for image

update getColumns function for image, then other class can better update the columns by inheritance class

Change-Id: I8c5387b4e03edfb5f94764a7bb7c60759962871e
---
 src/pages/compute/containers/Image/Image.jsx | 140 ++++++++++---------
 1 file changed, 71 insertions(+), 69 deletions(-)

diff --git a/src/pages/compute/containers/Image/Image.jsx b/src/pages/compute/containers/Image/Image.jsx
index 48f17424..fd6bf6d2 100644
--- a/src/pages/compute/containers/Image/Image.jsx
+++ b/src/pages/compute/containers/Image/Image.jsx
@@ -117,75 +117,77 @@ export class Image extends Base {
     return 'owner';
   }
 
-  getColumns = () => [
-    {
-      title: t('ID/Name'),
-      dataIndex: 'name',
-      routeName: this.getRouteName('imageDetail'),
-    },
-    {
-      title: t('Project ID/Name'),
-      dataIndex: 'project_name',
-      hidden: !this.isAdminPage && this.tab !== 'all',
-      sorter: false,
-    },
-    {
-      title: t('Description'),
-      dataIndex: 'description',
-      isHideable: true,
-      sorter: false,
-    },
-    {
-      title: t('Use Type'),
-      dataIndex: 'usage_type',
-      isHideable: true,
-      valueMap: imageUsage,
-      sorter: false,
-    },
-    {
-      title: t('Container Format'),
-      dataIndex: 'container_format',
-      valueMap: imageContainerFormats,
-      isHideable: true,
-    },
-    {
-      title: t('Type'),
-      dataIndex: 'os_distro',
-      isHideable: true,
-      render: (value) => <ImageType type={value} title={value} />,
-      width: 80,
-      sorter: false,
-    },
-    {
-      title: t('Status'),
-      dataIndex: 'status',
-      valueMap: imageStatus,
-    },
-    {
-      title: t('Visibility'),
-      dataIndex: 'visibility',
-      valueMap: imageVisibility,
-      sorter: false,
-    },
-    {
-      title: t('Disk Format'),
-      dataIndex: 'disk_format',
-      isHideable: true,
-      valueMap: imageFormats,
-    },
-    {
-      title: t('Size'),
-      dataIndex: 'size',
-      isHideable: true,
-      valueRender: 'formatSize',
-    },
-    {
-      title: t('Created At'),
-      dataIndex: 'created_at',
-      isHideable: true,
-      valueRender: 'sinceTime',
-    },
-  ];
+  getColumns() {
+    return [
+      {
+        title: t('ID/Name'),
+        dataIndex: 'name',
+        routeName: this.getRouteName('imageDetail'),
+      },
+      {
+        title: t('Project ID/Name'),
+        dataIndex: 'project_name',
+        hidden: !this.isAdminPage && this.tab !== 'all',
+        sorter: false,
+      },
+      {
+        title: t('Description'),
+        dataIndex: 'description',
+        isHideable: true,
+        sorter: false,
+      },
+      {
+        title: t('Use Type'),
+        dataIndex: 'usage_type',
+        isHideable: true,
+        valueMap: imageUsage,
+        sorter: false,
+      },
+      {
+        title: t('Container Format'),
+        dataIndex: 'container_format',
+        valueMap: imageContainerFormats,
+        isHideable: true,
+      },
+      {
+        title: t('Type'),
+        dataIndex: 'os_distro',
+        isHideable: true,
+        render: (value) => <ImageType type={value} title={value} />,
+        width: 80,
+        sorter: false,
+      },
+      {
+        title: t('Status'),
+        dataIndex: 'status',
+        valueMap: imageStatus,
+      },
+      {
+        title: t('Visibility'),
+        dataIndex: 'visibility',
+        valueMap: imageVisibility,
+        sorter: false,
+      },
+      {
+        title: t('Disk Format'),
+        dataIndex: 'disk_format',
+        isHideable: true,
+        valueMap: imageFormats,
+      },
+      {
+        title: t('Size'),
+        dataIndex: 'size',
+        isHideable: true,
+        valueRender: 'formatSize',
+      },
+      {
+        title: t('Created At'),
+        dataIndex: 'created_at',
+        isHideable: true,
+        valueRender: 'sinceTime',
+      },
+    ];
+  }
 
   get searchFilters() {
     const filters = [