From e42c9d2dffba263a06eca050fd623af6f9a43e89 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 29 Apr 2021 15:22:33 -0700
Subject: [PATCH] Implemented version view

---
 ui/package.json                               |   2 +
 ui/src/app/App.js                             |  29 ++---
 ui/src/app/core/components/FormattedDate.js   |   4 +-
 ui/src/app/dashboard/container/ActionsTab.js  |  42 -------
 ui/src/app/dashboard/container/AdminTab.js    |  51 --------
 ui/src/app/dashboard/container/Dashboard.js   | 108 -----------------
 ui/src/app/dashboard/container/Dashboard.scss |   2 -
 .../app/dashboard/container/ProvidersTab.js   |  62 ----------
 ui/src/app/dashboard/container/SourcesTab.js  |  46 --------
 ui/src/app/metadata/Metadata.js               |  18 ++-
 .../component/MetadataConfiguration.js        |  36 +++---
 .../app/metadata/component/MetadataHistory.js |  85 --------------
 .../app/metadata/component/MetadataOptions.js | 109 ------------------
 ui/src/app/metadata/component/MetadataXml.js  |  45 --------
 .../component/properties/PropertyValue.js     |   2 +-
 .../MetadataFilterConfigurationList.js        |   3 +-
 .../MetadataFilterConfigurationListItem.js    |   4 +-
 .../filter/component/MetadataFilters.js       |  14 ++-
 .../domain/provider/component/ProviderList.js |  12 +-
 ui/src/app/metadata/hooks/configuration.js    |  21 +++-
 ui/yarn.lock                                  |  37 ++++++
 21 files changed, 129 insertions(+), 603 deletions(-)
 delete mode 100644 ui/src/app/dashboard/container/ActionsTab.js
 delete mode 100644 ui/src/app/dashboard/container/AdminTab.js
 delete mode 100644 ui/src/app/dashboard/container/Dashboard.js
 delete mode 100644 ui/src/app/dashboard/container/Dashboard.scss
 delete mode 100644 ui/src/app/dashboard/container/ProvidersTab.js
 delete mode 100644 ui/src/app/dashboard/container/SourcesTab.js
 delete mode 100644 ui/src/app/metadata/component/MetadataHistory.js
 delete mode 100644 ui/src/app/metadata/component/MetadataOptions.js
 delete mode 100644 ui/src/app/metadata/component/MetadataXml.js

diff --git a/ui/package.json b/ui/package.json
index eeb591172..2c8a54b12 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -15,6 +15,7 @@
     "http-proxy-middleware": "^1.2.0",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
+    "query-string": "^7.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-infinite-scroll-component": "^6.1.0",
@@ -24,6 +25,7 @@
     "reactstrap": "^8.9.0",
     "sass": "^1.32.11",
     "use-http": "^1.0.20",
+    "use-query-params": "^1.2.2",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
diff --git a/ui/src/app/App.js b/ui/src/app/App.js
index 2e53c4e3d..547f0a45b 100644
--- a/ui/src/app/App.js
+++ b/ui/src/app/App.js
@@ -5,6 +5,7 @@ import {
     Redirect,
     Route
 } from "react-router-dom";
+import { QueryParamProvider } from 'use-query-params';
 import { Provider as HttpProvider } from 'use-http';
 
 import './App.scss';
@@ -12,7 +13,7 @@ import { I18nProvider } from './i18n/context/I18n.provider';
 import Footer from './core/components/Footer';
 import { get_cookie } from './core/utility/get_cookie';
 
-import Dashboard from './dashboard/container/Dashboard';
+import Dashboard from './dashboard/view/Dashboard';
 import Header from './core/components/Header';
 import { UserProvider } from './core/user/UserContext';
 import { Metadata } from './metadata/Metadata';
@@ -38,18 +39,20 @@ function App() {
                     <UserProvider>
                         <I18nProvider>
                             <Router>
-                                <Header />
-                                <main className="pad-content">
-                                    <Switch>
-                                        <Route exact path="/">
-                                            <Redirect to="/dashboard" />
-                                        </Route>
-                                        <Route path="/dashboard" component={Dashboard} />
-                                        <Route path="/metadata/:type/:id" component={Metadata} />
-                                    </Switch>
-                                    <NotificationList />
-                                </main>
-                                <Footer />
+                                <QueryParamProvider ReactRouterRoute={Route}>
+                                    <Header />
+                                    <main className="pad-content">
+                                        <Switch>
+                                            <Route exact path="/">
+                                                <Redirect to="/dashboard" />
+                                            </Route>
+                                            <Route path="/dashboard" component={Dashboard} />
+                                            <Route path="/metadata/:type/:id" component={Metadata} />
+                                        </Switch>
+                                        <NotificationList />
+                                    </main>
+                                    <Footer />
+                                </QueryParamProvider>
                             </Router>
                         </I18nProvider>
                     </UserProvider>
diff --git a/ui/src/app/core/components/FormattedDate.js b/ui/src/app/core/components/FormattedDate.js
index ea01aa1e8..5e84ba7df 100644
--- a/ui/src/app/core/components/FormattedDate.js
+++ b/ui/src/app/core/components/FormattedDate.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import { format } from 'date-fns';
+import { format, parseISO } from 'date-fns';
 
 export default function FormattedDate ({ date, time = false }) {
-    const formatted = React.useMemo(() => format(new Date(date), `MMM Lo, Y${time ? ' HH:mm:ss' : ''}`), [date, time]);
+    const formatted = React.useMemo(() => format(parseISO(date), `MMM d, Y${time ? ' HH:mm:ss' : ''}`), [date, time]);
 
     return (<>{ formatted }</>);
 }
\ No newline at end of file
diff --git a/ui/src/app/dashboard/container/ActionsTab.js b/ui/src/app/dashboard/container/ActionsTab.js
deleted file mode 100644
index 76d1ff592..000000000
--- a/ui/src/app/dashboard/container/ActionsTab.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { SourcesActions } from '../../admin/container/SourcesActions';
-import UserActions from '../../admin/container/UserActions';
-
-import Translate from '../../i18n/components/translate';
-
-export function ActionsTab({ sources, users, reloadSources, reloadUsers }) {
-
-    return (
-        <>
-            <section className="section">
-                <div className="section-body border border-top-0 border-primary">
-                    <div className="section-header bg-primary p-2 text-light">
-                        <div className="row justify-content-between">
-                            <div className="col-12">
-                                <span className="lead"><Translate value="label.enable-metadata-sources">Enable Metadata Sources</Translate></span>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="p-3">
-                        <SourcesActions sources={sources} reloadSources={reloadSources} />
-                    </div>
-                </div>
-            </section>
-            <section className="section">
-                <div className="section-body border border-top-0 border-primary">
-                    <div className="section-header bg-primary p-2 text-light">
-                        <div className="row justify-content-between">
-                            <div className="col-12">
-                                <span className="lead"><Translate value="label.user-access-request">User Access Request</Translate></span>
-                            </div>
-                        </div>
-                    </div>
-                    <UserActions users={users} reloadUsers={reloadUsers} />
-                </div>
-            </section>
-        </>
-
-    );
-}
-
-export default ActionsTab;
\ No newline at end of file
diff --git a/ui/src/app/dashboard/container/AdminTab.js b/ui/src/app/dashboard/container/AdminTab.js
deleted file mode 100644
index a458c810a..000000000
--- a/ui/src/app/dashboard/container/AdminTab.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import useFetch from 'use-http';
-import UserManagement from '../../admin/container/UserManagement';
-import UserMaintenance from '../../admin/component/UserMaintenance';
-import API_BASE_PATH from '../../App.constant';
-
-import Translate from '../../i18n/components/translate';
-
-export function AdminTab () {
-
-    const [users, setUsers] = React.useState([]);
-
-    const { get, response } = useFetch(`${API_BASE_PATH}/admin/users`, {
-        cachePolicy: 'no-cache'
-    }, []);
-
-    async function loadUsers() {
-        const users = await get('')
-        if (response.ok) {
-            setUsers(users);
-        }
-    }
-
-    /*eslint-disable react-hooks/exhaustive-deps*/
-    React.useEffect(() => {
-        loadUsers();
-    }, []);
-
-    
-    return (
-        <section className="section">
-            <div className="section-body border border-top-0 border-primary">
-                <div className="section-header bg-primary p-2 text-light">
-                    <div className="row justify-content-between">
-                        <div className="col-12">
-                            <span className="lead"><Translate value="label.user-maintenance">User Maintenance</Translate></span>
-                        </div>
-                    </div>
-                </div>
-                <div className="p-3">
-                    <UserManagement users={users} reload={loadUsers}>
-                        {(u, roles, onChangeUserRole, onDeleteUser) =>
-                            <UserMaintenance users={ u } roles={roles} onChangeUserRole={onChangeUserRole} onDeleteUser={onDeleteUser} />}
-                    </UserManagement>
-                </div>
-            </div>
-        </section>
-    );
-}
-
-export default AdminTab;
\ No newline at end of file
diff --git a/ui/src/app/dashboard/container/Dashboard.js b/ui/src/app/dashboard/container/Dashboard.js
deleted file mode 100644
index 97b070874..000000000
--- a/ui/src/app/dashboard/container/Dashboard.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-
-import { Nav, NavItem } from 'reactstrap';
-import { Switch, Route, Redirect, useRouteMatch } from 'react-router-dom';
-import { NavLink } from 'react-router-dom';
-
-import Translate from '../../i18n/components/translate';
-import { AdminRoute } from '../../core/components/AdminRoute';
-
-import './Dashboard.scss';
-import { SourcesTab } from './SourcesTab';
-import { ProvidersTab } from './ProvidersTab';
-import { AdminTab } from './AdminTab';
-import { ActionsTab } from './ActionsTab';
-import { useIsAdmin } from '../../core/user/UserContext';
-import useFetch from 'use-http';
-import API_BASE_PATH from '../../App.constant';
-import { getMetadataPath } from '../../metadata/hooks/api';
-
-export function Dashboard () {
-
-    const { path } = useRouteMatch();
-
-    const isAdmin = useIsAdmin();
-
-    const [actions, setActions] = React.useState(0);
-    const [users, setUsers] = React.useState([]);
-    const [sources, setSources] = React.useState([]);
-
-    const { get, response } = useFetch(`${API_BASE_PATH}`, {
-        cachePolicy: 'no-cache'
-    });
-
-    async function loadUsers() {
-        const users = await get('/admin/users')
-        if (response.ok) {
-            setUsers(users.filter(u => u.role === 'ROLE_NONE'));
-        }
-    }
-
-    async function loadSources() {
-        const s = await get(`/${getMetadataPath('source')}/disabledNonAdmin`);
-        if (response.ok) {
-            setSources(s);
-        }
-    }
-
-    /*eslint-disable react-hooks/exhaustive-deps*/
-    React.useEffect(() => {
-        loadSources();
-        loadUsers();
-    }, []);
-
-    React.useEffect(() => {
-        setActions(users.length + sources.length);
-    }, [users, sources]);
-
-    return (
-        <div className="container-fluid p-3" role="navigation">
-            
-            <Nav tabs>
-                <NavItem>
-                    <NavLink className="nav-link" to={`${path}/metadata/manager/resolvers`}>
-                        <Translate value="label.metadata-sources">Metadata Sources</Translate>
-                    </NavLink>
-                </NavItem>
-                {isAdmin &&
-                <>
-                    <NavItem>
-                        <NavLink className="nav-link" to={`${path}/metadata/manager/providers`}>
-                            <Translate value="label.metadata-providers">Metadata Providers</Translate>
-                        </NavLink>
-                    </NavItem>
-                    <NavItem>
-                        <NavLink className="nav-link" to={`${path}/admin/management`}>
-                            <Translate value="label.admin">Admin</Translate>
-                        </NavLink>
-                    </NavItem>
-                    <NavItem>
-                        <NavLink className="nav-link d-flex align-items-center" to={`${path}/admin/actions`}>
-                            <Translate value="label.action-required">Action Required</Translate>
-                            <span className="badge badge-pill badge-danger ml-1">{actions}</span>
-                        </NavLink>
-                    </NavItem>
-                </>
-                }
-            </Nav>
-            <Switch>
-                <Route exact path={`${path}`}>
-                    <Redirect to={`${path}/metadata/manager/resolvers`} />
-                </Route>
-                <Route path={`${path}/metadata/manager/resolvers`} component={SourcesTab} />
-                <AdminRoute path={`${path}/metadata/manager/providers`} component={ProvidersTab} />
-                <AdminRoute path={`${path}/admin/management`} component={AdminTab} />
-                <Route path={`${path}/admin/actions`}>
-                    <ActionsTab sources={sources} users={users} reloadSources={loadSources} reloadUsers={loadUsers} />
-                </Route>
-            </Switch>
-        </div>
-    );
-}
-/*
-<ng-container * ngIf="hasActions$" >
-                            & nbsp;
-            <span className="badge badge-pill badge-danger">{{ actionsRequired$ | async}}</span>
-                        </ng - container >
-                        */
-export default Dashboard;
\ No newline at end of file
diff --git a/ui/src/app/dashboard/container/Dashboard.scss b/ui/src/app/dashboard/container/Dashboard.scss
deleted file mode 100644
index 74201a46e..000000000
--- a/ui/src/app/dashboard/container/Dashboard.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../theme/variables.scss';
-
diff --git a/ui/src/app/dashboard/container/ProvidersTab.js b/ui/src/app/dashboard/container/ProvidersTab.js
deleted file mode 100644
index f5a2d719b..000000000
--- a/ui/src/app/dashboard/container/ProvidersTab.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-
-import { useMetadataEntities } from '../../metadata/hooks/api';
-import Translate from '../../i18n/components/translate';
-import ProviderList from '../../metadata/domain/provider/component/ProviderList';
-import {Search} from '../component/Search';
-import { Ordered } from '../component/Ordered';
-import { useIsAdmin } from '../../core/user/UserContext';
-import { Alert } from 'reactstrap';
-
-const searchProps = ['name', '@type', 'createdBy'];
-
-export function ProvidersTab () {
-
-    const [providers, setProviders] = React.useState([]);
-
-    const { get, response } = useMetadataEntities('provider');
-
-    async function loadProviders() {
-        const providers = await get('')
-        if (response.ok) {
-            setProviders(providers);
-        }
-    }
-
-    /*eslint-disable react-hooks/exhaustive-deps*/
-    React.useEffect(() => { loadProviders() }, []);
-
-    const isAdmin = useIsAdmin();
-
-    return (
-        <section className="section">
-            <div className="section-body border border-top-0 border-primary">
-                {isAdmin ?
-                <>
-                    <div className="section-header bg-primary p-2 text-light">
-                        <span className="lead">
-                            <Translate value="label.current-metadata-providers">Current Metadata Providers</Translate>
-                        </span>
-                    </div>
-                    <div className="p-3">
-                        <Ordered entities={providers} prop="resourceIds">
-                            {(ordered, first, last, onOrderUp, onOrderDown) =>
-                            <Search entities={ordered} searchable={searchProps}>
-                                {(searched) => <ProviderList
-                                    entities={searched}
-                                    reorder={providers.length === searched.length}
-                                    first={first}
-                                    last={last}
-                                    onOrderUp={onOrderUp}
-                                    onOrderDown={onOrderDown}></ProviderList>}
-                            </Search>
-                            }
-                        </Ordered>
-                    </div>
-                </>
-                :
-                <Alert color="danger">Access Denied</Alert>}
-            </div>
-        </section>
-    );
-}
\ No newline at end of file
diff --git a/ui/src/app/dashboard/container/SourcesTab.js b/ui/src/app/dashboard/container/SourcesTab.js
deleted file mode 100644
index 94305795b..000000000
--- a/ui/src/app/dashboard/container/SourcesTab.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import Translate from '../../i18n/components/translate';
-
-import SourceList from '../../metadata/domain/source/component/SourceList';
-import { useMetadataEntities } from '../../metadata/hooks/api';
-import { Search } from '../component/Search';
-
-const searchProps = ['serviceProviderName', 'entityId', 'createdBy'];
-
-export function SourcesTab () {
-
-    const [sources, setSources] = React.useState([]);
-
-    const { get, response } = useMetadataEntities('source', {
-        cachePolicy: 'no-cache'
-    });
-
-    async function loadSources() {
-        const sources = await get('/');
-        if (response.ok) {
-            setSources(sources);
-        }
-    }
-
-    const updateSources = () => loadSources();
-
-    /*eslint-disable react-hooks/exhaustive-deps*/
-    React.useEffect(() => { loadSources() }, []);
-
-    return (
-        <section className="section">
-            <div className="section-body border border-top-0 border-primary">
-                <div className="section-header bg-primary p-2 text-light">
-                    <span className="lead">
-                        <Translate value="label.current-metadata-sources">Current Metadata Sources</Translate>
-                    </span>
-                </div>
-                <div className="p-3">
-                    <Search entities={sources} searchable={searchProps}>
-                        {(searched) => <SourceList entities={ searched } onDelete={ updateSources }></SourceList>}
-                    </Search>
-                </div>
-            </div>
-        </section>
-    );
-}
\ No newline at end of file
diff --git a/ui/src/app/metadata/Metadata.js b/ui/src/app/metadata/Metadata.js
index 33d1e7a73..70c72a587 100644
--- a/ui/src/app/metadata/Metadata.js
+++ b/ui/src/app/metadata/Metadata.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import { Switch, Route, useRouteMatch } from 'react-router-dom';
-import { MetadataOptions } from './component/MetadataOptions';
+import { MetadataOptions } from './view/MetadataOptions';
 import { MetadataDetail } from './component/MetadataDetail';
-import { MetadataHistory } from './component/MetadataHistory';
+import { MetadataHistory } from './view/MetadataHistory';
 import { MetadataEditor } from './editor/MetadataEditor';
 import { MetadataSelector } from './hoc/MetadataSelector';
 import { MetadataSchema } from './hoc/MetadataSchema';
 import { MetadataXmlLoader } from './hoc/MetadataXmlLoader';
-import { MetadataXml } from './component/MetadataXml';
+import { MetadataXml } from './view/MetadataXml';
+import { MetadataComparison } from './view/MetadataComparison';
+import { MetadataVersion } from './view/MetadataVersion';
 
 export function Metadata () {
 
@@ -34,6 +36,16 @@ export function Metadata () {
                                 <MetadataHistory></MetadataHistory>
                             </MetadataDetail>
                         } />
+                        <Route path={`${path}/configuration/compare`} render={ () =>
+                            <MetadataDetail>
+                                <MetadataComparison></MetadataComparison>
+                            </MetadataDetail>
+                        } />
+                        <Route path={`${path}/configuration/version/:versionId/options`} render={ () =>
+                            <MetadataDetail>
+                                <MetadataVersion></MetadataVersion>
+                            </MetadataDetail>
+                        } />
                         <Route path={`${path}/edit`} component={ MetadataEditor } />
                     </Switch>
                 </MetadataSchema>
diff --git a/ui/src/app/metadata/component/MetadataConfiguration.js b/ui/src/app/metadata/component/MetadataConfiguration.js
index 1ccd73d73..4faff19af 100644
--- a/ui/src/app/metadata/component/MetadataConfiguration.js
+++ b/ui/src/app/metadata/component/MetadataConfiguration.js
@@ -13,24 +13,30 @@ export function MetadataConfiguration ({ configuration }) {
     const columns = configuration.dates?.length || 1;
     const width = usePropertyWidth(columns);
 
+    const editable = configuration.sections?.length <= 1;
+
     return (
         <>
             { configuration && configuration.sections.map((section, sidx) =>
-                <MetadataSection section={section} key={sidx} index={ sidx } onEdit={onEdit}>
-                    <div className="d-flex border-bottom border-light border-2 py-2">
-                        <strong style={ {width} }><Translate value="label.option">Option</Translate></strong>
-                        {configuration.dates.map((d, didx) => 
-                        <strong style={ { width } } key={didx}>
-                            {configuration.dates.length <= 1 ?
-                                <Translate value="label.value">Value</Translate>
-                                :
-                                <FormattedDate date={d} />
-                            }
-                        </strong>
-                        )}
-                    </div>
-                    <ObjectProperty property={section} columns={columns}></ObjectProperty>
-                </MetadataSection>
+                <>
+                    {section?.properties?.length > 0 && 
+                    <MetadataSection section={section} key={sidx} index={ sidx } onEdit={editable ? onEdit : null}>
+                        <div className="d-flex border-bottom border-light border-2 py-2">
+                            <strong style={ {width} }><Translate value="label.option">Option</Translate></strong>
+                            {configuration.dates.map((d, didx) => 
+                            <strong style={ { width } } key={didx}>
+                                {configuration.dates.length <= 1 ?
+                                    <Translate value="label.value">Value</Translate>
+                                    :
+                                    <FormattedDate date={d} time={true} />
+                                }
+                            </strong>
+                            )}
+                        </div>
+                        <ObjectProperty property={section} columns={columns}></ObjectProperty>
+                    </MetadataSection>
+                    }
+                </>
             ) }
         </>
     );
diff --git a/ui/src/app/metadata/component/MetadataHistory.js b/ui/src/app/metadata/component/MetadataHistory.js
deleted file mode 100644
index 42c882407..000000000
--- a/ui/src/app/metadata/component/MetadataHistory.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { useParams } from 'react-router';
-import { Link } from 'react-router-dom';
-import FormattedDate from '../../core/components/FormattedDate';
-
-import Translate from '../../i18n/components/translate';
-import { useMetadataHistory } from '../hooks/api';
-
-export function MetadataHistory () {
-    const { type, id } = useParams();
-
-    const { data, loading } = useMetadataHistory(type, id, {}, []);
-
-    const toggleVersionSelected = () => {};
-    const restore = () => {};
-    const compare = () => {};
-
-    const selected = [];
-
-    return (
-        <>
-            <h2 className="mb-4">
-                <Translate value="label.version-history">version history</Translate>
-            </h2>
-            {data && !loading && <div className="container">
-                <>
-                <table className="table">
-                    <caption className="sr-only"><Translate value="label.name-and-entityid">Metadata Version History</Translate></caption>
-                    <thead>
-                        <tr>
-                            <th scope="col">
-                                <span className="sr-only"><Translate value="label.select-version">Select Version</Translate></span>
-                            </th>
-                            <th scope="col"><Translate value="label.save-date">Save Date</Translate></th>
-                            <th scope="col"><Translate value="label.changed-by">Changed By</Translate></th>
-                            <th scope="col"><Translate value="label.actions">Actions</Translate></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {data.map((version, i) =>
-                            <tr key={i}>
-                                <td>
-                                    <div className="custom-control custom-checkbox" onClick={() => toggleVersionSelected(version)}>
-                                        <input title={`check-${i}`} type="checkbox" className="custom-control-input" checked={selected.indexOf(version) > -1} onChange={() => {}} />
-                                        <label className="custom-control-label" htmlFor={`check-${i}`}>
-                                            <span className="sr-only"><Translate value="label.check-to-select">Check to select</Translate></span>
-                                        </label>
-                                    </div>
-                                </td>
-                                <td>
-                                    {i === 0 ? <Link to="['../', 'options']">
-                                        <FormattedDate date={version.date} />&nbsp;(<Translate value="label.current">Current</Translate>)
-                                    </Link>
-                                    :
-                                    <Link to="['../', 'version', version.id, 'options']">
-                                        <FormattedDate date={version.date} />
-                                    </Link>
-                                    }
-                                </td>
-                                <td>{ version.creator }</td>
-                                <td>
-                                    {i > 0 &&
-                                    <button className="btn btn-text btn-link" onClick={ () => restore(version) }>
-                                        <i className="fa fa-undo"></i>&nbsp;
-                                        <Translate value="action.restore">Restore</Translate>
-                                    </button>
-                                    }
-                                </td>
-                            </tr>
-                        )}
-                    </tbody>
-                </table>
-                <button className="btn btn-primary" onClick={ () => compare() } disabled={!selected.length}>
-                    <Translate value="label.compare-selected">Compare Selected</Translate>
-                    {selected.length > 0 && <span>({ selected.length })</span> }
-                </button>
-                </>
-            </div>}
-            {loading && <div className="d-flex justify-content-center">
-                <i className="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
-                <span className="sr-only">Loading...</span>
-            </div>}
-        </>
-    );
-}
\ No newline at end of file
diff --git a/ui/src/app/metadata/component/MetadataOptions.js b/ui/src/app/metadata/component/MetadataOptions.js
deleted file mode 100644
index d3f2994ff..000000000
--- a/ui/src/app/metadata/component/MetadataOptions.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import React from 'react';
-import { faArrowDown, faArrowUp, faChevronUp, faCog, faHistory, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link, useHistory, useParams } from 'react-router-dom';
-
-import { scroller } from 'react-scroll';
-
-import Translate from '../../i18n/components/translate';
-
-import { MetadataObjectContext } from '../hoc/MetadataSelector';
-import { MetadataHeader } from './MetadataHeader';
-import { MetadataConfiguration } from './MetadataConfiguration';
-import { MetadataDefinitionContext, MetadataSchemaContext } from '../hoc/MetadataSchema';
-
-import { useMetadataConfiguration } from '../hooks/configuration';
-import { MetadataViewToggle } from './MetadataViewToggle';
-import { DeleteSourceConfirmation } from '../domain/source/component/DeleteSourceConfirmation';
-import { MetadataFilters } from '../domain/filter/component/MetadataFilters';
-import { MetadataFilterConfigurationList } from '../domain/filter/component/MetadataFilterConfigurationList';
-import { MetadataFilterTypes } from '../domain/filter';
-
-export function MetadataOptions () {
-
-    const metadata = React.useContext(MetadataObjectContext);
-    const definition = React.useContext(MetadataDefinitionContext);
-    const schema = React.useContext(MetadataSchemaContext);
-    const history = useHistory();
-
-    const { type, id } = useParams();
-
-    const configuration = useMetadataConfiguration([metadata], schema, definition);
-
-    const onScrollTo = (element, offset = 0) => {
-        scroller.scrollTo(element, {
-            duration: 500,
-            smooth: true,
-            offset
-        });
-    };
-
-    const redirectOnDelete = () => history.push('/dashboard');
-
-    return (
-        <DeleteSourceConfirmation>
-            {(onDeleteSource) =>
-            <>
-            <h2 className="mb-4" id="header">
-                <Translate value={`label.${type}-configuration`}>[{type}] configuration</Translate>
-            </h2>
-            <div className="container">
-                <MetadataHeader
-                    current={true}
-                    enabled={type === 'source' ? metadata.serviceEnabled : metadata.enabled}
-                    model={metadata}>
-                    {type === 'source' &&
-                        <button className="btn btn-outline btn-sm btn-danger align-self-start"
-                            disabled={metadata.serviceEnabled}
-                            onClick={() => onDeleteSource(metadata.id, redirectOnDelete)}>
-                            <Translate value="action.delete" />
-                            <FontAwesomeIcon icon={faTrash} className="ml-2" />
-                        </button>
-                    }
-                </MetadataHeader>
-                <div className="px-3 my-3 d-flex justify-content-between" id="navigation">
-                    <div>
-                        <Link className="btn btn-link" to={`/metadata/${type}/${id}/configuration/history`}>
-                            <FontAwesomeIcon icon={ faHistory } />&nbsp;
-                            <Translate value="action.version-history">Version History</Translate>
-                        </Link>
-                        {type === 'provider' &&
-                            <button className="btn btn-link" onClick={() => onScrollTo('filters')}>
-                                <FontAwesomeIcon icon={faArrowDown} />&nbsp;
-                                <Translate value="label.filters">Filters</Translate>
-                            </button>
-                        }
-                    </div>
-                    <MetadataViewToggle />
-                </div>
-                <MetadataConfiguration configuration={ configuration } />
-                <div id="filters">
-                    {type === 'provider' &&
-                        <>
-                            <div className="numbered-header d-flex justify-content-start bg-light align-items-center">
-                                <h2 className="title h4 m-0 ml-2 flex-grow-1">
-                                    <span className="text"><Translate value="label.filters">Filters</Translate></span>
-                                </h2>
-                                <div className="actions px-2">
-                                    <Link className="btn btn-link edit-link change-view"
-                                        to={`/metadata/provider/${id}/filter/new`}>
-                                        <FontAwesomeIcon icon={faPlus} />&nbsp;
-                                        <Translate value="action.add-filter">Add Filter</Translate>
-                                    </Link>
-                                </div>
-                            </div>
-                            <MetadataFilters providerId={metadata.resourceId} types={MetadataFilterTypes}>
-                                <MetadataFilterConfigurationList provider={metadata} />
-                            </MetadataFilters>
-                        </>
-                    }
-                </div>
-                <button className="btn btn-link" onClick={ () => onScrollTo('header', -60) }>
-                    <FontAwesomeIcon icon={faArrowUp} className="sr-hidden" />&nbsp;
-                    <Translate value="action.back-to-top">Back to Top</Translate>
-                </button>
-            </div>
-            </>}
-        </DeleteSourceConfirmation>
-    );
-}
\ No newline at end of file
diff --git a/ui/src/app/metadata/component/MetadataXml.js b/ui/src/app/metadata/component/MetadataXml.js
deleted file mode 100644
index 10c740d8e..000000000
--- a/ui/src/app/metadata/component/MetadataXml.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { faSave } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
-
-import { useParams } from 'react-router';
-import Translate from '../../i18n/components/translate';
-import { MetadataObjectContext } from '../hoc/MetadataSelector';
-
-import { MetadataXmlContext } from '../hoc/MetadataXmlLoader';
-import { MetadataViewToggle } from './MetadataViewToggle';
-import { downloadAsXml } from '../../core/utility/download_as_xml';
-
-export function MetadataXml () {
-    const xml = React.useContext(MetadataXmlContext);
-    const entity = React.useContext(MetadataObjectContext);
-    const { type } = useParams();
-
-    const download = () => downloadAsXml(entity, xml);
-
-    return (
-        <>
-        <h2 className="mb-4">
-            <Translate value={type === 'source' ? 'label.source' : 'label.provider'}>Source</Translate>&nbsp;Configuration
-        </h2>
-        <div className="container-fluid">
-            <div className="px-3 my-3 d-flex justify-content-end">
-                <MetadataViewToggle />
-            </div>
-            <div className="px-3 my-3">
-                <figure role="img" aria-labelledby="pre-caption" tabIndex="0">
-                    <pre className="border p-2 bg-light rounded"><code>{xml}</code></pre>
-                    <figcaption id="pre-caption" className="sr-only">
-                        { xml }
-                    </figcaption>
-                </figure>
-                
-                <button type="button" className="btn btn-primary" onClick={() => download()}>
-                    <FontAwesomeIcon icon={faSave} />&nbsp;
-                    <Translate value="action.download-file">Download File</Translate>
-                </button>
-            </div>
-        </div>
-        </>
-    );
-}
\ No newline at end of file
diff --git a/ui/src/app/metadata/component/properties/PropertyValue.js b/ui/src/app/metadata/component/properties/PropertyValue.js
index 566489d77..27ff7b5d1 100644
--- a/ui/src/app/metadata/component/properties/PropertyValue.js
+++ b/ui/src/app/metadata/component/properties/PropertyValue.js
@@ -25,7 +25,7 @@ export function PropertyValue ({ name, value, columns }) {
                     <PopoverBody>{value.toString()}</PopoverBody>
                 </UncontrolledPopover>
             </>
-        : '-'}
+        : <span className="d-block text-truncate" style={columns ? { width } : {}}>-</span>}
         </>
     );
 }
\ No newline at end of file
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationList.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationList.js
index 86dae0368..2c5f1a7aa 100644
--- a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationList.js
+++ b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationList.js
@@ -6,10 +6,9 @@ import { MetadataFiltersContext } from './MetadataFilters';
 
 import { MetadataFilterConfigurationListItem } from './MetadataFilterConfigurationListItem';
 
-export function MetadataFilterConfigurationList ({provider}) {
+export function MetadataFilterConfigurationList ({provider, editable = true}) {
     const filters = React.useContext(MetadataFiltersContext);
     const removeFilter = () => {}
-    const editable = true;
 
     return (
         <Ordered path={`/MetadataResolvers/${provider.resourceId}/FiltersPositionOrder` } entities={filters}>
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
index fe6938902..de11d4205 100644
--- a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
+++ b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
@@ -37,11 +37,11 @@ export function MetadataFilterConfigurationListItem ({ filter, isLast, isFirst,
             {editable &&
             <div className="d-flex justify-content-between">
                 <button className="btn btn-link btn-sm" onClick={() => onOrderUp(filter.resourceId)} disabled={isFirst}>
-                    <FontAwesomeIcon icon={faArrowCircleUp} size='lg' />
+                    <FontAwesomeIcon icon={faArrowCircleUp} size='2x' />
                     <span className="sr-only"><Translate value="action.move-up">Move Up</Translate></span>
                 </button>
                 <button className="btn btn-link btn-sm" onClick={() => onOrderDown(filter.resourceId)} disabled={isLast}>
-                    <FontAwesomeIcon icon={faArrowCircleDown} size='lg' />
+                    <FontAwesomeIcon icon={faArrowCircleDown} size='2x' />
                     <span className="sr-only"><Translate value="action.move-up">Move Down</Translate></span>
                 </button>
             </div>
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilters.js b/ui/src/app/metadata/domain/filter/component/MetadataFilters.js
index 6969dfcb7..b30e38436 100644
--- a/ui/src/app/metadata/domain/filter/component/MetadataFilters.js
+++ b/ui/src/app/metadata/domain/filter/component/MetadataFilters.js
@@ -3,21 +3,27 @@ import { useMetadataEntities } from '../../../hooks/api';
 
 export const MetadataFiltersContext = React.createContext();
 
-export function MetadataFilters ({ providerId, types = [], children }) {
+export function MetadataFilters ({ providerId, types = [], filters, children }) {
 
     const { get, response } = useMetadataEntities('provider');
 
-    const [filters, setFilters] = React.useState([]);
+    const [filterData, setFilterData] = React.useState([]);
 
     async function loadFilters(id) {
         const list = await get(`/${id}/Filters`);
         if (response.ok) {
-            setFilters(list.filter(f => types.length > 1 ? types.indexOf(f['@type']) > -1 : true));
+            setFilterData(list.filter(f => types.length > 1 ? types.indexOf(f['@type']) > -1 : true));
         }
     }
 
     /*eslint-disable react-hooks/exhaustive-deps*/
-    React.useEffect(() => { loadFilters(providerId) }, [providerId]);
+    React.useEffect(() => {
+        if (!filters) {
+            loadFilters(providerId);
+        } else {
+            setFilterData(filters);
+        }
+    }, [providerId]);
 
 
     return (
diff --git a/ui/src/app/metadata/domain/provider/component/ProviderList.js b/ui/src/app/metadata/domain/provider/component/ProviderList.js
index dc8171bc1..4193d5b3f 100644
--- a/ui/src/app/metadata/domain/provider/component/ProviderList.js
+++ b/ui/src/app/metadata/domain/provider/component/ProviderList.js
@@ -26,7 +26,7 @@ export default function ProviderList({ entities, reorder = true, first, last, on
                 <tbody>
                     {limited.map((provider, idx) =>
                         <tr key={idx}>
-                            <td>
+                            <td className="align-middle">
                                 <div className="d-flex align-items-center">
                                     {reorder ?
                                         <div className="provider-index text-center text-primary font-weight-bold">{idx + 1}</div>
@@ -52,13 +52,13 @@ export default function ProviderList({ entities, reorder = true, first, last, on
                                     </button>
                                 </div>
                             </td>
-                            <td>
+                            <td className="align-middle">
                                 <Link to={`/metadata/provider/${provider.resourceId}/configuration/options`}>{provider.name}</Link>
                             </td>
-                            <td>{ provider['@type'] }</td>
-                            <td>{ provider.createdBy }</td>
-                            <td><FormattedDate date={provider.createdDate} /></td>
-                            <td className="text-right">
+                            <td className="align-middle">{ provider['@type'] }</td>
+                            <td className="align-middle">{ provider.createdBy }</td>
+                            <td className="align-middle"><FormattedDate date={provider.createdDate} /></td>
+                            <td className="text-right align-middle">
                                 <Badge color={provider.serviceEnabled ? 'success' : 'danger'}>
                                     <Translate value={provider.serviceEnabled ? 'value.enabled' : 'value.disabled'}></Translate>
                                 </Badge>
diff --git a/ui/src/app/metadata/hooks/configuration.js b/ui/src/app/metadata/hooks/configuration.js
index 6efd0ef38..4f02f61a6 100644
--- a/ui/src/app/metadata/hooks/configuration.js
+++ b/ui/src/app/metadata/hooks/configuration.js
@@ -1,13 +1,24 @@
-import { getConfigurationSections } from './schema';
+import { getConfigurationSections, getLimitedPropertiesFn } from './schema';
 
-export function useMetadataConfiguration(models, schema, definition) {
+export const getLimitedConfigurationsFn = (configurations, limited) => {
+    return configurations ? ({
+        ...configurations,
+        sections: !limited ? configurations.sections :
+            configurations.sections.map(s => ({
+                ...s,
+                properties: getLimitedPropertiesFn(s.properties),
+            }))
+    }) : configurations;
+};
+
+
+export function useMetadataConfiguration(models, schema, definition, limited = false) {
 
     if (!models || !schema || !definition) {
         return {};
     }
 
-    const processed = definition.schemaPreprocessor ?
-        definition.schemaPreprocessor(schema) : schema;
+    const processed = definition.schemaPreprocessor ? definition.schemaPreprocessor(schema) : schema;
 
-    return getConfigurationSections(models, definition, processed);
+    return getLimitedConfigurationsFn(getConfigurationSections(models, definition, processed), limited);
 }
\ No newline at end of file
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 06eb13aa0..43d217b52 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -4982,6 +4982,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+filter-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
+  integrity sha1-mzERErxsYSehbgFsbF1/GeCAXFs=
+
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -8979,6 +8984,16 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.0.0.tgz#aaad2c8d5c6a6d0c6afada877fecbd56af79e609"
+  integrity sha512-Iy7moLybliR5ZgrK/1R3vjrXq03S13Vz4Rbm5Jg3EFq1LUmQppto0qtXz4vqZ386MSRjZgnTSZ9QC+NZOSd/XA==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -9894,6 +9909,11 @@ serialize-javascript@^5.0.1:
   dependencies:
     randombytes "^2.1.0"
 
+serialize-query-params@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/serialize-query-params/-/serialize-query-params-1.3.3.tgz#a4bf0fc0ab9e80c92b93cdf9d84ec521d769ecbe"
+  integrity sha512-rJIIETRuGUVbLekC73IiXV3738ylEHbHK1kxaXAbhxbxfio0yvVXaRMF+OyLZOBMwdgDHYLaj6EMBAEiSf8C/g==
+
 serve-index@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -10193,6 +10213,11 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -10306,6 +10331,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+
 string-length@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1"
@@ -11033,6 +11063,13 @@ use-http@^1.0.20:
     use-ssr "^1.0.24"
     utility-types "^3.10.0"
 
+use-query-params@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-1.2.2.tgz#4c4b274133d699605301510b5aa01047f92b5ce0"
+  integrity sha512-Uyfe+/TECsNNzCSkgUM1MM24OEGxGE4aeWvZEf0a14iQFp/m43wiqI1HZ9oTlrRSZwD5yABeLc9rN+wtiB5B3Q==
+  dependencies:
+    serialize-query-params "^1.3.3"
+
 use-ssr@^1.0.24:
   version "1.0.24"
   resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.24.tgz#213a3df58f5ab9268e6fe1a57ad0a9de91e514d1"