From 0e8c2faed14b26cfa99c6629090832584288098c Mon Sep 17 00:00:00 2001 From: Daniel LaCosse <3759828+daniellacosse@users.noreply.github.com> Date: Fri, 13 Dec 2024 14:20:56 -0500 Subject: [PATCH 1/3] feat(manager): server allowance usage component --- .../server_allowance_usage/index.ts | 112 ++++++++++++++++++ .../server_allowance_usage/stories.ts | 52 ++++++++ 2 files changed, 164 insertions(+) create mode 100644 server_manager/www/views/server_view/server_allowance_usage/index.ts create mode 100644 server_manager/www/views/server_view/server_allowance_usage/stories.ts diff --git a/server_manager/www/views/server_view/server_allowance_usage/index.ts b/server_manager/www/views/server_view/server_allowance_usage/index.ts new file mode 100644 index 0000000000..d0225798d1 --- /dev/null +++ b/server_manager/www/views/server_view/server_allowance_usage/index.ts @@ -0,0 +1,112 @@ +/** + * 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'; + +@customElement('server-allowance-usage') +export class ServerAllowanceUsage extends LitElement { + @property({type: String}) message: string; + @property({type: Number}) allowanceUsed: number; + @property({type: Number}) allowanceLimit: number; + @property({type: String}) allowanceUnit: string = 'terabyte'; + @property({type: String}) languageCode: string = 'en-US'; + + static styles = css` + :host { + background: var(--server-allowance-usage-background); + border-radius: 0.5rem; + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 0.25rem; + justify-content: space-between; + overflow: hidden; + padding: 1rem; + width: 100%; + border: 2px solid var(--server-allowance-usage-foreground); + } + + .message, + .allowance, + .allowance-percentage, + .allowance-limit { + all: initial; + font-family: 'Roboto', sans-serif; + } + + .message { + color: var(--server-allowance-usage-foreground); + } + + .allowance { + margin-top: 1rem; + } + + .allowance-percentage { + color: var(--server-allowance-usage-highlight); + font-size: 2rem; + } + + .allowance-limit { + color: var(--server-allowance-usage-highlight); + } + + progress { + width: 100%; + height: 1rem; + appearance: none; + } + + progress[value]::-webkit-progress-bar { + border-radius: 1rem; + background: var(--server-allowance-usage-highlight); + } + + progress[value]::-webkit-progress-value { + border-radius: 1rem; + background: var(--server-allowance-usage-progress); + } + `; + + get formattedPercentage() { + return Intl.NumberFormat(this.languageCode, { + style: 'percent', + maximumSignificantDigits: 2, + }).format(this.allowanceUsed / this.allowanceLimit); + } + + get formattedLimit() { + return Intl.NumberFormat(this.languageCode, { + style: 'unit', + unit: this.allowanceUnit, + }).format(this.allowanceLimit); + } + + render() { + return html` +

${this.message}

+

+ ${this.formattedPercentage} + /${this.formattedLimit} +

+ + `; + } +} \ No newline at end of file diff --git a/server_manager/www/views/server_view/server_allowance_usage/stories.ts b/server_manager/www/views/server_view/server_allowance_usage/stories.ts new file mode 100644 index 0000000000..6f4feceecf --- /dev/null +++ b/server_manager/www/views/server_view/server_allowance_usage/stories.ts @@ -0,0 +1,52 @@ +/** + * 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 {ServerAllowanceUsage} from './index'; + +export default { + title: 'Manager/Server View/Server Allowance Usage', + component: 'server-allowance-usage', + args: { + message: 'Allowance used in the last 30 days', + allowanceUsed: 0.38, + allowanceLimit: 1, + }, +}; + +export const Example = ({ + message, + allowanceUsed, + allowanceLimit, +}: ServerAllowanceUsage) => html` +
+ + +
+`; From 39ef88456aaa75c62c5b55434818fcd6c6268176 Mon Sep 17 00:00:00 2001 From: Daniel LaCosse <3759828+daniellacosse@users.noreply.github.com> Date: Mon, 16 Dec 2024 16:04:02 -0500 Subject: [PATCH 2/3] use string literal --- .../www/views/server_view/server_allowance_usage/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server_manager/www/views/server_view/server_allowance_usage/index.ts b/server_manager/www/views/server_view/server_allowance_usage/index.ts index d0225798d1..caa969c936 100644 --- a/server_manager/www/views/server_view/server_allowance_usage/index.ts +++ b/server_manager/www/views/server_view/server_allowance_usage/index.ts @@ -22,7 +22,7 @@ export class ServerAllowanceUsage extends LitElement { @property({type: String}) message: string; @property({type: Number}) allowanceUsed: number; @property({type: Number}) allowanceLimit: number; - @property({type: String}) allowanceUnit: string = 'terabyte'; + @property({type: String}) allowanceUnit: 'gigabyte' | 'terabyte' = 'terabyte'; @property({type: String}) languageCode: string = 'en-US'; static styles = css` From 374492128720d475a2b6694a9a6d41ea4b46cb9a Mon Sep 17 00:00:00 2001 From: Daniel LaCosse <3759828+daniellacosse@users.noreply.github.com> Date: Mon, 16 Dec 2024 16:04:33 -0500 Subject: [PATCH 3/3] newline --- .../www/views/server_view/server_allowance_usage/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server_manager/www/views/server_view/server_allowance_usage/index.ts b/server_manager/www/views/server_view/server_allowance_usage/index.ts index caa969c936..fa1206c8b4 100644 --- a/server_manager/www/views/server_view/server_allowance_usage/index.ts +++ b/server_manager/www/views/server_view/server_allowance_usage/index.ts @@ -109,4 +109,4 @@ export class ServerAllowanceUsage extends LitElement { > `; } -} \ No newline at end of file +}