[ks-3.4.1]feat: Devops pipeline run detail page add params tab (#4212)

feat: devops pipeline run detail page add params tab

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

locales/ar/l10n-devopsProjects-pipeline-details.js

@@ -228,5 +228,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: 'No build parameters are found.',
 };

locales/de/l10n-devopsProjects-pipeline-details.js

@@ -228,5 +228,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: 'Not found build parameters.',
 };

locales/en/l10n-devopsProjects-pipeline-details.js

@@ -238,5 +238,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+    // detail page // parameters tab
+  NO_BUILD_PARAMETERS: 'Not found build parameters.',
 }

locales/es/l10n-devopsProjects-pipeline-details.js

@@ -227,5 +227,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: 'Not found build parameters.',
 };

locales/fr/l10n-devopsProjects-pipeline-details.js

@@ -228,5 +228,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: 'Not found build parameters.',
 };

locales/hi/l10n-devopsProjects-pipeline-details.js

@@ -228,5 +228,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: 'Not found build parameters.',
 };

locales/ko/l10n-devopsProjects-pipeline-details.js

@@ -223,5 +223,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: 'Not found build parameters.',
 };

locales/lt/l10n-devopsProjects-pipeline-details.js

@@ -228,5 +228,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: 'Not found build parameters.',
 };

locales/pl/l10n-devopsProjects-pipeline-details.js

@@ -228,5 +228,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: 'Not found build parameters.',
 };

locales/pt/l10n-devopsProjects-pipeline-details.js

@@ -228,5 +228,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: 'Not found build parameters.',
 };

locales/tc/l10n-devopsProjects-pipeline-details.js

@@ -223,5 +223,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: '未發現構建參數。',
 };

locales/tr/l10n-devopsProjects-pipeline-details.js

@@ -228,5 +228,7 @@ Jenkinsfile'nin operasyonel gereksinimlere göre girilen parametreler bölümü.
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: 'Pipeline Logs',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: 'Import From Code Repository'
+  IMPORT_FROM_CODE_REPO: 'Import From Code Repository',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: 'Not found build parameters.',
 };

locales/zh/l10n-devopsProjects-pipeline-details.js

@@ -222,5 +222,7 @@ module.exports = {
   // detail page // run log // task status // pipeline log modal
   PIPELINE_LOG: '流水线日志',
   // detail page // Create Pipeline modal // add step modal
-  IMPORT_FROM_CODE_REPO: '从代码库导入'
+  IMPORT_FROM_CODE_REPO: '从代码库导入',
+  // detail page // parameters tab
+  NO_BUILD_PARAMETERS: '未发现构建参数。',
 };

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

@@ -248,6 +248,15 @@ export default class RunDetailLayout extends React.Component {
     ]
   }
 
+  get routes() {
+    const routes = this.props.route.routes
+    const parameters = get(this.store.runDetail, 'spec.parameters', [])
+    if (!parameters.length) {
+      return routes.filter(item => item.name !== 'build-parameters')
+    }
+    return routes
+  }
+
   render() {
     const {
       runDetail: { id, annotations, labels },
@@ -288,12 +297,6 @@ export default class RunDetailLayout extends React.Component {
       ],
     }
 
-    return (
-      <DetailPage
-        routes={this.props.route.routes}
-        stores={stores}
-        {...sideProps}
-      />
-    )
+    return <DetailPage routes={this.routes} stores={stores} {...sideProps} />
   }
 }

src/pages/devops/containers/Pipelines/Detail/Parameters/Item.jsx

@@ -0,0 +1,51 @@
+/*
+ * 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 React from 'react'
+import classNames from 'classnames'
+import styles from './item.scss'
+
+const ItemWrapper = props => {
+  const { title, list } = props
+  return (
+    <div className={classNames(styles.card, {})}>
+      <div className={styles.header}>
+        <div className={styles.title}>{title}</div>
+      </div>
+      <div className={classNames(styles.content, {})}>
+        {list.map((item, index) => {
+          return (
+            <div key={index} className={styles.item}>
+              {Array.isArray(item) &&
+                item.map(i => (
+                  <span key={i} className={styles.kv}>
+                    {i}
+                  </span>
+                ))}
+              {typeof item === 'string' && (
+                <span className={styles.kv}>{item}</span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default ItemWrapper

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

@@ -0,0 +1,35 @@
+/*
+ * 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 EmptyCard from 'devops/components/Cards/EmptyCard'
+import { get } from 'lodash'
+import { inject, observer } from 'mobx-react'
+import * as React from 'react'
+import ItemWrapper from './Item'
+
+const Parameters = props => {
+  const data = get(props, 'spec.parameters', []).flatMap(item => [
+    [item.name, item.value],
+  ])
+  if (data.length === 0) {
+    return <EmptyCard desc={t('NO_BUILD_PARAMETERS')} />
+  }
+  return <ItemWrapper title={t('BUILD_PARAMETERS')} list={data} />
+}
+
+export default inject('detailStore')(observer(Parameters))

src/pages/devops/containers/Pipelines/Detail/Parameters/item.scss

@@ -0,0 +1,88 @@
+// Variables
+$color-palette-wb-white: #fff;
+$color-palette-light-light-color-02: #eff4f9;
+$color-palette-light-light-color-06: #ccd3db;
+$paragraph-heading-color: #242e42;
+$neutral-neutral-15: #242e42;
+
+// Mixins
+@mixin cardBase {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  border-radius: 4px;
+  background: $color-palette-wb-white;
+  box-shadow: 0px 4px 8px 0px rgba(36, 46, 66, 0.06);
+  padding: 16px;
+}
+
+@mixin itemBase {
+  border-radius: 22px;
+  padding: 12px 32px;
+}
+
+@mixin textRegular {
+  color: $paragraph-heading-color;
+  font-family: PingFang SC;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  font-feature-settings: 'clig' off, 'liga' off;
+}
+
+@mixin textTitle {
+  color: $paragraph-heading-color;
+  font-family: PingFang SC;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  font-feature-settings: 'clig' off, 'liga' off;
+}
+
+.card + .card {
+  margin-top: 12px;
+}
+
+.card {
+  @include cardBase;
+
+  &.hideContent {
+    gap: 0;
+  }
+  .title {
+    @include textTitle;
+  }
+
+  .header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+  }
+
+  .item {
+    @include itemBase;
+    border: 1px solid $color-palette-light-light-color-06;
+    background: $color-palette-light-light-color-02;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+
+  .item + .item {
+    margin-top: 12px;
+  }
+
+  .kv {
+    @include textRegular;
+  }
+  .content {
+    max-height: 1000px;
+    animation: max-height 0.3s ease-in-out;
+    overflow: hidden;
+    &.hide {
+      max-height: 0;
+      animation: max-height 0.3s ease-in-out reverse;
+    }
+  }
+}

src/pages/devops/containers/Pipelines/Detail/index.js

@@ -26,3 +26,4 @@ export { default as Commit } from './Commit'
 export { default as Artifacts } from './Artifacts'
 export { default as CodeQuality } from './CodeQuality'
 export { default as Events } from './Events'
+export { default as Parameters } from './Parameters'

src/pages/devops/containers/Pipelines/Detail/routes.js

@@ -30,6 +30,7 @@ import {
   PipelineOld,
   PullRequest,
   TaskStatus,
+  Parameters,
 } from './index'
 import BranchLayout from './Layout/branch'
 
@@ -70,6 +71,11 @@ const PIPELINE_BRANCH_ROUTES = [
 
 const PIPELINE_RUN_ROUTES = [
   { name: 'task-status', title: 'TASK_STATUS', component: TaskStatus },
+  {
+    name: 'build-parameters',
+    title: 'BUILD_PARAMETERS',
+    component: Parameters,
+  },
   { name: 'commit', title: 'COMMIT_PL', component: Commit },
   { name: 'artifacts', title: 'ARTIFACT_PL', component: Artifacts },
   { name: 'events', title: 'EVENT_PL', component: Events },