feat(endpoint): turning HTML pages design

macrat · Dec 9, 2022 · 396c867 · 396c867
1 parent 7871b90
commit 396c867
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 29 deletions.
diff --git a/internal/endpoint/templates/base.html b/internal/endpoint/templates/base.html
@@ -43,11 +43,17 @@ <h1>
     --degrade: 221, 161, 0;
     --healthy: 137, 201, 35;
 }
+a {
+    color: #0000EE;
+}
 @media (prefers-color-scheme: dark) {
     html {
         --bg: var(--dark);
         --fg: var(--light);
     }
+    a {
+        color: #AAAAFF;
+    }
 }
 
 body {

diff --git a/internal/endpoint/templates/log.html b/internal/endpoint/templates/log.html
@@ -29,17 +29,21 @@
     max-width: 100%;
 }
 
-td.status::before {
+td.status span {
+    display: block;
+    text-align: center;
+}
+td.status span::after {
     content: '';
-    display: inline-block;
-    width: .5em;
-    height: 1em;
-}
-td.aborted::before { background-color: rgb(var(--bg)) }
-td.degrade::before { background-color: rgb(var(--degrade)) }
-td.failure::before { background-color: rgb(var(--failure)) }
-td.healthy::before { background-color: rgb(var(--healthy)) }
-td.unknown::before { background-color: rgb(var(--fg)) }
+    display: block;
+    width: 100%;
+    height: 2px;
+}
+td.aborted span::after { background-color: rgb(var(--bg)) }
+td.degrade span::after { background-color: rgb(var(--degrade)) }
+td.failure span::after { background-color: rgb(var(--failure)) }
+td.healthy span::after { background-color: rgb(var(--healthy)) }
+td.unknown span::after { background-color: rgb(var(--fg)) }
 
 .latency {
     text-align: right;
@@ -76,7 +80,7 @@
             <tbody>{{ range .}}
                 <tr>
                     <td>{{ block "timestamp" .Time }}{{ end }}</td>
-                    <td class="status {{ .Status | to_lower }}">{{ .Status }}</td>
+                    <td class="status {{ .Status | to_lower }}"><span>{{ .Status }}</span></td>
                     <td class="latency">{{ .Latency }}</td>
                     <td class="target">{{ .Target }}</td>
                     <td class="message">{{ .Message }}{{ range .ReadableExtra }} <span class="extra"><span class="extra-label">{{ .Key }}</span> {{ .Value }}</span>{{ end }}</td>
@@ -113,7 +117,7 @@
             </thead>
             {{- block "log-records" .Head }}{{ end }}
             {{- if .Tail }}
-            <tbody><tr><td colspan="5" class="omit-indicator">{{ .Omitted }} records have omitted</td></tr></tbody>
+            <tbody><tr><td colspan="5" class="omit-indicator">{{ .Omitted }} records have omitted.</td></tr></tbody>
             {{- block "log-records" .Tail }}{{ end }}
             {{- end }}
         </table>

diff --git a/internal/endpoint/testdata/incidents.html b/internal/endpoint/testdata/incidents.html
@@ -15,11 +15,17 @@
     --degrade: 221, 161, 0;
     --healthy: 137, 201, 35;
 }
+a {
+    color: #0000EE;
+}
 @media (prefers-color-scheme: dark) {
     html {
         --bg: var(--dark);
         --fg: var(--light);
     }
+    a {
+        color: #AAAAFF;
+    }
 }
 
 body {

diff --git a/internal/endpoint/testdata/log.html b/internal/endpoint/testdata/log.html
@@ -15,11 +15,17 @@
     --degrade: 221, 161, 0;
     --healthy: 137, 201, 35;
 }
+a {
+    color: #0000EE;
+}
 @media (prefers-color-scheme: dark) {
     html {
         --bg: var(--dark);
         --fg: var(--light);
     }
+    a {
+        color: #AAAAFF;
+    }
 }
 
 body {
@@ -158,17 +164,21 @@
     max-width: 100%;
 }
 
-td.status::before {
+td.status span {
+    display: block;
+    text-align: center;
+}
+td.status span::after {
     content: '';
-    display: inline-block;
-    width: .5em;
-    height: 1em;
-}
-td.aborted::before { background-color: rgb(var(--bg)) }
-td.degrade::before { background-color: rgb(var(--degrade)) }
-td.failure::before { background-color: rgb(var(--failure)) }
-td.healthy::before { background-color: rgb(var(--healthy)) }
-td.unknown::before { background-color: rgb(var(--fg)) }
+    display: block;
+    width: 100%;
+    height: 2px;
+}
+td.aborted span::after { background-color: rgb(var(--bg)) }
+td.degrade span::after { background-color: rgb(var(--degrade)) }
+td.failure span::after { background-color: rgb(var(--failure)) }
+td.healthy span::after { background-color: rgb(var(--healthy)) }
+td.unknown span::after { background-color: rgb(var(--fg)) }
 
 .latency {
     text-align: right;
@@ -284,49 +294,49 @@
             <tbody>
                 <tr>
                     <td><time title="[[MASKED_DATA]]">2021-01-02<span class="time-t">T</span>15:04:05<span class="timezone">Z</span></time></td>
-                    <td class="status healthy">HEALTHY</td>
+                    <td class="status healthy"><span>HEALTHY</span></td>
                     <td class="latency">123.456ms</td>
                     <td class="target">http://a.example.com</td>
                     <td class="message">hello world</td>
                 </tr>
                 <tr>
                     <td><time title="[[MASKED_DATA]]">2021-01-02<span class="time-t">T</span>15:04:05<span class="timezone">Z</span></time></td>
-                    <td class="status failure">FAILURE</td>
+                    <td class="status failure"><span>FAILURE</span></td>
                     <td class="latency">12.345ms</td>
                     <td class="target">http://b.example.com</td>
                     <td class="message">this is failure</td>
                 </tr>
                 <tr>
                     <td><time title="[[MASKED_DATA]]">2021-01-02<span class="time-t">T</span>15:04:06<span class="timezone">Z</span></time></td>
-                    <td class="status healthy">HEALTHY</td>
+                    <td class="status healthy"><span>HEALTHY</span></td>
                     <td class="latency">234.567ms</td>
                     <td class="target">http://a.example.com</td>
                     <td class="message">hello world!</td>
                 </tr>
                 <tr>
                     <td><time title="[[MASKED_DATA]]">2021-01-02<span class="time-t">T</span>15:04:06<span class="timezone">Z</span></time></td>
-                    <td class="status healthy">HEALTHY</td>
+                    <td class="status healthy"><span>HEALTHY</span></td>
                     <td class="latency">54.321ms</td>
                     <td class="target">http://b.example.com</td>
                     <td class="message">this is healthy</td>
                 </tr>
                 <tr>
                     <td><time title="[[MASKED_DATA]]">2021-01-02<span class="time-t">T</span>15:04:07<span class="timezone">Z</span></time></td>
-                    <td class="status healthy">HEALTHY</td>
+                    <td class="status healthy"><span>HEALTHY</span></td>
                     <td class="latency">345.678ms</td>
                     <td class="target">http://a.example.com</td>
                     <td class="message">hello world!!</td>
                 </tr>
                 <tr>
                     <td><time title="[[MASKED_DATA]]">2021-01-02<span class="time-t">T</span>15:04:08<span class="timezone">Z</span></time></td>
-                    <td class="status aborted">ABORTED</td>
+                    <td class="status aborted"><span>ABORTED</span></td>
                     <td class="latency">1.234ms</td>
                     <td class="target">http://c.example.com</td>
                     <td class="message">this is aborted <span class="extra"><span class="extra-label">hello</span> world</span></td>
                 </tr>
                 <tr>
                     <td><time title="[[MASKED_DATA]]">2021-01-02<span class="time-t">T</span>15:04:09<span class="timezone">Z</span></time></td>
-                    <td class="status unknown">UNKNOWN</td>
+                    <td class="status unknown"><span>UNKNOWN</span></td>
                     <td class="latency">2.345ms</td>
                     <td class="target">http://c.example.com</td>
                     <td class="message">this is unknown <span class="extra"><span class="extra-label">extra</span> [1,2,3]</span> <span class="extra"><span class="extra-label">hoge</span> fuga</span></td>

diff --git a/internal/endpoint/testdata/status.html b/internal/endpoint/testdata/status.html
@@ -15,11 +15,17 @@
     --degrade: 221, 161, 0;
     --healthy: 137, 201, 35;
 }
+a {
+    color: #0000EE;
+}
 @media (prefers-color-scheme: dark) {
     html {
         --bg: var(--dark);
         --fg: var(--light);
     }
+    a {
+        color: #AAAAFF;
+    }
 }
 
 body {