From 0d05ea3cd3fb9b69fc197789feb671b104ab51cd Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Mon, 8 Apr 2019 16:49:30 +0100 Subject: Moves prometheus selectors into a prometheus file --- .../components/confirm_rollback_modal.vue | 2 +- .../environments/components/environment_item.vue | 10 +- .../components/environment_rollback.vue | 3 +- .../components/environment_terminal_button.vue | 2 +- .../javascripts/vue_shared/components/commit.vue | 2 +- app/assets/stylesheets/pages/environments.scss | 302 +-------------------- app/assets/stylesheets/pages/prometheus.scss | 270 ++++++++++++++++++ app/views/projects/ci/builds/_build.html.haml | 2 +- app/views/projects/deployments/_commit.html.haml | 2 +- 9 files changed, 285 insertions(+), 310 deletions(-) create mode 100644 app/assets/stylesheets/pages/prometheus.scss diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue index a8ee3f4ac10..70b5c6b0094 100644 --- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue +++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue @@ -50,7 +50,7 @@ export default { }, modalText() { - const linkStart = ``; + const linkStart = ``; const commitId = _.escape(this.commitShortSha); const linkEnd = ''; const name = _.escape(this.name); diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index 06dfda0be41..f0e80cba753 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -504,7 +504,9 @@ export default { class="table-section section-10 deployment-column d-none d-sm-none d-md-block" role="gridcell" > - {{ deploymentInternalId }} + + {{ deploymentInternalId }} + by @@ -519,7 +521,11 @@ export default {
- + {{ buildName }}
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue index 266cdc42518..bafbc00597e 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -72,10 +72,9 @@ export default { diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index 6d74d136a94..13195d32cc4 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -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" > diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue index 3f282138bdf..944b9c0c083 100644 --- a/app/assets/javascripts/vue_shared/components/commit.vue +++ b/app/assets/javascripts/vue_shared/components/commit.vue @@ -162,7 +162,7 @@ export default { - {{ shortSha }} + {{ shortSha }}
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 4e84e0f25e3..93dffb5ff09 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -12,20 +12,6 @@ .environments-container { .ci-table { - .btn-group { - > .btn:not(.btn-danger) { - color: $gl-text-color-secondary; - } - - svg path { - fill: $gl-text-color-secondary; - } - - .dropdown { - outline: none; - } - } - .commit-title { margin: 0; } @@ -40,15 +26,6 @@ color: $gl-text-color; } - .stop-env-link, - .external-url { - color: $gl-text-color-secondary; - - .stop-env-icon { - font-size: 14px; - } - } - .folder-icon { margin-right: 3px; color: $gl-text-color-secondary; @@ -67,12 +44,6 @@ text-align: center; } - .branch-commit { - .commit-sha { - margin-right: 0; - } - } - .no-btn { border: 0; background: none; @@ -132,11 +103,6 @@ opacity: 0.25; } -.prometheus-graph-overlay { - fill: none; - opacity: 0; - pointer-events: all; -} .rect-text-metric { fill: $white-light; @@ -167,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; -} diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss new file mode 100644 index 00000000000..c03554b287f --- /dev/null +++ b/app/assets/stylesheets/pages/prometheus.scss @@ -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; +} diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml index 9d069c025ba..6d48475d505 100644 --- a/app/views/projects/ci/builds/_build.html.haml +++ b/app/views/projects/ci/builds/_build.html.haml @@ -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.')) diff --git a/app/views/projects/deployments/_commit.html.haml b/app/views/projects/deployments/_commit.html.haml index 282566eeadc..9774b797928 100644 --- a/app/views/projects/deployments/_commit.html.haml +++ b/app/views/projects/deployments/_commit.html.haml @@ -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 -- cgit v1.2.1