debian-mirror-gitlab/app/assets/javascripts/deploy_keys/components/key.vue

209 lines
6.2 KiB
Vue
Raw Normal View History

2017-08-17 22:00:37 +05:30
<script>
2020-04-08 14:13:33 +05:30
import { head, tail } from 'lodash';
2018-10-15 14:42:47 +05:30
import { s__, sprintf } from '~/locale';
import icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import timeagoMixin from '~/vue_shared/mixins/timeago';
2017-08-17 22:00:37 +05:30
2018-10-15 14:42:47 +05:30
import actionBtn from './action_btn.vue';
export default {
components: {
actionBtn,
icon,
},
directives: {
tooltip,
},
mixins: [timeagoMixin],
props: {
deployKey: {
type: Object,
required: true,
},
store: {
type: Object,
required: true,
},
endpoint: {
type: String,
required: true,
},
projectId: {
type: String,
required: false,
default: null,
},
},
data() {
return {
projectsExpanded: false,
};
},
computed: {
editDeployKeyPath() {
return `${this.endpoint}/${this.deployKey.id}/edit`;
},
projects() {
const projects = [...this.deployKey.deploy_keys_projects];
if (this.projectId !== null) {
2020-04-08 14:13:33 +05:30
const indexOfCurrentProject = projects.findIndex(
2018-10-15 14:42:47 +05:30
project =>
project &&
project.project &&
project.project.id &&
project.project.id.toString() === this.projectId,
);
if (indexOfCurrentProject > -1) {
const currentProject = projects.splice(indexOfCurrentProject, 1);
currentProject[0].project.full_name = s__('DeployKeys|Current project');
return currentProject.concat(projects);
}
}
return projects;
},
firstProject() {
2020-04-08 14:13:33 +05:30
return head(this.projects);
2018-10-15 14:42:47 +05:30
},
restProjects() {
2020-04-08 14:13:33 +05:30
return tail(this.projects);
2018-10-15 14:42:47 +05:30
},
restProjectsTooltip() {
return sprintf(s__('DeployKeys|Expand %{count} other projects'), {
count: this.restProjects.length,
});
},
restProjectsLabel() {
return sprintf(s__('DeployKeys|+%{count} others'), { count: this.restProjects.length });
},
isEnabled() {
return this.store.isEnabled(this.deployKey.id);
},
isRemovable() {
return (
this.store.isEnabled(this.deployKey.id) &&
this.deployKey.destroyed_when_orphaned &&
this.deployKey.almost_orphaned
);
},
isExpandable() {
return !this.projectsExpanded && this.restProjects.length > 1;
},
isExpanded() {
return this.projectsExpanded || this.restProjects.length === 1;
},
},
methods: {
projectTooltipTitle(project) {
return project.can_push
? s__('DeployKeys|Write access allowed')
: s__('DeployKeys|Read access only');
},
toggleExpanded() {
this.projectsExpanded = !this.projectsExpanded;
},
},
};
2017-08-17 22:00:37 +05:30
</script>
<template>
2018-10-15 14:42:47 +05:30
<div class="gl-responsive-table-row deploy-key">
<div class="table-section section-40">
2019-02-15 15:39:39 +05:30
<div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Deploy key') }}</div>
2019-03-02 22:35:43 +05:30
<div class="table-mobile-content qa-key">
2019-02-15 15:39:39 +05:30
<strong class="title qa-key-title"> {{ deployKey.title }} </strong>
2020-03-09 13:42:32 +05:30
<div class="fingerprint" data-qa-selector="key_md5_fingerprint">
{{ __('MD5') }}:{{ deployKey.fingerprint }}
</div>
<div class="fingerprint">{{ __('SHA256') }}:{{ deployKey.fingerprint_sha256 }}</div>
2018-10-15 14:42:47 +05:30
</div>
2017-08-17 22:00:37 +05:30
</div>
2018-10-15 14:42:47 +05:30
<div class="table-section section-30 section-wrap">
2019-02-15 15:39:39 +05:30
<div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Project usage') }}</div>
2018-10-15 14:42:47 +05:30
<div class="table-mobile-content deploy-project-list">
<template v-if="projects.length > 0">
<a
v-tooltip
2018-11-08 19:23:39 +05:30
:title="projectTooltipTitle(firstProject)"
class="label deploy-project-label"
2018-10-15 14:42:47 +05:30
>
2019-02-15 15:39:39 +05:30
<span> {{ firstProject.project.full_name }} </span>
<icon :name="firstProject.can_push ? 'lock-open' : 'lock'" />
2018-10-15 14:42:47 +05:30
</a>
<a
v-if="isExpandable"
2018-12-05 23:21:45 +05:30
v-tooltip
2018-11-08 19:23:39 +05:30
:title="restProjectsTooltip"
2018-10-15 14:42:47 +05:30
class="label deploy-project-label"
@click="toggleExpanded"
>
<span>{{ restProjectsLabel }}</span>
</a>
<a
v-for="deployKeysProject in restProjects"
2018-11-08 19:23:39 +05:30
v-else-if="isExpanded"
2018-10-15 14:42:47 +05:30
:key="deployKeysProject.project.full_path"
2018-12-05 23:21:45 +05:30
v-tooltip
2018-10-15 14:42:47 +05:30
:href="deployKeysProject.project.full_path"
:title="projectTooltipTitle(deployKeysProject)"
2018-11-08 19:23:39 +05:30
class="label deploy-project-label"
2018-10-15 14:42:47 +05:30
>
2019-02-15 15:39:39 +05:30
<span> {{ deployKeysProject.project.full_name }} </span>
<icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" />
2018-10-15 14:42:47 +05:30
</a>
</template>
2019-02-15 15:39:39 +05:30
<span v-else class="text-secondary">{{ __('None') }}</span>
2017-08-17 22:00:37 +05:30
</div>
</div>
2018-10-15 14:42:47 +05:30
<div class="table-section section-15 text-right">
2019-02-15 15:39:39 +05:30
<div role="rowheader" class="table-mobile-header">{{ __('Created') }}</div>
2018-10-15 14:42:47 +05:30
<div class="table-mobile-content text-secondary key-created-at">
2019-02-15 15:39:39 +05:30
<span v-tooltip :title="tooltipTitle(deployKey.created_at)">
2020-01-01 13:55:28 +05:30
<icon name="calendar" /> <span>{{ timeFormatted(deployKey.created_at) }}</span>
2018-10-15 14:42:47 +05:30
</span>
</div>
2017-08-17 22:00:37 +05:30
</div>
2018-10-15 14:42:47 +05:30
<div class="table-section section-15 table-button-footer deploy-key-actions">
<div class="btn-group table-action-buttons">
2019-02-15 15:39:39 +05:30
<action-btn v-if="!isEnabled" :deploy-key="deployKey" type="enable">
2018-10-15 14:42:47 +05:30
{{ __('Enable') }}
</action-btn>
<a
v-if="deployKey.can_edit"
2018-12-05 23:21:45 +05:30
v-tooltip
2018-10-15 14:42:47 +05:30
:href="editDeployKeyPath"
:title="__('Edit')"
2018-11-08 19:23:39 +05:30
class="btn btn-default text-secondary"
2018-10-15 14:42:47 +05:30
data-container="body"
>
2019-02-15 15:39:39 +05:30
<icon name="pencil" />
2018-10-15 14:42:47 +05:30
</a>
<action-btn
v-if="isRemovable"
2018-12-05 23:21:45 +05:30
v-tooltip
2018-10-15 14:42:47 +05:30
:deploy-key="deployKey"
2018-11-08 19:23:39 +05:30
:title="__('Remove')"
2018-10-15 14:42:47 +05:30
btn-css-class="btn-danger"
type="remove"
data-container="body"
>
2019-02-15 15:39:39 +05:30
<icon name="remove" />
2018-10-15 14:42:47 +05:30
</action-btn>
<action-btn
v-else-if="isEnabled"
2018-12-05 23:21:45 +05:30
v-tooltip
2018-10-15 14:42:47 +05:30
:deploy-key="deployKey"
2018-11-08 19:23:39 +05:30
:title="__('Disable')"
2018-10-15 14:42:47 +05:30
btn-css-class="btn-warning"
type="disable"
data-container="body"
>
2019-02-15 15:39:39 +05:30
<icon name="cancel" />
2018-10-15 14:42:47 +05:30
</action-btn>
</div>
2017-08-17 22:00:37 +05:30
</div>
</div>
</template>