Add QA page analysis chart

frontend/package.json

@@ -7,6 +7,7 @@
     "@cheap-glitch/mi-cron": "^1.0.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
     "@lit/localize": "^0.12.1",
+    "@lit/task": "^1.0.0",
     "@novnc/novnc": "^1.4.0-beta",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@shoelace-style/shoelace": "~2.13.0",

frontend/src/components/ui/card.ts

@@ -8,10 +8,13 @@ export class Card extends TailwindElement {
   render() {
     return html`
       <section class="flex h-full flex-col rounded border p-4">
-        <h2 class="mb-3 border-b pb-3 text-base font-semibold leading-none">
+        <div
+          id="cardHeading"
+          class="mb-3 border-b pb-3 text-base font-semibold leading-none"
+        >
           <slot name="title"></slot>
-        </h2>
-        <div class="flex-1">
+        </div>
+        <div class="flex-1" aria-labelledby="cardHeading">
           <slot></slot>
         </div>
         <slot name="footer"></slot>

frontend/src/components/ui/meter.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, type PropertyValues } from "lit";
+import { css, html, type PropertyValues } from "lit";
 import {
   customElement,
   property,
@@ -10,10 +10,12 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import debounce from "lodash/fp/debounce";
 
+import { TailwindElement } from "@/classes/TailwindElement";
 import type { UnderlyingFunction } from "@/types/utils";
+import { tw } from "@/utils/tailwind";
 
 @customElement("btrix-meter-bar")
-export class MeterBar extends LitElement {
+export class MeterBar extends TailwindElement {
   /* Percentage of value / max */
   @property({ type: Number })
   value = 0;
@@ -43,7 +45,7 @@ export class MeterBar extends LitElement {
 }
 
 @customElement("btrix-divided-meter-bar")
-export class DividedMeterBar extends LitElement {
+export class DividedMeterBar extends TailwindElement {
   /* Percentage of value / max */
   @property({ type: Number })
   value = 0;
@@ -101,7 +103,7 @@ export class DividedMeterBar extends LitElement {
  * ```
  */
 @customElement("btrix-meter")
-export class Meter extends LitElement {
+export class Meter extends TailwindElement {
   @property({ type: Number })
   min = 0;
 
@@ -111,25 +113,30 @@ export class Meter extends LitElement {
   @property({ type: Number })
   value = 0;
 
-  @property({ type: Array })
-  subValues?: number[];
-
   @property({ type: String })
   valueText?: string;
 
-  @query(".valueBar")
-  private readonly valueBar?: HTMLElement;
-
   @query(".labels")
   private readonly labels?: HTMLElement;
 
+  @query(".valueBar")
+  private readonly valueBar?: HTMLElement;
+
   @query(".maxText")
   private readonly maxText?: HTMLElement;
 
+  @queryAssignedElements({ slot: "valueLabel" })
+  private readonly valueLabel!: HTMLElement[];
+
   // postcss-lit-disable-next-line
   static styles = css`
+    :host {
+      display: block;
+    }
+
     .meter {
       position: relative;
+      width: 100%;
     }
 
     .track {
@@ -185,6 +192,13 @@ export class Meter extends LitElement {
     }
   }
 
+  firstUpdated() {
+    // TODO refactor to check slot
+    if (!this.valueLabel.length) {
+      this.labels?.classList.add(tw`hidden`);
+    }
+  }
+
   render() {
     // meter spec disallow values that exceed max
     const max = this.max ? Math.max(this.value, this.max) : this.value;

frontend/src/pages/org/archived-item-detail/archived-item-detail.ts

@@ -27,7 +27,11 @@ import type {
 import type { QARun } from "@/types/qa";
 import { isApiError } from "@/utils/api";
 import type { AuthState } from "@/utils/AuthService";
-import { finishedCrawlStates, isActive } from "@/utils/crawler";
+import {
+  activeCrawlStates,
+  finishedCrawlStates,
+  isActive,
+} from "@/utils/crawler";
 import { humanizeExecutionSeconds } from "@/utils/executionTimeFormatter";
 import { getLocale } from "@/utils/localization";
 import { tw } from "@/utils/tailwind";
@@ -47,17 +51,9 @@ const SECTIONS = [
 type SectionName = (typeof SECTIONS)[number];
 
 const POLL_INTERVAL_SECONDS = 5;
-const RUNNING_STATES = [
-  "running",
-  "starting",
-  "waiting_capacity",
-  "waiting_org_limit",
-  "stopping",
-] as CrawlState[];
-
 export const QA_RUNNING_STATES = [
   "starting",
-  ...RUNNING_STATES,
+  ...activeCrawlStates,
 ] as CrawlState[];
 
 /**
@@ -149,7 +145,7 @@ export class ArchivedItemDetail extends TailwindElement {
 
   private get isActive(): boolean | null {
     if (!this.crawl) return null;
-    return RUNNING_STATES.includes(this.crawl.state);
+    return activeCrawlStates.includes(this.crawl.state);
   }
 
   private get isQAActive(): boolean | null {