-
Notifications
You must be signed in to change notification settings - Fork 505
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10541 from vhwweng/issue_10356
feat：流水线权限代持功能重构 #10356
- Loading branch information
Showing
8 changed files
with
407 additions
and
5 deletions.
There are no files selected for viewing
328 changes: 328 additions & 0 deletions
328
src/frontend/devops-pipeline/src/components/PipelineDetailTabs/DelegationPermission.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,328 @@ | ||
| <template> | ||
| <main class="delegation-permission" v-bkloading="{ isLoading }"> | ||
| <section class="content-warpper"> | ||
| <header class="header"> | ||
| <logo class="mr5" name="help-document-fill" size="20" /> | ||
| {{ $t('delegationPermission') }} | ||
| </header> | ||
| <div class="content"> | ||
| <p>{{ $t('delegation.tips1') }}</p> | ||
| <i18n | ||
| class="mt10" | ||
| tag="p" | ||
| path="delegation.tips2"> | ||
| <span class="highlight">{{ $t('delegation.pipelineExecPermission') }}</span> | ||
| </i18n> | ||
| <i18n | ||
| tag="p" | ||
| path="delegation.tips3"> | ||
| <span class="highlight">{{ 'BK_CI_START_USER_ID' }}</span> | ||
| </i18n> | ||
| <p class="mt20">{{ $t('delegation.tips4') }}</p> | ||
| <i18n | ||
| tag="p" | ||
| path="delegation.tips5"> | ||
| <span class="highlight">{{ $t('delegation.newOperator') }}</span> | ||
| </i18n> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="mt30"> | ||
| <div class="panel-content"> | ||
| <p> | ||
| <label class="block-row-label">{{ $t('delegation.proxyHolderForExecutionPermissions') }}</label> | ||
| <span | ||
| :class="{ | ||
| 'block-row-value': true, | ||
| 'reset-row': !resourceAuthData.executePermission | ||
| }"> | ||
| <span | ||
| :class="{ | ||
| 'name': true, | ||
| 'not-permission': !resourceAuthData.executePermission | ||
| }" | ||
| v-bk-tooltips="{ | ||
| content: $t('delegation.expiredTips'), | ||
| disabled: resourceAuthData.executePermission | ||
| }" | ||
| > | ||
| {{ resourceAuthData.handoverFrom }} | ||
| </span> | ||
| <bk-tag theme="danger" v-if="!resourceAuthData?.executePermission && !isLoading">{{ $t('delegation.expired') }}</bk-tag> | ||
| <span | ||
| class="refresh-auth" | ||
| v-perm="{ | ||
| hasPermission: hasResetPermission, | ||
| disablePermissionApi: true, | ||
| permissionData: { | ||
| projectId, | ||
| resourceType: 'pipeline', | ||
| resourceCode: pipelineId, | ||
| action: RESOURCE_ACTION.MANAGE | ||
| } | ||
| }" | ||
| @click="handleShowResetDialog"> | ||
| <logo class="refresh-icon" name="refresh" size="14" /> | ||
| {{ $t('delegation.resetAuthorization') }} | ||
| </span> | ||
| </span> | ||
| </p> | ||
| <p> | ||
| <label class="block-row-label">{{ $t('delegation.authTime') }}</label> | ||
| <span class="block-row-value">{{ convertTime(resourceAuthData.handoverTime) }}</span> | ||
| </p> | ||
| </div> | ||
| </section> | ||
|
|
||
| <bk-dialog | ||
| ext-cls="reset-auth-confirm-dialog" | ||
| :value="showResetDialog" | ||
| :show-footer="false" | ||
| @value-change="handleToggleShowResetDialog" | ||
| > | ||
| <span class="close-confirm-title"> | ||
| {{ $t('delegation.confirmReset') }} | ||
| </span> | ||
| <span class="close-confirm-tips"> | ||
| <i18n | ||
| tag="p" | ||
| path="delegation.resetAuthTips1"> | ||
| <span class="highlight">{{ $t('delegation.yourPermission') }}</span> | ||
| </i18n> | ||
| <p>{{ $t('delegation.resetAuthTips2') }}</p> | ||
| </span> | ||
| <span class="close-confirm-footer"> | ||
| <bk-button | ||
| class="mr10 btn" | ||
| theme="primary" | ||
| :loading="resetLoading" | ||
| @click="handleReset" | ||
| > | ||
| {{ $t('delegation.reset') }} | ||
| </bk-button> | ||
| <bk-button | ||
| class="btn" | ||
| :loading="resetLoading" | ||
| @click="showResetDialog = !showResetDialog"> | ||
| {{ $t('delegation.cancel') }} | ||
| </bk-button> | ||
| </span> | ||
| </bk-dialog> | ||
| </main> | ||
| </template> | ||
|
|
||
| <script> | ||
| import Logo from '@/components/Logo' | ||
| import { mapActions, mapState } from 'vuex' | ||
| import { convertTime } from '@/utils/util' | ||
| import { | ||
| RESOURCE_ACTION | ||
| } from '@/utils/permission' | ||
| export default { | ||
| components: { | ||
| Logo | ||
| }, | ||
| data () { | ||
| return { | ||
| isLoading: false, | ||
| showResetDialog: false, | ||
| resetLoading: false, | ||
| resourceAuthData: {} | ||
| } | ||
| }, | ||
| computed: { | ||
| ...mapState('atom', ['pipelineInfo']), | ||
| hasResetPermission () { | ||
| return this.pipelineInfo?.permissions.canManage | ||
| }, | ||
| RESOURCE_ACTION () { | ||
| return RESOURCE_ACTION | ||
| }, | ||
| pipelineId () { | ||
| return this.pipelineInfo.pipelineId | ||
| }, | ||
| projectId () { | ||
| return this.$route.params.projectId | ||
| } | ||
| }, | ||
| created () { | ||
| this.fetchResourceAuth() | ||
| }, | ||
| methods: { | ||
| convertTime, | ||
| ...mapActions('pipelines', [ | ||
| 'getResourceAuthorization', | ||
| 'resetPipelineAuthorization' | ||
| ]), | ||
| handleShowResetDialog () { | ||
| this.showResetDialog = true | ||
| }, | ||
| handleToggleShowResetDialog (val) { | ||
| if (!val) { | ||
| this.showResetDialog = false | ||
| this.resetLoading = false | ||
| } | ||
| }, | ||
| async fetchResourceAuth () { | ||
| try { | ||
| this.isLoading = true | ||
| this.resourceAuthData = await this.getResourceAuthorization({ | ||
| projectId: this.projectId, | ||
| resourceType: 'pipeline', | ||
| resourceCode: this.pipelineId | ||
| }) | ||
| } catch (e) { | ||
| console.error(e) | ||
| } finally { | ||
| this.isLoading = false | ||
| } | ||
| }, | ||
| async handleReset () { | ||
| this.resetLoading = true | ||
| try { | ||
| this.resetLoading = false | ||
| const res = await this.resetPipelineAuthorization({ | ||
| projectId: this.projectId, | ||
| params: { | ||
| projectCode: this.projectId, | ||
| resourceType: 'pipeline', | ||
| handoverChannel: 'OTHER', | ||
| resourceAuthorizationHandoverList: [ | ||
| { | ||
| projectCode: this.projectId, | ||
| resourceType: 'pipeline', | ||
| resourceName: this.resourceAuthData.resourceName, | ||
| resourceCode: this.resourceAuthData.resourceCode, | ||
| handoverFrom: this.resourceAuthData.handoverFrom, | ||
| handoverTo: this.$userInfo.username | ||
| } | ||
| ] | ||
| } | ||
| }) | ||
| this.showResetDialog = false | ||
| if (res?.FAILED?.length) { | ||
| const message = res.FAILED[0]?.handoverFailedMessage || '' | ||
| this.$bkMessage({ | ||
| theme: 'error', | ||
| message | ||
| }) | ||
| } else { | ||
| this.fetchResourceAuth() | ||
| this.$bkMessage({ | ||
| theme: 'success', | ||
| message: this.$t('delegation.resetSuc') | ||
| }) | ||
| } | ||
| } catch (e) { | ||
| this.resetLoading = false | ||
| this.$bkMessage({ | ||
| theme: 'error', | ||
| message: e.message || e | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <style lang="scss"> | ||
| .delegation-permission { | ||
| padding: 24px; | ||
| font-size: 12px; | ||
| .content-warpper { | ||
| border-radius: 2px; | ||
| border: 1px solid #DCDEE5; | ||
| } | ||
| .header { | ||
| display: flex; | ||
| align-items: center; | ||
| height: 40px; | ||
| background-color: #F5F7FA; | ||
| padding: 0 16px; | ||
| font-size: 14px; | ||
| font-weight: 700; | ||
| } | ||
| .content { | ||
| padding: 20px 16px; | ||
| line-height: 24px; | ||
| color: #63656E; | ||
| font-size: 12px; | ||
| } | ||
| .highlight { | ||
| color: #FF9C01; | ||
| font-weight: 700; | ||
| } | ||
| .reset-row { | ||
| position: relative; | ||
| top: -4px; | ||
| .not-permission { | ||
| color: #C4C6CC; | ||
| text-decoration: line-through; | ||
| margin-right: 5px; | ||
| } | ||
| } | ||
| } | ||
| .panel-content { | ||
| display: grid; | ||
| grid-gap: 16px; | ||
| grid-template-rows: minmax(18px, auto); | ||
| margin-bottom: 32px; | ||
| p { | ||
| display: grid; | ||
| grid-auto-flow: column; | ||
| grid-template-columns: 120px 1fr; | ||
| align-items: flex-start; | ||
| grid-gap: 10px; | ||
| font-size: 12px; | ||
| color: #63656e; | ||
| >label { | ||
| text-align: right; | ||
| line-height: 18px; | ||
| color: #979BA5; | ||
| } | ||
| } | ||
| .refresh-auth { | ||
| margin-left: 20px; | ||
| cursor: pointer; | ||
| color: #3A84FF; | ||
| } | ||
| .refresh-icon { | ||
| position: relative; | ||
| top: 2px; | ||
| margin-right: 2px; | ||
| } | ||
| } | ||
| .reset-auth-confirm-dialog { | ||
| text-align: center; | ||
| .bk-dialog-body { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| max-height: calc(50vh - 50px); | ||
| } | ||
| .close-confirm-title { | ||
| font-size: 20px; | ||
| color: #313238; | ||
| margin-bottom: 15px; | ||
| } | ||
| .close-confirm-tips { | ||
| text-align: left; | ||
| color: #63656E; | ||
| font-size: 12px; | ||
| padding: 10px 20px; | ||
| background: #F5F7FA; | ||
| span { | ||
| color: #FF9C01; | ||
| } | ||
| } | ||
| .close-confirm-footer { | ||
| margin-top: 24px; | ||
| .btn { | ||
| width: 88px; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.