--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/metrics/ServiceButtonRow.ts	Sun May 12 19:02:10 2024 -0700
@@ -0,0 +1,66 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+export { StatsLine } from "./StatsLine";
+
+@customElement("service-button-row")
+export class ServiceButtonRow extends LitElement {
+  @property() name: string = "?";
+  @property({ type:Boolean, attribute: "metrics" }) hasMetrics: boolean = false;
+  static styles = [
+    css`
+      :host {
+        padding-bottom: 10px;
+        border-bottom: 1px solid #333;
+      }
+      a {
+        color: #7d7dec;
+      }
+      div {
+        display: flex;
+        justify-content: space-between;
+        padding: 2px 3px;
+      }
+      .left {
+        display: inline-block;
+        margin-right: 3px;
+        flex-grow: 1;
+        min-width: 9em;
+      }
+      .window {
+      }
+      .serviceGrid > td {
+        border: 5px solid red;
+        display: inline-block;
+      }
+      .big {
+        font-size: 120%;
+        display: inline-block;
+        padding: 10px 0;
+      }
+
+      :host > div {
+        display: inline-block;
+        vertical-align: top;
+      }
+      :host > div:nth-child(2) {
+        width: 9em;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div>
+        <div class="left"><a class="big" href="${this.name}/">${this.name}</a></div>
+        <div class="window"><button @click="${this.click}">window</button></div>
+        ${this.hasMetrics ? html`<div><a href="${this.name}/metrics">metrics</a></div>` : ""}
+      </div>
+
+      ${this.hasMetrics ? html`<div id="stats"><stats-line name="${this.name}"></div>` : ""}
+      `;
+  }
+
+  click() {
+    window.open(this.name + "/", "_blank", "scrollbars=1,resizable=1,titlebar=0,location=0");
+  }
+}