From 1adff5d73be086c8bd9b6491676302c44691d551 Mon Sep 17 00:00:00 2001 From: bupd Date: Sat, 23 Nov 2024 21:18:44 +0530 Subject: [PATCH] add container runtime to preference settings Signed-off-by: bupd --- .../preference-settings.component.html | 115 +++++++++++------- .../preference-settings.component.scss | 16 +-- .../preference-settings.component.ts | 30 ++++- .../src/app/shared/entities/shared.const.ts | 15 +++ .../src/app/shared/units/shared.utils.ts | 20 +++ src/portal/src/i18n/lang/de-de-lang.json | 6 + src/portal/src/i18n/lang/en-us-lang.json | 6 + src/portal/src/i18n/lang/es-es-lang.json | 6 + src/portal/src/i18n/lang/fr-fr-lang.json | 6 + src/portal/src/i18n/lang/ko-kr-lang.json | 6 + src/portal/src/i18n/lang/pt-br-lang.json | 6 + src/portal/src/i18n/lang/tr-tr-lang.json | 7 ++ src/portal/src/i18n/lang/zh-cn-lang.json | 6 + src/portal/src/i18n/lang/zh-tw-lang.json | 6 + 14 files changed, 202 insertions(+), 49 deletions(-) diff --git a/src/portal/src/app/base/preference-settings/preference-settings.component.html b/src/portal/src/app/base/preference-settings/preference-settings.component.html index f5b339d6d0b..cc454b1122f 100644 --- a/src/portal/src/app/base/preference-settings/preference-settings.component.html +++ b/src/portal/src/app/base/preference-settings/preference-settings.component.html @@ -2,48 +2,81 @@ [(clrModalOpen)]="opened" [clrModalClosable]="false" [clrModalStaticBackdrop]="false"> -

{{ 'CHANGE_PWD.TITLE' | translate }}

+

{{ 'CHANGE_PREF.TITLE' | translate }}

-
- - - - {{ lang[1][0] }} - - -
- - - - {{ rendering[1] | translate }} - - +
+
+
+ {{ 'CHANGE_PREF.LANGUAGE' | translate }} +
+ + + + {{ lang[1][0] }} + + +
+ +
+
+ {{ 'CHANGE_PREF.DATE_TIME_FORMAT' | translate }} +
+ + + + {{ rendering[1] | translate }} + + +
+ +
+
+ {{ 'CHANGE_PREF.CONTAINER_RUN' | translate }} +
+ + + + {{ runtime[1] }} + + +
diff --git a/src/portal/src/app/base/preference-settings/preference-settings.component.scss b/src/portal/src/app/base/preference-settings/preference-settings.component.scss index ab0d5a8876a..4df3f0c05fa 100644 --- a/src/portal/src/app/base/preference-settings/preference-settings.component.scss +++ b/src/portal/src/app/base/preference-settings/preference-settings.component.scss @@ -55,12 +55,18 @@ } } +.centered-content-area { + display: flex; + justify-content: space-between; + align-items: center; + width: 70% +} + .dropdowns { display: flex; - flex-direction: row; - align-content: center; + flex-direction: column; justify-content: flex-start; - align-items: center; + align-items: start; gap: 20px; } @@ -78,10 +84,6 @@ outline: none; } -.dropdown-locale { - padding-right: 0.5rem; -} - .user-down { right: 1rem !important; } diff --git a/src/portal/src/app/base/preference-settings/preference-settings.component.ts b/src/portal/src/app/base/preference-settings/preference-settings.component.ts index 15075b8a960..29882920132 100644 --- a/src/portal/src/app/base/preference-settings/preference-settings.component.ts +++ b/src/portal/src/app/base/preference-settings/preference-settings.component.ts @@ -15,7 +15,10 @@ import { Component, OnInit } from '@angular/core'; import { AppConfigService } from '../../services/app-config.service'; import { SkinableConfig } from '../../services/skinable-config.service'; import { TranslateService } from '@ngx-translate/core'; -import { getDatetimeRendering } from 'src/app/shared/units/shared.utils'; +import { + getContainerRuntime, + getDatetimeRendering, +} from 'src/app/shared/units/shared.utils'; import { registerLocaleData } from '@angular/common'; import { forkJoin, Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -26,11 +29,15 @@ import { DatetimeRendering, DEFAULT_DATETIME_RENDERING_LOCALSTORAGE_KEY, DEFAULT_LANG_LOCALSTORAGE_KEY, + DEFAULT_RUNTIME_LOCALSTORAGE_KEY, DefaultDatetimeRendering, DeFaultLang, + DeFaultRuntime, LANGUAGES, + RUNTIMES, stringsForClarity, SupportedLanguage, + SupportedRuntime, } from '../../shared/entities/shared.const'; @Component({ @@ -40,8 +47,10 @@ import { }) export class PreferenceSettingsComponent implements OnInit { readonly guiLanguages = Object.entries(LANGUAGES); + readonly guiRuntimes = Object.entries(RUNTIMES); readonly guiDatetimeRenderings = Object.entries(DATETIME_RENDERINGS); selectedLang: SupportedLanguage = DeFaultLang; + selectedRuntime: SupportedRuntime = DeFaultRuntime; selectedDatetimeRendering: DatetimeRendering = DefaultDatetimeRendering; opened: boolean = false; build: string = '4276418'; @@ -75,6 +84,7 @@ export class PreferenceSettingsComponent implements OnInit { this.translateClarityComponents(); } this.selectedDatetimeRendering = getDatetimeRendering(); + this.selectedRuntime = getContainerRuntime(); } //Internationalization for Clarity components, refer to https://clarity.design/documentation/internationalization @@ -105,6 +115,13 @@ export class PreferenceSettingsComponent implements OnInit { return appConfig.harbor_version; } + public get currentRuntime(): string { + if (this.selectedRuntime) { + return RUNTIMES[this.selectedRuntime] as string; + } + return null; + } + public get currentLang(): string { if (this.selectedLang) { return LANGUAGES[this.selectedLang][0] as string; @@ -120,6 +137,10 @@ export class PreferenceSettingsComponent implements OnInit { return lang === this.selectedLang; } + matchRuntime(runtime: SupportedRuntime): boolean { + return runtime === this.selectedRuntime; + } + matchDatetimeRendering(datetime: DatetimeRendering): boolean { return datetime === this.selectedDatetimeRendering; } @@ -133,6 +154,13 @@ export class PreferenceSettingsComponent implements OnInit { this.translate.use(lang).subscribe(() => window.location.reload()); } + switchRuntime(runtime: SupportedRuntime): void { + this.selectedRuntime = runtime; + localStorage.setItem(DEFAULT_RUNTIME_LOCALSTORAGE_KEY, runtime); + // have to reload,as HarborDatetimePipe is pure pipe + // window.location.reload(); + } + switchDatetimeRendering(datetime: DatetimeRendering): void { this.selectedDatetimeRendering = datetime; localStorage.setItem( diff --git a/src/portal/src/app/shared/entities/shared.const.ts b/src/portal/src/app/shared/entities/shared.const.ts index 3965bd14b74..3395bc340d7 100644 --- a/src/portal/src/app/shared/entities/shared.const.ts +++ b/src/portal/src/app/shared/entities/shared.const.ts @@ -231,6 +231,21 @@ export enum GroupType { export const REFRESH_TIME_DIFFERENCE = 10000; // +// +export const DeFaultRuntime = 'default'; +export type SupportedRuntime = string; +export const RUNTIMES = { + 'default': 'docker', + 'podman': 'podman', + 'nerdctl': 'nerdctl', + 'ctr': 'containerd', + 'crictl': 'cri-o', +} as const; +export const supportedRuntimes = Object.keys(RUNTIMES) as SupportedRuntime[]; +/** + * The default cookie key used to store current used language preference. + */ +export const DEFAULT_RUNTIME_LOCALSTORAGE_KEY = 'harbor-runtime'; export const DeFaultLang = 'en-us'; export type SupportedLanguage = string; diff --git a/src/portal/src/app/shared/units/shared.utils.ts b/src/portal/src/app/shared/units/shared.utils.ts index f89cc772dcf..893c5efea14 100644 --- a/src/portal/src/app/shared/units/shared.utils.ts +++ b/src/portal/src/app/shared/units/shared.utils.ts @@ -22,6 +22,10 @@ import { httpStatusCode, SupportedLanguage, LANGUAGES, + SupportedRuntime, + DEFAULT_RUNTIME_LOCALSTORAGE_KEY, + RUNTIMES, + DeFaultRuntime, } from '../entities/shared.const'; /** @@ -208,6 +212,22 @@ export const errorHandler = function (error: any): string { } }; +/** + * Gets the datetime rendering setting saved by the user, or the default setting if no valid saved value is found. + */ +export function getContainerRuntime(): SupportedRuntime { + const savedContainerRuntime = localStorage.getItem( + DEFAULT_RUNTIME_LOCALSTORAGE_KEY + ); + if (savedContainerRuntime && isSupportedRuntime(savedContainerRuntime)) { + return savedContainerRuntime; + } + return DeFaultRuntime; +} +function isSupportedRuntime(x: unknown): x is DatetimeRendering { + return Object.keys(RUNTIMES).some(k => k === x); +} + /** * Gets the datetime rendering setting saved by the user, or the default setting if no valid saved value is found. */ diff --git a/src/portal/src/i18n/lang/de-de-lang.json b/src/portal/src/i18n/lang/de-de-lang.json index da389b6ff76..9c38b1af075 100644 --- a/src/portal/src/i18n/lang/de-de-lang.json +++ b/src/portal/src/i18n/lang/de-de-lang.json @@ -151,6 +151,12 @@ "SAVE_SUCCESS": "Nutzerpasswort erfolgreich geändert.", "PASS_TIPS": "8-128 Zeichen mit einem Groß-, einem Kleinbuchstaben und einer Ziffer" }, + "CHANGE_PREF": { + "TITLE": "Change Preference", + "LANGUAGE": "Language", + "DATE_TIME_FORMAT": "Date/Time Format", + "CONTAINER_RUN": "Container Runtime" + }, "ACCOUNT_SETTINGS": { "PROFILE": "Nutzerprofil", "PREFERENCES": "Preferences", diff --git a/src/portal/src/i18n/lang/en-us-lang.json b/src/portal/src/i18n/lang/en-us-lang.json index e2b4847cec2..5fff9a78dc8 100644 --- a/src/portal/src/i18n/lang/en-us-lang.json +++ b/src/portal/src/i18n/lang/en-us-lang.json @@ -151,6 +151,12 @@ "SAVE_SUCCESS": "User password changed successfully.", "PASS_TIPS": "8-128 characters long with at least 1 uppercase, 1 lowercase and 1 number" }, + "CHANGE_PREF": { + "TITLE": "Change Preference", + "LANGUAGE": "Language", + "DATE_TIME_FORMAT": "Date/Time Format", + "CONTAINER_RUN": "Container Runtime" + }, "ACCOUNT_SETTINGS": { "PROFILE": "User Profile", "PREFERENCES": "Preferences", diff --git a/src/portal/src/i18n/lang/es-es-lang.json b/src/portal/src/i18n/lang/es-es-lang.json index bf95117e368..51ed1b5291f 100644 --- a/src/portal/src/i18n/lang/es-es-lang.json +++ b/src/portal/src/i18n/lang/es-es-lang.json @@ -151,6 +151,12 @@ "SAVE_SUCCESS": "Contraseña de usuario guardada satisfactoriamente.", "PASS_TIPS": "8-128 caracteres con 1 letra mayúscula, 1 minúscula y 1 número" }, + "CHANGE_PREF": { + "TITLE": "Change Preference", + "LANGUAGE": "Language", + "DATE_TIME_FORMAT": "Date/Time Format", + "CONTAINER_RUN": "Container Runtime" + }, "ACCOUNT_SETTINGS": { "PROFILE": "Perfil de usuario", "PREFERENCES": "Preferences", diff --git a/src/portal/src/i18n/lang/fr-fr-lang.json b/src/portal/src/i18n/lang/fr-fr-lang.json index 4c700e5de63..0ce2a607801 100644 --- a/src/portal/src/i18n/lang/fr-fr-lang.json +++ b/src/portal/src/i18n/lang/fr-fr-lang.json @@ -151,6 +151,12 @@ "SAVE_SUCCESS": "Mot de passe utilisateur modifié avec succès.", "PASS_TIPS": "8-128 caractères avec au moins 1 majuscule, 1 minuscule et 1 chiffre" }, + "CHANGE_PREF": { + "TITLE": "Change Preference", + "LANGUAGE": "Language", + "DATE_TIME_FORMAT": "Date/Time Format", + "CONTAINER_RUN": "Container Runtime" + }, "ACCOUNT_SETTINGS": { "PROFILE": "Profil Utilisateur", "PREFERENCES": "Preferences", diff --git a/src/portal/src/i18n/lang/ko-kr-lang.json b/src/portal/src/i18n/lang/ko-kr-lang.json index a2dffbe8ff7..1ce568f582f 100644 --- a/src/portal/src/i18n/lang/ko-kr-lang.json +++ b/src/portal/src/i18n/lang/ko-kr-lang.json @@ -143,6 +143,12 @@ "CONFIRM_TITLE_CLI_GENERATE": "시크릿을 다시 생성할 수 있습니까?", "CONFIRM_BODY_CLI_GENERATE": "Cli 시크릿을 재생성하면 이전 Cli 시크릿이 삭제됩니다" }, + "CHANGE_PREF": { + "TITLE": "Change Preference", + "LANGUAGE": "Language", + "DATE_TIME_FORMAT": "Date/Time Format", + "CONTAINER_RUN": "Container Runtime" + }, "CHANGE_PWD": { "TITLE": "비밀번호 변경", "CURRENT_PWD": "현재 비밀번호", diff --git a/src/portal/src/i18n/lang/pt-br-lang.json b/src/portal/src/i18n/lang/pt-br-lang.json index de4e88d36da..8836ed1325d 100644 --- a/src/portal/src/i18n/lang/pt-br-lang.json +++ b/src/portal/src/i18n/lang/pt-br-lang.json @@ -142,6 +142,12 @@ "CONFIRM_TITLE_CLI_GENERATE": "Gostaria de redefinir o segredo?", "CONFIRM_BODY_CLI_GENERATE": "Ao fazer isso, o segredo atual não poderá ser recuperado" }, + "CHANGE_PREF": { + "TITLE": "Change Preference", + "LANGUAGE": "Language", + "DATE_TIME_FORMAT": "Date/Time Format", + "CONTAINER_RUN": "Container Runtime" + }, "CHANGE_PWD": { "TITLE": "Alterar Senha", "CURRENT_PWD": "Senha atual", diff --git a/src/portal/src/i18n/lang/tr-tr-lang.json b/src/portal/src/i18n/lang/tr-tr-lang.json index 692f8d65278..d5fe5fe8e17 100644 --- a/src/portal/src/i18n/lang/tr-tr-lang.json +++ b/src/portal/src/i18n/lang/tr-tr-lang.json @@ -143,6 +143,12 @@ "CONFIRM_TITLE_CLI_GENERATE": "Şifreyi yeniden oluşturabileceğine emin misin?", "CONFIRM_BODY_CLI_GENERATE": "Eğer cli şifresini yeniden oluşturursanız, eski cli şifresi atılır" }, + "CHANGE_PREF": { + "TITLE": "Change Preference", + "LANGUAGE": "Language", + "DATE_TIME_FORMAT": "Date/Time Format", + "CONTAINER_RUN": "Container Runtime" + }, "CHANGE_PWD": { "TITLE": "Şifreyi değiştir", "CURRENT_PWD": "Mevcut Şifre", @@ -151,6 +157,7 @@ "SAVE_SUCCESS": "Kullanıcı şifresi başarıyla değiştirildi.", "PASS_TIPS": "1 büyük harf, 1 küçük harf ve 1 sayı ile 8-128 karakter" }, + "ACCOUNT_SETTINGS": { "PROFILE": "Kullanıcı Profili", "PREFERENCES": "Preferences", diff --git a/src/portal/src/i18n/lang/zh-cn-lang.json b/src/portal/src/i18n/lang/zh-cn-lang.json index 516f3425bfe..0eb25a662a2 100644 --- a/src/portal/src/i18n/lang/zh-cn-lang.json +++ b/src/portal/src/i18n/lang/zh-cn-lang.json @@ -142,6 +142,12 @@ "CONFIRM_TITLE_CLI_GENERATE": "您确定需要重新生成cli secret吗?", "CONFIRM_BODY_CLI_GENERATE": "如果您重新生成cli secret，那么旧的cli secret将会被弃用" }, + "CHANGE_PREF": { + "TITLE": "Change Preference", + "LANGUAGE": "Language", + "DATE_TIME_FORMAT": "Date/Time Format", + "CONTAINER_RUN": "Container Runtime" + }, "CHANGE_PWD": { "TITLE": "修改密码", "CURRENT_PWD": "当前密码", diff --git a/src/portal/src/i18n/lang/zh-tw-lang.json b/src/portal/src/i18n/lang/zh-tw-lang.json index e998fc425c5..b1d99171942 100644 --- a/src/portal/src/i18n/lang/zh-tw-lang.json +++ b/src/portal/src/i18n/lang/zh-tw-lang.json @@ -150,6 +150,12 @@ "SAVE_SUCCESS": "成功更改使用者密碼。", "PASS_TIPS": "密碼長度需介於 8 到 128 個字元之間，且至少包含一個大寫字母、小寫字母或數字。" }, + "CHANGE_PREF": { + "TITLE": "Change Preference", + "LANGUAGE": "Language", + "DATE_TIME_FORMAT": "Date/Time Format", + "CONTAINER_RUN": "Container Runtime" + }, "ACCOUNT_SETTINGS": { "PROFILE": "使用者設定", "PREFERENCES": "Preferences",