From f26cda47e1176a1f713f23cf386b68c40918b2c3 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 1 Aug 2019 10:08:27 -0700
Subject: [PATCH 1/9] SHIBUI-1365 stubbing filter comparison

---
 .../filter-version-list.component.html        | 10 +++++
 .../filter-version-list.component.ts          |  8 ++++
 .../configuration/configuration.module.ts     |  4 +-
 .../metadata-comparison.component.html        | 16 ++++++++
 .../metadata-comparison.component.ts          | 39 ++++++++++++++++---
 .../container/metadata-options.component.html |  1 -
 .../metadata/configuration/reducer/index.ts   |  6 +++
 .../boolean-radio.component.html              |  2 +-
 8 files changed, 78 insertions(+), 8 deletions(-)
 create mode 100644 ui/src/app/metadata/configuration/component/filter-version-list.component.html
 create mode 100644 ui/src/app/metadata/configuration/component/filter-version-list.component.ts

diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.html b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
new file mode 100644
index 000000000..57fa90864
--- /dev/null
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
@@ -0,0 +1,10 @@
+<ul class="list-group list-group-flush" *ngIf="filters.length > 0">
+    <li *ngFor="let filter of filters; let i = index; first as isFirst; last as isLast;"
+        class="list-group-item">
+        {{ filter | json }}
+    </li>
+</ul>
+<div class="alert alert-info m-4" *ngIf="filters && filters.length < 1">
+    <h3 translate="message.no-filters">No Filters</h3>
+    <p translate="message.no-filters-added">No filters have been added to this Metadata Provider</p>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
new file mode 100644
index 000000000..1706cbcf5
--- /dev/null
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+import { FilterListComponent } from '../../filter/component/filter-list.component';
+
+@Component({
+    selector: 'filter-version-list',
+    templateUrl: './filter-version-list.component.html'
+})
+export class FilterVersionListComponent extends FilterListComponent { }
diff --git a/ui/src/app/metadata/configuration/configuration.module.ts b/ui/src/app/metadata/configuration/configuration.module.ts
index fa395529b..e2ec72d76 100644
--- a/ui/src/app/metadata/configuration/configuration.module.ts
+++ b/ui/src/app/metadata/configuration/configuration.module.ts
@@ -30,6 +30,7 @@ import { FilterConfigurationListComponent } from './component/filter-configurati
 import { FilterConfigurationListItemComponent } from './component/filter-configuration-list-item.component';
 import { SharedModule } from '../../shared/shared.module';
 import { FilterTargetPropertyComponent } from './component/filter-target-property.component';
+import { FilterVersionListComponent } from './component/filter-version-list.component';
 
 @NgModule({
     declarations: [
@@ -47,7 +48,8 @@ import { FilterTargetPropertyComponent } from './component/filter-target-propert
         MetadataComparisonComponent,
         FilterConfigurationListComponent,
         FilterConfigurationListItemComponent,
-        FilterTargetPropertyComponent
+        FilterTargetPropertyComponent,
+        FilterVersionListComponent
     ],
     entryComponents: [],
     imports: [
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
index d5b533716..eb122c2f2 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -9,4 +9,20 @@
         </a>
     </div>
     <metadata-configuration [configuration]="versions$ | async"></metadata-configuration>
+    <div *ngIf="kind === 'provider'" id="filters">
+        <div class="numbered-header d-flex justify-content-start bg-light align-items-center">
+            <h2 class="title h4 m-0 ml-2 flex-grow-1">
+                <span class="text" translate="label.filters">Filters</span>
+            </h2>
+            <div class="actions px-2">
+                <a class="btn btn-link edit-link change-view"
+                    [routerLink]="['/', 'metadata', 'provider', id, 'filter', 'new']">
+                    <i class="fa fa-gear"></i>&nbsp;
+                    <span translate="action.add-filter">Add Filter</span>
+                </a>
+            </div>
+        </div>
+        <filter-version-list
+            [filters]="filters$ | async"></filter-version-list>
+    </div>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
index 92019297d..8e02fe025 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
@@ -1,12 +1,14 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { ActivatedRoute } from '@angular/router';
-import { map } from 'rxjs/operators';
-import { ConfigurationState, getVersionConfigurations, getVersionConfigurationCount } from '../reducer';
+import { map, takeUntil, filter } from 'rxjs/operators';
+import { ConfigurationState, getVersionConfigurations, getVersionConfigurationCount, getConfigurationModel, getVersionsFilters } from '../reducer';
 import { Metadata } from '../../domain/domain.type';
 import { CompareVersionRequest } from '../action/compare.action';
 import { MetadataConfiguration } from '../model/metadata-configuration';
+import { getAdditionalFilters } from '../../filter/reducer';
+import { LoadFilterRequest } from '../../filter/action/collection.action';
 
 @Component({
     selector: 'metadata-comparison',
@@ -14,10 +16,17 @@ import { MetadataConfiguration } from '../model/metadata-configuration';
     templateUrl: './metadata-comparison.component.html',
     styleUrls: []
 })
-export class MetadataComparisonComponent {
+export class MetadataComparisonComponent implements OnDestroy {
+
+    private ngUnsubscribe: Subject<void> = new Subject<void>();
 
     versions$: Observable<MetadataConfiguration>;
     numVersions$: Observable<number>;
+    filters$: Observable<unknown[]>;
+    model$: Observable<Metadata>;
+
+    id: string;
+    kind: string;
 
     constructor(
         private store: Store<ConfigurationState>,
@@ -30,5 +39,25 @@ export class MetadataComparisonComponent {
 
         this.versions$ = this.store.select(getVersionConfigurations);
         this.numVersions$ = this.store.select(getVersionConfigurationCount);
+        this.model$ = this.store.select(getConfigurationModel);
+
+        this.model$
+            .pipe(
+                takeUntil(this.ngUnsubscribe),
+                filter(model => !!model)
+            )
+            .subscribe(p => this.setModel(p));
+
+        this.filters$ = this.store.select(getVersionsFilters);
+    }
+
+    setModel(data: Metadata): void {
+        this.id = 'resourceId' in data ? data.resourceId : data.id;
+        this.kind = '@type' in data ? 'provider' : 'resolver';
+    }
+
+    ngOnDestroy(): void {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
     }
 }
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.html b/ui/src/app/metadata/configuration/container/metadata-options.component.html
index d99166c11..972e0e4da 100644
--- a/ui/src/app/metadata/configuration/container/metadata-options.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-options.component.html
@@ -48,7 +48,6 @@ <h2 class="title h4 m-0 ml-2 flex-grow-1">
             (onUpdateOrderDown)="updateOrderDown($event)"
             (onUpdateOrderUp)="updateOrderUp($event)"
             (onRemove)="removeFilter($event)"
-            (preview)="onPreview($event)"
             [filters]="filters$ | async"></filter-configuration-list>
     </div>
     <button class="btn btn-link" (click)="onScrollTo('header')">
diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
index b4538bae4..94d28846d 100644
--- a/ui/src/app/metadata/configuration/reducer/index.ts
+++ b/ui/src/app/metadata/configuration/reducer/index.ts
@@ -161,3 +161,9 @@ export const getVersionConfigurations = createSelector(
 );
 
 export const getVersionConfigurationCount = createSelector(getVersionConfigurations, (config) => config ? config.dates.length : 0);
+
+export const getVersionsFiltersFn = (versions) => {
+    console.log(versions);
+    return [];
+};
+export const getVersionsFilters = createSelector(getVersionModels, getVersionsFiltersFn);
diff --git a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
index c3c090e19..a39f04f4e 100644
--- a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
+++ b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
@@ -9,7 +9,7 @@
     <div *ngFor="let option of schema.oneOf; let i=index;" class="form-check form-check-inline">
         <label class="control-label">
             <input
-                [id]="formProperty._canonicalPath"
+                [id]="formProperty._canonicalPath + '.' + option.enum[0]"
                 [formControl]="control"
                 [name]="name"
                 [value]="option.enum[0]"

From a85bf2b6b22e15d862e6a50608f13c005034f80f Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Mon, 5 Aug 2019 10:12:07 -0700
Subject: [PATCH 2/9] SHIBUI-1365 Added mock-up of filter comparison

---
 .../filter-version-list.component.html        | 48 ++++++++++++--
 .../filter-version-list.component.ts          | 64 ++++++++++++++++++-
 .../metadata-comparison.component.html        | 11 +---
 ui/src/theme/utility.scss                     |  4 ++
 4 files changed, 109 insertions(+), 18 deletions(-)

diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.html b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
index 57fa90864..95cb28700 100644
--- a/ui/src/app/metadata/configuration/component/filter-version-list.component.html
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
@@ -1,10 +1,44 @@
-<ul class="list-group list-group-flush" *ngIf="filters.length > 0">
-    <li *ngFor="let filter of filters; let i = index; first as isFirst; last as isLast;"
-        class="list-group-item">
-        {{ filter | json }}
-    </li>
-</ul>
-<div class="alert alert-info m-4" *ngIf="filters && filters.length < 1">
+<ng-container *ngIf="filters.dates.length > 0">
+    <div class="d-flex border-bottom border-light border-2 py-2">
+        <span [ngStyle]="{'width.%': width}">Order</span>
+        <strong *ngFor="let date of filters.dates" [ngStyle]="{'width.%': width}">
+            {{ date | date:'medium' }}
+        </strong>
+    </div>
+    <div class="">
+        <ng-container *ngFor="let version of filters.filters; let i = index; first as isFirst; last as isLast;"
+            class="list-group-item">
+            <div class="d-flex border-bottom border-light">
+                <div [ngStyle]="{'width.%': width}" class="py-2">
+                    {{ i + 1 }}
+                </div>
+                <div *ngFor="let filter of version; let i = index; even as isEven"
+                    [ngStyle]="{'width.%': width}"
+                    class="border-primary p-2 d-flex align-items-center"
+                    [ngClass]="{'bg-lighter': isEven && selected !== filter.id, 'bg-primary-light': selected === filter.id}">
+                    <div class="w-50">
+                        <p>{{ filter.name }}</p>
+                        <p class="mb-0 text-muted">{{ filter.type }}</p>
+                    </div>
+                    <button class="btn btn-link mx-auto"
+                        *ngIf="filter.comparable"
+                        (click)="selected = (selected !== filter.id) ? filter.id : null">
+                        <i class="fa fa-lg"
+                            [ngClass]="{'fa-check-square-o': selected === filter.id, 'fa-square-o': selected !== filter.id}"
+                            aria-hidden="true"></i>
+                        <span class="sr-only">Compare</span>
+                    </button>
+                </div>
+            </div>
+        </ng-container>
+    </div>
+    <div class="d-flex justify-content-end my-2">
+        <button class="btn btn-primary" [disabled]="!selected">
+            <translate-i18n key="label.compare-selected">Compare Selected</translate-i18n>
+        </button>
+    </div>
+</ng-container>
+<div class="alert alert-info m-4" *ngIf="filters && filters.dates.length < 1">
     <h3 translate="message.no-filters">No Filters</h3>
     <p translate="message.no-filters-added">No filters have been added to this Metadata Provider</p>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
index 1706cbcf5..0781b8293 100644
--- a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
@@ -1,8 +1,68 @@
 import { Component } from '@angular/core';
-import { FilterListComponent } from '../../filter/component/filter-list.component';
+
+const data = {
+    dates: ['2019-08-02T12:50:54.282', '2019-08-02T12:12:54.282'],
+    filters: [
+        [
+            {
+                id: '1',
+                name: 'Example Filter 1',
+                type: 'EntityAttributesFilter',
+                comparable: true
+            },
+            {
+                id: '2',
+                name: 'Example Filter 2',
+                type: 'NameIdFilter',
+                comparable: true
+            }
+        ],
+        [
+            {
+                id: '2',
+                name: 'Example Filter 2',
+                type: 'NameIdFilter',
+                comparable: true
+            },
+            {
+                id: '1',
+                name: 'Example Filter 1',
+                type: 'EntityAttributesFilter',
+                comparable: true
+            }
+        ],
+        [
+            {
+                id: '4',
+                name: 'Example Filter 4',
+                type: 'EntityAttributesFilter',
+                comparable: false
+            },
+            {
+                id: '3',
+                name: 'Example Filter 3',
+                type: 'EntityAttributesFilter',
+                comparable: false
+            }
+        ]
+    ]
+};
 
 @Component({
     selector: 'filter-version-list',
     templateUrl: './filter-version-list.component.html'
 })
-export class FilterVersionListComponent extends FilterListComponent { }
+export class FilterVersionListComponent {
+
+    filters = data;
+    selected: string;
+
+    constructor() {
+
+    }
+
+    get width(): string {
+        const columns = this.filters.dates.length;
+        return `${Math.floor(100 / (columns + 1))}`;
+    }
+}
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
index eb122c2f2..d3fdab712 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -14,15 +14,8 @@
             <h2 class="title h4 m-0 ml-2 flex-grow-1">
                 <span class="text" translate="label.filters">Filters</span>
             </h2>
-            <div class="actions px-2">
-                <a class="btn btn-link edit-link change-view"
-                    [routerLink]="['/', 'metadata', 'provider', id, 'filter', 'new']">
-                    <i class="fa fa-gear"></i>&nbsp;
-                    <span translate="action.add-filter">Add Filter</span>
-                </a>
-            </div>
+            <div class="actions p-2 invisible">-</div>
         </div>
-        <filter-version-list
-            [filters]="filters$ | async"></filter-version-list>
+        <filter-version-list class="d-block p-2"></filter-version-list>
     </div>
 </div>
\ No newline at end of file
diff --git a/ui/src/theme/utility.scss b/ui/src/theme/utility.scss
index 358b75b2c..0864a5447 100644
--- a/ui/src/theme/utility.scss
+++ b/ui/src/theme/utility.scss
@@ -6,6 +6,10 @@
     background: #FAFAFA !important;
 }
 
+.bg-primary-light {
+    background: lighten($brand-primary, 75%);
+}
+
 .w-15 {
     width: 15%;
 }

From 0896528f00455c039359216bc5ef6d1ab3aebf14 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 8 Aug 2019 09:33:48 -0700
Subject: [PATCH 3/9] updated mockup

---
 .../filter-version-list.component.html        | 128 +++++++++++++-----
 .../filter-version-list.component.ts          |   7 +-
 2 files changed, 103 insertions(+), 32 deletions(-)

diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.html b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
index 95cb28700..4047f7483 100644
--- a/ui/src/app/metadata/configuration/component/filter-version-list.component.html
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
@@ -1,42 +1,108 @@
 <ng-container *ngIf="filters.dates.length > 0">
     <div class="d-flex border-bottom border-light border-2 py-2">
-        <span [ngStyle]="{'width.%': width}">Order</span>
+        <span [ngStyle]="{'width.%': width}" *ngIf="!comparing">Order</span>
+        <span [ngStyle]="{'width.%': width}" *ngIf="comparing">Option</span>
         <strong *ngFor="let date of filters.dates" [ngStyle]="{'width.%': width}">
             {{ date | date:'medium' }}
         </strong>
     </div>
-    <div class="">
-        <ng-container *ngFor="let version of filters.filters; let i = index; first as isFirst; last as isLast;"
-            class="list-group-item">
-            <div class="d-flex border-bottom border-light">
-                <div [ngStyle]="{'width.%': width}" class="py-2">
-                    {{ i + 1 }}
-                </div>
-                <div *ngFor="let filter of version; let i = index; even as isEven"
-                    [ngStyle]="{'width.%': width}"
-                    class="border-primary p-2 d-flex align-items-center"
-                    [ngClass]="{'bg-lighter': isEven && selected !== filter.id, 'bg-primary-light': selected === filter.id}">
-                    <div class="w-50">
-                        <p>{{ filter.name }}</p>
-                        <p class="mb-0 text-muted">{{ filter.type }}</p>
+    <ng-container *ngIf="!comparing">
+        <div class="">
+            <ng-container *ngFor="let version of filters.filters; let i = index; first as isFirst; last as isLast;"
+                class="list-group-item">
+                <div class="d-flex border-bottom border-light">
+                    <div [ngStyle]="{'width.%': width}" class="py-2">
+                        {{ i + 1 }}
+                    </div>
+                    <div *ngFor="let filter of version; let i = index; even as isEven"
+                        [ngStyle]="{'width.%': width}"
+                        class="border-primary p-2 d-flex align-items-center"
+                        [ngClass]="{'bg-lighter': isEven && selected !== filter.id, 'bg-primary-light': selected === filter.id}">
+                        <div class="w-50">
+                            <p>{{ filter.name }}</p>
+                            <p class="mb-0 text-muted">{{ filter.type }}</p>
+                        </div>
+                        <button class="btn btn-link mx-auto"
+                            *ngIf="filter.comparable"
+                            (click)="selected = (selected !== filter.id) ? filter.id : null">
+                            <i class="fa fa-lg"
+                                [ngClass]="{'fa-check-square-o': selected === filter.id, 'fa-square-o': selected !== filter.id}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">Compare</span>
+                        </button>
                     </div>
-                    <button class="btn btn-link mx-auto"
-                        *ngIf="filter.comparable"
-                        (click)="selected = (selected !== filter.id) ? filter.id : null">
-                        <i class="fa fa-lg"
-                            [ngClass]="{'fa-check-square-o': selected === filter.id, 'fa-square-o': selected !== filter.id}"
-                            aria-hidden="true"></i>
-                        <span class="sr-only">Compare</span>
-                    </button>
                 </div>
-            </div>
-        </ng-container>
-    </div>
-    <div class="d-flex justify-content-end my-2">
-        <button class="btn btn-primary" [disabled]="!selected">
-            <translate-i18n key="label.compare-selected">Compare Selected</translate-i18n>
-        </button>
-    </div>
+            </ng-container>
+        </div>
+        <div class="d-flex justify-content-end my-2">
+            <button class="btn btn-primary" [disabled]="!selected" (click)="compare(selected)">
+                <translate-i18n key="label.compare-selected">Compare Selected</translate-i18n>
+            </button>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="comparing">
+        <div class="d-flex border-bottom border-light py-2">
+            <span class="d-block"
+                role="term"
+                [ngStyle]="{'width.%': width}">Type</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">EntityAttributesFilter</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">EntityAttributesFilter</span>
+        </div>
+        <div class="d-flex border-bottom border-light py-2">
+            <span class="d-block"
+                role="term"
+                [ngStyle]="{'width.%': width}">Name</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">Test Filter 1</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">Renamed Filter</span>
+        </div>
+        <div class="d-flex border-bottom border-light py-2">
+            <span class="d-block"
+                role="term"
+                [ngStyle]="{'width.%': width}">Target Type</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">Entity ID</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">Entity ID</span>
+        </div>
+        <div class="d-flex border-bottom border-light py-2">
+            <span class="d-block"
+                role="term"
+                [ngStyle]="{'width.%': width}">Target Value</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">http://idp.unicon.net/idp/shibboleth</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">http://idp.unicon.net/idp/shibboleth</span>
+        </div>
+        <div class="d-flex border-bottom border-light py-2">
+            <span class="d-block"
+                role="term"
+                [ngStyle]="{'width.%': width}">Enabled?</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">false</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">true</span>
+        </div>
+        <div class="d-flex justify-content-end my-2">
+            <button class="btn btn-success" (click)="comparing = null">
+                <i class="fa fa-arrow-left" aria-hidden="true"></i>
+                Filter Versions
+            </button>
+        </div>
+    </ng-container>
 </ng-container>
 <div class="alert alert-info m-4" *ngIf="filters && filters.dates.length < 1">
     <h3 translate="message.no-filters">No Filters</h3>
diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
index 0781b8293..2411aa872 100644
--- a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 const data = {
-    dates: ['2019-08-02T12:50:54.282', '2019-08-02T12:12:54.282'],
+    dates: ['2019-08-08T08:40:32.015', '2019-08-08T08:40:19.266'],
     filters: [
         [
             {
@@ -56,11 +56,16 @@ export class FilterVersionListComponent {
 
     filters = data;
     selected: string;
+    comparing: string;
 
     constructor() {
 
     }
 
+    compare(id: string): void {
+        this.comparing = id;
+    }
+
     get width(): string {
         const columns = this.filters.dates.length;
         return `${Math.floor(100 / (columns + 1))}`;

From 1052fd988ad0876188cc248107c44bdd61323822 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Fri, 13 Sep 2019 13:17:41 -0700
Subject: [PATCH 4/9] SHIBUI-1364 Adding version comparison

---
 .../filter-version-list.component.ts          | 53 ++-----------------
 .../metadata/configuration/model/history.ts   |  2 +-
 .../model/metadata-configuration.ts           |  7 ++-
 .../metadata/configuration/model/version.ts   |  7 +++
 4 files changed, 18 insertions(+), 51 deletions(-)

diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
index 2411aa872..034e20a41 100644
--- a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
@@ -1,52 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { FilterConfiguration } from '../model/metadata-configuration';
+
 
-const data = {
-    dates: ['2019-08-08T08:40:32.015', '2019-08-08T08:40:19.266'],
-    filters: [
-        [
-            {
-                id: '1',
-                name: 'Example Filter 1',
-                type: 'EntityAttributesFilter',
-                comparable: true
-            },
-            {
-                id: '2',
-                name: 'Example Filter 2',
-                type: 'NameIdFilter',
-                comparable: true
-            }
-        ],
-        [
-            {
-                id: '2',
-                name: 'Example Filter 2',
-                type: 'NameIdFilter',
-                comparable: true
-            },
-            {
-                id: '1',
-                name: 'Example Filter 1',
-                type: 'EntityAttributesFilter',
-                comparable: true
-            }
-        ],
-        [
-            {
-                id: '4',
-                name: 'Example Filter 4',
-                type: 'EntityAttributesFilter',
-                comparable: false
-            },
-            {
-                id: '3',
-                name: 'Example Filter 3',
-                type: 'EntityAttributesFilter',
-                comparable: false
-            }
-        ]
-    ]
-};
 
 @Component({
     selector: 'filter-version-list',
@@ -54,7 +9,7 @@ const data = {
 })
 export class FilterVersionListComponent {
 
-    filters = data;
+    @Input() filters: FilterConfiguration;
     selected: string;
     comparing: string;
 
diff --git a/ui/src/app/metadata/configuration/model/history.ts b/ui/src/app/metadata/configuration/model/history.ts
index 2fec132da..180502423 100644
--- a/ui/src/app/metadata/configuration/model/history.ts
+++ b/ui/src/app/metadata/configuration/model/history.ts
@@ -1,4 +1,4 @@
-import { MetadataVersion } from './version';
+import { MetadataVersion, FilterVersion } from './version';
 
 export interface MetadataHistory {
     versions: MetadataVersion[];
diff --git a/ui/src/app/metadata/configuration/model/metadata-configuration.ts b/ui/src/app/metadata/configuration/model/metadata-configuration.ts
index 13886d1a3..4a4114642 100644
--- a/ui/src/app/metadata/configuration/model/metadata-configuration.ts
+++ b/ui/src/app/metadata/configuration/model/metadata-configuration.ts
@@ -1,7 +1,12 @@
 import { Section } from './section';
-import { Metadata } from '../../domain/domain.type';
+import { FilterVersion } from './version';
 
 export interface MetadataConfiguration {
     sections: Section[];
     dates: String[];
 }
+
+export interface FilterConfiguration {
+    dates: ['2019-08-08T08:40:32.015', '2019-08-08T08:40:19.266'];
+    filters: FilterVersion[];
+}
diff --git a/ui/src/app/metadata/configuration/model/version.ts b/ui/src/app/metadata/configuration/model/version.ts
index 0eb7cb815..5d1e1dac5 100644
--- a/ui/src/app/metadata/configuration/model/version.ts
+++ b/ui/src/app/metadata/configuration/model/version.ts
@@ -3,3 +3,10 @@ export interface MetadataVersion {
     date: string;
     creator: string;
 }
+
+export interface FilterVersion {
+    id: string;
+    name: string;
+    type: string;
+    comparable: boolean;
+}

From dbcdcdf2e999887efaae2f0c6ff8f784e1c8a991 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 17 Sep 2019 15:21:06 -0700
Subject: [PATCH 5/9] Implemented data retrieval for comparison

---
 .../configuration/action/compare.action.ts    |   2 -
 .../configuration/action/filter.action.ts     |  62 +++++++++
 .../filter-version-list.component.html        | 121 +++++-------------
 .../filter-version-list.component.ts          |  30 +++--
 .../configuration/configuration.module.ts     |   2 +
 .../metadata-comparison.component.html        |  15 ++-
 .../metadata-comparison.component.ts          |  16 ++-
 .../configuration/effect/filter.effect.ts     |  63 +++++++++
 .../metadata/configuration/model/compare.ts   |   7 +
 .../model/metadata-configuration.ts           |   2 +-
 .../configuration/reducer/compare.reducer.ts  |   5 +-
 .../configuration/reducer/filter.reducer.ts   |  56 ++++++++
 .../metadata/configuration/reducer/index.ts   |  92 +++++++++++--
 13 files changed, 357 insertions(+), 116 deletions(-)
 create mode 100644 ui/src/app/metadata/configuration/action/filter.action.ts
 create mode 100644 ui/src/app/metadata/configuration/effect/filter.effect.ts
 create mode 100644 ui/src/app/metadata/configuration/model/compare.ts
 create mode 100644 ui/src/app/metadata/configuration/reducer/filter.reducer.ts

diff --git a/ui/src/app/metadata/configuration/action/compare.action.ts b/ui/src/app/metadata/configuration/action/compare.action.ts
index be687d142..da012bea7 100644
--- a/ui/src/app/metadata/configuration/action/compare.action.ts
+++ b/ui/src/app/metadata/configuration/action/compare.action.ts
@@ -1,6 +1,4 @@
 import { Action } from '@ngrx/store';
-import { MetadataHistory } from '../model/history';
-import { MetadataVersion } from '../model/version';
 import { Metadata } from '../../domain/domain.type';
 
 export enum CompareActionTypes {
diff --git a/ui/src/app/metadata/configuration/action/filter.action.ts b/ui/src/app/metadata/configuration/action/filter.action.ts
new file mode 100644
index 000000000..6567fd0e2
--- /dev/null
+++ b/ui/src/app/metadata/configuration/action/filter.action.ts
@@ -0,0 +1,62 @@
+import { Action } from '@ngrx/store';
+import { Metadata } from '../../domain/domain.type';
+import { FormDefinition } from '../../../wizard/model/form-definition';
+import { FilterComparison } from '../model/compare';
+import { Schema } from '../model/schema';
+
+export enum FilterCompareActionTypes {
+    LOAD_SCHEMA_REQUEST = '[Filter Compare Version] Compare Version Request',
+    LOAD_SCHEMA_SUCCESS = '[Filter Compare Version] Compare Version Success',
+    LOAD_SCHEMA_ERROR = '[Filter Compare Version] Compare Version Error',
+    SET_SCHEMA = '[Filter Compare Version] Set Schema',
+    SET_DEFINITION = '[Filter Compare Version] Set Definition',
+    COMPARE_FILTERS = '[Filter Compare Version] Compare Filters',
+    CLEAR = '[Filter Compare Version] Clear Filter Comparison'
+}
+
+export class LoadFilterSchemaRequest implements Action {
+    readonly type = FilterCompareActionTypes.LOAD_SCHEMA_REQUEST;
+
+    constructor(public payload: string) { }
+}
+
+export class LoadFilterSchemaSuccess implements Action {
+    readonly type = FilterCompareActionTypes.LOAD_SCHEMA_SUCCESS;
+
+    constructor(public payload: Schema) { }
+}
+
+export class LoadFilterSchemaError implements Action {
+    readonly type = FilterCompareActionTypes.LOAD_SCHEMA_ERROR;
+
+    constructor(public payload: any) { }
+}
+
+export class SetFilterComparisonSchema implements Action {
+    readonly type = FilterCompareActionTypes.SET_SCHEMA;
+    constructor(public payload: any) { }
+}
+
+export class SetFilterComparisonDefinition implements Action {
+    readonly type = FilterCompareActionTypes.SET_DEFINITION;
+    constructor(public payload: FormDefinition<Metadata>) { }
+}
+
+export class ClearFilterComparison implements Action {
+    readonly type = FilterCompareActionTypes.CLEAR;
+}
+
+export class CompareFilterVersions implements Action {
+    readonly type = FilterCompareActionTypes.COMPARE_FILTERS;
+
+    constructor(public payload: FilterComparison) { }
+}
+
+export type FilterCompareActionsUnion =
+    | LoadFilterSchemaRequest
+    | LoadFilterSchemaSuccess
+    | LoadFilterSchemaError
+    | SetFilterComparisonSchema
+    | SetFilterComparisonDefinition
+    | CompareFilterVersions
+    | ClearFilterComparison;
diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.html b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
index 4047f7483..e9efacb1e 100644
--- a/ui/src/app/metadata/configuration/component/filter-version-list.component.html
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
@@ -3,106 +3,47 @@
         <span [ngStyle]="{'width.%': width}" *ngIf="!comparing">Order</span>
         <span [ngStyle]="{'width.%': width}" *ngIf="comparing">Option</span>
         <strong *ngFor="let date of filters.dates" [ngStyle]="{'width.%': width}">
-            {{ date | date:'medium' }}
+            {{ date | date:DATE_FORMAT }}
         </strong>
     </div>
-    <ng-container *ngIf="!comparing">
-        <div class="">
-            <ng-container *ngFor="let version of filters.filters; let i = index; first as isFirst; last as isLast;"
-                class="list-group-item">
-                <div class="d-flex border-bottom border-light">
-                    <div [ngStyle]="{'width.%': width}" class="py-2">
-                        {{ i + 1 }}
-                    </div>
-                    <div *ngFor="let filter of version; let i = index; even as isEven"
-                        [ngStyle]="{'width.%': width}"
-                        class="border-primary p-2 d-flex align-items-center"
-                        [ngClass]="{'bg-lighter': isEven && selected !== filter.id, 'bg-primary-light': selected === filter.id}">
+    <div class="">
+        <ng-container *ngFor="let version of filters.filters; let i = index; first as isFirst; last as isLast;">
+            <div class="d-flex border-bottom border-light">
+                <div [ngStyle]="{'width.%': width}" class="py-2">
+                    {{ i + 1 }}
+                </div>
+                <div *ngFor="let filter of version; let i = index; even as isEven"
+                    [ngStyle]="{'width.%': width}"
+                    class="border-primary">
+                    <div class="p-2 w-100" *ngIf="!filter">-</div>
+                    <div *ngIf="filter"
+                        class="p-2 d-flex align-items-center"
+                        [ngClass]="{
+                            'bg-lighter': isEven && selected !== filter.resourceId,
+                            'bg-primary-light': selected === filter.resourceId
+                        }">
                         <div class="w-50">
-                            <p>{{ filter.name }}</p>
-                            <p class="mb-0 text-muted">{{ filter.type }}</p>
+                            <p class="mb-0">{{ filter.name }}</p>
+                            <p class="mb-0 text-muted">{{ filter['@type'] }}</p>
                         </div>
-                        <button class="btn btn-link mx-auto"
-                            *ngIf="filter.comparable"
-                            (click)="selected = (selected !== filter.id) ? filter.id : null">
+                        <button class="btn btn-link mx-auto" *ngIf="filter.comparable"
+                            (click)="selected = (selected !== filter.resourceId) ? filter.resourceId : null">
                             <i class="fa fa-lg"
-                                [ngClass]="{'fa-check-square-o': selected === filter.id, 'fa-square-o': selected !== filter.id}"
+                                [ngClass]="{'fa-check-square-o': selected === filter.resourceId, 'fa-square-o': selected !== filter.resourceId}"
                                 aria-hidden="true"></i>
                             <span class="sr-only">Compare</span>
                         </button>
                     </div>
                 </div>
-            </ng-container>
-        </div>
-        <div class="d-flex justify-content-end my-2">
-            <button class="btn btn-primary" [disabled]="!selected" (click)="compare(selected)">
-                <translate-i18n key="label.compare-selected">Compare Selected</translate-i18n>
-            </button>
-        </div>
-    </ng-container>
-    <ng-container *ngIf="comparing">
-        <div class="d-flex border-bottom border-light py-2">
-            <span class="d-block"
-                role="term"
-                [ngStyle]="{'width.%': width}">Type</span>
-            <span class="d-block"
-                role="definition"
-                [ngStyle]="{'width.%': width}">EntityAttributesFilter</span>
-            <span class="d-block"
-                role="definition"
-                [ngStyle]="{'width.%': width}">EntityAttributesFilter</span>
-        </div>
-        <div class="d-flex border-bottom border-light py-2">
-            <span class="d-block"
-                role="term"
-                [ngStyle]="{'width.%': width}">Name</span>
-            <span class="d-block"
-                role="definition"
-                [ngStyle]="{'width.%': width}">Test Filter 1</span>
-            <span class="d-block"
-                role="definition"
-                [ngStyle]="{'width.%': width}">Renamed Filter</span>
-        </div>
-        <div class="d-flex border-bottom border-light py-2">
-            <span class="d-block"
-                role="term"
-                [ngStyle]="{'width.%': width}">Target Type</span>
-            <span class="d-block"
-                role="definition"
-                [ngStyle]="{'width.%': width}">Entity ID</span>
-            <span class="d-block"
-                role="definition"
-                [ngStyle]="{'width.%': width}">Entity ID</span>
-        </div>
-        <div class="d-flex border-bottom border-light py-2">
-            <span class="d-block"
-                role="term"
-                [ngStyle]="{'width.%': width}">Target Value</span>
-            <span class="d-block"
-                role="definition"
-                [ngStyle]="{'width.%': width}">http://idp.unicon.net/idp/shibboleth</span>
-            <span class="d-block"
-                role="definition"
-                [ngStyle]="{'width.%': width}">http://idp.unicon.net/idp/shibboleth</span>
-        </div>
-        <div class="d-flex border-bottom border-light py-2">
-            <span class="d-block"
-                role="term"
-                [ngStyle]="{'width.%': width}">Enabled?</span>
-            <span class="d-block"
-                role="definition"
-                [ngStyle]="{'width.%': width}">false</span>
-            <span class="d-block"
-                role="definition"
-                [ngStyle]="{'width.%': width}">true</span>
-        </div>
-        <div class="d-flex justify-content-end my-2">
-            <button class="btn btn-success" (click)="comparing = null">
-                <i class="fa fa-arrow-left" aria-hidden="true"></i>
-                Filter Versions
-            </button>
-        </div>
-    </ng-container>
+                
+            </div>
+        </ng-container>
+    </div>
+    <div class="d-flex justify-content-end my-2">
+        <button class="btn btn-primary" [disabled]="!selected" (click)="compareSelected()">
+            <translate-i18n key="label.compare-selected">Compare Selected</translate-i18n>
+        </button>
+    </div>
 </ng-container>
 <div class="alert alert-info m-4" *ngIf="filters && filters.dates.length < 1">
     <h3 translate="message.no-filters">No Filters</h3>
diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
index 034e20a41..7f0d9e445 100644
--- a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
@@ -1,7 +1,8 @@
-import { Component, Input } from '@angular/core';
-import { FilterConfiguration } from '../model/metadata-configuration';
-
-
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { FilterConfiguration, MetadataConfiguration } from '../model/metadata-configuration';
+import { CONFIG_DATE_FORMAT } from '../configuration.values';
+import { Observable, Subject } from 'rxjs';
+import { FilterComparison } from '../model/compare';
 
 @Component({
     selector: 'filter-version-list',
@@ -9,16 +10,29 @@ import { FilterConfiguration } from '../model/metadata-configuration';
 })
 export class FilterVersionListComponent {
 
+    private selectFiltersSubject: Subject<string> = new Subject();
+
     @Input() filters: FilterConfiguration;
+    @Output() compare: EventEmitter<FilterComparison> = new EventEmitter();
+
     selected: string;
     comparing: string;
+    selectedFilters$: Observable<MetadataConfiguration>;
 
-    constructor() {
+    DATE_FORMAT = CONFIG_DATE_FORMAT;
 
-    }
+    constructor() {}
+
+    compareSelected() {
+        const reduced = this.filters.filters.reduce((acc, l) => acc.concat(l), []);
+        const filtered = reduced.filter(f => f && f.resourceId === this.selected);
+        const type = filtered[0]['@type'];
 
-    compare(id: string): void {
-        this.comparing = id;
+        this.compare.emit({
+            modelId: this.selected,
+            modelType: type,
+            models: filtered
+        });
     }
 
     get width(): string {
diff --git a/ui/src/app/metadata/configuration/configuration.module.ts b/ui/src/app/metadata/configuration/configuration.module.ts
index 19f967fd1..338c39ccb 100644
--- a/ui/src/app/metadata/configuration/configuration.module.ts
+++ b/ui/src/app/metadata/configuration/configuration.module.ts
@@ -45,6 +45,7 @@ import { RestoreEditStepComponent } from './container/restore-edit-step.componen
 
 import { IndexResolver } from './service/index-resolver.service';
 import { FilterVersionListComponent } from './component/filter-version-list.component';
+import { FilterCompareVersionEffects } from './effect/filter.effect';
 
 @NgModule({
     declarations: [
@@ -111,6 +112,7 @@ export class MetadataConfigurationModule {
                 MetadataHistoryEffects,
                 CompareVersionEffects,
                 RestoreEffects,
+                FilterCompareVersionEffects,
                 VersionEffects
             ])
     ],
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
index fd990d79e..b8795788f 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -25,7 +25,20 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
     <metadata-configuration
         [configuration]="versions$ | async"
         [editable]="false"></metadata-configuration>
-    <filter-version-list class="d-block p-2"></filter-version-list>
+    
+    <div class="numbered-header d-flex justify-content-start bg-light align-items-center py-1">
+        <h2 class="title h4 m-0 flex-grow-1">
+            <span class="text ml-2" translate="label.metadata-filters">Metadata Filters</span>
+        </h2>
+    </div>
+    <ng-container>
+        <filter-version-list
+            class="d-block p-2"
+            [filters]="filters$ | async"
+            (compare)="compareFilters($event)">
+        </filter-version-list>
+    </ng-container>
+    
 </div>
 <div *ngIf="loading$ | async" class="d-flex justify-content-center">
     <i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
index 78fc1bcf6..ba10aa145 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
@@ -1,13 +1,14 @@
 import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
-import { Observable, BehaviorSubject, Subscription, combineLatest } from 'rxjs';
+import { Observable, BehaviorSubject, Subscription } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { ActivatedRoute } from '@angular/router';
 import { map, withLatestFrom } from 'rxjs/operators';
 import { ConfigurationState, getComparisonConfigurationCount } from '../reducer';
 import { CompareVersionRequest, ClearVersions, ViewChanged } from '../action/compare.action';
-import { MetadataConfiguration } from '../model/metadata-configuration';
+import { MetadataConfiguration, FilterConfiguration } from '../model/metadata-configuration';
 import * as fromReducer from '../reducer';
-
+import { CompareFilterVersions } from '../action/filter.action';
+import { FilterComparison } from '../model/compare';
 
 @Component({
     selector: 'metadata-comparison',
@@ -25,7 +26,8 @@ export class MetadataComparisonComponent implements OnDestroy {
     loading$: Observable<boolean> = this.store.select(fromReducer.getComparisonLoading);
     limited$: Observable<boolean> = this.store.select(fromReducer.getViewChangedOnly);
     sub: Subscription;
-
+    filters$: Observable<FilterConfiguration> = this.store.select(fromReducer.getComparisonFilterConfiguration);
+    filterCompare$: Observable<MetadataConfiguration> = this.store.select(fromReducer.getLimitedFilterComparisonConfiguration);
 
     constructor(
         private store: Store<ConfigurationState>,
@@ -45,6 +47,12 @@ export class MetadataComparisonComponent implements OnDestroy {
             withLatestFrom(this.limited$),
             map(([compare, limit]) => new ViewChanged(!limit))
         ).subscribe(this.store);
+
+        this.filterCompare$.subscribe(console.log);
+    }
+
+    compareFilters (comparison: FilterComparison) {
+        this.store.dispatch(new CompareFilterVersions(comparison));
     }
 
     ngOnDestroy(): void {
diff --git a/ui/src/app/metadata/configuration/effect/filter.effect.ts b/ui/src/app/metadata/configuration/effect/filter.effect.ts
new file mode 100644
index 000000000..215ac755e
--- /dev/null
+++ b/ui/src/app/metadata/configuration/effect/filter.effect.ts
@@ -0,0 +1,63 @@
+import { Injectable } from '@angular/core';
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import {
+    LoadFilterSchemaRequest,
+    CompareFilterVersions,
+    SetFilterComparisonDefinition,
+    LoadFilterSchemaSuccess,
+    LoadFilterSchemaError,
+    SetFilterComparisonSchema
+} from '../action/filter.action';
+import { Store } from '@ngrx/store';
+import { State } from '../reducer';
+import { FilterCompareActionTypes } from '../action/filter.action';
+import { MetadataConfigurationService } from '../service/configuration.service';
+import { switchMap, map, catchError } from 'rxjs/operators';
+import { of } from 'rxjs';
+
+@Injectable()
+export class FilterCompareVersionEffects {
+
+    @Effect()
+    setDefinition$ = this.actions$.pipe(
+        ofType<CompareFilterVersions>(FilterCompareActionTypes.COMPARE_FILTERS),
+        map(action => action.payload),
+        map(comparison => {
+            const def = this.configService.getDefinition(comparison.modelType);
+            return new SetFilterComparisonDefinition(def);
+        })
+    );
+
+    @Effect()
+    loadSchemaOnDefinitionSet$ = this.actions$.pipe(
+        ofType<SetFilterComparisonDefinition>(FilterCompareActionTypes.SET_DEFINITION),
+        map(action => action.payload),
+        map(def => new LoadFilterSchemaRequest(def.schema))
+    );
+
+    @Effect()
+    loadSchemaData$ = this.actions$.pipe(
+        ofType<LoadFilterSchemaRequest>(FilterCompareActionTypes.LOAD_SCHEMA_REQUEST),
+        switchMap(action =>
+            this.configService
+                .loadSchema(action.payload)
+                .pipe(
+                    map(schema => new LoadFilterSchemaSuccess(schema)),
+                    catchError(error => of(new LoadFilterSchemaError(error)))
+                )
+        )
+    );
+
+    @Effect()
+    loadSchemaSuccess$ = this.actions$.pipe(
+        ofType<LoadFilterSchemaSuccess>(FilterCompareActionTypes.LOAD_SCHEMA_SUCCESS),
+        map(action => action.payload),
+        map(schema => new SetFilterComparisonSchema(schema))
+    );
+
+    constructor(
+        private configService: MetadataConfigurationService,
+        private store: Store<State>,
+        private actions$: Actions
+    ) {}
+}
diff --git a/ui/src/app/metadata/configuration/model/compare.ts b/ui/src/app/metadata/configuration/model/compare.ts
new file mode 100644
index 000000000..3e423ec99
--- /dev/null
+++ b/ui/src/app/metadata/configuration/model/compare.ts
@@ -0,0 +1,7 @@
+import { Metadata } from '../../domain/domain.type';
+
+export interface FilterComparison {
+    modelId: string;
+    modelType: string;
+    models: Metadata[];
+}
diff --git a/ui/src/app/metadata/configuration/model/metadata-configuration.ts b/ui/src/app/metadata/configuration/model/metadata-configuration.ts
index 4a4114642..10cf85eed 100644
--- a/ui/src/app/metadata/configuration/model/metadata-configuration.ts
+++ b/ui/src/app/metadata/configuration/model/metadata-configuration.ts
@@ -7,6 +7,6 @@ export interface MetadataConfiguration {
 }
 
 export interface FilterConfiguration {
-    dates: ['2019-08-08T08:40:32.015', '2019-08-08T08:40:19.266'];
+    dates: string[];
     filters: FilterVersion[];
 }
diff --git a/ui/src/app/metadata/configuration/reducer/compare.reducer.ts b/ui/src/app/metadata/configuration/reducer/compare.reducer.ts
index 84eec1558..ea0ef1598 100644
--- a/ui/src/app/metadata/configuration/reducer/compare.reducer.ts
+++ b/ui/src/app/metadata/configuration/reducer/compare.reducer.ts
@@ -6,13 +6,15 @@ export interface State {
     loaded: boolean;
     loading: boolean;
     compareChangedOnly: boolean;
+    filter: string;
 }
 
 export const initialState: State = {
     models: [],
     loaded: false,
     loading: false,
-    compareChangedOnly: false
+    compareChangedOnly: false,
+    filter: null
 };
 
 export function reducer(state = initialState, action: CompareActionsUnion): State {
@@ -53,3 +55,4 @@ export const getVersionModels = (state: State) => state.models;
 export const getVersionModelsLoaded = (state: State) => state.loaded;
 export const getComparisonLoading = (state: State) => state.loading;
 export const getViewChangedOnly = (state: State) => state.compareChangedOnly;
+export const getFilterId = (state: State) => state.filter;
diff --git a/ui/src/app/metadata/configuration/reducer/filter.reducer.ts b/ui/src/app/metadata/configuration/reducer/filter.reducer.ts
new file mode 100644
index 000000000..4aa230bde
--- /dev/null
+++ b/ui/src/app/metadata/configuration/reducer/filter.reducer.ts
@@ -0,0 +1,56 @@
+import { FilterCompareActionTypes, FilterCompareActionsUnion } from '../action/filter.action';
+import { Metadata } from '../../domain/domain.type';
+import { FormDefinition } from '../../../wizard/model';
+import { Schema } from '../model/schema';
+
+export interface State {
+    models: Metadata[];
+    modelType: string;
+    modelId: string;
+    schema: Schema;
+    definition: FormDefinition<Metadata>;
+    loading: boolean;
+}
+
+export const initialState: State = {
+    models: null,
+    modelType: null,
+    modelId: null,
+    schema: null,
+    definition: null,
+    loading: false
+};
+
+export function reducer(state = initialState, action: FilterCompareActionsUnion): State {
+    switch (action.type) {
+        case FilterCompareActionTypes.SET_SCHEMA:
+            return {
+                ...state,
+                schema: action.payload
+            };
+        case FilterCompareActionTypes.SET_DEFINITION:
+            return {
+                ...state,
+                definition: action.payload
+            };
+        case FilterCompareActionTypes.COMPARE_FILTERS:
+            return {
+                ...state,
+                ...action.payload
+            };
+        case FilterCompareActionTypes.CLEAR:
+            return {
+                ...initialState
+            };
+        default: {
+            return state;
+        }
+    }
+}
+
+export const getModels = (state: State) => state.models;
+export const getModelType = (state: State) => state.modelType;
+export const getModelId = (state: State) => state.modelId;
+export const getDefinition = (state: State) => state.definition;
+export const getSchema = (state: State) => state.schema;
+export const getLoading = (state: State) => state.loading;
diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
index 38087a034..285192aff 100644
--- a/ui/src/app/metadata/configuration/reducer/index.ts
+++ b/ui/src/app/metadata/configuration/reducer/index.ts
@@ -6,6 +6,7 @@ import * as fromHistory from './history.reducer';
 import * as fromCompare from './compare.reducer';
 import * as fromVersion from './version.reducer';
 import * as fromRestore from './restore.reducer';
+import * as fromFilter from './filter.reducer';
 import { WizardStep } from '../../../wizard/model';
 
 import * as utils from '../../domain/utility/configuration';
@@ -24,6 +25,7 @@ export interface ConfigurationState {
     compare: fromCompare.State;
     version: fromVersion.State;
     restore: fromRestore.RestoreState;
+    filter: fromFilter.State;
 }
 
 export const reducers = {
@@ -31,7 +33,8 @@ export const reducers = {
     history: fromHistory.reducer,
     compare: fromCompare.reducer,
     version: fromVersion.reducer,
-    restore: fromRestore.reducer
+    restore: fromRestore.reducer,
+    filter: fromFilter.reducer
 };
 
 export interface State extends fromRoot.State {
@@ -45,6 +48,7 @@ export const getHistoryStateFn = (state: ConfigurationState) => state.history;
 export const getCompareStateFn = (state: ConfigurationState) => state.compare;
 export const getVersionStateFn = (state: ConfigurationState) => state.version;
 export const getRestoreStateFn = (state: ConfigurationState) => state.restore;
+export const getFilterStateFn = (state: ConfigurationState) => state.filter;
 
 export const getConfigurationState = createSelector(getState, getConfigurationStateFn);
 export const getConfigurationModelKind = createSelector(getConfigurationState, fromConfiguration.getModelKind);
@@ -145,6 +149,14 @@ export const getConfigurationModelNameFn =
 export const getConfigurationModelTypeFn =
     (config: Metadata) => config ? ('@type' in config) ? config['@type'] : 'resolver' : null;
 
+export const filterPluginTypes = ['RequiredValidUntil', 'SignatureValidation', 'EntityRoleWhiteList'];
+export const isAdditionalFilter = (type) => filterPluginTypes.indexOf(type) === -1;
+
+export const getVersionModelFiltersFn =
+    (model, kind) => kind === 'provider' ?
+        model.metadataFilters.filter(filter => isAdditionalFilter(filter['@type'])) :
+        null;
+
 // Version History
 
 export const getHistoryState = createSelector(getState, getHistoryStateFn);
@@ -172,12 +184,14 @@ export const getSelectedIsCurrent = createSelector(
     getSelectedIsCurrentFn
 );
 
+
 // Version Comparison
 
 export const getCompareState = createSelector(getState, getCompareStateFn);
 export const getComparisonLoading = createSelector(getCompareState, fromCompare.getComparisonLoading);
 export const getComparisonModels = createSelector(getCompareState, fromCompare.getVersionModels);
 export const getComparisonModelsLoaded = createSelector(getCompareState, fromCompare.getVersionModelsLoaded);
+export const getComparisonFilterId = createSelector(getCompareState, fromCompare.getFilterId);
 export const getComparisonConfigurations = createSelector(
     getComparisonModels,
     getConfigurationDefinition,
@@ -224,17 +238,58 @@ export const getLimitedComparisonConfigurations = createSelector(
     getLimitedConfigurationsFn
 );
 
-// Version Restoration
+export const getComparisonFilterListFn = (models) => models.map(m => getVersionModelFiltersFn(m, 'provider'));
+export const getComparisonFilterList = createSelector(getComparisonModels, getComparisonFilterListFn);
+
+export const getComparisonDatesFn = (config) => config.map(m => m ? m.modifiedDate : null);
+export const getComparisonDates = createSelector(getComparisonModels, getComparisonDatesFn);
+
+export const getComparisonFilterOrderedFn = (list) =>
+    list.map(models =>
+        models.map(filter =>
+            ({
+                ...filter,
+                comparable: list
+                    .reduce((acc, v) => acc.concat(v), [])
+                    .map(v => v.resourceId)
+                    .some((id, index, coll) => {
+                        return coll.indexOf(filter.resourceId) !== coll.lastIndexOf(filter.resourceId);
+                    })
+            })
+));
+
+export const getComparisonFilterOrdered = createSelector(getComparisonFilterList, getComparisonFilterOrderedFn);
+
+export const getComparisonFilterConfiguration = createSelector(
+    getComparisonFilterOrdered,
+    getComparisonDates,
+    (filters, dates) => {
+        const rows = filters.reduce((num, version) => version.length > num ? version.length : num, 0);
+        const range = [...Array(rows).keys()];
+        return {
+            dates,
+            filters: range.reduce((collection, index) => {
+                const val = filters.map(version => version[index]);
+                collection[index] = val;
+                return collection;
+            }, [])
+        };
+    }
+);
 
-export const getRestoreState = createSelector(getState, getRestoreStateFn);
+export const getComparisonSelectedFilters = createSelector(
+    getComparisonModels,
+    getComparisonDates,
+    getComparisonFilterId,
+    (models, dates, id) => ({
+        dates,
+        sections: []
+    })
+);
 
-export const filterPluginTypes = ['RequiredValidUntil', 'SignatureValidation', 'EntityRoleWhiteList'];
-export const isAdditionalFilter = (type) => filterPluginTypes.indexOf(type) === -1;
+// Version Restoration
 
-export const getVersionModelFiltersFn =
-    (model, kind) => kind === 'provider' ?
-    model.metadataFilters.filter(filter => isAdditionalFilter(filter['@type'])) :
-    null;
+export const getRestoreState = createSelector(getState, getRestoreStateFn);
 
 export const getVersionState = createSelector(getState, getVersionStateFn);
 
@@ -295,6 +350,25 @@ export const getRestorationModel = createSelector(
     })
 );
 
+// Filter Comparison State
+
+export const getFilterState = createSelector(getState, getFilterStateFn);
+export const getFilterComparisonDefinition = createSelector(getFilterState, fromFilter.getDefinition);
+export const getFilterComparisonSchema = createSelector(getFilterState, fromFilter.getSchema);
+export const getFilterComparisonModels = createSelector(getFilterState, fromFilter.getModels);
+export const getFilterComparisonConfigurations = createSelector(
+    getFilterComparisonModels,
+    getFilterComparisonDefinition,
+    getFilterComparisonSchema,
+    getConfigurationSectionsFn
+);
+
+export const getLimitedFilterComparisonConfiguration = createSelector(
+    getFilterComparisonConfigurations,
+    getViewChangedOnly,
+    getLimitedConfigurationsFn
+);
+
 // Mixed states
 
 export const getConfigurationModelFn = (kind, version, provider, resolver) => {

From 0799a9abfd852d5ce76ef75920e97ee35f6eebdc Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 19 Sep 2019 08:51:51 -0700
Subject: [PATCH 6/9] SHIBUI-1364 Implemented toggle to view filter changes

---
 .../container/metadata-comparison.component.html | 16 ++++++++++++++--
 .../container/metadata-comparison.component.ts   |  9 ++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
index b8795788f..effbefb0a 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -28,16 +28,28 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
     
     <div class="numbered-header d-flex justify-content-start bg-light align-items-center py-1">
         <h2 class="title h4 m-0 flex-grow-1">
-            <span class="text ml-2" translate="label.metadata-filters">Metadata Filters</span>
+            <span class="text ml-2" translate="label.metadata-filter">Metadata Filter</span>
         </h2>
     </div>
-    <ng-container>
+    <ng-container *ngIf="!(filterCompare$ | async)">
         <filter-version-list
             class="d-block p-2"
             [filters]="filters$ | async"
             (compare)="compareFilters($event)">
         </filter-version-list>
     </ng-container>
+    <ng-container *ngIf="(filterCompare$ | async)">
+        <br />
+        <metadata-configuration
+            [configuration]="filterCompare$ | async"
+            [editable]="false"></metadata-configuration>
+        <div class="d-flex justify-content-end my-2">
+            <button class="btn btn-success" (click)="resetCompareFilters()">
+                <i class="fa fa-arrow-left" aria-hidden="true"></i>&nbsp;
+                <translate-i18n key="label.filter-versions">Filter Versions</translate-i18n>
+            </button>
+        </div>
+    </ng-container>
     
 </div>
 <div *ngIf="loading$ | async" class="d-flex justify-content-center">
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
index ba10aa145..e8a905b0d 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
@@ -7,7 +7,7 @@ import { ConfigurationState, getComparisonConfigurationCount } from '../reducer'
 import { CompareVersionRequest, ClearVersions, ViewChanged } from '../action/compare.action';
 import { MetadataConfiguration, FilterConfiguration } from '../model/metadata-configuration';
 import * as fromReducer from '../reducer';
-import { CompareFilterVersions } from '../action/filter.action';
+import { CompareFilterVersions, ClearFilterComparison } from '../action/filter.action';
 import { FilterComparison } from '../model/compare';
 
 @Component({
@@ -47,16 +47,19 @@ export class MetadataComparisonComponent implements OnDestroy {
             withLatestFrom(this.limited$),
             map(([compare, limit]) => new ViewChanged(!limit))
         ).subscribe(this.store);
-
-        this.filterCompare$.subscribe(console.log);
     }
 
     compareFilters (comparison: FilterComparison) {
         this.store.dispatch(new CompareFilterVersions(comparison));
     }
 
+    resetCompareFilters () {
+        this.store.dispatch(new ClearFilterComparison());
+    }
+
     ngOnDestroy(): void {
         this.sub.unsubscribe();
         this.store.dispatch(new ClearVersions());
+        this.resetCompareFilters();
     }
 }

From 9432f2c22b8ee31c9db77ee1a41bf6f33fe03a15 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 19 Sep 2019 10:05:46 -0700
Subject: [PATCH 7/9] SHIBUI-1364 Tests for filter version list

---
 .../filter-version-list.component.spec.ts     | 85 +++++++++++++++++
 .../metadata/configuration/model/version.ts   |  2 +-
 .../reducer/filter.reducer.spec.ts            | 93 +++++++++++++++++++
 3 files changed, 179 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/app/metadata/configuration/component/filter-version-list.component.spec.ts
 create mode 100644 ui/src/app/metadata/configuration/reducer/filter.reducer.spec.ts

diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.spec.ts b/ui/src/app/metadata/configuration/component/filter-version-list.component.spec.ts
new file mode 100644
index 000000000..8cb39402d
--- /dev/null
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.spec.ts
@@ -0,0 +1,85 @@
+import { Component, ViewChild } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { MockI18nModule } from '../../../../testing/i18n.stub';
+import { FilterVersionListComponent } from './filter-version-list.component';
+import { FilterComparison } from '../model/compare';
+import { FilterConfiguration } from '../model/metadata-configuration';
+
+export const TestData = {
+    dates: ['abc', '123'],
+    filters: [
+        {
+            resourceId: 'foo',
+            name: 'Test 1',
+            type: 'EntityAttributesFilter',
+            comparable: false
+        },
+        {
+            resourceId: 'bar',
+            name: 'Test 2',
+            type: 'EntityAttributesFilter',
+            comparable: false
+        }
+    ]
+};
+
+@Component({
+    template: `
+    <filter-version-list
+        [filters]="filters"
+        (compare)="compare($event)">
+    </filter-version-list>
+    `
+})
+class TestHostComponent {
+    @ViewChild(FilterVersionListComponent)
+    public componentUnderTest: FilterVersionListComponent;
+
+    filters: FilterConfiguration = TestData;
+
+    compare(versions: FilterComparison): void { }
+}
+
+describe('Filter Version List Component', () => {
+    let fixture: ComponentFixture<TestHostComponent>;
+    let instance: TestHostComponent;
+    let list: FilterVersionListComponent;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [],
+            imports: [
+                MockI18nModule,
+                RouterTestingModule
+            ],
+            declarations: [
+                FilterVersionListComponent,
+                TestHostComponent
+            ],
+        });
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        instance = fixture.componentInstance;
+        list = instance.componentUnderTest;
+        fixture.detectChanges();
+    });
+
+    it('should compile', () => {
+        expect(list).toBeDefined();
+    });
+
+    /*
+    describe('compareSelected', () => {
+        it('should emit an event with the selected filter data', () => {
+            list.selected = 'foo';
+            fixture.detectChanges();
+            spyOn(instance, 'compare');
+            list.compareSelected();
+            fixture.detectChanges();
+            expect(instance.compare).toHaveBeenCalled();
+        });
+    });
+    */
+});
diff --git a/ui/src/app/metadata/configuration/model/version.ts b/ui/src/app/metadata/configuration/model/version.ts
index 5d1e1dac5..bba3c7ced 100644
--- a/ui/src/app/metadata/configuration/model/version.ts
+++ b/ui/src/app/metadata/configuration/model/version.ts
@@ -5,7 +5,7 @@ export interface MetadataVersion {
 }
 
 export interface FilterVersion {
-    id: string;
+    resourceId: string;
     name: string;
     type: string;
     comparable: boolean;
diff --git a/ui/src/app/metadata/configuration/reducer/filter.reducer.spec.ts b/ui/src/app/metadata/configuration/reducer/filter.reducer.spec.ts
new file mode 100644
index 000000000..228c705f1
--- /dev/null
+++ b/ui/src/app/metadata/configuration/reducer/filter.reducer.spec.ts
@@ -0,0 +1,93 @@
+import { reducer } from './filter.reducer';
+import * as fromFilterCompare from './filter.reducer';
+import {
+    SetFilterComparisonSchema,
+    ClearFilterComparison,
+    SetFilterComparisonDefinition,
+    CompareFilterVersions
+} from '../action/filter.action';
+import { NameIDFilterConfiguration } from '../../filter/model/nameid-configuration.filter';
+import { Metadata } from '../../domain/domain.type';
+
+describe('Filter Comparison Reducer', () => {
+    const initialState: fromFilterCompare.State = { ...fromFilterCompare.initialState };
+
+    describe('undefined action', () => {
+        it('should return the default state', () => {
+            const result = reducer(undefined, {} as any);
+
+            expect(result).toEqual(initialState);
+        });
+    });
+
+    describe('SET_SCHEMA action', () => {
+        it('should add the provided schema to the state', () => {
+            const schema = {type: 'object', properties: { foo: { type: 'string' } }};
+            const action = new SetFilterComparisonSchema(schema);
+            const result = reducer(initialState, action);
+            expect(result.schema).toEqual(schema);
+        });
+    });
+
+    describe('SET_DEFINITION action', () => {
+        it('should add the provided definition to the state', () => {
+            const definition = NameIDFilterConfiguration;
+            const action = new SetFilterComparisonDefinition(definition);
+            const result = reducer(initialState, action);
+            expect(result.definition).toEqual(definition);
+        });
+    });
+
+    describe('COMPARE_FILTERS action', () => {
+        it('should add model information to the state', () => {
+            const request = {
+                modelId: 'foo',
+                modelType: 'EntityAttributesFilter',
+                models: [{}, {}] as Metadata[]
+            };
+            const action = new CompareFilterVersions(request);
+            const result = reducer(initialState, action);
+            expect(result.modelId).toEqual(request.modelId);
+            expect(result.modelType).toEqual(request.modelType);
+            expect(result.models).toEqual(request.models);
+        });
+    });
+
+    describe('CLEAR action', () => {
+        it('should reset to the initial state', () => {
+            const action = new ClearFilterComparison();
+            const result = reducer(initialState, action);
+            expect(result).toEqual(initialState);
+        });
+    });
+
+    describe('selector functions', () => {
+        describe('getModel', () => {
+            it('should retrieve the model from state', () => {
+                const models = [{}, {}] as Metadata[];
+                expect(fromFilterCompare.getModelId({ ...initialState, modelId: 'foo' })).toBe('foo');
+                expect(fromFilterCompare.getModelType({ ...initialState, modelType: 'foo' })).toBe('foo');
+                expect(fromFilterCompare.getModels({ ...initialState, models })).toBe(models);
+            });
+        });
+        describe('getLoading', () => {
+            it('should retrieve the loading state', () => {
+                expect(fromFilterCompare.getLoading({ ...initialState, loading: true })).toBe(true);
+            });
+        });
+
+        describe('getSchema', () => {
+            it('should retrieve the schema from state', () => {
+                const schema = {};
+                expect(fromFilterCompare.getSchema({ ...initialState, schema })).toBe(schema);
+            });
+        });
+
+        describe('getDefinition', () => {
+            it('should retrieve the definition from state', () => {
+                const definition = NameIDFilterConfiguration;
+                expect(fromFilterCompare.getDefinition({ ...initialState, definition })).toBe(NameIDFilterConfiguration);
+            });
+        });
+    });
+});

From 40e74e49772bc3ea9c0675127591d56a27f4bf41 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Fri, 20 Sep 2019 09:49:24 -0700
Subject: [PATCH 8/9] Added popover to long fields

---
 .../component/property/primitive-property.component.html    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/metadata/configuration/component/property/primitive-property.component.html b/ui/src/app/metadata/configuration/component/property/primitive-property.component.html
index 5e582350d..58e114311 100644
--- a/ui/src/app/metadata/configuration/component/property/primitive-property.component.html
+++ b/ui/src/app/metadata/configuration/component/property/primitive-property.component.html
@@ -8,8 +8,12 @@
         [translate]="property.name"
         [ngStyle]="{'width': width}">{{ property.name }}</span>
     <span *ngFor="let v of property.value"
-        class="d-block"
+        class="d-block text-truncate"
         role="definition"
+        [ngbPopover]="v"
+        [openDelay]="500"
+        triggers="mouseenter:mouseleave"
+        popoverClass="popover popover-info"
         [ngStyle]="{'width': width}">{{ v ? v : (v === false) ? v : '-' }}</span>
 </div>
 </div>
\ No newline at end of file

From 7f8f64778499d7f567cd4506318aefc8d44ed189 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Mon, 23 Sep 2019 14:12:13 -0700
Subject: [PATCH 9/9] SHIBUI-1364 Implemented filter comparison

---
 .../main/resources/i18n/messages.properties   |  1 +
 .../filter-version-list.component.html        |  2 +-
 .../filter-version-list.component.spec.ts     | 43 ++++++++-----------
 .../filter-version-list.component.ts          |  4 +-
 .../primitive-property.component.spec.ts      |  3 +-
 .../metadata/configuration/model/compare.ts   |  3 +-
 .../model/metadata-configuration.ts           |  2 +-
 .../reducer/filter.reducer.spec.ts            |  6 +--
 .../configuration/reducer/filter.reducer.ts   |  5 ++-
 9 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
index ff6eb36d2..87b0e707d 100644
--- a/backend/src/main/resources/i18n/messages.properties
+++ b/backend/src/main/resources/i18n/messages.properties
@@ -280,6 +280,7 @@ label.filter-enable=Enable this Filter?
 label.search-criteria=Search Criteria
 label.metadata-filter=Metadata Filter
 label.metadata-filter-type=Metadata Filter Type
+label.filter-versions=Filter Versions
 
 label.http-connection-attributes=HTTP Connection Attributes
 label.http-security-attributes=HTTP Security Attributes
diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.html b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
index e9efacb1e..0ca03398d 100644
--- a/ui/src/app/metadata/configuration/component/filter-version-list.component.html
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="filters.dates.length > 0">
+<ng-container *ngIf="filters && filters.dates.length > 0">
     <div class="d-flex border-bottom border-light border-2 py-2">
         <span [ngStyle]="{'width.%': width}" *ngIf="!comparing">Order</span>
         <span [ngStyle]="{'width.%': width}" *ngIf="comparing">Option</span>
diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.spec.ts b/ui/src/app/metadata/configuration/component/filter-version-list.component.spec.ts
index 8cb39402d..c555ea9fc 100644
--- a/ui/src/app/metadata/configuration/component/filter-version-list.component.spec.ts
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.spec.ts
@@ -7,37 +7,34 @@ import { FilterVersionListComponent } from './filter-version-list.component';
 import { FilterComparison } from '../model/compare';
 import { FilterConfiguration } from '../model/metadata-configuration';
 
-export const TestData = {
-    dates: ['abc', '123'],
+export const TestData: FilterConfiguration = {
+    dates: ['2019-09-23T20:54:31.081Z', '2019-10-23T20:54:31.081Z'],
     filters: [
-        {
-            resourceId: 'foo',
-            name: 'Test 1',
-            type: 'EntityAttributesFilter',
-            comparable: false
-        },
-        {
-            resourceId: 'bar',
-            name: 'Test 2',
-            type: 'EntityAttributesFilter',
-            comparable: false
-        }
+        [
+            {
+                resourceId: 'foo',
+                name: 'Test 1',
+                type: 'EntityAttributesFilter',
+                comparable: false
+            },
+            {
+                resourceId: 'bar',
+                name: 'Test 2',
+                type: 'EntityAttributesFilter',
+                comparable: false
+            }
+        ]
     ]
 };
 
 @Component({
-    template: `
-    <filter-version-list
-        [filters]="filters"
-        (compare)="compare($event)">
-    </filter-version-list>
-    `
+    template: `<filter-version-list [filters]="filters" (compare)="compare($event)"></filter-version-list>`
 })
 class TestHostComponent {
     @ViewChild(FilterVersionListComponent)
     public componentUnderTest: FilterVersionListComponent;
 
-    filters: FilterConfiguration = TestData;
+    filters = TestData;
 
     compare(versions: FilterComparison): void { }
 }
@@ -70,16 +67,14 @@ describe('Filter Version List Component', () => {
         expect(list).toBeDefined();
     });
 
-    /*
     describe('compareSelected', () => {
         it('should emit an event with the selected filter data', () => {
+            spyOn(instance, 'compare');
             list.selected = 'foo';
             fixture.detectChanges();
-            spyOn(instance, 'compare');
             list.compareSelected();
             fixture.detectChanges();
             expect(instance.compare).toHaveBeenCalled();
         });
     });
-    */
 });
diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
index 7f0d9e445..2d2865d00 100644
--- a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { FilterConfiguration, MetadataConfiguration } from '../model/metadata-configuration';
 import { CONFIG_DATE_FORMAT } from '../configuration.values';
-import { Observable, Subject } from 'rxjs';
+import { Observable } from 'rxjs';
 import { FilterComparison } from '../model/compare';
 
 @Component({
@@ -10,8 +10,6 @@ import { FilterComparison } from '../model/compare';
 })
 export class FilterVersionListComponent {
 
-    private selectFiltersSubject: Subject<string> = new Subject();
-
     @Input() filters: FilterConfiguration;
     @Output() compare: EventEmitter<FilterComparison> = new EventEmitter();
 
diff --git a/ui/src/app/metadata/configuration/component/property/primitive-property.component.spec.ts b/ui/src/app/metadata/configuration/component/property/primitive-property.component.spec.ts
index dbc3eed4f..bf893396e 100644
--- a/ui/src/app/metadata/configuration/component/property/primitive-property.component.spec.ts
+++ b/ui/src/app/metadata/configuration/component/property/primitive-property.component.spec.ts
@@ -2,7 +2,7 @@ import { Component, ViewChild, Input } from '@angular/core';
 import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdownModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { Property } from '../../../domain/model/property';
 import { MockI18nModule } from '../../../../../testing/i18n.stub';
 import { PrimitivePropertyComponent } from './primitive-property.component';
@@ -39,6 +39,7 @@ describe('Primitive Property Component', () => {
         TestBed.configureTestingModule({
             imports: [
                 NgbDropdownModule,
+                NgbPopoverModule,
                 MockI18nModule,
                 RouterTestingModule
             ],
diff --git a/ui/src/app/metadata/configuration/model/compare.ts b/ui/src/app/metadata/configuration/model/compare.ts
index 3e423ec99..28038806a 100644
--- a/ui/src/app/metadata/configuration/model/compare.ts
+++ b/ui/src/app/metadata/configuration/model/compare.ts
@@ -1,7 +1,8 @@
 import { Metadata } from '../../domain/domain.type';
+import { FilterVersion } from './version';
 
 export interface FilterComparison {
     modelId: string;
     modelType: string;
-    models: Metadata[];
+    models: FilterVersion[];
 }
diff --git a/ui/src/app/metadata/configuration/model/metadata-configuration.ts b/ui/src/app/metadata/configuration/model/metadata-configuration.ts
index 10cf85eed..57316cdde 100644
--- a/ui/src/app/metadata/configuration/model/metadata-configuration.ts
+++ b/ui/src/app/metadata/configuration/model/metadata-configuration.ts
@@ -8,5 +8,5 @@ export interface MetadataConfiguration {
 
 export interface FilterConfiguration {
     dates: string[];
-    filters: FilterVersion[];
+    filters: FilterVersion[][];
 }
diff --git a/ui/src/app/metadata/configuration/reducer/filter.reducer.spec.ts b/ui/src/app/metadata/configuration/reducer/filter.reducer.spec.ts
index 228c705f1..ed9685cac 100644
--- a/ui/src/app/metadata/configuration/reducer/filter.reducer.spec.ts
+++ b/ui/src/app/metadata/configuration/reducer/filter.reducer.spec.ts
@@ -7,7 +7,7 @@ import {
     CompareFilterVersions
 } from '../action/filter.action';
 import { NameIDFilterConfiguration } from '../../filter/model/nameid-configuration.filter';
-import { Metadata } from '../../domain/domain.type';
+import { FilterVersion } from '../model/version';
 
 describe('Filter Comparison Reducer', () => {
     const initialState: fromFilterCompare.State = { ...fromFilterCompare.initialState };
@@ -43,7 +43,7 @@ describe('Filter Comparison Reducer', () => {
             const request = {
                 modelId: 'foo',
                 modelType: 'EntityAttributesFilter',
-                models: [{}, {}] as Metadata[]
+                models: [{}, {}] as FilterVersion[]
             };
             const action = new CompareFilterVersions(request);
             const result = reducer(initialState, action);
@@ -64,7 +64,7 @@ describe('Filter Comparison Reducer', () => {
     describe('selector functions', () => {
         describe('getModel', () => {
             it('should retrieve the model from state', () => {
-                const models = [{}, {}] as Metadata[];
+                const models = [{}, {}] as FilterVersion[];
                 expect(fromFilterCompare.getModelId({ ...initialState, modelId: 'foo' })).toBe('foo');
                 expect(fromFilterCompare.getModelType({ ...initialState, modelType: 'foo' })).toBe('foo');
                 expect(fromFilterCompare.getModels({ ...initialState, models })).toBe(models);
diff --git a/ui/src/app/metadata/configuration/reducer/filter.reducer.ts b/ui/src/app/metadata/configuration/reducer/filter.reducer.ts
index 4aa230bde..445038ab8 100644
--- a/ui/src/app/metadata/configuration/reducer/filter.reducer.ts
+++ b/ui/src/app/metadata/configuration/reducer/filter.reducer.ts
@@ -2,13 +2,14 @@ import { FilterCompareActionTypes, FilterCompareActionsUnion } from '../action/f
 import { Metadata } from '../../domain/domain.type';
 import { FormDefinition } from '../../../wizard/model';
 import { Schema } from '../model/schema';
+import { FilterVersion } from '../model/version';
 
 export interface State {
-    models: Metadata[];
+    models: FilterVersion[];
     modelType: string;
     modelId: string;
     schema: Schema;
-    definition: FormDefinition<Metadata>;
+    definition: FormDefinition<FilterVersion>;
     loading: boolean;
 }