Moves prometheus selectors into a prometheus file59903-env-css

1 files changed, 270 insertions, 0 deletions

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;
+}