From a053e96c31f2a200e819b082a7dec80e4ca9fc55 Mon Sep 17 00:00:00 2001 From: yazhou Date: Fri, 20 Oct 2023 11:15:39 +0800 Subject: [PATCH] feat: devops pipeline run detail page add params tab Signed-off-by: yazhou --- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../l10n-devopsProjects-pipeline-details.js | 4 +- .../Pipelines/Detail/Layout/runs.jsx | 17 ++-- .../Pipelines/Detail/Parameters/Item.jsx | 51 +++++++++++ .../Pipelines/Detail/Parameters/index.jsx | 35 ++++++++ .../Pipelines/Detail/Parameters/item.scss | 88 +++++++++++++++++++ .../containers/Pipelines/Detail/index.js | 1 + .../containers/Pipelines/Detail/routes.js | 6 ++ 19 files changed, 230 insertions(+), 20 deletions(-) create mode 100644 src/pages/devops/containers/Pipelines/Detail/Parameters/Item.jsx create mode 100644 src/pages/devops/containers/Pipelines/Detail/Parameters/index.jsx create mode 100644 src/pages/devops/containers/Pipelines/Detail/Parameters/item.scss diff --git a/locales/ar/l10n-devopsProjects-pipeline-details.js b/locales/ar/l10n-devopsProjects-pipeline-details.js index 57adf7eaa54..b29937e3ed7 100644 --- a/locales/ar/l10n-devopsProjects-pipeline-details.js +++ b/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.', }; \ No newline at end of file diff --git a/locales/de/l10n-devopsProjects-pipeline-details.js b/locales/de/l10n-devopsProjects-pipeline-details.js index 43d3ce0debd..9ac903e3336 100644 --- a/locales/de/l10n-devopsProjects-pipeline-details.js +++ b/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.', }; \ No newline at end of file diff --git a/locales/en/l10n-devopsProjects-pipeline-details.js b/locales/en/l10n-devopsProjects-pipeline-details.js index 0fef75917e2..0ac0e88be7e 100644 --- a/locales/en/l10n-devopsProjects-pipeline-details.js +++ b/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.', } diff --git a/locales/es/l10n-devopsProjects-pipeline-details.js b/locales/es/l10n-devopsProjects-pipeline-details.js index bbd54843eda..ddca12f9939 100644 --- a/locales/es/l10n-devopsProjects-pipeline-details.js +++ b/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.', }; \ No newline at end of file diff --git a/locales/fr/l10n-devopsProjects-pipeline-details.js b/locales/fr/l10n-devopsProjects-pipeline-details.js index 8aac8899a3f..a8dc250b254 100644 --- a/locales/fr/l10n-devopsProjects-pipeline-details.js +++ b/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.', }; \ No newline at end of file diff --git a/locales/hi/l10n-devopsProjects-pipeline-details.js b/locales/hi/l10n-devopsProjects-pipeline-details.js index 99f8998766c..45ac1a32df2 100644 --- a/locales/hi/l10n-devopsProjects-pipeline-details.js +++ b/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.', }; \ No newline at end of file diff --git a/locales/ko/l10n-devopsProjects-pipeline-details.js b/locales/ko/l10n-devopsProjects-pipeline-details.js index e322f4e1a65..68bb55d30ac 100644 --- a/locales/ko/l10n-devopsProjects-pipeline-details.js +++ b/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.', }; \ No newline at end of file diff --git a/locales/lt/l10n-devopsProjects-pipeline-details.js b/locales/lt/l10n-devopsProjects-pipeline-details.js index 8aac8899a3f..a8dc250b254 100644 --- a/locales/lt/l10n-devopsProjects-pipeline-details.js +++ b/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.', }; \ No newline at end of file diff --git a/locales/pl/l10n-devopsProjects-pipeline-details.js b/locales/pl/l10n-devopsProjects-pipeline-details.js index 8aac8899a3f..a8dc250b254 100644 --- a/locales/pl/l10n-devopsProjects-pipeline-details.js +++ b/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.', }; \ No newline at end of file diff --git a/locales/pt/l10n-devopsProjects-pipeline-details.js b/locales/pt/l10n-devopsProjects-pipeline-details.js index 8aac8899a3f..a8dc250b254 100644 --- a/locales/pt/l10n-devopsProjects-pipeline-details.js +++ b/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.', }; \ No newline at end of file diff --git a/locales/tc/l10n-devopsProjects-pipeline-details.js b/locales/tc/l10n-devopsProjects-pipeline-details.js index 119096b2aaf..77b7a16a380 100644 --- a/locales/tc/l10n-devopsProjects-pipeline-details.js +++ b/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: '未發現構建參數。', }; \ No newline at end of file diff --git a/locales/tr/l10n-devopsProjects-pipeline-details.js b/locales/tr/l10n-devopsProjects-pipeline-details.js index f7be2b827c0..93e64ff7cb8 100644 --- a/locales/tr/l10n-devopsProjects-pipeline-details.js +++ b/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.', }; \ No newline at end of file diff --git a/locales/zh/l10n-devopsProjects-pipeline-details.js b/locales/zh/l10n-devopsProjects-pipeline-details.js index e0c5132e3ff..f645c60f8e2 100644 --- a/locales/zh/l10n-devopsProjects-pipeline-details.js +++ b/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: '未发现构建参数。', }; \ No newline at end of file diff --git a/src/pages/devops/containers/Pipelines/Detail/Layout/runs.jsx b/src/pages/devops/containers/Pipelines/Detail/Layout/runs.jsx index e11c4a647c2..cc4cd0f9436 100644 --- a/src/pages/devops/containers/Pipelines/Detail/Layout/runs.jsx +++ b/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 ( - - ) + return } } diff --git a/src/pages/devops/containers/Pipelines/Detail/Parameters/Item.jsx b/src/pages/devops/containers/Pipelines/Detail/Parameters/Item.jsx new file mode 100644 index 00000000000..7ec6e6a2916 --- /dev/null +++ b/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 . + */ + +import React from 'react' +import classNames from 'classnames' +import styles from './item.scss' + +const ItemWrapper = props => { + const { title, list } = props + return ( +
+
+
{title}
+
+
+ {list.map((item, index) => { + return ( +
+ {Array.isArray(item) && + item.map(i => ( + + {i} + + ))} + {typeof item === 'string' && ( + {item} + )} +
+ ) + })} +
+
+ ) +} + +export default ItemWrapper diff --git a/src/pages/devops/containers/Pipelines/Detail/Parameters/index.jsx b/src/pages/devops/containers/Pipelines/Detail/Parameters/index.jsx new file mode 100644 index 00000000000..c81396ec44b --- /dev/null +++ b/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 . + */ + +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 + } + return +} + +export default inject('detailStore')(observer(Parameters)) diff --git a/src/pages/devops/containers/Pipelines/Detail/Parameters/item.scss b/src/pages/devops/containers/Pipelines/Detail/Parameters/item.scss new file mode 100644 index 00000000000..8134dc41991 --- /dev/null +++ b/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; + } + } +} diff --git a/src/pages/devops/containers/Pipelines/Detail/index.js b/src/pages/devops/containers/Pipelines/Detail/index.js index 05fb82a5054..f095c691351 100644 --- a/src/pages/devops/containers/Pipelines/Detail/index.js +++ b/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' diff --git a/src/pages/devops/containers/Pipelines/Detail/routes.js b/src/pages/devops/containers/Pipelines/Detail/routes.js index fa19c74db80..0061e1ea69b 100644 --- a/src/pages/devops/containers/Pipelines/Detail/routes.js +++ b/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 },