Fix styling of multiple environments in merge request widget
Closes #40610
This commit is contained in:
Phil Hughes
parent
51f9153764
commit
b48516fee5
|
|
@ -0,0 +1,124 @@
|
|||
<script>
|
||||
import timeagoMixin from '../../vue_shared/mixins/timeago';
|
||||
import tooltip from '../../vue_shared/directives/tooltip';
|
||||
import { visitUrl } from '../../lib/utils/url_utility';
|
||||
import createFlash from '../../flash';
|
||||
import MemoryUsage from './memory_usage.vue';
|
||||
import StatusIcon from './mr_widget_status_icon.vue';
|
||||
import MRWidgetService from '../services/mr_widget_service';
|
||||
|
||||
export default {
|
||||
name: 'Deployment',
|
||||
mixins: [
|
||||
timeagoMixin,
|
||||
],
|
||||
props: {
|
||||
deployment: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
MemoryUsage,
|
||||
StatusIcon,
|
||||
},
|
||||
computed: {
|
||||
deployTimeago() {
|
||||
return this.timeFormated(this.deployment.deployed_at);
|
||||
},
|
||||
hasExternalUrls() {
|
||||
return this.deployment.external_url && this.deployment.external_url_formatted;
|
||||
},
|
||||
hasDeploymentTime() {
|
||||
return this.deployment.deployed_at && this.deployment.deployed_at_formatted;
|
||||
},
|
||||
hasDeploymentMeta() {
|
||||
return this.deployment.url && this.deployment.name;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
stopEnvironment(deployment) {
|
||||
const msg = 'Are you sure you want to stop this environment?';
|
||||
const isConfirmed = confirm(msg); // eslint-disable-line
|
||||
|
||||
if (isConfirmed) {
|
||||
MRWidgetService.stopEnvironment(deployment.stop_url)
|
||||
.then(res => res.data)
|
||||
.then((data) => {
|
||||
if (data.redirect_url) {
|
||||
visitUrl(data.redirect_url);
|
||||
}
|
||||
})
|
||||
.catch(() => createFlash('Something went wrong while stopping this environment. Please try again.'));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mr-widget-heading deploy-heading">
|
||||
<div class="ci-widget media">
|
||||
<div class="ci-status-icon ci-status-icon-success">
|
||||
<span class="js-icon-link icon-link">
|
||||
<status-icon status="success" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<div class="deploy-body">
|
||||
<span
|
||||
v-if="hasDeploymentMeta">
|
||||
Deployed to
|
||||
</span>
|
||||
<span class="deploy-link">
|
||||
<a
|
||||
v-if="hasDeploymentMeta"
|
||||
:href="deployment.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
class="js-deploy-meta">
|
||||
{{deployment.name}}
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
v-if="hasExternalUrls">
|
||||
on
|
||||
</span>
|
||||
<span class="deploy-link">
|
||||
<a
|
||||
v-if="hasExternalUrls"
|
||||
:href="deployment.external_url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
class="js-deploy-url">
|
||||
<i
|
||||
class="fa fa-external-link"
|
||||
aria-hidden="true" />
|
||||
{{deployment.external_url_formatted}}
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
v-if="hasDeploymentTime"
|
||||
:data-title="deployment.deployed_at_formatted"
|
||||
class="js-deploy-time"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top">
|
||||
{{deployTimeago}}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
v-if="deployment.stop_url"
|
||||
@click="stopEnvironment(deployment)"
|
||||
class="btn btn-default btn-xs">
|
||||
Stop environment
|
||||
</button>
|
||||
</div>
|
||||
<memory-usage
|
||||
v-if="deployment.metrics_url"
|
||||
:metrics-url="deployment.metrics_url"
|
||||
:metrics-monitoring-url="deployment.metrics_monitoring_url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
import { getTimeago } from '~/lib/utils/datetime_utility';
|
||||
import { visitUrl } from '../../lib/utils/url_utility';
|
||||
import Flash from '../../flash';
|
||||
import MemoryUsage from './memory_usage.vue';
|
||||
import StatusIcon from './mr_widget_status_icon.vue';
|
||||
import MRWidgetService from '../services/mr_widget_service';
|
||||
|
||||
export default {
|
||||
name: 'MRWidgetDeployment',
|
||||
props: {
|
||||
mr: { type: Object, required: true },
|
||||
service: { type: Object, required: true },
|
||||
},
|
||||
components: {
|
||||
MemoryUsage,
|
||||
StatusIcon,
|
||||
},
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
return getTimeago().format(date);
|
||||
},
|
||||
hasExternalUrls(deployment = {}) {
|
||||
return deployment.external_url && deployment.external_url_formatted;
|
||||
},
|
||||
hasDeploymentTime(deployment = {}) {
|
||||
return deployment.deployed_at && deployment.deployed_at_formatted;
|
||||
},
|
||||
hasDeploymentMeta(deployment = {}) {
|
||||
return deployment.url && deployment.name;
|
||||
},
|
||||
stopEnvironment(deployment) {
|
||||
const msg = 'Are you sure you want to stop this environment?';
|
||||
const isConfirmed = confirm(msg); // eslint-disable-line
|
||||
|
||||
if (isConfirmed) {
|
||||
MRWidgetService.stopEnvironment(deployment.stop_url)
|
||||
.then(res => res.data)
|
||||
.then((data) => {
|
||||
if (data.redirect_url) {
|
||||
visitUrl(data.redirect_url);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
new Flash('Something went wrong while stopping this environment. Please try again.'); // eslint-disable-line
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<div class="mr-widget-heading deploy-heading">
|
||||
<div v-for="deployment in mr.deployments">
|
||||
<div class="ci-widget media">
|
||||
<div class="ci-status-icon ci-status-icon-success">
|
||||
<span class="js-icon-link icon-link">
|
||||
<status-icon status="success" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="media-body space-children">
|
||||
<span>
|
||||
<span
|
||||
v-if="hasDeploymentMeta(deployment)">
|
||||
Deployed to
|
||||
</span>
|
||||
<a
|
||||
v-if="hasDeploymentMeta(deployment)"
|
||||
:href="deployment.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
class="js-deploy-meta inline">
|
||||
{{deployment.name}}
|
||||
</a>
|
||||
<span
|
||||
v-if="hasExternalUrls(deployment)">
|
||||
on
|
||||
</span>
|
||||
<a
|
||||
v-if="hasExternalUrls(deployment)"
|
||||
:href="deployment.external_url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
class="js-deploy-url inline">
|
||||
<i
|
||||
class="fa fa-external-link"
|
||||
aria-hidden="true" />
|
||||
{{deployment.external_url_formatted}}
|
||||
</a>
|
||||
<span
|
||||
v-if="hasDeploymentTime(deployment)"
|
||||
:data-title="deployment.deployed_at_formatted"
|
||||
class="js-deploy-time"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top">
|
||||
{{formatDate(deployment.deployed_at)}}
|
||||
</span>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
v-if="deployment.stop_url"
|
||||
@click="stopEnvironment(deployment)"
|
||||
class="btn btn-default btn-xs">
|
||||
Stop environment
|
||||
</button>
|
||||
<memory-usage
|
||||
v-if="deployment.metrics_url"
|
||||
:metrics-url="deployment.metrics_url"
|
||||
:metrics-monitoring-url="deployment.metrics_monitoring_url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
|
|
@ -14,7 +14,7 @@ export { default as SmartInterval } from '~/smart_interval';
|
|||
export { default as WidgetHeader } from './components/mr_widget_header.vue';
|
||||
export { default as WidgetMergeHelp } from './components/mr_widget_merge_help.vue';
|
||||
export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
|
||||
export { default as WidgetDeployment } from './components/mr_widget_deployment';
|
||||
export { default as Deployment } from './components/deployment.vue';
|
||||
export { default as WidgetMaintainerEdit } from './components/mr_widget_maintainer_edit.vue';
|
||||
export { default as WidgetRelatedLinks } from './components/mr_widget_related_links.vue';
|
||||
export { default as MergedState } from './components/states/mr_widget_merged.vue';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {
|
|||
WidgetHeader,
|
||||
WidgetMergeHelp,
|
||||
WidgetPipeline,
|
||||
WidgetDeployment,
|
||||
Deployment,
|
||||
WidgetMaintainerEdit,
|
||||
WidgetRelatedLinks,
|
||||
MergedState,
|
||||
|
|
@ -133,7 +133,16 @@ export default {
|
|||
.then(res => res.data)
|
||||
.then((data) => {
|
||||
if (data.length) {
|
||||
this.mr.deployments = data;
|
||||
data[0].stop_url = 'asd';
|
||||
this.mr.deployments = data.concat({
|
||||
...data[0],
|
||||
id: data[0].id + 1,
|
||||
name: 'review/1-make-homepage-more-descriptive',
|
||||
deployed_at: new Date(),
|
||||
deployed_at_formatted: '123',
|
||||
external_url_formatted: 'ad3-minmal-ruby-app-review-1-make-hom-gnm6yk.gitlab.training',
|
||||
metrics_url: 'a',
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
|
|
@ -216,7 +225,7 @@ export default {
|
|||
'mr-widget-header': WidgetHeader,
|
||||
'mr-widget-merge-help': WidgetMergeHelp,
|
||||
'mr-widget-pipeline': WidgetPipeline,
|
||||
'mr-widget-deployment': WidgetDeployment,
|
||||
Deployment,
|
||||
'mr-widget-maintainer-edit': WidgetMaintainerEdit,
|
||||
'mr-widget-related-links': WidgetRelatedLinks,
|
||||
'mr-widget-merged': MergedState,
|
||||
|
|
@ -250,10 +259,12 @@ export default {
|
|||
:ci-status="mr.ciStatus"
|
||||
:has-ci="mr.hasCI"
|
||||
/>
|
||||
<mr-widget-deployment
|
||||
<deployment
|
||||
v-if="shouldRenderDeployments"
|
||||
:mr="mr"
|
||||
:service="service" />
|
||||
v-for="deployment in mr.deployments"
|
||||
:key="deployment.id"
|
||||
:deployment="deployment"
|
||||
/>
|
||||
<div class="mr-widget-section">
|
||||
<component
|
||||
:is="componentName"
|
||||
|
|
|
|||
|
|
@ -727,3 +727,23 @@
|
|||
.fork-sprite {
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
.deploy-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: .3em;
|
||||
}
|
||||
}
|
||||
|
||||
.deploy-link {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1 1 100px;
|
||||
}
|
||||
|
||||
.mr-memory-usage {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue