feat(manager): implement separate server stat card grid in the storyb…

…ook (#2084)

.storybook/preview-head.html

@@ -1 +1,19 @@
 <link href="../client/src/www/style.css" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
+
+<style>
+  :root {
+    /* TODO(daniellacosse): unified system for managing css variables */
+    --primary-green: #00bfa5;
+    --background-color: #263238;
+    --background-contrast-color: #2e3a3f;
+    --light-gray: rgba(255, 255, 255, 0.87);
+    --medium-gray: rgba(255, 255, 255, 0.54);
+    --dark-gray: rgba(0, 0, 0, 0.87);
+    --border-color: rgba(255, 255, 255, 0.12);
+
+    --server-stat-card-background: var(--background-contrast-color);
+    --server-stat-card-foreground: var(--medium-gray);
+    --server-stat-card-highlight: #ffffff;
+  }
+</style>

server_manager/package.json

@@ -21,6 +21,7 @@
     "@material/mwc-checkbox": "^0.27.0",
     "@material/mwc-circular-progress": "^0.27.0",
     "@material/mwc-formfield": "^0.27.0",
+    "@material/mwc-icon": "^0.27.0",
     "@material/mwc-list": "^0.27.0",
     "@material/mwc-menu": "^0.27.0",
     "@material/mwc-radio": "^0.27.0",

server_manager/www/views/server_view/server_stat_card/index.ts

@@ -0,0 +1,92 @@
+/**
+ * Copyright 2024 The Outline Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '@material/mwc-icon';
+
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('server-stat-card')
+export class ServerStatCard extends LitElement {
+  @property({type: Number}) value: number;
+  @property({type: String}) icon: string;
+  @property({type: String}) name: string;
+  @property({type: String}) units: string;
+
+  static styles = [
+    css`
+      :host {
+        background: var(--server-background);
+        border-radius: 0.25rem;
+        box-sizing: border-box;
+        container-name: conceal-name conceal-units;
+        container-type: size;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        height: 100%;
+        justify-content: space-between;
+        overflow: hidden;
+        padding: 2rem;
+        width: 100%;
+      }
+
+      .data,
+      .data-value, 
+      .name {
+        all: initial;
+        font-family: "Roboto", sans-serif;
+      }
+
+      mwc-icon,
+      .data,
+      .data-value, 
+      .name {
+        color: var(--server-foreground);
+      }
+
+      .data-value {
+        color: var(--server-highlight);
+        font-size: 3rem;
+        font-weight: 300;
+      }
+
+      @container conceal-name (max-height: 150px) {
+        .name {
+          display: none;
+        }
+      }
+
+      @container conceal-units (max-width: 150px) {
+        .data-units {
+          display: none;
+        }
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <mwc-icon class="icon">${this.icon}</mwc-icon>
+      <p class="data">
+        <span class="data-value">${this.value}</span>
+        <span class="data-units">${this.units}</span>
+      </p>
+      <p class="name">
+        ${this.name}
+      </p>`;
+  }
+}

server_manager/www/views/server_view/server_stat_card/stories.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2024 The Outline Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {html} from 'lit';
+
+import './index';
+import {ServerStatCard} from './index';
+
+export default {
+  title: 'Manager/Server View/Server Stat Card',
+  component: 'server-stats-card',
+  args: {
+    icon: "swap_horiz",
+    name: "Data transferred / last 30 days",
+    units: "Bytes",
+    value: 0
+  }
+};
+
+export const Example = ({icon, name, value, units}: ServerStatCard) => html`
+  <div style="height: 300px;">
+    <server-stat-card icon=${icon} name=${name} value=${value} units=${units} />
+  </div>
+`;

server_manager/www/views/server_view/server_stat_grid/index.ts

@@ -0,0 +1,62 @@
+/**
+ * Copyright 2024 The Outline Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {styleMap} from 'lit/directives/style-map.js';
+
+import { ServerStatCard } from '../server_stat_card';
+
+@customElement("server-stat-grid")
+export class ServerStatGrid extends LitElement {
+  @property({ type: Array }) stats: Array<ServerStatCard & { column: string; row: string; }>;
+  @property({ type: Number }) columns: number;
+  @property({ type: Number }) rows: number;
+
+  static styles = [
+    css`
+      :host,
+      article {
+        width: 100%;
+        height: 100%;
+      }
+
+      article {
+        display: grid;
+        gap: 0.25rem;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <article style=${styleMap({
+        gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
+        gridTemplateRows: `repeat(${this.rows}, 1fr)`
+      })}>
+        ${this.stats.map(({ name, value, units, icon, column: gridColumn, row: gridRow }) => html`
+          <server-stat-card
+            style=${styleMap({ gridColumn, gridRow })}
+            .name=${name}
+            .value=${value}
+            .units=${units}
+            .icon=${icon}>
+          </server-stat-card>
+        `)}
+      </article>
+    `;
+  }
+}

server_manager/www/views/server_view/server_stat_grid/stories.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright 2024 The Outline Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {html} from 'lit';
+
+import './index';
+import {ServerStatGrid} from './index';
+
+export default {
+  title: 'Manager/Server View/Server Stat Grid',
+  component: 'server-stats-grid',
+  args: {
+    columns: 3,
+    rows: 2,
+    stats: [
+      {
+        icon: "swap_horiz",
+        name: "Data transferred / last 30 days",
+        units: "GB",
+        value: 2345
+      },
+      {
+        icon: "timer",
+        name: "Average time spent across clients",
+        units: "Client Hours / Hour",
+        value: 83.7,
+        column: "3",
+        row: "1 / 3",
+      },
+      {
+        icon: "key",
+        name: "Server access",
+        units: "Keys",
+        value: 155,
+        row: "1",
+        column: "1 / 3"
+      },
+      {
+        icon: "cloud",
+        name: "Allowance Used",
+        units: "/ 15 TB",
+        value: 12.3
+      }
+    ]
+  }
+};
+
+export const Example = ({stats, columns, rows}: ServerStatGrid) => html`
+  <div style="height: 80vh;">
+    <server-stat-grid columns=${columns} rows=${rows} .stats=${stats} />
+  </div>
+`;