Add styles for Prometheus Service Metrics

1 files changed, 37 insertions, 1 deletions

diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index e1ee566c3a1..3ce17d64182 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -38,14 +38,31 @@
 
 .prometheus-metrics-monitoring {
   .panel {
+    .panel-toggle {
+      width: 12px;
+
+      &.fa-caret-right {
+        padding-left: 4px;
+      }
+    }
+
     .panel-heading .badge-count {
-      padding: 3px 8px;
       color: $white-light;
       background: $common-gray-dark;
+    }
+
+    .panel-body {
+      padding: 0;
+    }
+
+    .badge-count {
+      margin-left: 3px;
+      padding: 3px 8px;
       border-radius: 40%;
     }
   }
 
+  .loading-metrics,
   .empty-metrics {
     text-align: center;
     padding: 20px 10px;
@@ -59,4 +76,23 @@
       color: $gl-gray-light;
     }
   }
+
+  .metrics-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      padding: 15px 10px;
+
+      .badge-count {
+        background: $badge-bg;
+      }
+    }
+
+    /* Ensure we don't add border if there's only single li */
+    li + li {
+      border-top: 1px solid $border-color;
+    }
+  }
 }
\ No newline at end of file