fix: Fix the devops list use websocket to update data

Signed-off-by: harrisonliu5 harrisonliu_5@163.com
kubesphere · Jul 29, 2020 · 60d2c61 · 60d2c61
1 parent 4ff2936
commit 60d2c61
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 91 deletions.
diff --git a/src/pages/workspaces/containers/DevOps/index.jsx b/src/pages/workspaces/containers/DevOps/index.jsx
@@ -17,9 +17,9 @@
  */
 
 import React from 'react'
-import { computed, toJS } from 'mobx'
+import { computed } from 'mobx'
 
-import { Avatar } from 'components/Base'
+import { Avatar, Status } from 'components/Base'
 import Banner from 'components/Cards/Banner'
 import Table from 'workspaces/components/ResourceTable'
 import withList, { ListPage } from 'components/HOCs/withList'
@@ -46,8 +46,7 @@ export default class DevOps extends React.Component {
         icon: 'pen',
         text: t('Edit'),
         action: 'edit',
-        onClick: item =>
-          trigger('devops.edit', { detail: item, success: this.getData }),
+        onClick: item => trigger('devops.edit', { detail: item }),
       },
       {
         key: 'delete',
@@ -59,10 +58,6 @@ export default class DevOps extends React.Component {
             type: t('DevOps Project'),
             resource: item.name,
             detail: item,
-            success: () => {
-              this.props.store.setDeleteList(item.name)
-              this.getData()
-            },
           })
         },
       },
@@ -105,6 +100,27 @@ export default class DevOps extends React.Component {
     }
   }
 
+  get tableActions() {
+    const { tableProps, trigger } = this.props
+    return {
+      ...tableProps.tableActions,
+      selectActions: [
+        {
+          key: 'delete',
+          type: 'danger',
+          text: t('Delete'),
+          action: 'delete',
+          onClick: () => {
+            trigger('resource.batch.delete', {
+              type: t(tableProps.name),
+              rowKey: tableProps.rowKey,
+            })
+          },
+        },
+      ],
+    }
+  }
+
   handleClusterChange = cluster => {
     this.workspaceStore.selectCluster(cluster)
     this.getData()
@@ -131,20 +147,31 @@ export default class DevOps extends React.Component {
       dataIndex: 'name',
       width: '35',
       render: (name, record) => {
+        const isTerminating = record.status === 'Terminating'
+        const titleNode = (
+          <>
+            <span>{getDisplayName(record)}</span>
+            {isTerminating ? (
+              <Status type={record.status} name={t(record.status)} flicker />
+            ) : null}
+          </>
+        )
         return (
-          <Avatar
-            icon="strategy-group"
-            iconSize={40}
-            to={
-              record.namespace && record.cluster
-                ? `/${this.workspace}/clusters/${record.cluster}/devops/${
-                    record.namespace
-                  }`
-                : null
-            }
-            desc={record.description || '-'}
-            title={getDisplayName(record)}
-          />
+          <>
+            <Avatar
+              icon="strategy-group"
+              iconSize={40}
+              to={
+                record.namespace && record.cluster && !isTerminating
+                  ? `/${this.workspace}/clusters/${record.cluster}/devops/${
+                      record.namespace
+                    }`
+                  : null
+              }
+              desc={record.description || '-'}
+              title={titleNode}
+            />
+          </>
         )
       },
     },
@@ -176,42 +203,27 @@ export default class DevOps extends React.Component {
       ...this.props.match.params,
       cluster: this.workspaceStore.cluster,
       success: () => {
-        setTimeout(() => {
-          this.getData()
-        }, 500)
+        this.getData({ silent: true })
       },
     })
 
-  get tableActions() {
-    const { store, tableProps, trigger } = this.props
-    return {
-      ...tableProps.tableActions,
-      selectActions: [
-        {
-          key: 'delete',
-          type: 'danger',
-          text: t('Delete'),
-          action: 'delete',
-          onClick: () => {
-            trigger('resource.batch.delete', {
-              type: t(tableProps.name),
-              rowKey: tableProps.rowKey,
-              success: () => {
-                store.setDeleteList(toJS(store.list.selectedRowKeys))
-                this.getData()
-              },
-            })
-          },
-        },
-      ],
-    }
-  }
+  getCheckboxProps = record => ({
+    disabled: record.status === 'Terminating',
+    name: record.name,
+  })
 
   render() {
-    const { bannerProps, tableProps } = this.props
+    const { bannerProps, tableProps, match } = this.props
+    const matchParams = {
+      ...match,
+      params: {
+        ...match.params,
+        cluster: this.workspaceStore.cluster,
+      },
+    }
 
     return (
-      <ListPage {...this.props} getData={this.getData} noWatch>
+      <ListPage {...this.props} getData={this.getData} match={matchParams}>
         <Banner
           {...bannerProps}
           description={t('DEVOPS_DESCRIPTION')}
@@ -224,7 +236,9 @@ export default class DevOps extends React.Component {
           columns={this.getColumns()}
           onCreate={this.showCreate}
           searchType="name"
+          isLoading={tableProps.isLoading}
           {...this.clusterProps}
+          getCheckboxProps={this.getCheckboxProps}
         />
       </ListPage>
     )

diff --git a/src/stores/devops.js b/src/stores/devops.js
@@ -16,8 +16,8 @@
  * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { set, get, isArray, omit, isEmpty } from 'lodash'
-import { action, observable, toJS } from 'mobx'
+import { set, get, isArray, omit } from 'lodash'
+import { action, observable } from 'mobx'
 
 import Base from 'stores/base'
 
@@ -51,9 +51,6 @@ export default class DevOpsStore extends Base {
   @observable
   devops = ''
 
-  @observable
-  deleteList = []
-
   getPath({ cluster, namespace, workspace } = {}) {
     let path = ''
     if (cluster) {
@@ -87,12 +84,9 @@ export default class DevOpsStore extends Base {
     `${this.getDevOpsUrl({ cluster, workspace })}/${devops}`
 
   getWatchListUrl = ({ workspace, ...params }) => {
-    if (workspace) {
-      return `${this.apiVersion}/watch/${
-        this.module
-      }?labelSelector=kubesphere.io/workspace=${workspace}`
-    }
-    return `${this.apiVersion}/watch${this.getPath(params)}/devopsprojects`
+    return `apis/devops.kubesphere.io/v1alpha3/watch${this.getPath(
+      params
+    )}/devopsprojects?labelSelector=kubesphere.io/workspace=${workspace}`
   }
 
   getWatchUrl = (params = {}) =>
@@ -126,35 +120,19 @@ export default class DevOpsStore extends Base {
 
     this.devopsListData = items
 
-    let data = items.map(item => ({
+    const data = items.map(item => ({
       cluster,
       ...this.mapper(item),
     }))
 
-    let total = get(result, 'totalItems', 0)
-
-    if (!isEmpty(toJS(this.deleteList)) && !isEmpty(data)) {
-      const deleteList = toJS(this.deleteList)
-      data = data.filter(item => {
-        const index = deleteList.findIndex(value => value === item.name)
-        if (index > -1) {
-          deleteList.splice(index, 1)
-          total--
-          return false
-        }
-        return true
-      })
-      this.deleteList = deleteList
-    }
-
     this.list.update({
       data: more ? [...this.list.data, ...data] : data,
-      total,
+      total: result.totalItems || data.length || 0,
       limit: Number(params.limit) || 10,
       page: Number(params.page) || 1,
       cluster: globals.app.isMultiCluster ? cluster : undefined,
       isLoading: false,
-      selectedRowKeys: [],
+      ...(this.list.silent ? {} : { selectedRowKeys: [] }),
       ...omit(params, ['limit', 'page']),
     })
   }
@@ -275,16 +253,7 @@ export default class DevOpsStore extends Base {
   }
 
   @action
-  setSelectRowKeys(key, selectedRowKeys) {
-    this[key] && this[key].selectedRowKeys.replace(selectedRowKeys)
-  }
-
-  @action
-  setDeleteList(param) {
-    if (isArray(param)) {
-      this.deleteList = [...this.deleteList, ...param]
-    } else {
-      this.deleteList.push(param)
-    }
+  setSelectRowKeys = selectedRowKeys => {
+    this.list.selectedRowKeys = selectedRowKeys
   }
 }
diff --git a/src/utils/constants.js b/src/utils/constants.js
@@ -253,6 +253,7 @@ export const MODULE_KIND_MAP = {
   dashboards: 'Dashboard',
   applications: 'Application',
   users: 'User',
+  devops: 'DevOpsProject',
 }
 
 export const QUOTAS_MAP = {

diff --git a/src/utils/object.mapper.js b/src/utils/object.mapper.js
@@ -1094,6 +1094,7 @@ const DevOpsMapper = item => ({
   ...getBaseInfo(item),
   workspace: get(item, 'metadata.labels["kubesphere.io/workspace"]'),
   namespace: get(item, 'status.adminNamespace'),
+  status: get(item, 'status.phase', 'Running'),
   _originData: getOriginData(item),
 })