add container runtime to preference settings

Signed-off-by: bupd <bupdprasanth@gmail.com>

src/portal/src/app/base/preference-settings/preference-settings.component.html

@@ -2,48 +2,81 @@
     [(clrModalOpen)]="opened"
     [clrModalClosable]="false"
     [clrModalStaticBackdrop]="false">
-    <h3 class="modal-title">{{ 'CHANGE_PWD.TITLE' | translate }}</h3>
+    <h3 class="modal-title">{{ 'CHANGE_PREF.TITLE' | translate }}</h3>
     <div class="modal-body dialog-body">
-        <div class="dropdowns">
-            <clr-dropdown class="dropdown-lang dropdown bottom-left">
-                <button class="nav-icon nav-icon-width" clrDropdownToggle>
-                    <clr-icon shape="world" class="icon-left"></clr-icon>
-                    <span class="currentLocale">{{ currentLang }}</span>
-                    <clr-icon size="10" shape="caret down"></clr-icon>
-                </button>
-                <clr-dropdown-menu *clrIfOpen>
-                    <a
-                        *ngFor="let lang of guiLanguages"
-                        href="javascript:void(0)"
-                        clrDropdownItem
-                        (click)="switchLanguage(lang[0])"
-                        [class.lang-selected]="matchLang(lang[0])"
-                        >{{ lang[1][0] }}</a
-                    >
-                </clr-dropdown-menu>
-            </clr-dropdown>
-            <div class="nav-divider"></div>
-            <clr-dropdown class="dropdown-locale dropdown bottom-left">
-                <button class="nav-icon nav-icon-width" clrDropdownToggle>
-                    <clr-icon shape="date" class="icon-left"></clr-icon>
-                    <span class="currentLocale">{{
-                        currentDatetimeRendering | translate
-                    }}</span>
-                    <clr-icon size="10" shape="caret down"></clr-icon>
-                </button>
-                <clr-dropdown-menu *clrIfOpen>
-                    <a
-                        *ngFor="let rendering of guiDatetimeRenderings"
-                        href="javascript:void(0)"
-                        clrDropdownItem
-                        (click)="switchDatetimeRendering(rendering[0])"
-                        [class.locale-selected]="
-                            matchDatetimeRendering(rendering[0])
-                        "
-                        >{{ rendering[1] | translate }}</a
-                    >
-                </clr-dropdown-menu>
-            </clr-dropdown>
+        <div class="dropdowns content-container">
+            <div class="content-area centered-content-area">
+                <div class="clr-control-label">
+                    {{ 'CHANGE_PREF.LANGUAGE' | translate }}
+                </div>
+                <clr-dropdown class="dropdown-lang dropdown bottom-left">
+                    <button class="nav-icon nav-icon-width" clrDropdownToggle>
+                        <clr-icon shape="world" class="icon-left"></clr-icon>
+                        <span class="currentLocale">{{ currentLang }}</span>
+                        <clr-icon size="10" shape="caret down"></clr-icon>
+                    </button>
+                    <clr-dropdown-menu *clrIfOpen>
+                        <a
+                            *ngFor="let lang of guiLanguages"
+                            href="javascript:void(0)"
+                            clrDropdownItem
+                            (click)="switchLanguage(lang[0])"
+                            [class.lang-selected]="matchLang(lang[0])"
+                            >{{ lang[1][0] }}</a
+                        >
+                    </clr-dropdown-menu>
+                </clr-dropdown>
+            </div>
+
+            <div class="content-area centered-content-area">
+                <div class="clr-control-label">
+                    {{ 'CHANGE_PREF.DATE_TIME_FORMAT' | translate }}
+                </div>
+                <clr-dropdown class="dropdown bottom-left">
+                    <button class="nav-icon nav-icon-width" clrDropdownToggle>
+                        <clr-icon shape="date" class="icon-left"></clr-icon>
+                        <span class="currentLocale">{{
+                            currentDatetimeRendering | translate
+                        }}</span>
+                        <clr-icon size="10" shape="caret down"></clr-icon>
+                    </button>
+                    <clr-dropdown-menu *clrIfOpen>
+                        <a
+                            *ngFor="let rendering of guiDatetimeRenderings"
+                            href="javascript:void(0)"
+                            clrDropdownItem
+                            (click)="switchDatetimeRendering(rendering[0])"
+                            [class.locale-selected]="
+                                matchDatetimeRendering(rendering[0])
+                            "
+                            >{{ rendering[1] | translate }}</a
+                        >
+                    </clr-dropdown-menu>
+                </clr-dropdown>
+            </div>
+
+            <div class="content-area centered-content-area">
+                <div class="clr-control-label">
+                    {{ 'CHANGE_PREF.CONTAINER_RUN' | translate }}
+                </div>
+                <clr-dropdown class="dropdown-lang dropdown bottom-left">
+                    <button class="nav-icon nav-icon-width" clrDropdownToggle>
+                        <clr-icon shape="bundle" class="icon-left"></clr-icon>
+                        <span class="currentLocale">{{ currentRuntime }}</span>
+                        <clr-icon size="10" shape="caret down"></clr-icon>
+                    </button>
+                    <clr-dropdown-menu *clrIfOpen>
+                        <a
+                            *ngFor="let runtime of guiRuntimes"
+                            href="javascript:void(0)"
+                            clrDropdownItem
+                            (click)="switchRuntime(runtime[0])"
+                            [class.lang-selected]="matchRuntime(runtime[0])"
+                            >{{ runtime[1] }}</a
+                        >
+                    </clr-dropdown-menu>
+                </clr-dropdown>
+            </div>
         </div>
     </div>
     <div class="modal-footer margin-left-override">

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;
 }

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(

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;

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.
  */

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",

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",

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",

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",

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": "현재 비밀번호",

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",

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",