added metadata header

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

@@ -1,5 +1,5 @@
 <div *ngIf="configuration">
-    <section class="px-3 mb-3" *ngFor="let section of configuration.sections; let i = index;">
+    <section *ngFor="let section of configuration.sections; let i = index;">
         <div class="config-group">
             <div class="numbered-header d-flex justify-content-start bg-light align-items-center">
                 <h2 class="title h4 m-0 flex-grow-1">

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

@@ -0,0 +1,13 @@
+<div class="card enabled-status">
+    <div class="card-body">
+        <h2 class="card-title version-title">Version 5</h2>
+        <p class="card-text version-details">
+            Saved <span class="save-date">Mmm DD, YYYY</span>, by <span class="author">Username</span>
+        </p>
+        <p class="card-text">
+            <span class="badge badge-primary" *ngIf="isEnabled" translate="value.enabled">Enabled</span>
+            <span class="badge badge-danger" *ngIf="!isEnabled" translate="value.disabled">Disabled</span>
+            <span class="badge badge-primary">Current</span>
+        </p>
+    </div>
+</div>

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

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { Metadata, MetadataTypes } from '../../domain/domain.type';
+import { MetadataResolver } from '../../domain/model';
+
+@Component({
+    selector: 'metadata-header',
+    templateUrl: './metadata-header.component.html',
+    styleUrls: []
+})
+
+export class MetadataHeaderComponent {
+    @Input() metadata: Metadata;
+    constructor() {}
+
+    get isEnabled(): boolean {
+        return this.metadata ? ('serviceEnabled' in this.metadata) ? this.metadata.serviceEnabled : this.metadata.enabled : false;
+    }
+}
+

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

@@ -19,6 +19,7 @@ import { ArrayPropertyComponent } from './component/array-property.component';
 import { RouterModule } from '@angular/router';
 import { MetadataOptionsComponent } from './container/metadata-options.component';
 import { MetadataXmlComponent } from './container/metadata-xml.component';
+import { MetadataHeaderComponent } from './component/metadata-header.component';
 
 @NgModule({
     declarations: [
@@ -29,7 +30,8 @@ import { MetadataXmlComponent } from './container/metadata-xml.component';
         PrimitivePropertyComponent,
         ObjectPropertyComponent,
         ArrayPropertyComponent,
-        ConfigurationComponent
+        ConfigurationComponent,
+        MetadataHeaderComponent
     ],
     entryComponents: [],
     imports: [

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

@@ -1,3 +1,11 @@
 <div class="container">
+    <metadata-header [metadata]="model$ | async"></metadata-header>
+    <div class="px-3 my-3 d-flex justify-content-between">
+        <button class="btn btn-link">Version History</button>
+        <div class="btn-group">
+            <button class="btn" routerLinkActive="btn-primary">Options</button>
+            <button class="btn" routerLinkActive="btn-primary">XML</button>
+        </div>
+    </div>
     <metadata-configuration [configuration]="configuration$ | async"></metadata-configuration>
 </div>

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

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 
 import * as fromConfiguration from '../reducer';
 import { MetadataConfiguration } from '../model/metadata-configuration';
+import { Metadata } from '../../domain/domain.type';
 
 @Component({
     selector: 'metadata-options-page',
@@ -14,10 +15,12 @@ import { MetadataConfiguration } from '../model/metadata-configuration';
 export class MetadataOptionsComponent {
 
     configuration$: Observable<MetadataConfiguration>;
+    model$: Observable<Metadata>;
 
     constructor(
         private store: Store<fromConfiguration.ConfigurationState>
     ) {
         this.configuration$ = this.store.select(fromConfiguration.getConfigurationSections);
+        this.model$ = this.store.select(fromConfiguration.getConfigurationModel);
     }
 }