mgr/dashboard: refactor about.component.ts

Fixes https://tracker.ceph.com/issues/70900

- add i18n
- cleanup unused variable
- use constants

Signed-off-by: Afreen Misbah <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html

@@ -3,6 +3,7 @@
     <button type="button"
             class="btn-close float-end"
             aria-label="Close"
+            i18n-aria-label
             (click)="activeModal.close()">
     </button>
   </div>
@@ -14,7 +15,7 @@ <h3>
       <strong>{{ projectConstants.projectName }}</strong>
     </h3>
     <div class="product-versions">
-      <strong>Version</strong>
+      <strong i18n>Version</strong>
       <br>
       {{ versionNumber }}
       {{ versionHash }}
@@ -23,17 +24,17 @@ <h3>
     </div>
     <br>
     <dl>
-      <dt>Ceph Manager</dt>
+      <dt i18n>Ceph Manager</dt>
       <dd>{{ hostAddr }}</dd>
-      <dt>User</dt>
+      <dt i18n>User</dt>
       <dd>{{ modalVariables.user }}</dd>
-      <dt>User Role</dt>
+      <dt i18n>User Role</dt>
       <dd>{{ modalVariables.role }}</dd>
-      <dt>Browser</dt>
+      <dt i18n>Browser</dt>
       <dd>{{ modalVariables.browserName }}</dd>
-      <dt>Browser Version</dt>
+      <dt i18n>Browser Version</dt>
       <dd>{{ modalVariables.browserVersion }}</dd>
-      <dt>Browser OS</dt>
+      <dt i18n>Browser OS</dt>
       <dd>{{ modalVariables.browserOS }}</dd>
     </dl>
   </div>

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.ts

@@ -5,7 +5,8 @@ import { detect } from 'detect-browser';
 import { Subscription } from 'rxjs';
 
 import { UserService } from '~/app/shared/api/user.service';
-import { AppConstants } from '~/app/shared/constants/app.constants';
+import { AppConstants, USER, VERSION_PREFIX } from '~/app/shared/constants/app.constants';
+import { LocalStorage } from '~/app/shared/enum/local-storage-enum';
 import { Permission } from '~/app/shared/models/permissions';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
 import { SummaryService } from '~/app/shared/services/summary.service';
@@ -40,7 +41,7 @@ export class AboutComponent implements OnInit, OnDestroy {
     this.hostAddr = window.location.hostname;
     this.modalVariables = this.setVariables();
     this.subs = this.summaryService.subscribe((summary) => {
-      const version = summary.version.replace('ceph version ', '').split(' ');
+      const version = summary.version.replace(`${VERSION_PREFIX} `, '').split(' ');
       this.hostAddr = summary.mgr_host.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, '');
       this.versionNumber = version[0];
       this.versionHash = version[1];
@@ -53,18 +54,19 @@ export class AboutComponent implements OnInit, OnDestroy {
   }
 
   setVariables() {
+    const NOT_AVAILABLE = $localize`Not available`;
     const project = {} as any;
-    project.user = localStorage.getItem('dashboard_username');
-    project.role = 'user';
+    project.user = localStorage.getItem(LocalStorage.DASHBOARD_USRENAME);
+    project.role = USER;
     if (this.userPermission.read) {
       this.userService.get(project.user).subscribe((data: any) => {
         project.role = data.roles;
       });
     }
     const browser = detect();
-    project.browserName = browser && browser.name ? browser.name : 'Not detected';
-    project.browserVersion = browser && browser.version ? browser.version : 'Not detected';
-    project.browserOS = browser && browser.os ? browser.os : 'Not detected';
+    project.browserName = browser && browser.name ? browser.name : NOT_AVAILABLE;
+    project.browserVersion = browser && browser.version ? browser.version : NOT_AVAILABLE;
+    project.browserOS = browser && browser.os ? browser.os : NOT_AVAILABLE;
     return project;
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/constants/app.constants.ts

@@ -370,3 +370,6 @@ export const SSL_CIPHERS = [
   'POLY1305',
   'DHE'
 ];
+
+export const USER = 'user';
+export const VERSION_PREFIX = 'ceph version';

src/pybind/mgr/dashboard/frontend/src/app/shared/enum/local-storage-enum.ts

@@ -0,0 +1,3 @@
+export enum LocalStorage {
+  DASHBOARD_USRENAME = 'dashboard_username'
+}