fix: layout and baseInfo in devops

src/actions/devops.js

@@ -16,6 +16,7 @@
  * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { get } from 'lodash'
 import { Modal, Notify } from 'components/Base'
 import ProjectCreateModal from 'components/Modals/ProjectCreate'
 import EditModal from 'components/Modals/DevOpsEdit'
@@ -28,7 +29,8 @@ export default {
           store.create(data, { workspace }).then(() => {
             Modal.close(modal)
             Notify.success({ content: `${t('Created Successfully')}!` })
-            success && success()
+            const name = get(data, 'metadata.name')
+            success && success(name)
           })
         },
         type: 'devops',

src/components/Forms/CICDs/BaseInfo/index.jsx

@@ -72,7 +72,7 @@ export default class BaseInfo extends React.Component {
     this.props.store
       .checkPipelineName({
         name: value,
-        project_id: this.props.formTemplate.project_id,
+        project_name: this.props.formTemplate.project_name,
       })
       .then(resp => {
         if (resp.exist) {
@@ -137,7 +137,7 @@ export default class BaseInfo extends React.Component {
             </Column>
             <Column>
               <Form.Item label={t('Project')} desc={t('PROJECT_DESC')}>
-                <Input name="project_id" disabled />
+                <Input name="project_name" disabled />
               </Form.Item>
             </Column>
           </Columns>

src/components/Modals/ProjectSelect/index.jsx

@@ -46,7 +46,7 @@ export default class ProjectSelectModal extends React.Component {
   }
 
   componentDidMount() {
-    this.store.fetchDetail({ name: this.props.workspace })
+    this.store.fetchDetail({ workspace: this.props.workspace })
   }
 
   get enabledActions() {
@@ -147,7 +147,7 @@ export default class ProjectSelectModal extends React.Component {
     if (this.state.type === 'projects') {
       onChange(`/cluster/${cluster}/projects/${item.name}`)
     } else {
-      onChange(`/devops/${item.project_id}`)
+      onChange(`/devops/${item.name}`)
     }
   }
 

src/components/Modals/WorkspaceSelect/index.jsx

@@ -18,12 +18,12 @@
 
 import React from 'react'
 import { get } from 'lodash'
+import { toJS } from 'mobx'
 import { observer } from 'mobx-react'
 import { Columns, Column } from '@pitrix/lego-ui'
 import { Button, Modal, Search, ScrollLoad } from 'components/Base'
 import WorkspaceStore from 'stores/workspace'
 import WorkspaceCard from './Card'
-
 import styles from './index.scss'
 
 @observer
@@ -53,7 +53,7 @@ export default class WorkspaceSelectModal extends React.Component {
 
   render() {
     const { visible, onCancel, onShowCreate } = this.props
-    const { data, total, page, isLoading } = this.store.list
+    const { data, total, page, isLoading } = toJS(this.store.list)
 
     const keyword = get(this.store.list, 'filters.name')
 

src/pages/console/containers/Dashboard/User/Resources/index.jsx

@@ -174,7 +174,6 @@ export default class Resources extends React.Component {
         .then(result => {
           this.hideCreateModal()
           if (result.name) {
-            // this.routing.push(`/devops/${result.project_id}`)
             this.routing.push(`/devops/${result.name}`)
           }
         })

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

@@ -29,7 +29,7 @@ import EditModal from 'devops/components/Modals/DevOpsEdit'
 
 import styles from './index.scss'
 
-@inject('rootStore')
+@inject('rootStore', 'devopsStore')
 @observer
 class BaseInfo extends React.Component {
   state = {
@@ -42,14 +42,14 @@ class BaseInfo extends React.Component {
     this.store.fetchMembers(this.props.match.params)
   }
 
-  get store() {
-    return this.props.rootStore.devops
-  }
-
   get routing() {
     return this.props.rootStore.routing
   }
 
+  get store() {
+    return this.props.devopsStore
+  }
+
   get workspace() {
     return this.store.data.workspace
   }

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

@@ -64,7 +64,7 @@ class CICDs extends React.Component {
     this.store = new PipelineStore()
 
     this.formTemplate = {
-      project_id: props.match.params.project_id,
+      project_name: props.match.params.project_name,
       enable_timer_trigger: true,
       enable_discarder: true,
     }
@@ -262,7 +262,7 @@ class CICDs extends React.Component {
     this.setState({ showCreate: false })
     // init formdata
     this.formTemplate = {
-      project_id: this.props.match.params.project_id,
+      project_name: this.props.match.params.project_name,
       enable_timer_trigger: true,
     }
   }
@@ -502,7 +502,7 @@ class CICDs extends React.Component {
   }
 
   renderModals() {
-    const { project_id } = this.props.match.params
+    const { project_name } = this.props.match.params
 
     return (
       <React.Fragment>
@@ -521,7 +521,7 @@ class CICDs extends React.Component {
         <EditPipelineConfig
           title={t('Edit Pipeline')}
           formTemplate={this.state.configFormData}
-          project_id={project_id}
+          project_id={project_name}
           visible={this.state.showEditConfig}
           onOk={this.handleEditConfig}
           onCancel={this.hideEditConfig}

src/pages/devops/containers/layout.jsx

@@ -18,15 +18,14 @@
 
 // import { get } from 'lodash'
 import React, { Component } from 'react'
-import { inject, observer } from 'mobx-react'
+import { inject, observer, Provider } from 'mobx-react'
 import { Loading } from '@pitrix/lego-ui'
 
 import { renderRoutes } from 'utils/router.config'
 import { Nav } from 'components/Layout'
 import Selector from 'projects/components/Selector'
 
 import DevOpsStore from 'stores/devops'
-import WorkspaceStore from 'stores/workspace'
 
 import styles from './layout.scss'
 
@@ -36,103 +35,63 @@ class DevOpsLayout extends Component {
   constructor(props) {
     super(props)
 
-    if (!this.props.rootStore.workspace) {
-      const workspaceStore = new WorkspaceStore()
-      this.props.rootStore.register('workspace', workspaceStore)
-    }
-
-    if (!this.props.rootStore.devops) {
-      const devopsStore = new DevOpsStore()
-      props.rootStore.register('devops', devopsStore)
-    }
-
+    this.store = new DevOpsStore()
     this.init(props.match.params)
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.match.params.project_id !== this.project) {
+    if (prevProps.match.params.project_name !== this.project) {
       this.init(this.props.match.params)
     }
   }
 
   async init(params) {
-    const { devops } = this.props.rootStore
+    this.store.initializing = true
 
-    devops.initializing = true
+    await this.store.fetchDetail(params)
 
-    await this.fetchDevOps(params.project_name)
-    await this.fetchWorkspace(devops.data.workspace)
-
-    devops.initializing = false
+    this.store.initializing = false
   }
 
   get project() {
-    return this.props.match.params.project_id
+    return this.props.match.params.project_name
   }
 
   get routing() {
     return this.props.rootStore.routing
   }
 
-  fetchDevOps(project_name) {
-    const requests = []
-    const { devops } = this.props.rootStore
-    requests.push(devops.fetchDetail({ project_name }))
-
-    // const devopsRule = get(globals.user, `rules[${project_id}]`)
-    // if (devopsRule === undefined) {
-    //   requests.push(devops.fetchRules({ project_id }))
-    // }
-
-    return Promise.all(requests)
-  }
-
-  fetchWorkspace(workspace) {
-    const requests = []
-    const { workspace: workspaceStore } = this.props.rootStore
-
-    requests.push(workspaceStore.fetchDetail({ workspace }))
-
-    // const workspaceRule = get(globals.user, `workspace_rules[${workspace}]`)
-    // if (workspaceRule === undefined) {
-    //   requests.push(workspaceStore.fetchRules({ workspace }))
-    // }
-
-    return Promise.all(requests)
-  }
-
   handleChange = url => this.routing.push(url)
 
   render() {
     const { match, route, location } = this.props
-    const { initializing, data: devopsDetail } = this.props.rootStore.devops
-    const { detail } = this.props.rootStore.workspace
+    const { initializing, data } = this.store
 
     if (initializing) {
       return <Loading className={styles.loading} />
     }
 
     return (
-      <div>
-        <div className="ks-page-side">
-          <Selector
-            type="devops"
-            icon="/assets/default-project.svg"
-            defaultIcon="/assets/default-project.svg"
-            title={t('DevOps Project')}
-            value={devopsDetail.name}
-            onChange={this.handleChange}
-            workspace={detail}
-          />
-          <Nav
-            className="ks-page-nav"
-            navs={globals.app.getDevOpsNavs(this.project)}
-            location={location}
-            match={match}
-          />
-        </div>
-        <div className="ks-page-main">{renderRoutes(route.routes)}</div>
-      </div>
+      <Provider devopsStore={this.store}>
+        <>
+          <div className="ks-page-side">
+            <Selector
+              type="devops"
+              title={t('DevOps Project')}
+              value={this.project}
+              onChange={this.handleChange}
+              workspace={data.workspace}
+            />
+            <Nav
+              className="ks-page-nav"
+              navs={globals.app.getDevOpsNavs(this.project)}
+              location={location}
+              match={match}
+            />
+          </div>
+          <div className="ks-page-main">{renderRoutes(route.routes)}</div>
+        </>
+      </Provider>
     )
   }
 }

src/pages/workspaces/containers/DevOps/index.jsx

@@ -114,8 +114,10 @@ export default class DevOps extends React.Component {
   showCreate = () =>
     this.props.trigger('devops.create', {
       ...this.props.match.params,
+      success: name => {
+        location.href = `/devops/${name}`
+      },
     })
-
   render() {
     const { bannerProps, tableProps } = this.props
     return (

src/stores/devops.js

@@ -40,17 +40,21 @@ export default class DevOpsStore extends Base {
     isLoading: true,
   }
 
+  @observable
+  data = {}
+
   @observable
   devopsListData = []
 
-  // getBaseUrlV2 = () => 'kapis/devops.kubesphere.io/v1alpha2/'
+  getBaseUrlV2 = () => 'kapis/devops.kubesphere.io/v1alpha2/'
+
+  getDevopsUrlV2 = () => `${this.getBaseUrlV2()}devops`
 
-  // getDevopsUrl = () => `${this.getBaseUrlV2()}devops`
+  getResourceUrl = ({ workspace }) =>
+    `${this.getBaseUrlV2()}workspaces/${workspace}/devops`
 
-  // getResourceUrl = ({ workspace }) =>
-  //   `${this.getBaseUrlV2()}workspaces/${workspace}/devops`
+  getDetailUrl = project_id => `${this.getDevopsUrlV2()}/${project_id}`
 
-  // getDetailUrl = project_id => `${this.getDevopsUrl()}/${project_id}`
   getBaseUrl = () => 'apis/devops.kubesphere.io/v1alpha3/'
 
   getDevOpsUrl = () => `${this.getBaseUrl()}devopsprojects`

src/stores/devops/base.js

@@ -19,8 +19,11 @@
 import { set } from 'lodash'
 
 export default class Base {
+  baseUrlV3 = 'apis/devops.kubesphere.io/v1alpha3/'
+  devopsUrlV3 = `${this.baseUrlV3}devopsprojects/`
+
   baseUrlV2 = 'kapis/devops.kubesphere.io/v1alpha2/'
-  urlDevops = `${this.baseUrlV2}devops/`
+  devopsUrlV2 = `${this.baseUrlV2}devops/`
 
   catchRequestError(method = 'get', ...rest) {
     return request[method](...rest).catch(error => {

src/stores/devops/codeQuality.js

@@ -32,12 +32,12 @@ export default class CodeQualityStore extends BaseStore {
     let url = ''
     if (branch) {
       url = `${
-        this.urlDevops
+        this.devopsUrlV2
       }${project_id}/pipelines/${name}/branches/${encodeURIComponent(
         branch
       )}/sonarstatus `
     } else {
-      url = `${this.urlDevops}${project_id}/pipelines/${name}/sonarstatus`
+      url = `${this.devopsUrlV2}${project_id}/pipelines/${name}/sonarstatus`
     }
     this.isLoading = true
     const result = await this.request