feat: ui improvements (#20)

Co-authored-by: Aleksei Moiseev <[email protected]>
mlflow-oidc · Apr 23, 2024 · 9fb28d9 · 9fb28d9
1 parent b4a34b0
commit 9fb28d9
Show file tree

Hide file tree

Showing 10 changed files with 5,684 additions and 5,600 deletions.
diff --git a/web-ui/package.json b/web-ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mlflow-oidc-auth-front",
   "version": "0.0.0",
-  "license":"Apache-2.0",
+  "license": "Apache-2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -29,6 +29,7 @@
     "bootstrap": "^5.2.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
+    "xng-breadcrumb": "^8.0.2",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
@@ -41,8 +42,8 @@
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
-    "rimraf": "^5.0.5",
     "karma-jasmine-html-reporter": "~2.0.0",
+    "rimraf": "^5.0.5",
     "typescript": "~4.7.2"
   }
 }
diff --git a/web-ui/src/app/app-routing.module.ts b/web-ui/src/app/app-routing.module.ts
@@ -2,10 +2,14 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
-  { path: 'home', loadChildren: () => import('./features/home-page/home-page.module').then(m => m.HomePageModule) },
+  { path: 'home',
+    loadChildren: () => import('./features/home-page/home-page.module').then(m => m.HomePageModule),
+    data: { breadcrumb: 'Home' }
+  },
   {
     path: 'manage',
     loadChildren: () => import('./features/admin-page/admin-page.module').then(m => m.AdminPageModule),
+    data: { breadcrumb: 'Manage' },
   },
   { path: '**', pathMatch: 'full', redirectTo: 'home' },
 ];

diff --git a/web-ui/src/app/app.component.html b/web-ui/src/app/app.component.html
@@ -1,7 +1,9 @@
 <ng-container *ngIf="!loading && this.user; else loader">
-
-  <div class="container">
     <ml-header [name]="user.display_name"></ml-header>
+  <div class="container">
+    <div class="my-3">
+        <xng-breadcrumb></xng-breadcrumb>
+    </div>
     <router-outlet> </router-outlet>
   </div>
 

diff --git a/web-ui/src/app/features/admin-page/admin-page-routing.module.ts b/web-ui/src/app/features/admin-page/admin-page-routing.module.ts
@@ -8,6 +8,10 @@ import {
   UserPermissionDetailsComponent,
 } from './components';
 
+const getBreadcrumb = (route: string) => {
+  const [entity, id] = route.split('/')
+  return `${entity.charAt(0).toUpperCase() + entity.slice(1)} / ${id}`;
+};
 
 const routes: Routes = [
   {
@@ -17,18 +21,32 @@ const routes: Routes = [
       {
         path: 'permissions',
         component: PermissionsComponent,
+        data: {
+          breadcrumb: {
+            skip: true,
+          }
+        },
       },
       {
         path: 'user/:id',
         component: UserPermissionDetailsComponent,
+        data: {
+          breadcrumb:  getBreadcrumb,
+        },
       },
       {
         path: 'experiment/:id',
         component: ExperimentPermissionDetailsComponent,
+        data: {
+          breadcrumb: getBreadcrumb,
+        },
       },
       {
         path: 'model/:id',
         component: ModelPermissionDetailsComponent,
+        data: {
+          breadcrumb: getBreadcrumb,
+        },
       },
       {
         path: '**',

diff --git a/web-ui/src/app/shared/components/header/header.component.html b/web-ui/src/app/shared/components/header/header.component.html
@@ -1,15 +1,24 @@
-<header class="py-3">
-
-  <div class="col-12 d-flex align-items-center">
-    <span>Hello, {{name}}</span>
-    <nav class="mx-3">
-      <a mat-button [routerLink]="['/home']">Home</a>
-      <a mat-button [routerLink]="['/manage']">Manage Permissions</a>
-    </nav>
-    <button mat-button  [routerLink]="'/logout'" aria-label="logout" class="logout" (click)="logout()">
-      <mat-icon>exit_to_app</mat-icon>
-      <span>Logout</span>
-    </button>
-  </div>
-
-</header>
+<mat-toolbar color="primary">
+
+    <div class="container d-flex align-items-center">
+
+        <span class="pe-5 fs-16">MLFlow Permission Manager</span>
+
+        <button mat-button [routerLink]="['/home']">
+            <mat-icon>home</mat-icon>
+            Home
+        </button>
+        <button mat-button [routerLink]="['/manage']">
+            <mat-icon>manage_accounts</mat-icon>
+            Manage Permissions
+        </button>
+        <span class="spacer"></span>
+
+        <span class="pe-1 ms-auto fs-16">Hello, {{name}}</span>
+        <button mat-button (click)="logout()">
+            <mat-icon>exit_to_app</mat-icon>
+            <span>Logout</span>
+        </button>
+    </div>
+
+</mat-toolbar>
diff --git a/web-ui/src/app/shared/components/header/header.component.scss b/web-ui/src/app/shared/components/header/header.component.scss
@@ -1,3 +1,7 @@
 .logout {
   margin-left: auto;
 }
+
+.fs-16 {
+  font-size: 16px;
+}
diff --git a/web-ui/src/app/shared/material/material.module.ts b/web-ui/src/app/shared/material/material.module.ts
@@ -10,6 +10,9 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatDividerModule } from '@angular/material/divider';
 
 const MATERIAL_MODULES = [
   MatTableModule,
@@ -22,6 +25,9 @@ const MATERIAL_MODULES = [
   MatDialogModule,
   MatProgressSpinnerModule,
   MatSnackBarModule,
+  MatToolbarModule,
+  MatBadgeModule,
+  MatDividerModule,
 ];
 
 @NgModule({

diff --git a/web-ui/src/app/shared/services/data/experiments-data.service.ts b/web-ui/src/app/shared/services/data/experiments-data.service.ts
@@ -24,7 +24,6 @@ export class ExperimentsDataService {
   }
 
   getExperimentsForUser(userName: string) {
-    console.log(userName);
     const url = API_URL.EXPERIMENTS_FOR_USER.replace('${userName}', userName);
     return this.http.get<ExperimentsForUserModel>(url)
       .pipe(

diff --git a/web-ui/src/app/shared/shared.module.ts b/web-ui/src/app/shared/shared.module.ts
@@ -14,6 +14,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { RouterLink, RouterLinkWithHref } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
+import { BreadcrumbModule } from 'xng-breadcrumb';
 
 const SHARED_COMPONENTS = [
   AccessKeyModalComponent,
@@ -33,6 +34,7 @@ const SHARED_COMPONENTS = [
     ...SHARED_COMPONENTS,
 
     MaterialModule,
+    BreadcrumbModule,
   ],
   imports: [
     MaterialModule,
@@ -43,6 +45,7 @@ const SHARED_COMPONENTS = [
     HttpClientModule,
     ReactiveFormsModule,
     RouterLink,
+    BreadcrumbModule,
   ],
 })
 export class SharedModule { }