diff options
| -rw-r--r-- | exampleSite/config.yml | 8 | ||||
| -rw-r--r-- | exampleSite/content/issues/2018-05-25-us-east-conn-issues.md | 2 | ||||
| -rw-r--r-- | exampleSite/content/issues/2021-02-13-maintenance-window.md | 4 | ||||
| -rw-r--r-- | layouts/partials/index/components.html | 64 | ||||
| -rw-r--r-- | layouts/partials/js.html | 12 | ||||
| -rw-r--r-- | 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> |