Skip to content

Commit

Permalink
feat：导出/导出流水线功能优化 TencentBlueKing#11304
Browse files Browse the repository at this point in the history 
# Reviewed, transaction id: 28072
  • Loading branch information
@vhwweng
vhwweng committed Dec 27, 2024
1 parent 546bf9a commit c6b977a
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 53 deletions.
6 changes: 3 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 @@ -41,6 +41,7 @@
import { PROCESS_API_URL_PREFIX } from '@/store/constants'
import Logo from '@/components/Logo'
import { mapActions, mapState } from 'vuex'
import { CODE_MODE, UI_MODE } from '@/utils/pipelineConst'
export default {
components: {
Expand Down Expand Up @@ -78,21 +79,20 @@
exportList () {
return [
{
type: 'pipelineJson',
type: UI_MODE,
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',
type: CODE_MODE,
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,
Expand Down
108 changes: 63 additions & 45 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 @@ -23,7 +23,8 @@
<script>
import { hashID } from '@/utils/util'
import { mapActions, mapState } from 'vuex'
import YAML from 'js-yaml'
import { CODE_MODE, UI_MODE } from '@/utils/pipelineConst'
export default {
name: 'import-pipeline-popup',
props: {
Expand Down Expand Up @@ -63,16 +64,18 @@
'setPipelineSetting',
'setPipelineWithoutTrigger'
]),
...mapActions({
updatePipelineMode: 'updatePipelineMode'
}),
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 {
reader.addEventListener('loadend', async e => {
try {
if (fileObj.type === 'application/json' || fileObj.name.endsWith('.json')) {
const jsonResult = JSON.parse(reader.result)
const isValid = this.checkJosnValid(jsonResult)
const isValid = this.checkJsonValid(jsonResult)
const code = isValid ? 0 : 1
const message = isValid ? null : this.$t('invalidPipelineJsonOrYaml')
Expand All @@ -83,60 +86,75 @@
}, fileObj)
if (isValid) {
this.handleSuccess(jsonResult)
this.handleSuccess(jsonResult, UI_MODE)
}
} catch (e) {
console.log(e)
onSuccess({
code: 1,
message: this.$t('invalidPipelineJsonOrYaml'),
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
} else if (fileObj.type === 'application/x-yaml' || fileObj.name.endsWith('.yaml') || fileObj.name.endsWith('.yml')) {
const yaml = e.target.result
const isValid = !!yaml
const code = isValid ? 0 : 1
const message = isValid ? null : this.$t('invalidPipelineJsonOrYaml')
onSuccess({
code,
message,
result: jsonResult
result: yaml
}, fileObj)
if (isValid) {
this.handleSuccess(jsonResult)
this.handleSuccess(yaml, CODE_MODE)
}
} 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('invalidPipelineJsonOrYaml'),
result: ''
}, fileObj)
} finally {
onDone(fileObj)
}
})
reader.addEventListener('progress', onProgress)
},
async handleSuccess (result) {
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) {
if (typeof this.handleImportSuccess === 'function') {
this.handleImportSuccess()
return
async handleSuccess (result, type = UI_MODE) {
if (type === UI_MODE) {
const newPipelineName = this.pipelineName || `${result.model.name}_${hashID().slice(0, 8)}`
const res = await this.updatePipeline(result, newPipelineName)
this.setEditFrom(true)
if (res) {
if (typeof this.handleImportSuccess === 'function') {
this.handleImportSuccess()
return
}
this.$nextTick(() => {
this.$router.push({
name: 'pipelineImportEdit',
params: {
tab: 'pipeline'
}
})
})
}
} else if (type === CODE_MODE) {
this.updatePipelineMode(CODE_MODE)
this.setEditFrom(true)
this.$store.dispatch('atom/setPipelineYaml', result)
try {
await this.transferPipeline({
projectId: this.$route.params.projectId,
actionType: 'FULL_YAML2MODEL',
oldYaml: result
})
} catch (error) {
this.$showTips({
message: error.message,
theme: 'error'
})
}
this.setPipelineEditing(true)
this.$nextTick(() => {
this.$router.push({
Expand Down Expand Up @@ -196,7 +214,7 @@
this.setPipelineEditing(true)
return true
},
checkJosnValid (json) {
checkJsonValid (json) {
try {
return (json.model.stages && json.setting.pipelineName) || json.stages
} catch (e) {
Expand Down
11 changes: 6 additions & 5 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 @@ -24,7 +24,7 @@ import {
STORE_API_URL_PREFIX,
UPDATE_PIPELINE_MODE
} from '@/store/constants'
import { UI_MODE } from '@/utils/pipelineConst'
import { UI_MODE, CODE_MODE } from '@/utils/pipelineConst'
import request from '@/utils/request'
import { hashID, randomString } from '@/utils/util'
import { areDeeplyEqual } from '../../../utils/util'
Expand Down Expand Up @@ -264,7 +264,7 @@ export default {
}
}
},
async transfer ({ getters }, { projectId, pipelineId, actionType, ...params }) {
async transfer ({ getters, state }, { projectId, pipelineId, actionType, ...params }) {
const apis = [
request.post(`${PROCESS_API_URL_PREFIX}/user/transfer/projects/${projectId}`, params, {
params: {
Expand All @@ -273,7 +273,7 @@ export default {
}
})
]
if (actionType === 'FULL_YAML2MODEL') {
if (actionType === 'FULL_YAML2MODEL' && !state.editfromImport) {
apis.push(
request.get(`/${PROCESS_API_URL_PREFIX}/user/pipeline/projects/${projectId}/pipelines/${pipelineId}/atom/prop/list`, {
params: params.version ? { version: params.version } : {}
Expand Down Expand Up @@ -874,7 +874,8 @@ export default {
a.click()
document.body.removeChild(a)
}
if (type === 'pipelineYaml') {

if (type === CODE_MODE) {
return fetch(url, {
credentials: 'include',
method: 'post',
Expand All @@ -893,7 +894,7 @@ export default {
const blob = new Blob([result])
fn(blob)
})
} else {
} else if (type === UI_MODE) {
return fetch(url, { credentials: 'include' }).then((res) => {
if (res.status >= 200 && res.status < 300) {
return res.blob()
Expand Down

0 comments on commit c6b977a

Please sign in to comment.