From d64bfe770d5ccb46c6ca7fb07c90a1ce03b40f13 Mon Sep 17 00:00:00 2001
From: Mantas Vilčinskas <hi@mnts.lt>
Date: Sat, 6 Mar 2021 16:01:11 +0200
Subject: fix #101 - add category status, #161 ref in config.yml

---
 exampleSite/config.yml                             |  8 ++-
 .../issues/2018-05-25-us-east-conn-issues.md       |  2 +-
 .../issues/2021-02-13-maintenance-window.md        |  4 +-
 layouts/partials/index/components.html             | 64 +++++++++++++++++-----
 layouts/partials/js.html                           | 12 ++++
 layouts/partials/meta.html                         | 43 ++++++++++-----
 6 files changed, 100 insertions(+), 33 deletions(-)

diff --git a/exampleSite/config.yml b/exampleSite/config.yml
index ee52734..1d3149d 100644
--- a/exampleSite/config.yml
+++ b/exampleSite/config.yml
@@ -138,26 +138,30 @@ params:
   #   because you need to set an 'Uncategorized' category.
   #   Or it can be used alongside other categories.
   #
+  # These are case sensitive.
+  # 
   # For help, see the wiki:
   # https://github.com/cstate/cstate/wiki/Customization
   categories:
     - name: North Coast
       description: The main servers are located here.
       closed: true
-    - name: East Coast
+    - name: Empty Category
     - name: Uncategorized
       untitled: true
 
   # These are your systems. Change them to
   # change the amount of components.
   #
+  # These are case sensitive.
+  #
   # For help, see the wiki:
   # https://github.com/cstate/cstate/wiki/Customization
   systems:
     - name: Gateway
       category: North Coast
     - name: Backup Gateway
-      category: East Coast
+      category: North Coast
     - name: API
       description: The guts of the application.
       category: Uncategorized
diff --git a/exampleSite/content/issues/2018-05-25-us-east-conn-issues.md b/exampleSite/content/issues/2018-05-25-us-east-conn-issues.md
index 1b87285..8d56cf2 100644
--- a/exampleSite/content/issues/2018-05-25-us-east-conn-issues.md
+++ b/exampleSite/content/issues/2018-05-25-us-east-conn-issues.md
@@ -1,7 +1,7 @@
 ---
 title: US East Connection Issues
 date: 2018-04-25 04:13:00
-resolved: false
+resolved: true
 resolvedWhen: 2018-04-25 04:13:59
 # Possible severity levels: down, disrupted, notice
 severity: down
diff --git a/exampleSite/content/issues/2021-02-13-maintenance-window.md b/exampleSite/content/issues/2021-02-13-maintenance-window.md
index 00b4765..d6c8b14 100644
--- a/exampleSite/content/issues/2021-02-13-maintenance-window.md
+++ b/exampleSite/content/issues/2021-02-13-maintenance-window.md
@@ -5,9 +5,9 @@ date: 2021-02-24 10:35:00
 resolved: false
 resolvedWhen: 2021-02-24 12:10:00
 # Possible severity levels: down, disrupted, notice
-severity: disrupted
+severity: notice
 affected:
-  - API
+  - Gateway
 section: issue
 ---
 
diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index 82964fe..acb1aa7 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -10,18 +10,8 @@
   {{ $systems := .Site.Params.systems }}
   {{ $categories := .Site.Params.categories }}
 
-  <script>
-  function toggleCategoryHead(el) {
-    if (el.parentNode.className == 'category category--open') {
-      el.parentNode.className = 'category category--closed';
-    } else {
-      el.parentNode.className = 'category category--open';
-    }
-  }
-  </script>
-
   {{ range $categories }}
-    <div class="category {{ if .closed }}category--closed{{ else }}category--open{{ end }}" id="{{ .name | urlize }}">
+    <div class="category {{ if .closed }}category--closed{{ else }}category--open{{ end }}{{ if not .untitled }} category--titled{{ end }}" id="{{ .name | urlize }}">
       {{ if not .untitled }}
       <div class="bold padding clicky category__head" onclick="toggleCategoryHead(this)">
         <span class="hide-without-js">
@@ -42,6 +32,8 @@
           </span>
         </span>
       {{ end }}
+ 
+      <span class="category-status"></span>
 
       </div>
       {{ else }}
@@ -94,8 +86,54 @@
           {{ end }}
         </div>
       {{ end }}
-      </div>
+      </div> 
+
+      <!--
+        Get category status
+      -->
+      <script>
+        // We will look at all components in one category
+        thisCategory = document.currentScript.parentNode 
+
+        componentsOfThisCategory = thisCategory.querySelectorAll('.component')
+        
+        // We will cycle through all components and show
+        // the worst status found
+        //
+        // By default, all is good but we change this value
+        // for progressively worse statuses
+        var highlestLevelStatus = '';
+
+        function checkStatus(element) {
+          var status = element.getAttribute('data-status');
+
+          if (status === 'down') {
+            highlestLevelStatus = 'down'
+          } else if (status === 'disrupted' && highlestLevelStatus !== 'down') {
+            highlestLevelStatus = 'disrupted'
+          } else if (status === 'notice' && highlestLevelStatus !== 'down' && highlestLevelStatus !== 'disrupted') {
+            highlestLevelStatus = 'notice'
+          }
+        }
+
+        componentsOfThisCategory.forEach(element => checkStatus(element));
+        
+        // Human readable (i18n) status name variable
+        var highlestLevelStatusReadable = highlestLevelStatus;
+
+        if (highlestLevelStatus === 'ok') { highlestLevelStatusReadable = '{{ T "thisIsOk" }}' } 
+        if (highlestLevelStatus === 'notice') { highlestLevelStatusReadable = '{{ T "thisIsNotice" }}' } 
+        if (highlestLevelStatus === 'dsirupted') { highlestLevelStatusReadable = '{{ T "thisIsDisrupted" }}' } 
+        if (highlestLevelStatus === 'down') { highlestLevelStatusReadable = '{{ T "thisIsDown" }}' } 
+
+        // Finally we can show the status 
+        // (but only for categories with a name)
+        if (thisCategory.classList.contains('category--titled')) {
+          thisCategory.querySelector('.category__head').setAttribute('data-status', highlestLevelStatus);
+          thisCategory.querySelector('.category-status').innerHTML = highlestLevelStatusReadable;
+        }
+      </script>
     </div>
   {{ end }}
 
-</div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index d966643..765e787 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -40,6 +40,18 @@
     document.location.pathname = '/admin';
   }
 
+  /** 
+   * Category logic
+   */
+
+  function toggleCategoryHead(el) {
+    if (el.parentNode.className == 'category category--open category--titled') {
+      el.parentNode.className = 'category category--closed category--titled';
+    } else {
+      el.parentNode.className = 'category category--open category--titled';
+    }
+  }
+
   /**
    * Returns a relative date string for the given date.
    */
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 283e840..dfb5a98 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -319,14 +319,23 @@
     .status-notice .announcement-box { border-top: 0; }
 
     /**
-     * Dynamically show individual component statuses
+     * Dynamically show component statuses
      */
 
-    .component-status { float: right; }
-    .component[data-status="ok"] .component-status { color: {{ .Site.Params.ok }}; }
-    .component[data-status="disrupted"] .component-status { color: {{ .Site.Params.disrupted }}; }
-    .component[data-status="down"] .component-status { color: {{ .Site.Params.down }}; }
-    .component[data-status="notice"] .component-status { color: {{ .Site.Params.notice }}; }
+    .category--open .category-status { display: none; }
+    .component-status, .category-status { float: right; }
+    .component[data-status="ok"] .component-status,
+    .category__head[data-status="ok"] .category-status
+    { color: {{ .Site.Params.ok }}; }
+    .component[data-status="disrupted"] .component-status,
+    .category__head[data-status="disrupted"] .category-status
+    { color: {{ .Site.Params.disrupted }}; }
+    .component[data-status="notice"] .component-status,
+    .category__head[data-status="notice"] .category-status
+    { color: {{ .Site.Params.notice }}; }
+    .component[data-status="down"] .component-status,
+    .category__head[data-status="down"] .category-status
+    { color: {{ .Site.Params.down }}; }
 
     /**
      * Responsiveness
@@ -386,15 +395,19 @@
         .error { color: #ff4242; }
         .warning {color: #ffde7f; }
         .ok { color: #7fff7f; }
-
-        .component[data-status="ok"] 
-        .component-status { color: #7fff7f; }
-        .component[data-status="disrupted"] 
-        .component-status { color: #ffde7f; }
-        .component[data-status="notice"] 
-        .component-status { color: #83a4e8; }
-        .component[data-status="down"]
-        .component-status { color: #ff8181; }
+ 
+        .component[data-status="ok"] .component-status,
+        .category__head[data-status="ok"] .category-status
+        { color: #7fff7f; }
+        .component[data-status="disrupted"] .component-status,
+        .category__head[data-status="disrupted"] .category-status
+        { color: #ffde7f; }
+        .component[data-status="notice"] .component-status,
+        .category__head[data-status="notice"] .category-status
+        { color: #83a4e8; }
+        .component[data-status="down"] .component-status,
+        .category__head[data-status="down"] .category-status
+        { color: #ff8181; }
       }
     {{ end }}
     </style>
-- 
cgit v1.2.3-70-g09d2