SHIBUI-1347

ui/package.json

@@ -73,6 +73,7 @@
     "karma-jasmine-html-reporter": "^1.4.2",
     "karma-spec-reporter": "0.0.32",
     "ncp": "^2.0.0",
+    "node-sass": "^4.12.0",
     "path": "^0.12.7",
     "ts-node": "~3.2.0",
     "tslint": "~5.3.2",

ui/src/app/app.component.scss

@@ -16,12 +16,12 @@ nav.navbar {
 
 @media only screen and (min-width: 1024px) {
     .pad-content {
-        padding: 1rem 3rem;
+        padding: 0 3rem;
     }
 }
 
 @media only screen and (min-width: 1200px) {
     .pad-content {
-        padding: 2rem 5rem;
+        padding: 0 5rem;
     }
 }

ui/src/app/metadata/configuration/component/metadata-header.component.html

@@ -1,18 +1,15 @@
 <div class="card enabled-status" *ngIf="version">
     <div class="card-body">
-        <h2 class="card-title version-title">
-            <translate-i18n key="label.version">Version</translate-i18n> {{ versionNumber }}
-        </h2>
-        <p class="card-text version-details">
+        <h3 class="card-title version-title">
             <translate-i18n key="label.saved">Saved</translate-i18n>&nbsp;
             <span class="save-date">{{ version.date | date }}</span>,
             <translate-i18n key="label.by">by</translate-i18n>&nbsp;
             <span class="author">{{ version.creator }}</span>
-        </p>
+        </h3>
         <p class="card-text">
             <span class="badge badge-primary" *ngIf="isEnabled" translate="value.enabled">Enabled</span>
-            &nbsp;
             <span class="badge badge-danger" *ngIf="!isEnabled" translate="value.disabled">Disabled</span>
+            &nbsp;
             <span class="badge badge-primary" *ngIf="isCurrent" translate="value.current">Current</span>
         </p>
     </div>

ui/src/app/metadata/configuration/configuration.module.ts

@@ -23,6 +23,7 @@ import { MetadataHistoryEffects } from './effect/history.effect';
 import { MetadataHistoryService } from './service/history.service';
 import { MetadataHistoryComponent } from './container/metadata-history.component';
 import { HistoryListComponent } from './component/history-list.component';
+import { DomainModule } from '../domain/domain.module';
 
 @NgModule({
     declarations: [
@@ -43,7 +44,8 @@ import { HistoryListComponent } from './component/history-list.component';
         CommonModule,
         I18nModule,
         NgbPopoverModule,
-        RouterModule
+        RouterModule,
+        DomainModule
     ],
     exports: [],
     providers: []

ui/src/app/metadata/configuration/configuration.values.ts

@@ -5,6 +5,11 @@ export enum PATHS {
     provider = 'MetadataResolvers'
 }
 
+export enum TYPES {
+    resolver = 'resolver',
+    provider = 'provider'
+}
+
 export const DEFINITIONS = {
     resolver: MetadataSourceEditor
 };

ui/src/app/metadata/configuration/container/configuration.component.html

@@ -1,16 +1,19 @@
 <div class="container-fluid p-3">
-    <section class="section" aria-label="View Metadata Version History" tabindex="0">
-        <div class="section-header bg-info p-2 text-white">
-            <div class="row justify-content-between">
-                <div class="col-md-12">
-                    <span class="display-6">
-                        <i class="fa fa-fw fa-gears"></i>
-                        <translate-i18n key="label.metadata-resolver-history">Metadata resolver history</translate-i18n>
-                    </span>
-                </div>
-            </div>
-        </div>
-        <div class="section-body p-4 border border-top-0 border-info">
+    <section class="section" tabindex="0">
+        <div class="section-body px-4 pb-4 border border-info">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb breadcrumb-bar">
+                    <li class="breadcrumb-item">
+                        <a [routerLink]="['/dashboard']" translate="action.dashboard">Dashboard</a>
+                    </li>
+                    <li class="breadcrumb-item active" aria-current="page">
+                        <span class="display-6">
+                            {{ name$ | async }}
+                        </span>
+                    </li>
+                </ol>
+            </nav>
+            <h2 class="mb-4">Source Configuration</h2>
             <router-outlet></router-outlet>
         </div>
     </section>

ui/src/app/metadata/configuration/container/configuration.component.ts

@@ -1,12 +1,12 @@
-import { Store } from '@ngrx/store';
 import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { takeUntil, map, withLatestFrom, filter } from 'rxjs/operators';
+import { Store } from '@ngrx/store';
 import { Observable, Subject } from 'rxjs';
-import { ActivatedRoute, Params } from '@angular/router';
 
 import * as fromConfiguration from '../reducer';
-import { MetadataConfiguration } from '../model/metadata-configuration';
-import { takeUntil, map, withLatestFrom, filter } from 'rxjs/operators';
-import { LoadMetadataRequest, ClearConfiguration, LoadXmlRequest } from '../action/configuration.action';
+
+import { LoadMetadataRequest, ClearConfiguration } from '../action/configuration.action';
 import { LoadHistoryRequest, ClearHistory, SelectVersion } from '../action/history.action';
 import * as fromReducer from '../reducer';
 
@@ -19,6 +19,8 @@ import * as fromReducer from '../reducer';
 export class ConfigurationComponent implements OnDestroy {
     private ngUnsubscribe: Subject<void> = new Subject<void>();
 
+    name$: Observable<string>;
+
     constructor(
         private store: Store<fromConfiguration.ConfigurationState>,
         private routerState: ActivatedRoute
@@ -49,6 +51,13 @@ export class ConfigurationComponent implements OnDestroy {
                 this.store.dispatch(new SelectVersion(version));
             }
         });
+
+        this.name$ = this.store
+            .select(fromReducer.getConfigurationModel)
+            .pipe(
+                filter(model => !!model),
+                map(model => model ? ('serviceProviderName' in model) ? model.serviceProviderName : model.name : false)
+            );
     }
 
     ngOnDestroy() {

ui/src/app/metadata/configuration/container/metadata-options.component.html

@@ -4,11 +4,13 @@
         [version]="version$ | async"
         [versionNumber]="versionNumber$ | async"
         [isCurrent]="isCurrent$ | async"></metadata-header>
-    <div class="px-3 my-3 d-flex justify-content-between">
+    <div class="px-3 my-3 d-flex justify-content-end">
+        <!--
         <a class="btn btn-link" routerLink="../history">
             <i class="fa fa-history sr-hidden"></i>&nbsp;
             <translate-i18n key="action.version-history">Version History</translate-i18n>
         </a>
+        -->
         <div class="btn-group">
             <a class="btn" routerLink="../options" routerLinkActive="btn-primary" translate="action.options">Options</a>
             <a class="btn" routerLink="../xml" routerLinkActive="btn-primary" translate="action.xml">XML</a>

ui/src/app/metadata/configuration/effect/configuration.effect.ts

@@ -44,6 +44,12 @@ export class MetadataConfigurationEffects {
         )
     );
 
+    @Effect({dispatch: false})
+    loadMetadataError$ = this.actions$.pipe(
+        ofType<LoadMetadataError>(ConfigurationActionTypes.LOAD_METADATA_ERROR),
+        tap(action => console.log(action))
+    );
+
     @Effect()
     loadMetadataXml$ = this.actions$.pipe(
         ofType<LoadMetadataRequest>(ConfigurationActionTypes.LOAD_METADATA_REQUEST),

ui/src/app/metadata/configuration/service/configuration.service.ts

@@ -1,24 +1,29 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { Observable, of, throwError } from 'rxjs';
 import { Metadata } from '../../domain/domain.type';
 import { Wizard } from '../../../wizard/model';
 import { MetadataSourceEditor } from '../../domain/model/wizards/metadata-source-editor';
 import { MetadataProviderEditorTypes } from '../../provider/model';
 import { Schema } from '../model/schema';
-import { PATHS } from '../configuration.values';
+import { TYPES } from '../configuration.values';
+import { ResolverService } from '../../domain/service/resolver.service';
 
 @Injectable()
 export class MetadataConfigurationService {
 
-    readonly base = '/api';
-
     constructor(
+        private resolverService: ResolverService,
         private http: HttpClient
     ) {}
 
     find(id: string, type: string): Observable<Metadata> {
-        return this.http.get<Metadata>(`${this.base}/${PATHS[type]}/${id}`);
+        switch (type) {
+            case TYPES.resolver:
+                return this.resolverService.find(id);
+            default:
+                return throwError(new Error('Type not supported'));
+        }
     }
 
     getDefinition(type: string): Wizard<Metadata> {

ui/src/styles.scss

@@ -1,4 +1,5 @@
 @import './theme/bootstrap';
+@import './theme/breadcrumb';
 @import './theme/buttons';
 @import './theme/forms';
 @import './theme/modal';

ui/src/theme/bootstrap.scss

@@ -23,7 +23,7 @@
 @import "~bootstrap/scss/nav";
 @import "~bootstrap/scss/navbar";
 @import "~bootstrap/scss/card";
-// @import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/breadcrumb";
 @import "~bootstrap/scss/pagination";
 @import "~bootstrap/scss/badge";
 // @import "~bootstrap/scss/jumbotron";

ui/src/theme/breadcrumb.scss

@@ -0,0 +1,24 @@
+.breadcrumb-bar {
+    $default-color: $gray-400;
+
+    padding: 0;
+    margin: 1rem 0;
+    background: none;
+    border-radius: 0;
+    padding: 0.375rem 0;
+    border-bottom: 1px solid $gray-600;
+    /*
+    &, & > .breadcrumb-item.active {
+        color: $default-color;
+    }
+    > .breadcrumb-item > a {
+        color: $white;
+    }
+
+    & > .breadcrumb-item + .breadcrumb-item {
+        &::before {
+            color: $default-color;
+        }
+    }
+    */
+}