UX: Use new DStatTiles reusable component from core

Author: martin-brennan

assets/javascripts/discourse/components/ai-spam.gjs

@@ -17,6 +17,7 @@ import AdminConfigAreaCard from "admin/components/admin-config-area-card";
 import AdminPageSubheader from "admin/components/admin-page-subheader";
 import ComboBox from "select-kit/components/combo-box";
 import SpamTestModal from "./modal/spam-test-modal";
+import DStatTiles from "discourse/components/d-stat-tiles";
 
 export default class AiSpam extends Component {
   @service siteSettings;
@@ -121,7 +122,7 @@ export default class AiSpam extends Component {
 
   get metrics() {
     const detected = {
-      label: "discourse_ai.spam.spam_detected",
+      label: i18n("discourse_ai.spam.spam_detected"),
       value: this.stats.spam_detected,
     };
     if (this.args.model.flagging_username) {
@@ -131,16 +132,16 @@ export default class AiSpam extends Component {
     }
     return [
       {
-        label: "discourse_ai.spam.scanned_count",
+        label: i18n("discourse_ai.spam.scanned_count"),
         value: this.stats.scanned_count,
       },
       detected,
       {
-        label: "discourse_ai.spam.false_positives",
+        label: i18n("discourse_ai.spam.false_positives"),
         value: this.stats.false_positives,
       },
       {
-        label: "discourse_ai.spam.false_negatives",
+        label: i18n("discourse_ai.spam.false_negatives"),
         value: this.stats.false_negatives,
       },
     ];
@@ -220,22 +221,15 @@ export default class AiSpam extends Component {
         class="ai-spam__stats"
       >
         <:content>
-          <div class="ai-spam__metrics">
+          <DStatTiles as |tiles|>
             {{#each this.metrics as |metric|}}
-              <div class="ai-spam__metrics-item">
-                <span class="ai-spam__metrics-label">{{i18n
-                    metric.label
-                  }}</span>
-                {{#if metric.href}}
-                  <a href={{metric.href}} class="ai-spam__metrics-value">
-                    {{metric.value}}
-                  </a>
-                {{else}}
-                  <span class="ai-spam__metrics-value">{{metric.value}}</span>
-                {{/if}}
-              </div>
+              <tiles.Tile
+                @label={{metric.label}}
+                @url={{metric.href}}
+                @value={{metric.value}}
+              />
             {{/each}}
-          </div>
+          </DStatTiles>
         </:content>
       </AdminConfigAreaCard>
     </div>

assets/javascripts/discourse/components/ai-usage.gjs

@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import DStatTiles from "discourse/components/d-stat-tiles";
 import { tracked } from "@glimmer/tracking";
 import { fn, hash } from "@ember/helper";
 import { action } from "@ember/object";
@@ -124,6 +125,32 @@ export default class AiUsage extends Component {
     return normalized;
   }
 
+  get metrics() {
+    return [
+      {
+        label: i18n("discourse_ai.usage.total_requests"),
+        value: this.data.summary.total_requests,
+        tooltip: i18n("discourse_ai.usage.stat_tooltips.total_requests"),
+      },
+      {
+        label: i18n("discourse_ai.usage.total_tokens"),
+        value: this.data.summary.total_tokens,
+      },
+      {
+        label: i18n("discourse_ai.usage.request_tokens"),
+        value: this.data.summary.total_request_tokens,
+      },
+      {
+        label: i18n("discourse_ai.usage.response_tokens"),
+        value: this.data.summary.total_response_tokens,
+      },
+      {
+        label: i18n("discourse_ai.usage.cached_tokens"),
+        value: this.data.summary.total_cached_tokens,
+      },
+    ];
+  }
+
   get chartConfig() {
     if (!this.data?.data) {
       return;
@@ -344,53 +371,16 @@ export default class AiUsage extends Component {
             class="ai-usage__summary"
           >
             <:content>
-              <div class="ai-usage__summary-stats">
-                <div class="ai-usage__summary-stat">
-                  <span class="label">{{i18n
-                      "discourse_ai.usage.total_requests"
-                    }}</span>
-                  <span
-                    class="value"
-                    title={{this.data.summary.total_requests}}
-                  >{{number this.data.summary.total_requests}}</span>
-                </div>
-                <div class="ai-usage__summary-stat">
-                  <span class="label">{{i18n
-                      "discourse_ai.usage.total_tokens"
-                    }}</span>
-                  <span
-                    class="value"
-                    title={{this.data.summary.total_tokens}}
-                  >{{number this.data.summary.total_tokens}}</span>
-                </div>
-                <div class="ai-usage__summary-stat">
-                  <span class="label">{{i18n
-                      "discourse_ai.usage.request_tokens"
-                    }}</span>
-                  <span
-                    class="value"
-                    title={{this.data.summary.total_request_tokens}}
-                  >{{number this.data.summary.total_request_tokens}}</span>
-                </div>
-                <div class="ai-usage__summary-stat">
-                  <span class="label">{{i18n
-                      "discourse_ai.usage.response_tokens"
-                    }}</span>
-                  <span
-                    class="value"
-                    title={{this.data.summary.total_response_tokens}}
-                  >{{number this.data.summary.total_response_tokens}}</span>
-                </div>
-                <div class="ai-usage__summary-stat">
-                  <span class="label">{{i18n
-                      "discourse_ai.usage.cached_tokens"
-                    }}</span>
-                  <span
-                    class="value"
-                    title={{this.data.summary.total_cached_tokens}}
-                  >{{number this.data.summary.total_cached_tokens}}</span>
-                </div>
-              </div>
+              <DStatTiles as |tiles|>
+                {{#each this.metrics as |metric|}}
+                  <tiles.Tile
+                    @label={{metric.label}}
+                    @href={{metric.href}}
+                    @value={{metric.value}}
+                    @tooltip={{metric.tooltip}}
+                  />
+                {{/each}}
+              </DStatTiles>
             </:content>
           </AdminConfigAreaCard>
 

assets/stylesheets/modules/llms/common/spam.scss

@@ -45,37 +45,6 @@
   &__stats {
     margin-top: 2em;
   }
-
-  &__stats-title {
-    margin-bottom: 1em;
-  }
-
-  &__metrics {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1em;
-    margin-bottom: 2em;
-  }
-
-  &__metrics-item {
-    display: flex;
-    flex-direction: column;
-    padding: 1em;
-    background: var(--primary-very-low);
-    border-radius: 0.25em;
-  }
-
-  &__metrics-label {
-    color: var(--primary-medium);
-    font-size: 0.875em;
-    margin-bottom: 0.5em;
-  }
-
-  &__metrics-value {
-    color: var(--primary);
-    font-size: 1.5em;
-    font-weight: bold;
-  }
 }
 
 .spam-test-modal {

assets/stylesheets/modules/llms/common/usage.scss

@@ -68,32 +68,6 @@
     font-size: 1.2em;
   }
 
-  &__summary-stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1em;
-  }
-
-  &__summary-stat {
-    display: flex;
-    flex-direction: column;
-    padding: 1em;
-    background: var(--primary-very-low);
-    border-radius: 0.25em;
-
-    .label {
-      color: var(--primary-medium);
-      font-size: 0.875em;
-      margin-bottom: 0.5em;
-    }
-
-    .value {
-      color: var(--primary);
-      font-size: 1.5em;
-      font-weight: bold;
-    }
-  }
-
   &__charts {
     margin-top: 2em;
   }

config/locales/client.en.yml

@@ -182,6 +182,8 @@ en:
         no_models: "No model usage data found"
         no_features: "No feature usage data found"
         subheader_description: "Tokens are the basic units that LLMs use to understand and generate text, usage data may affect costs."
+        stat_tooltips:
+          total_requests: "These are all requests made to LLMs through Discourse"
         periods:
           last_day: "Last 24 hours"
           last_week: "Last week"