feat(ui): adding navbar

_data/rules.yml

@@ -808,7 +808,7 @@ groups:
                 severity: warning
                 for: 2m
 
-      - name: RabbitMQ (official exporter)
+      - name: RabbitMQ
         exporters:
           - name: rabbitmq/rabbitmq-prometheus
             doc_url: https://github.com/rabbitmq/rabbitmq-prometheus

_layouts/default.html

@@ -13,6 +13,7 @@
   <link rel="icon" type="image/png" href="/assets/favicon.ico">
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
   <script src="{{ '/assets/js/app.js?v=' | append: site.github.build_revision | relative_url }}"></script>
 

assets/css/app.css

@@ -1,4 +1,3 @@
-
 a.anchor {
     font-size: 15px;
     vertical-align: middle;
@@ -9,6 +8,7 @@ a.anchor {
     opacity: 0;
     transition: opacity 0.4s;
 }
+
 h2:hover a.anchor,
 h3:hover a.anchor,
 h4:hover a.anchor {
@@ -35,3 +35,76 @@ h2 {
     font-size: 14px;
     color: #606c71;
 }
+
+/* NAVBAR */
+#rules-navbar.affix {
+    /* showed by JS */
+    display: none;
+
+    position: fixed;
+    overflow: auto;
+    top: 0;
+    right: 0;
+    max-width: 250px;
+    max-height: 100%;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-left: 20px;
+    padding-right: 10px;
+
+    background-color: #f3f6fa;
+}
+
+/* hide menu on small screens */
+@media screen and (max-width: 1350px) {
+    #rules-navbar.affix {
+        display: none !important;
+    }
+}
+
+/* hide menu scrollbar */
+#rules-navbar.affix::-webkit-scrollbar {
+    display: none;
+}
+
+#rules-navbar.affix {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+}
+
+#rules-navbar.affix h3 {
+    margin-bottom: 10px;
+}
+
+#rules-navbar.affix h4 {
+    margin: 0;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 14px;
+}
+
+#rules-navbar.affix ul,
+#rules-navbar.affix ul li {
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: normal;
+}
+
+#rules-navbar.affix>ul {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+#rules-navbar.affix>ul>li {
+    margin-bottom: 10px;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+#rules-navbar.affix a {
+    font-size: 14px;
+    line-height: 14px;
+}

index.md

@@ -25,26 +25,26 @@
 
 <ul>
   {% for group in site.data.rules.groups %}
-  <li style="margin-top: 30px;">
-    {% assign nbrRules = 0 %}
-    {% for service in group.services %}
-      {% for exporter in service.exporters %}
-        {% for rule in exporter.rules %}
-          {% assign nbrRules = nbrRules | plus: 1 %}
+    <li style="margin-top: 30px;">
+      {% assign nbrRules = 0 %}
+      {% for service in group.services %}
+        {% for exporter in service.exporters %}
+          {% for rule in exporter.rules %}
+            {% assign nbrRules = nbrRules | plus: 1 %}
+          {% endfor %}
         {% endfor %}
       {% endfor %}
-    {% endfor %}
 
-    <h3>{{ group.name }} <small style="margin-left: 20px;">({{ nbrRules }} rules)</small></h3>
-    <ul>
-      {% for service in group.services %}
-      <li>
-        <a href="/rules#{{ service.name | replace: " ", "-" | downcase }}">
-          {{ service.name }}
-        </a>
-      </li>
-      {% endfor %}
-    </ul>
-  </li>
+      <h3>{{ group.name }} <small style="margin-left: 20px;">({{ nbrRules }} rules)</small></h3>
+      <ul>
+        {% for service in group.services %}
+        <li>
+          <a href="/rules#{{ service.name | replace: " ", "-" | downcase }}">
+            {{ service.name }}
+          </a>
+        </li>
+        {% endfor %}
+      </ul>
+    </li>
   {% endfor %}
 </ul>

rules.md

@@ -4,6 +4,7 @@
   }
 </style>
 
+<!-- CAUTIONS -->
 <div style="padding: 20px 20px 10px 20px; border: solid grey 1px; border-radius: 10px;">
   <h2 style="text-align:center;">⚠️ Caution ⚠️</h2>
 
@@ -21,6 +22,7 @@
 
 <h1></h1>
 
+<!-- RULES -->
 <ul>
   {% for group in site.data.rules.groups %}
   {% assign groupIndex = forloop.index %}
@@ -102,3 +104,31 @@
     {% endfor %}
   {% endfor %}
 </ul>
+
+
+
+<!-- NAVBAR -->
+<div id="rules-navbar" class="affix">
+  <h3>Menu</h3>
+  <ul>
+    {% for group in site.data.rules.groups %}
+      <li>
+        <h4>{{ group.name }}</h4>
+        <ul>
+          {% for service in group.services %}
+            {% assign serviceId = service.name | replace: " ", "-" | downcase %}
+            <li>
+              <a href="#{{ service.name | replace: " ", "-" | downcase }}">
+                👉 {{ service.name }}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      </li>
+    {% endfor %}
+  </ul>
+
+  <script>
+    $('#rules-navbar').affix({offset: {top: 750} }).css('display', 'block');
+  </script>
+</div>