Skip to content

Commit

Permalink
feat：导出流水线功能优化 TencentBlueKing#11304
Browse files Browse the repository at this point in the history 
# Reviewed, transaction id: 26266
  • Loading branch information
@vhwweng
vhwweng committed Dec 10, 2024
1 parent 7993fdf commit 546bf9a
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 44 deletions.
25 changes: 22 additions & 3 deletions src/frontend/devops-pipeline/src/components/ExportDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
</p>
<bk-button
class="export-button"
@click="downLoadFromApi(exportItem.exportUrl, exportItem.name)"
@click="downLoadFromApi(exportItem)"
:loading="isDownLoading"
>
{{ $t('newlist.exportPipelineJson') }}
Expand Down Expand Up @@ -58,6 +58,8 @@
computed: {
...mapState('atom', [
'pipeline',
'pipelineSetting',
'pipelineInfo'
]),
Expand All @@ -76,11 +78,27 @@
exportList () {
return [
{
type: 'pipelineJson',
title: 'Pipeline Json',
icon: 'export-pipeline',
name: `${this.pipelineName}.json`,
tips: this.$t('newlist.exportJsonTip'),
exportUrl: `${API_URL_PREFIX}/${PROCESS_API_URL_PREFIX}/user/pipelines/${this.pipelineId}/projects/${this.projectId}/export`
},
{
type: 'pipelineYaml',
title: 'Pipeline YAML',
icon: 'export-pipeline',
name: `${this.pipelineName}.yml`,
tips: this.$t('newlist.exportPipelineYamlTip'),
exportUrl: `${API_URL_PREFIX}/${PROCESS_API_URL_PREFIX}/user/transfer/projects/${this.projectId}?pipelineId=${this.pipelineId}&actionType=FULL_MODEL2YAML`,
tipsLink: `${IWIKI_DOCS_URL}/p/4009967153`,
params: {
modelAndSetting: {
model: this.pipeline,
setting: this.pipelineSetting
}
}
}
]
}
Expand All @@ -93,9 +111,10 @@
this.$emit('update:isShow', false)
},
downLoadFromApi (url, name) {
downLoadFromApi (exportItem) {
const { exportUrl: url, name, params, type } = exportItem
this.isDownLoading = true
this.download({ url, name }).catch((e) => {
this.download({ url, name, params, type }).catch((e) => {
this.handleError(
e,
{
Expand Down
86 changes: 58 additions & 28 deletions src/frontend/devops-pipeline/src/components/pipelineList/ImportPipelinePopup/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
{{ $t('importPipelineLabel') }}
<bk-upload
v-if="isShow"
accept="application/json"
accept=".json, .yaml, .yml, application/json, application/x-yaml"
:with-credentials="true"
:custom-request="handleSelect"
>
Expand All @@ -23,6 +23,7 @@
<script>
import { hashID } from '@/utils/util'
import { mapActions, mapState } from 'vuex'
import YAML from 'js-yaml'
export default {
name: 'import-pipeline-popup',
props: {
Expand Down Expand Up @@ -66,40 +67,69 @@
handleSelect ({ fileObj, onProgress, onSuccess, onDone }) {
const reader = new FileReader()
reader.readAsText(fileObj.origin)
if (fileObj.type === 'application/json' || fileObj.name.endsWith('.json')) {
reader.addEventListener('loadend', e => {
try {
const jsonResult = JSON.parse(reader.result)
const isValid = this.checkJosnValid(jsonResult)
const code = isValid ? 0 : 1
const message = isValid ? null : this.$t('invalidPipelineJsonOrYaml')
reader.addEventListener('loadend', e => {
try {
const jsonResult = JSON.parse(reader.result)
const isValid = this.checkJosnValid(jsonResult)
const code = isValid ? 0 : 1
const message = isValid ? null : this.$t('invalidPipelineJson')
onSuccess({
code,
message,
result: jsonResult
}, fileObj)
onSuccess({
code,
message,
result: jsonResult
}, fileObj)
if (isValid) {
this.handleSuccess(jsonResult)
if (isValid) {
this.handleSuccess(jsonResult)
}
} catch (e) {
console.log(e)
onSuccess({
code: 1,
message: this.$t('invalidPipelineJsonOrYaml'),
result: ''
}, fileObj)
} finally {
onDone(fileObj)
}
} catch (e) {
console.log(e)
onSuccess({
code: 1,
message: this.$t('invalidPipelineJson'),
result: ''
}, fileObj)
} finally {
onDone(fileObj)
}
})
})
} else if (fileObj.type === 'application/x-yaml' || fileObj.name.endsWith('.yaml') || fileObj.name.endsWith('.yml')) {
reader.addEventListener('loadend', e => {
try {
const jsonResult = YAML.load(e.target.result)
const isValid = !!jsonResult.stages?.length
const code = isValid ? 0 : 1
const message = isValid ? null : this.$t('invalidPipelineJsonOrYaml')
onSuccess({
code,
message,
result: jsonResult
}, fileObj)
if (isValid) {
this.handleSuccess(jsonResult)
}
} catch (e) {
console.log(e)
onSuccess({
code: 1,
message: this.$t('invalidPipelineJsonOrYaml'),
result: ''
}, fileObj)
} finally {
onDone(fileObj)
}
})
}
reader.addEventListener('progress', onProgress)
},
async handleSuccess (result) {
const newPipelineName = this.pipelineName || `${result.model.name}_${hashID().slice(0, 8)}`
const newPipelineName = this.pipelineName || `${result.name || result.model.name}_${hashID().slice(0, 8)}`
const res = await this.updatePipeline(result, newPipelineName)
this.setEditFrom(true)
if (res) {
Expand Down Expand Up @@ -168,7 +198,7 @@
},
checkJosnValid (json) {
try {
return json.model.stages && json.setting.pipelineName
return (json.model.stages && json.setting.pipelineName) || json.stages
} catch (e) {
return false
}
Expand Down
42 changes: 33 additions & 9 deletions src/frontend/devops-pipeline/src/store/modules/atom/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -864,22 +864,46 @@ export default {
return request.post(`${PROCESS_API_URL_PREFIX}/user/builds/projects/${projectId}/pipelines/${pipelineId}/builds/${buildId}/taskIds/${taskId}/execution/pause?isContinue=${isContinue}&stageId=${stageId}&containerId=${containerId}`, element)
},

download (_, { url, name }) {
return fetch(url, { credentials: 'include' }).then((res) => {
if (res.status >= 200 && res.status < 300) {
return res.blob()
} else {
return res.json().then((result) => Promise.reject(result))
}
}).then((blob) => {
download (_, { url, name, params, type }) {
const fn = (blob) => {
const a = document.createElement('a')
const url = window.URL || window.webkitURL || window.moxURL
a.href = url.createObjectURL(blob)
if (name) a.download = name
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
})
}
if (type === 'pipelineYaml') {
return fetch(url, {
credentials: 'include',
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
}).then((res) => {
if (res.status >= 200 && res.status < 300) {
return res.json()
} else {
return res.json().then((result) => Promise.reject(result))
}
}).then((data) => {
const result = data.data.newYaml
const blob = new Blob([result])
fn(blob)
})
} else {
return fetch(url, { credentials: 'include' }).then((res) => {
if (res.status >= 200 && res.status < 300) {
return res.blob()
} else {
return res.json().then((result) => Promise.reject(result))
}
}).then((blob) => {
fn(blob)
})
}
},
reviewExcuteAtom: async ({ commit }, { projectId, pipelineId, buildId, elementId, action }) => {
return request.post(`/${PROCESS_API_URL_PREFIX}/user/quality/builds/${projectId}/${pipelineId}/${buildId}/${elementId}/qualityGateReview/${action}`).then(response => {
Expand Down
5 changes: 3 additions & 2 deletions src/frontend/locale/pipeline/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,8 @@
"pipelinesDetail": "Details",
"newPipelineFromTemplateLabel": "New From Template",
"newPipelineFromJSONLabel": "Import From Json",
"importPipelineLabel": "Please upload a pipeline JSON file",
"invalidPipelineJson": "Invalid Pipeline JSON",
"importPipelineLabel": "Please upload a pipeline JSON/YAML file",
"invalidPipelineJsonOrYaml": "Invalid Pipeline JSON/YAML",
"exportPipelineSuccess": "Export Pipeline Success",
"sizeLimit": "Maximum file size is 100MB. When re-uploading, if the path remains unchanged, there is no need to save the pipeline.",
"fileUploadSuccess": "Upload Successful",
Expand Down Expand Up @@ -466,6 +466,7 @@
},
"newlist": {
"exportJsonTip": "Through the import function, you can quickly create a pipeline, and you can also implement cross-project and cross-blue shield platform pipeline import.",
"exportPipelineYamlTip": "Export the YAML file to the code repository to enable PAC mode, allowing maintenance of the pipeline through the code repository or UI. Learn about PAC mode.",
"chooseExport": "Choose the export file format",
"defaultViews": "My views",
"copyPipeline": "Copy pipeline",
Expand Down
5 changes: 3 additions & 2 deletions src/frontend/locale/pipeline/zh-CN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,8 @@
"pipelinesDetail": "执行详情",
"newPipelineFromTemplateLabel": "从模板新建",
"newPipelineFromJSONLabel": "导入流水线",
"importPipelineLabel": "请上传一个流水线JSON文件",
"invalidPipelineJson": "非法的流水线JSON文件",
"importPipelineLabel": "请上传一个流水线JSON/YAML文件",
"invalidPipelineJsonOrYaml": "非法的流水线JSON/YAML文件",
"exportPipelineSuccess": "导出流水线成功",
"sizeLimit": "最大上传{0}MB，重新上传时若路径未变更，无需保存流水线",
"fileUploadSuccess": "上传成功",
Expand Down Expand Up @@ -465,6 +465,7 @@
},
"newlist": {
"exportJsonTip": "通过导入功能，可以快速创建流水线，也可以实现跨项目、跨蓝盾平台的流水线导入。",
"exportPipelineYamlTip": "导出 YAML 文件提交到代码库，可以开启 PAC 模式，通过代码库或者UI维护流水线。了解 PAC 模式",
"chooseExport": "选择导出的文件格式",
"defaultViews": "我的常用视图",
"copyPipeline": "复制流水线",
Expand Down

0 comments on commit 546bf9a

Please sign in to comment.