improve metric view

alexewerlof · Sep 23, 2024 · 4369d8a · 4369d8a
1 parent ee5acef
commit 4369d8a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 27 deletions.
diff --git a/models/metric.js b/models/metric.js
@@ -1,6 +1,9 @@
 import { isInstance } from '../lib/validation.js'
 import { Service } from './service.js'
 import { Failure } from './failure.js'
+import { config } from '../config.js'
+
+const lowestPriority = config.likelihood.possibleValues.length * config.impactLevel.possibleValues.length
 
 export class Metric {
     constructor(service, displayName = '', description = '', ...measuredFailures) {
@@ -39,6 +42,10 @@ export class Metric {
         }
     }
 
+    get priority() {
+        return this.measuredFailures.reduce((acc, failure) => acc - failure.priority, lowestPriority)
+    }
+
     toString() {
         return `${ this.service } ∡ ${this.displayName}`
     }

diff --git a/views/metric-view.html b/views/metric-view.html
@@ -1,5 +1,48 @@
 <div>
     <div class="annotated">
+        <div class="annotated__controls">
+            <h2>Service</h2>
+            <p>{{ metric.service }}</p>
+            <h2>Symptoms</h2>
+            <table>
+                <thead>
+                    <th></th>
+                    <th>Symptom</th>
+                    <th>Consumption</th>
+                </thead>
+                <tbody>
+                    <tr v-for="failure in metric.service.failuresByRisk">
+                        <td>
+                            <input
+                                type="checkbox"
+                                :checked="metric.measuresFailure(failure)"
+                                @change="$event => metric.setFailure(failure, $event.target.checked)">
+                        </td>
+                        <td>
+                            {{ failure.symptom }}
+                        </td>
+                        <td>
+                            {{ failure.consumption }}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="annotated__help">
+            <p>
+                Select all risks that this metric can help you identify.
+            </p>
+            <p>
+                The goal is to be be on top of the risks meaning: instead of relying on manual detection (e.g. consumers calling you to report a problem), you can use this metric to detect the problem as soon as possible.
+            </p>
+            <p>
+                The metrics detect symptoms.
+                The symptoms are ordered by their associated risk impact and likelihood.
+            </p>
+            <p>
+                You can capture multiple symptoms with the same metric.
+            </p>
+        </div>
         <div class="annotated__controls">
             <h2>Metric Name</h2>
             <input type="text" v-model="metric.displayName">
@@ -20,33 +63,6 @@ <h2>Description</h2>
                 <li>etc.</li>
             </ul>
         </div>
-        <div class="annotated__controls">
-            <h2>Symptoms</h2>
-            <div v-for="failure in metric.service.failuresByRisk">
-                <label>
-                    <input
-                        type="checkbox"
-                        :checked="metric.measuresFailure(failure)"
-                        @change="$event => metric.setFailure(failure, $event.target.checked)">
-                    {{ failure }}
-                </label>
-            </div>
-        </div>
-        <div class="annotated__help">
-            <p>
-                Select all risks that this metric can help you identify.
-            </p>
-            <p>
-                The goal is to be be on top of the risks meaning: instead of relying on manual detection (e.g. consumers calling you to report a problem), you can use this metric to detect the problem as soon as possible.
-            </p>
-            <p>
-                The metrics detect symptoms.
-                The symptoms are ordered by their associated risk impact and likelihood.
-            </p>
-            <p>
-                You can capture multiple symptoms with the same metric.
-            </p>
-        </div>
 
         <div class="annotated__controls">
             <div class="button-bar">