ui: Extract tiles into separate components

ui/src/components/tiles/AvailabilityTile.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import {Spinner} from 'react-bootstrap'
+import {Objective} from '../../proto/objectives/v1alpha1/objectives_pb'
+import {hasObjectiveType, ObjectiveType} from '../../App'
+
+interface AvailabilityTileProps {
+  objective: Objective
+  loading: boolean
+  success: boolean
+  errors: number | undefined
+  total: number | undefined
+}
+
+const AvailabilityTile = ({
+  objective,
+  loading,
+  success,
+  errors,
+  total,
+}: AvailabilityTileProps): React.JSX.Element => {
+  console.log(loading, success, errors, total)
+
+  const headline = <h6 className="headline">Availability</h6>
+  if (loading) {
+    return (
+      <div>
+        {headline}
+        <Spinner
+          animation={'border'}
+          style={{
+            width: 50,
+            height: 50,
+            padding: 0,
+            borderRadius: 50,
+            borderWidth: 2,
+            opacity: 0.25,
+          }}
+        />
+      </div>
+    )
+  }
+
+  if (success) {
+    if (errors !== undefined && total !== undefined) {
+      const percentage = 1 - errors / total
+
+      const objectiveType = hasObjectiveType(objective)
+      const objectiveTypeLatency =
+        objectiveType === ObjectiveType.Latency || objectiveType === ObjectiveType.LatencyNative
+
+      return (
+        <div className={percentage > objective.target ? 'good' : 'bad'}>
+          {headline}
+          <h2 className="metric">{(100 * percentage).toFixed(3)}%</h2>
+          <table className="details">
+            <tbody>
+              <tr>
+                <td>{objectiveTypeLatency ? 'Slow:' : 'Errors:'}</td>
+                <td>{Math.floor(errors).toLocaleString()}</td>
+              </tr>
+              <tr>
+                <td>Total:</td>
+                <td>{Math.floor(total).toLocaleString()}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      )
+    } else {
+      return (
+        <div>
+          {headline}
+          <h2>No data</h2>
+        </div>
+      )
+    }
+  }
+
+  return (
+    <div>
+      <>
+        {headline}
+        <h2 className="error">Error</h2>
+      </>
+    </div>
+  )
+}
+
+export default AvailabilityTile

ui/src/components/tiles/ErrorBudgetTile.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import {Spinner} from 'react-bootstrap'
+import {Objective} from '../../proto/objectives/v1alpha1/objectives_pb'
+
+interface ErrorBudgetTileProps {
+  objective: Objective
+  loading: boolean
+  success: boolean
+  errors: number | undefined
+  total: number | undefined
+}
+
+const ErrorBudgetTile = ({objective, loading, success, errors, total}: ErrorBudgetTileProps) => {
+  const headline = <h6 className="headline">Error Budget</h6>
+
+  if (loading) {
+    return (
+      <div>
+        {headline}
+        <Spinner
+          animation={'border'}
+          style={{
+            width: 50,
+            height: 50,
+            padding: 0,
+            borderRadius: 50,
+            borderWidth: 2,
+            opacity: 0.25,
+          }}
+        />
+      </div>
+    )
+  }
+  if (success) {
+    if (errors !== undefined && total !== undefined) {
+      const budget = 1 - objective.target
+      const unavailability = errors / total
+      const availableBudget = (budget - unavailability) / budget
+
+      return (
+        <div className={availableBudget > 0 ? 'good' : 'bad'}>
+          {headline}
+          <h2 className="metric">{(100 * availableBudget).toFixed(3)}%</h2>
+        </div>
+      )
+    } else {
+      return (
+        <div>
+          {headline}
+          <h2>No data</h2>
+        </div>
+      )
+    }
+  }
+  return (
+    <div>
+      {headline}
+      <h2 className="error">Error</h2>
+    </div>
+  )
+}
+
+export default ErrorBudgetTile

ui/src/components/tiles/ObjectiveTile.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import {hasObjectiveType, ObjectiveType, renderLatencyTarget} from '../../App'
+import {formatDuration} from '../../duration'
+import {Objective} from '../../proto/objectives/v1alpha1/objectives_pb'
+
+interface ObjectiveTileProps {
+  objective: Objective
+}
+
+const ObjectiveTile = ({objective}: ObjectiveTileProps): React.JSX.Element => {
+  const objectiveType = hasObjectiveType(objective)
+  switch (objectiveType) {
+    case ObjectiveType.Ratio:
+      return (
+        <div>
+          <h6 className="headline">Objective</h6>
+          <h2 className="metric">{(100 * objective.target).toFixed(3)}%</h2>
+          <>in {formatDuration(Number(objective.window?.seconds) * 1000)}</>
+        </div>
+      )
+    case ObjectiveType.BoolGauge:
+      return (
+        <div>
+          <h6 className="headline">Objective</h6>
+          <h2 className="metric">{(100 * objective.target).toFixed(3)}%</h2>
+          <>in {formatDuration(Number(objective.window?.seconds) * 1000)}</>
+        </div>
+      )
+    case ObjectiveType.Latency:
+    case ObjectiveType.LatencyNative:
+      return (
+        <div>
+          <h6 className="headline">Objective</h6>
+          <h2 className="metric">{(100 * objective.target).toFixed(3)}%</h2>
+          <>in {formatDuration(Number(objective.window?.seconds) * 1000)}</>
+          <br />
+          <p className="details">faster than {renderLatencyTarget(objective)}</p>
+        </div>
+      )
+    default:
+      return <div></div>
+  }
+}
+
+export default ObjectiveTile

ui/src/components/tiles/Tiles.scss

@@ -0,0 +1,68 @@
+.tiles {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  column-gap: 25px;
+  row-gap: 25px;
+  justify-items: stretch;
+
+  @media (min-width: 576px) {
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 50px;
+    row-gap: 50px;
+  }
+  @media (min-width: 992px) {
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 75px;
+    row-gap: 75px;
+  }
+
+  div {
+    padding: 35px;
+    background-color: $gray-300;
+    color: $gray-900;
+    border-radius: 8px;
+
+    h2, h6 {
+      font-family: $font-family-sans-serif;
+    }
+
+    h2 {
+      font-weight: 400;
+      font-size: 40px;
+      margin-bottom: 0;
+    }
+
+    h6 {
+      font-weight: 600;
+      font-size: 20px;
+    }
+
+    .headline, .details {
+      opacity: 0.5;
+    }
+
+    .metric {
+      display: inline-block;
+      margin-right: 0.5rem;
+    }
+
+    .details {
+      font-weight: 500;
+    }
+
+    &.good {
+      background-color: $green;
+      color: $green-text;
+    }
+
+    &.bad {
+      background-color: $red;
+      color: $red-text;
+    }
+
+    h2.error {
+      color: $red;
+    }
+  }
+}

ui/src/components/tiles/Tiles.tsx

@@ -0,0 +1,9 @@
+interface TilesProps {
+  children: React.ReactNode
+}
+
+const Tiles = (props: TilesProps) => {
+  return <div className="tiles">{props.children}</div>
+}
+
+export default Tiles

ui/src/index.scss

@@ -156,3 +156,4 @@ a.external-prometheus {
 @import 'components/Navbar';
 @import 'components/AlertsTable';
 @import 'components/graphs/BurnrateGraph';
+@import "components/tiles/Tiles";

ui/src/pages/Detail.scss

@@ -9,75 +9,6 @@
     }
   }
 
-  .metrics {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    column-gap: 25px;
-    row-gap: 25px;
-    justify-items: stretch;
-
-    @media (min-width: 576px) {
-      grid-template-columns: repeat(2, 1fr);
-      column-gap: 50px;
-      row-gap: 50px;
-    }
-    @media (min-width: 992px) {
-      grid-template-columns: repeat(3, 1fr);
-      column-gap: 75px;
-      row-gap: 75px;
-    }
-
-    div {
-      padding: 35px;
-      background-color: $gray-300;
-      color: $gray-900;
-      border-radius: 8px;
-
-      h2, h6 {
-        font-family: $font-family-sans-serif;
-      }
-
-      h2 {
-        font-weight: 400;
-        font-size: 40px;
-        margin-bottom: 0;
-      }
-
-      h6 {
-        font-weight: 600;
-        font-size: 20px;
-      }
-
-      .headline, .details {
-        opacity: 0.5;
-      }
-
-      .metric {
-        display: inline-block;
-        margin-right: 0.5rem;
-      }
-
-      .details {
-        font-weight: 500;
-      }
-
-      &.good {
-        background-color: $green;
-        color: $green-text;
-      }
-
-      &.bad {
-        background-color: $red;
-        color: $red-text;
-      }
-
-      h2.error {
-        color: $red;
-      }
-    }
-  }
-
   .timerange {
     background: linear-gradient(0deg, rgba(0, 0, 0, 0) 45%, $gray-300 50%, rgba(0, 0, 0, 0) 55%);