BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Unverified Commit b48516fe by Phil Hughes
Options

Fix styling of multiple environments in merge request widget

Closes #40610
parent 51f91537
Showing with 128 additions and 86 deletions
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js → app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
import { getTimeago } from '~/lib/utils/datetime_utility';
<script>
import timeagoMixin from '../../vue_shared/mixins/timeago';
import tooltip from '../../vue_shared/directives/tooltip';
import { visitUrl } from '../../lib/utils/url_utility';
import Flash from '../../flash';
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: 'MRWidgetDeployment',
name: 'Deployment',
mixins: [
timeagoMixin,
],
props: {
mr: { type: Object, required: true },
service: { type: Object, required: true },
deployment: {
type: Object,
required: true,
},
},
components: {
MemoryUsage,
StatusIcon,
},
methods: {
formatDate(date) {
return getTimeago().format(date);
computed: {
deployTimeago() {
return this.timeFormated(this.deployment.deployed_at);
},
hasExternalUrls(deployment = {}) {
return deployment.external_url && deployment.external_url_formatted;
hasExternalUrls() {
return this.deployment.external_url && this.deployment.external_url_formatted;
},
hasDeploymentTime(deployment = {}) {
return deployment.deployed_at && deployment.deployed_at_formatted;
hasDeploymentTime() {
return this.deployment.deployed_at && this.deployment.deployed_at_formatted;
},
hasDeploymentMeta(deployment = {}) {
return deployment.url && deployment.name;
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
......@@ -40,74 +49,76 @@ export default {
visitUrl(data.redirect_url);
}
})
.catch(() => {
new Flash('Something went wrong while stopping this environment. Please try again.'); // eslint-disable-line
});
.catch(() => createFlash('Something went wrong while stopping this environment. Please try again.'));
}
},
},
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>
};
</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>
app/assets/javascripts/vue_merge_request_widget/dependencies.js
......@@ -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';
......
app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
......@@ -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"
......
app/assets/stylesheets/pages/merge_requests.scss
......@@ -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%;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment