fix: Fix some issues in the pipeline and the credential

Signed-off-by: harrisonliu5 harrisonliu_5@163.com

src/actions/pipeline.js

@@ -0,0 +1,54 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * KubeSphere Console is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import { toJS } from 'mobx'
+import { Modal, Notify } from 'components/Base'
+import DeleteModal from 'components/Modals/Delete'
+
+export default {
+  'pipeline.batch.delete': {
+    on({ store, success, rowKey, devops, cluster, ...props }) {
+      const { data, selectedRowKeys } = toJS(store.list)
+      const selectNames = data
+        .filter(item => selectedRowKeys.includes(item[rowKey]))
+        .map(item => item.name)
+
+      const modal = Modal.open({
+        onOk: async () => {
+          const reqs = []
+
+          data.forEach(item => {
+            if (selectNames.includes(item.name)) {
+              reqs.push(store.deletePipeline(item.name, devops, cluster))
+            }
+          })
+
+          await Promise.all(reqs)
+
+          Modal.close(modal)
+          Notify.success({ content: `${t('Deleted Successfully')}!` })
+          store.setSelectRowKeys([])
+          success && success()
+        },
+        resource: selectNames.join(', '),
+        modal: DeleteModal,
+        store,
+        ...props,
+      })
+    },
+  },
+}

src/locales/en/cicd.js

@@ -537,4 +537,5 @@ export default {
     'When a new pipeline is created, the tasks in the specified pipeline are automatically triggered.',
   'Started By {name}': 'Started By {name}',
   'Credential ID exists': 'Credential ID exists',
+  'Invalid credential ID': 'Invalid credential ID',
 }

src/locales/tc/cicd.js

@@ -463,4 +463,5 @@ export default {
   timer: '定時器',
   'Started By {name}': '由{name}觸發掃描',
   'Credential ID exists': '憑證 ID 已存在',
+  'Invalid credential ID': '憑證 ID 格式不合法',
 }

src/locales/zh/cicd.js

@@ -463,4 +463,5 @@ export default {
   timer: '定时器',
   'Started By {name}': '由{name}触发扫描',
   'Credential ID exists': '凭证 ID 已存在',
+  'Invalid credential ID': '凭证 ID 格式不合法',
 }

src/pages/devops/components/Pipeline/StepModals/input.jsx

@@ -18,7 +18,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import { debounce, uniq } from 'lodash'
+import { debounce, uniq, isEmpty } from 'lodash'
 import { action, toJS } from 'mobx'
 import { observer } from 'mobx-react'
 import { Form, Modal } from 'components/Base'
@@ -44,23 +44,8 @@ export default class InputStep extends React.Component {
   constructor(props) {
     super(props)
     this.devopsStore = new DevopsStore()
-    this.state = { loading: false, value: '', submitter: [] }
-  }
-
-  static getDerivedStateFromProps(nextProps) {
-    if (nextProps.edittingData.type === 'input') {
-      const nextState = {}
-      nextProps.edittingData.data.forEach(param => {
-        if (param.key === 'message') {
-          nextState.value = param.value.value
-        }
-        if (param.key === 'submitter') {
-          nextState.submitter = param.value.value.split(', ')
-        }
-      })
-      return nextState
-    }
-    return null
+    const { value, submitter } = this.getDefaultData()
+    this.state = { loading: false, value, submitter }
   }
 
   handleMessageChange = e => {
@@ -72,6 +57,24 @@ export default class InputStep extends React.Component {
     })
   }
 
+  getDefaultData = () => {
+    const { edittingData } = this.props
+    let value = ''
+    let submitter = []
+
+    if (!isEmpty(edittingData) && !isEmpty(edittingData.data)) {
+      edittingData.data.forEach(param => {
+        if (param.key === 'message') {
+          value = param.value.value
+        }
+        if (param.key === 'submitter') {
+          submitter = param.value.value.split(', ')
+        }
+      })
+    }
+    return { value, submitter }
+  }
+
   @action
   fetchUsers = (query, callback) => {
     if (!query) return

src/pages/devops/containers/Credential/credentialModal.jsx

@@ -25,6 +25,7 @@ import { observer } from 'mobx-react'
 import { Form, Modal, TextArea } from 'components/Base'
 import { Input, Select, Loading } from '@pitrix/lego-ui'
 import CredentialStore from 'stores/devops/credential'
+import { PATTERN_SERVICE_NAME } from 'utils/constants'
 
 import styles from './index.scss'
 
@@ -133,6 +134,7 @@ export default class CredentialModal extends React.Component {
   handleOk = () => {
     const { isEditMode, project_id, cluster } = this.props
     const formData = this.formRef.current.getData()
+
     this.formRef.current.validate(async () => {
       this.isSubmitting = true
       this.updateFormData(formData)
@@ -175,10 +177,10 @@ export default class CredentialModal extends React.Component {
       return callback()
     }
 
-    this.props.store
+    this.store
       .checkName({
         name: value,
-        devops: this.props.store.getDevops(project_id),
+        devops: this.store.getDevops(project_id),
         cluster,
       })
       .then(resp => {
@@ -273,6 +275,10 @@ export default class CredentialModal extends React.Component {
             label={t('Credential ID')}
             rules={[
               { required: true, message: t('Please input credential') },
+              {
+                pattern: PATTERN_SERVICE_NAME,
+                message: `${t('Invalid credential ID')}, ${t('NAME_DESC')}`,
+              },
               { validator: this.nameValidator },
             ]}
           >

src/pages/devops/containers/Credential/index.jsx

@@ -201,7 +201,6 @@ class Credential extends React.Component {
         onCancel={this.hideCreate}
         project_id={project_id}
         cluster={cluster}
-        store={this.store}
       />
     )
   }

src/pages/devops/containers/Members/index.jsx

@@ -56,10 +56,11 @@ export default class Members extends React.Component {
       })
   }
 
-  getData = () => {
+  getData = ({ ...params }) => {
     this.props.store.fetchList({
       devops: this.devops,
       cluster: this.cluster,
+      ...params,
     })
   }
 

src/pages/devops/containers/Pipelines/Detail/Activity/index.jsx

@@ -103,6 +103,7 @@ export default class Activity extends React.Component {
     const { params } = this.props.match
     const isMutibranch = detail.branchNames
     const hasParameters = detail.parameters && detail.parameters.length
+
     if (isMutibranch || hasParameters) {
       this.setState({ showBranchModal: true })
     } else {
@@ -327,6 +328,7 @@ export default class Activity extends React.Component {
         onCancel={this.hideBranchModal}
         visible={this.state.showBranchModal}
         branches={toJS(detail.branchNames)}
+        parameters={toJS(detail.parameters)}
         params={params || {}}
       />
     )

src/pages/devops/containers/Pipelines/Detail/Sider/pipeline-sider.jsx

@@ -82,15 +82,6 @@ export default class PipelineDetail extends Base {
     )
   }
 
-  get updateTime() {
-    const { activityList } = this.store
-    const updateTime = get(toJS(activityList.data), '[0].startTime', '')
-    if (!updateTime) {
-      return '-'
-    }
-    return moment(updateTime).format(`${t('MMMM Do YYYY')} HH:mm`)
-  }
-
   get enabledActions() {
     const { cluster, project_id } = this.props.match.params
     const devops = this.store.getDevops(project_id)
@@ -158,6 +149,13 @@ export default class PipelineDetail extends Base {
     })
   }
 
+  getUpTime = activityList => {
+    const updateTime = get(toJS(activityList.data), '[0].startTime', '')
+    return !updateTime
+      ? '-'
+      : moment(updateTime).format(`${t('MMMM Do YYYY')} HH:mm`)
+  }
+
   getOperations = () => {
     const { detail } = toJS(this.store)
     const list = [
@@ -218,7 +216,7 @@ export default class PipelineDetail extends Base {
       },
       {
         name: t('Updated Time'),
-        value: this.updateTime,
+        value: this.getUpTime(activityList),
       },
     ]
   }

src/pages/devops/containers/Pipelines/index.jsx

@@ -23,6 +23,7 @@ import { toJS } from 'mobx'
 import { parse } from 'qs'
 import { get, omit } from 'lodash'
 import { Menu, Dropdown, Column, Icon } from '@pitrix/lego-ui'
+import { trigger } from 'utils/action'
 
 import { JOB_STATUS } from 'utils/constants'
 import { updatePipelineParams, updatePipelineParamsInSpec } from 'utils/devops'
@@ -55,6 +56,7 @@ const CREATE_TEMP = {
 
 @inject('rootStore', 'devopsStore')
 @observer
+@trigger
 class CICDs extends React.Component {
   constructor(props) {
     super(props)
@@ -410,18 +412,21 @@ class CICDs extends React.Component {
       title: t('WeatherScore'),
       dataIndex: 'weatherScore',
       width: '30%',
+      isHideable: true,
       render: weatherScore => <Health score={weatherScore} />,
     },
     {
       title: t('Branch'),
       dataIndex: 'totalNumberOfBranches',
       width: '25%',
+      isHideable: true,
       render: totalNumberOfBranches =>
         totalNumberOfBranches === undefined ? '-' : totalNumberOfBranches,
     },
     {
       title: t('PullRequest'),
       dataIndex: 'totalNumberOfPullRequests',
+      isHideable: true,
       render: totalNumberOfPullRequests =>
         totalNumberOfPullRequests === undefined
           ? '-'
@@ -455,9 +460,15 @@ class CICDs extends React.Component {
   )
 
   renderContent() {
-    const { data = [], filters, isLoading, total, page, limit } = toJS(
-      this.store.list
-    )
+    const {
+      data = [],
+      filters,
+      isLoading,
+      total,
+      page,
+      limit,
+      selectedRowKeys,
+    } = toJS(this.store.list)
 
     const isEmptyList = isLoading === false && total === 0
 
@@ -472,16 +483,39 @@ class CICDs extends React.Component {
     }
 
     const pagination = { total, page, limit }
+
+    const defaultTableProps = {
+      rowKey: 'name',
+      hideCustom: false,
+      onSelectRowKeys: this.store.setSelectRowKeys,
+      selectedRowKeys,
+      selectActions: [
+        {
+          key: 'delete',
+          type: 'danger',
+          text: t('Delete'),
+          action: 'delete',
+          onClick: () =>
+            this.trigger('pipeline.batch.delete', {
+              type: t('Pipeline'),
+              rowKey: 'name',
+              devops: this.devops,
+              cluster: this.cluster,
+              success: this.routing.query,
+            }),
+        },
+      ],
+    }
     return (
       <Table
         data={data}
         columns={this.getColumns()}
         filters={omitFilters}
         pagination={pagination}
-        rowKey="fullName"
         isLoading={isLoading}
         onFetch={this.handleFetch}
         onCreate={showCreate}
+        {...defaultTableProps}
       />
     )
   }

src/stores/devops/pipelines.js

@@ -130,9 +130,9 @@ export default class PipelineStore extends BaseStore {
   async fetchList({ devops, workspace, project_id, cluster, ...filters } = {}) {
     this.list.isLoading = true
 
-    const { page, limit, keyword, filter } = filters
+    const { page, limit, name, filter } = filters
 
-    const searchWord = keyword ? `*${encodeURIComponent(keyword)}*` : ''
+    const searchWord = name ? `*${encodeURIComponent(name)}*` : ''
 
     const url = `${this.getBaseUrlV2({ cluster })}search`
     const result = await this.request.get(
@@ -156,6 +156,7 @@ export default class PipelineStore extends BaseStore {
       limit: parseInt(limit, 10) || 10,
       page: parseInt(page, 10) || 1,
       filters: omit(filters, 'project_id'),
+      selectedRowKeys: [],
       isLoading: false,
     }
   }
@@ -196,6 +197,11 @@ export default class PipelineStore extends BaseStore {
     this.pipelineConfig = detail
   }
 
+  @action
+  setSelectRowKeys = keys => {
+    this.list.selectedRowKeys.replace(keys)
+  }
+
   @action
   async checkPipelineName({ name, cluster, project_name }) {
     return await this.request.get(