Fixes stylelint warnings in environments
Deletes unused CSS Moves prometheus selectors into a prometheus file
This commit is contained in:
parent
425377f357
commit
ad35de2255
|
@ -50,7 +50,7 @@ export default {
|
|||
},
|
||||
|
||||
modalText() {
|
||||
const linkStart = `<a class="commit-sha" href="${_.escape(this.commitUrl)}">`;
|
||||
const linkStart = `<a class="commit-sha mr-0" href="${_.escape(this.commitUrl)}">`;
|
||||
const commitId = _.escape(this.commitShortSha);
|
||||
const linkEnd = '</a>';
|
||||
const name = _.escape(this.name);
|
||||
|
|
|
@ -504,22 +504,28 @@ export default {
|
|||
class="table-section section-10 deployment-column d-none d-sm-none d-md-block"
|
||||
role="gridcell"
|
||||
>
|
||||
<span v-if="shouldRenderDeploymentID"> {{ deploymentInternalId }} </span>
|
||||
<span v-if="shouldRenderDeploymentID" class="text-break-word">
|
||||
{{ deploymentInternalId }}
|
||||
</span>
|
||||
|
||||
<span v-if="!model.isFolder && deploymentHasUser">
|
||||
<span v-if="!model.isFolder && deploymentHasUser" class="text-break-word">
|
||||
by
|
||||
<user-avatar-link
|
||||
:link-href="deploymentUser.web_url"
|
||||
:img-src="deploymentUser.avatar_url"
|
||||
:img-alt="userImageAltDescription"
|
||||
:tooltip-text="deploymentUser.username"
|
||||
class="js-deploy-user-container"
|
||||
class="js-deploy-user-container float-none"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell">
|
||||
<a v-if="shouldRenderBuildName" :href="buildPath" class="build-link flex-truncate-parent">
|
||||
<a
|
||||
v-if="shouldRenderBuildName"
|
||||
:href="buildPath"
|
||||
class="build-link cgray flex-truncate-parent"
|
||||
>
|
||||
<span class="flex-truncate-child">{{ buildName }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -72,10 +72,9 @@ export default {
|
|||
<gl-button
|
||||
v-gl-tooltip
|
||||
v-gl-modal.confirm-rollback-modal
|
||||
variant="secondary"
|
||||
:disabled="isLoading"
|
||||
:title="title"
|
||||
class="d-none d-md-block"
|
||||
class="d-none d-md-block text-secondary"
|
||||
@click="onClick"
|
||||
>
|
||||
<icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" />
|
||||
|
|
|
@ -39,7 +39,7 @@ export default {
|
|||
:aria-label="title"
|
||||
:href="terminalPath"
|
||||
:class="{ disabled: disabled }"
|
||||
class="btn terminal-button d-none d-sm-none d-md-block"
|
||||
class="btn terminal-button d-none d-sm-none d-md-block text-secondary"
|
||||
>
|
||||
<icon name="terminal" />
|
||||
</a>
|
||||
|
|
|
@ -162,7 +162,7 @@ export default {
|
|||
</template>
|
||||
<icon name="commit" class="commit-icon js-commit-icon" />
|
||||
|
||||
<gl-link :href="commitUrl" class="commit-sha"> {{ shortSha }} </gl-link>
|
||||
<gl-link :href="commitUrl" class="commit-sha mr-0"> {{ shortSha }} </gl-link>
|
||||
|
||||
<div class="commit-title flex-truncate-parent">
|
||||
<span v-if="title" class="flex-truncate-child">
|
||||
|
|
|
@ -12,34 +12,6 @@
|
|||
|
||||
.environments-container {
|
||||
.ci-table {
|
||||
.deployment-column {
|
||||
> span {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
> .btn:not(.btn-danger) {
|
||||
color: $gl-text-color-secondary;
|
||||
}
|
||||
|
||||
svg path {
|
||||
fill: $gl-text-color-secondary;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn .text-center {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.commit-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
@ -49,47 +21,16 @@
|
|||
color: $gl-text-color-secondary;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.fa {
|
||||
margin-right: 6px;
|
||||
color: $gl-text-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.build-link,
|
||||
.ref-name {
|
||||
color: $gl-text-color;
|
||||
}
|
||||
|
||||
.stop-env-link,
|
||||
.external-url {
|
||||
color: $gl-text-color-secondary;
|
||||
|
||||
.stop-env-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.deployment .build-column {
|
||||
.build-link {
|
||||
color: $gl-text-color;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
margin-right: 3px;
|
||||
color: $gl-text-color-secondary;
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
|
||||
.fa:nth-child(1) {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-name {
|
||||
|
@ -103,12 +44,6 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.branch-commit {
|
||||
.commit-sha {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.no-btn {
|
||||
border: 0;
|
||||
background: none;
|
||||
|
@ -168,11 +103,6 @@
|
|||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.prometheus-graph-overlay {
|
||||
fill: none;
|
||||
opacity: 0;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.rect-text-metric {
|
||||
fill: $white-light;
|
||||
|
@ -203,276 +133,10 @@
|
|||
stroke: $gray-darkest;
|
||||
}
|
||||
|
||||
.prometheus-graphs {
|
||||
.dropdowns {
|
||||
.dropdown-menu-toggle {
|
||||
svg {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-toggle,
|
||||
.dropdown-menu {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.environments-actions {
|
||||
.external-url,
|
||||
.monitoring-url,
|
||||
.terminal-button,
|
||||
.stop-env-link {
|
||||
.terminal-button {
|
||||
width: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-panel {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.prometheus-graph-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $gl-padding / 2;
|
||||
}
|
||||
|
||||
.prometheus-graph {
|
||||
padding: $gl-padding / 2;
|
||||
}
|
||||
|
||||
.prometheus-graph-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $gl-padding-8;
|
||||
|
||||
h5 {
|
||||
font-size: $gl-font-size-large;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-graph-cursor {
|
||||
position: absolute;
|
||||
background: $gray-600;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.prometheus-graph-flag {
|
||||
display: block;
|
||||
min-width: 160px;
|
||||
border: 0;
|
||||
box-shadow: 0 1px 4px 0 $black-transparent;
|
||||
|
||||
h5 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.deploy-meta-content {
|
||||
border-bottom: 1px solid $white-dark;
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover {
|
||||
padding: 0;
|
||||
|
||||
&.left {
|
||||
left: auto;
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
|
||||
> .arrow {
|
||||
right: -14px;
|
||||
border-left-color: $border-color;
|
||||
}
|
||||
|
||||
> .arrow::after {
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 4px solid $gray-50;
|
||||
}
|
||||
|
||||
.arrow-shadow {
|
||||
right: -3px;
|
||||
box-shadow: 1px 0 9px 0 $black-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: 0;
|
||||
right: auto;
|
||||
margin-left: 10px;
|
||||
|
||||
> .arrow {
|
||||
left: -7px;
|
||||
border-right-color: $border-color;
|
||||
}
|
||||
|
||||
> .arrow::after {
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 4px solid $gray-50;
|
||||
}
|
||||
|
||||
.arrow-shadow {
|
||||
left: -3px;
|
||||
box-shadow: 1px 0 8px 0 $black-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
> .arrow {
|
||||
top: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.arrow-shadow {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: transparent;
|
||||
transform: rotate(45deg);
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
> .popover-title,
|
||||
> .popover-content,
|
||||
> .popover-header,
|
||||
> .popover-body {
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> .popover-title {
|
||||
background-color: $gray-50;
|
||||
border-radius: $border-radius-default $border-radius-default 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-table {
|
||||
border-collapse: collapse;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
|
||||
+ td {
|
||||
padding-left: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-metric-title {
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-svg-container {
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
padding-bottom: 100%;
|
||||
|
||||
.text-metric-usage {
|
||||
fill: $black;
|
||||
font-weight: $gl-font-weight-normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
> svg {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
text {
|
||||
fill: $gl-text-color;
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
.text-metric-bold {
|
||||
font-weight: $gl-font-weight-bold;
|
||||
}
|
||||
|
||||
.label-axis-text {
|
||||
fill: $black;
|
||||
font-weight: $gl-font-weight-normal;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.legend-axis-text {
|
||||
fill: $black;
|
||||
}
|
||||
|
||||
.tick {
|
||||
> line {
|
||||
stroke: $gray-darker;
|
||||
}
|
||||
|
||||
> text {
|
||||
fill: $gray-600;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.y-label-text,
|
||||
.x-label-text {
|
||||
fill: $gray-darkest;
|
||||
}
|
||||
|
||||
.axis-tick {
|
||||
stroke: $gray-darker;
|
||||
}
|
||||
|
||||
.deploy-info-text {
|
||||
dominant-baseline: text-before-edge;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.deploy-info-text-link {
|
||||
font-family: $monospace-font;
|
||||
fill: $blue-600;
|
||||
|
||||
&:hover {
|
||||
fill: $blue-800;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.label-axis-text,
|
||||
.text-metric-usage,
|
||||
.legend-axis-text {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.tick > text {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-table-row-highlight {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,270 @@
|
|||
.prometheus-graphs {
|
||||
.dropdowns {
|
||||
.dropdown-menu-toggle {
|
||||
svg {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-toggle,
|
||||
.dropdown-menu {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-panel {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.prometheus-graph-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $gl-padding / 2;
|
||||
}
|
||||
|
||||
.prometheus-graph {
|
||||
padding: $gl-padding / 2;
|
||||
}
|
||||
|
||||
.prometheus-graph-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $gl-padding-8;
|
||||
|
||||
h5 {
|
||||
font-size: $gl-font-size-large;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-graph-cursor {
|
||||
position: absolute;
|
||||
background: $gray-600;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.prometheus-graph-flag {
|
||||
display: block;
|
||||
min-width: 160px;
|
||||
border: 0;
|
||||
box-shadow: 0 1px 4px 0 $black-transparent;
|
||||
|
||||
h5 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.deploy-meta-content {
|
||||
border-bottom: 1px solid $white-dark;
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover {
|
||||
padding: 0;
|
||||
|
||||
&.left {
|
||||
left: auto;
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
|
||||
> .arrow {
|
||||
right: -14px;
|
||||
border-left-color: $border-color;
|
||||
}
|
||||
|
||||
> .arrow::after {
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 4px solid $gray-50;
|
||||
}
|
||||
|
||||
.arrow-shadow {
|
||||
right: -3px;
|
||||
box-shadow: 1px 0 9px 0 $black-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: 0;
|
||||
right: auto;
|
||||
margin-left: 10px;
|
||||
|
||||
> .arrow {
|
||||
left: -7px;
|
||||
border-right-color: $border-color;
|
||||
}
|
||||
|
||||
> .arrow::after {
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 4px solid $gray-50;
|
||||
}
|
||||
|
||||
.arrow-shadow {
|
||||
left: -3px;
|
||||
box-shadow: 1px 0 8px 0 $black-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
> .arrow {
|
||||
top: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.arrow-shadow {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: transparent;
|
||||
transform: rotate(45deg);
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
> .popover-title,
|
||||
> .popover-content,
|
||||
> .popover-header,
|
||||
> .popover-body {
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> .popover-title {
|
||||
background-color: $gray-50;
|
||||
border-radius: $border-radius-default $border-radius-default 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-table {
|
||||
border-collapse: collapse;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
|
||||
+ td {
|
||||
padding-left: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-metric-title {
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-svg-container {
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
padding-bottom: 100%;
|
||||
|
||||
.text-metric-usage {
|
||||
fill: $black;
|
||||
font-weight: $gl-font-weight-normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
> svg {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
text {
|
||||
fill: $gl-text-color;
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
.text-metric-bold {
|
||||
font-weight: $gl-font-weight-bold;
|
||||
}
|
||||
|
||||
.label-axis-text {
|
||||
fill: $black;
|
||||
font-weight: $gl-font-weight-normal;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.legend-axis-text {
|
||||
fill: $black;
|
||||
}
|
||||
|
||||
.tick {
|
||||
> line {
|
||||
stroke: $gray-darker;
|
||||
}
|
||||
|
||||
> text {
|
||||
fill: $gray-600;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.y-label-text,
|
||||
.x-label-text {
|
||||
fill: $gray-darkest;
|
||||
}
|
||||
|
||||
.axis-tick {
|
||||
stroke: $gray-darker;
|
||||
}
|
||||
|
||||
.deploy-info-text {
|
||||
dominant-baseline: text-before-edge;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.deploy-info-text-link {
|
||||
font-family: $monospace-font;
|
||||
fill: $blue-600;
|
||||
|
||||
&:hover {
|
||||
fill: $blue-800;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.label-axis-text,
|
||||
.text-metric-usage,
|
||||
.legend-axis-text {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.tick > text {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-table-row-highlight {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
|
||||
.prometheus-graph-overlay {
|
||||
fill: none;
|
||||
opacity: 0;
|
||||
pointer-events: all;
|
||||
}
|
|
@ -30,7 +30,7 @@
|
|||
= custom_icon("icon_commit")
|
||||
|
||||
- if commit_sha
|
||||
= link_to job.short_sha, project_commit_path(job.project, job.sha), class: "commit-sha"
|
||||
= link_to job.short_sha, project_commit_path(job.project, job.sha), class: "commit-sha mr-0"
|
||||
|
||||
- if job.stuck?
|
||||
= icon('warning', class: 'text-warning has-tooltip', title: _('Job is stuck. Check runners.'))
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
= link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
|
||||
.icon-container.commit-icon
|
||||
= custom_icon("icon_commit")
|
||||
= link_to deployment.short_sha, project_commit_path(@project, deployment.sha), class: "commit-sha"
|
||||
= link_to deployment.short_sha, project_commit_path(@project, deployment.sha), class: "commit-sha mr-0"
|
||||
|
||||
%p.commit-title.flex-truncate-parent
|
||||
%span.flex-truncate-child
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
- if deployment.user
|
||||
%div
|
||||
by
|
||||
= user_avatar(user: deployment.user, size: 20)
|
||||
= user_avatar(user: deployment.user, size: 20, css_class: "mr-0 float-none")
|
||||
|
||||
.table-section.section-15{ role: 'gridcell' }
|
||||
.table-mobile-header{ role: 'rowheader' }= _("Created")
|
||||
|
|
Loading…
Reference in New Issue