control component and cleanup left

Jigsaw-Code · Feb 4, 2025 · 895bc1e · 895bc1e
1 parent e0db8c4
commit 895bc1e
Show file tree

Hide file tree

Showing 8 changed files with 308 additions and 56 deletions.
diff --git a/server_manager/www/views/server_view/access_key_data_table/access_key_controls/index.ts b/server_manager/www/views/server_view/access_key_data_table/access_key_controls/index.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2025 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 {LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+@customElement('access-key-controls')
+export class AccessKeyControls extends LitElement {}
diff --git a/server_manager/www/views/server_view/access_key_data_table/access_key_status/index.ts b/server_manager/www/views/server_view/access_key_data_table/access_key_status/index.ts
@@ -0,0 +1,77 @@
+/**
+ * Copyright 2025 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 {LitElement, html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('access-key-status')
+export class AccessKeyStatus extends LitElement {
+  @property({type: String}) name: string;
+  @property({type: Boolean}) connected: boolean;
+
+  static styles = css`
+    :host {
+      --access-key-status-gap: 0.5rem;
+      --access-key-status-icon-size: 2rem;
+      --access-key-status-text-color: hsl(0, 0%, 79%);
+      --access-key-status-font-family: 'Inter', system-ui;
+      --access-key-status-indicator-size: 0.5rem;
+
+      font-family: var(--access-key-status-font-family);
+      color: var(--access-key-status-text-color);
+    }
+
+    .key {
+      align-items: center;
+      display: inline-flex;
+      gap: var(--access-key-status-gap);
+    }
+
+    .key-icon {
+      align-items: center;
+      background: gray;
+      border-radius: 50%;
+      display: inline-flex;
+      height: var(--access-key-status-icon-size);
+      justify-content: center;
+      position: relative;
+      width: var(--access-key-status-icon-size);
+    }
+
+    .key-icon-indicator {
+      background: green;
+      border-radius: 50%;
+      bottom: 0;
+      display: inline-block;
+      height: var(--access-key-status-indicator-size);
+      position: absolute;
+      right: 0;
+      width: var(--access-key-status-indicator-size);
+    }
+  `;
+
+  render() {
+    return html`<div class="key">
+      <div class="key-icon">
+        <mwc-icon>vpn_key</mwc-icon>
+        ${this.connected
+          ? html`<div class="key-icon-indicator"></div>`
+          : nothing}
+      </div>
+      ${this.name}
+    </div>`;
+  }
+}
diff --git a/server_manager/www/views/server_view/access_key_data_table/access_key_status/stories.ts b/server_manager/www/views/server_view/access_key_data_table/access_key_status/stories.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2025 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 './index';
+
+export default {
+  title: 'Manager/Server View/Access Key Data Table/Access Key Status',
+  component: 'access-key-status',
+  argTypes: {
+    name: {control: 'text'},
+    connected: {control: 'boolean'},
+  },
+};
+
+export const Example = {
+  args: {
+    name: 'Key#1',
+    connected: true,
+  },
+};
diff --git a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2025 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 {LitElement, html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+import {formatBytes} from '../../../../data_formatting';
+
+@customElement('access-key-usage-meter')
+export class AccessKeyUsageMeter extends LitElement {
+  @property({type: String}) language: string;
+  @property({type: Number}) dataUsageBytes: number;
+  @property({type: Number}) dataLimitBytes: number;
+  @property({type: Number}) dataLimitWarningThreshold: number = 80;
+  @property({type: Object}) localize: (messageId: string) => string;
+
+  static styles = css`
+    :host {
+      --access-key-usage-meter-font-family: 'Inter', system-ui;
+      --access-key-usage-meter-gap: 0.5rem;
+      --access-key-usage-meter-size: 1rem;
+
+      --access-key-usage-meter-color: hsla(167, 57%, 61%, 0.88);
+      --access-key-usage-meter-text-color: hsl(0, 0%, 79%);
+
+      --access-key-usage-meter-warning-color: white;
+      --access-key-usage-meter-warning-text-color: hsla(39, 77%, 53%, 1);
+    }
+
+    label {
+      color: var(--access-key-usage-meter-text-color);
+      font-family: var(--access-key-usage-meter-font-family);
+    }
+
+    .warning > label {
+      color: var(--access-key-usage-meter-warning-text-color);
+    }
+
+    progress {
+      display: block;
+      appearance: none;
+      height: var(--access-key-usage-meter-size);
+      margin-bottom: var(--access-key-usage-meter-gap);
+      width: 100%;
+    }
+
+    progress[value]::-webkit-progress-bar {
+      background: var(--access-key-usage-meter-text-color);
+    }
+
+    progress[value]::-webkit-progress-value {
+      background: var(--access-key-usage-meter-color);
+    }
+
+    .warning > progress[value]::-webkit-progress-value {
+      background: var(--access-key-usage-meter-warning-color);
+    }
+  `;
+
+  render() {
+    const isApproachingDataLimit =
+      (this.dataUsageBytes / this.dataLimitBytes) * 100 >=
+      this.dataLimitWarningThreshold;
+
+    return html`<div class=${isApproachingDataLimit ? 'warning' : ''}>
+      <progress
+        id="progress"
+        max=${this.dataLimitBytes}
+        value=${this.dataUsageBytes}
+      ></progress>
+      <label for="progress">
+        ${formatBytes(this.dataUsageBytes, this.language)} /
+        ${formatBytes(this.dataLimitBytes, this.language)}
+        ${isApproachingDataLimit
+          ? this.localize('server-view-access-keys-usage-limit')
+          : nothing}
+      </label>
+    </div>`;
+  }
+}
diff --git a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/stories.ts b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/stories.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright 2025 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 './index';
+
+export default {
+  title: 'Manager/Server View/Access Key Data Table/Access Key Usage Meter',
+  component: 'access-key-usage-meter',
+  argTypes: {
+    dataUsageBytes: {control: 'number'},
+    dataLimitBytes: {control: 'number'},
+  },
+};
+
+export const Example = {
+  args: {
+    dataUsageBytes: 1000000,
+    dataLimitBytes: 10000000,
+    language: 'en',
+    localize: () => '(80%+ used)',
+  },
+};
diff --git a/server_manager/www/views/server_view/access_key_data_table/index.ts b/server_manager/www/views/server_view/access_key_data_table/index.ts
@@ -19,9 +19,14 @@ import {customElement, property} from 'lit/decorators.js';
 
 import './data_table';
 import {NUMERIC_COMPARATOR} from './data_table';
+import type {DataTableColumnProperties} from './data_table';
+
+import './access_key_status';
+import './access_key_controls';
+import './access_key_usage_meter';
 
 export interface AccessKeyDataTableRow {
-  name: string;
+  nameAndStatus: string;
   dataUsageAndLimit: string;
   asCount: string;
   // ???
@@ -31,6 +36,7 @@ export interface AccessKeyDataTableRow {
 export class AccessKeyDataTable extends LitElement {
   @property({type: Array}) accessKeys: AccessKeyDataTableRow[];
   @property({type: Object}) localize: (messageId: string) => string;
+  @property({type: String}) language: string;
   @property({type: String}) sortColumn: string;
   @property({type: Boolean}) sortDescending: boolean;
 
@@ -55,12 +61,19 @@ export class AccessKeyDataTable extends LitElement {
   render() {
     return html`
       <data-table
-        .columns=${new Map([
+        .columns=${new Map<string, DataTableColumnProperties>([
           [
-            'name',
+            'nameAndStatus',
             {
               name: this.localize('server-view-access-keys-key-column-header'),
-              render: this.renderKey,
+              render: nameAndStatus => {
+                const [name, status] = nameAndStatus.split(',');
+
+                return html`<access-key-status
+                  name=${name}
+                  .connected=${Boolean(status)}
+                ></access-key-status>`;
+              },
             },
           ],
           [
@@ -70,7 +83,17 @@ export class AccessKeyDataTable extends LitElement {
                 'server-view-access-keys-usage-column-header'
               ),
               tooltip: this.localize('server-view-access-keys-usage-tooltip'),
-              render: this.renderUsage,
+              render: dataUsageAndLimit => {
+                const [dataUsageBytes, dataLimitBytes] =
+                  dataUsageAndLimit.split(',');
+
+                return html`<access-key-usage-meter
+                  dataUsageBytes=${Number(dataUsageBytes)}
+                  dataLimitBytes=${Number(dataLimitBytes)}
+                  .localize=${this.localize}
+                  language=${this.language}
+                ></access-key-usage-meter>`;
+              },
             },
           ],
           [
@@ -99,52 +122,6 @@ export class AccessKeyDataTable extends LitElement {
     `;
   }
 
-  renderKey(name: string) {
-    return html` <style>
-        .key {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-        }
-
-        .key-icon {
-          display: inline-flex;
-          height: 2rem;
-          width: 2rem;
-          background: gray;
-          border-radius: 50%;
-          align-items: center;
-          justify-content: center;
-        }
-      </style>
-      <div class="key">
-        <div class="key-icon"><mwc-icon>vpn_key</mwc-icon></div>
-        ${name}
-      </div>`;
-  }
-
-  renderUsage(dataUsageAndLimit: string) {
-    const [dataUsage, dataLimit] = dataUsageAndLimit.split(',');
-
-    return html` <style>
-        progress {
-          width: 100%;
-          height: 1rem;
-          appearance: none;
-        }
-        progress[value]::-webkit-progress-bar {
-          border-radius: 5px;
-          background: gray;
-        }
-        progress[value]::-webkit-progress-value {
-          border-radius: 5px;
-          background: green;
-        }
-      </style>
-      <progress value=${dataUsage} max=${dataLimit}></progress>
-      <div>${dataUsage} / ${dataLimit}</div>`;
-  }
-
   renderControls() {
     return html`<mwc-icon style="float: right;">more_vert</mwc-icon>`;
   }