feat: Pipeline detail add code repo attr (#4215)

feat: pipeline detail add code repo attr

Signed-off-by: yazhou <[email protected]>

src/pages/devops/containers/Pipelines/Detail/Layout/pipeline.jsx

@@ -32,6 +32,7 @@ import { getPipelineStatus } from 'utils/status'
 
 import { trigger } from 'utils/action'
 
+import { getCodeRepoTemplate } from 'utils/devOpsRepos'
 import './index.scss'
 
 @inject('rootStore', 'devopsStore', 'pipelineStore')
@@ -256,6 +257,17 @@ export default class PipelineDetailLayout extends React.Component {
 
   getAttrs = () => {
     const { devopsName } = this.props.devopsStore
+    let repo = {}
+    if (this.store.detail.isMultiBranch) {
+      const config = toJS(this.store.pipelineConfig)
+      const provider = get(config, 'spec.multi_branch_pipeline.source_type')
+      const source = get(
+        config,
+        `spec.multi_branch_pipeline.${provider}_source`,
+        {}
+      )
+      repo = getCodeRepoTemplate[provider]?.(source) ?? {}
+    }
 
     const syncStatus = get(
       this.store.pipelineConfig,
@@ -275,6 +287,11 @@ export default class PipelineDetailLayout extends React.Component {
         name: t('KIND_TCAP'),
         value: kind,
       },
+      {
+        hide: !this.store.detail.isMultiBranch,
+        name: t('CODE_REPO'),
+        value: repo.repo && repo.url ? `${repo.repo}(${repo.url})` : repo.url,
+      },
       {
         name: t('TASK_STATUS'),
         value: <Status {...getPipelineStatus(this.getCurrentState())} />,
@@ -287,7 +304,7 @@ export default class PipelineDetailLayout extends React.Component {
         name: t('UPDATE_TIME_TCAP'),
         value: this.getUpTime(),
       },
-    ]
+    ].filter(i => !i.hide)
   }
 
   handleScanRepository = async () => {

src/utils/devOpsRepos.js

@@ -1,8 +1,9 @@
+// ------------- pipeline source to code repo obj -----------
+
 /**
  * type repo
  *  { provider, url, server, owner, repo }
  */
-
 /**
  * github to repo
  * example: {
@@ -74,6 +75,15 @@ export function getGitSource(data) {
   }
 }
 
+export const getCodeRepoTemplate = {
+  github: getGithubSource,
+  gitlab: getGitlabSource,
+  bitbucket_server: getBitbucketSource,
+  git: getGitSource,
+}
+
+// ------------ code repo obj to pipeline source -----------
+
 const gitRepositorySpec2BaseSource = (spec, name) => {
   return {
     scm_id: name,