Added filter version list comparison

TIER · May 3, 2021 · 5365c51 · 5365c51
1 parent 962641c
commit 5365c51
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 59 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@testing-library/jest-dom": "^5.11.4",

diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
@@ -73,12 +73,13 @@ export function MetadataFilterConfigurationListItem ({ filter, isLast, isFirst,
                 </div>
             </div>
             }
-            {configuration && <MetadataConfiguration configuration={ configuration }/> }
-            <button className="btn btn-link btn-sm" onClick={() => setOpen(!open)}>
-                <FontAwesomeIcon icon={faChevronUp} />&nbsp;
-                <Translate value="action.close">Close</Translate>
-            </button>
-        </div>
-        }
+            {configuration &&
+                <MetadataConfiguration configuration={ configuration }/> }
+                    <button className="btn btn-link btn-sm" onClick={() => setOpen(!open)}>
+                        <FontAwesomeIcon icon={faChevronUp} />&nbsp;
+                        <Translate value="action.close">Close</Translate>
+                    </button>
+                </div>
+            }
     </>);
 }
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js
@@ -1,60 +1,47 @@
-import { faCheckSquare, faSquare } from '@fortawesome/free-solid-svg-icons';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import FormattedDate from '../../../../core/components/FormattedDate';
 import Translate from '../../../../i18n/components/translate';
 import { usePropertyWidth } from '../../../component/properties/hooks';
+import { MetadataFilterVersionListItem } from './MetadataFilterVersionListItem';
 
-
-
-
-export function MetadataFilterVersionList ({ configuration, columns }) {
+export function MetadataFilterVersionList ({ configuration, limited, columns }) {
 
     const width = usePropertyWidth(columns);
 
     const [comparing, setComparing] = React.useState(false);
     const [selected, setSelected] = React.useState(null);
 
+    const resetFilterComparison = () => {
+        setComparing(false);
+        setSelected(null);
+    }
+
     return (
         <React.Fragment>
             { configuration && configuration.dates.length > 0 &&
                 <React.Fragment>
-                    <div className="d-flex border-bottom border-light border-2 py-2">
+                    {!comparing ? <div className="d-flex border-bottom border-light border-2 py-2">
                         <strong style={{width}}>
                             <Translate value={ comparing ? `label.order` : `label.option` } />
                         </strong>
-                    {configuration.dates.map(d =>
-                            <strong style={{width}} >
+                        {configuration.dates.map((d, didx) =>
+                            <strong style={{width}} key={didx}>
                                 <FormattedDate date={d} time={true} />
                             </strong>
                         ) }
-                    </div>
+                    </div> : <br /> }
                     {configuration.filters.map((version, i) =>
-                        <div className="d-flex border-bottom border-light">
-                            <div style={{width}} className="py-2">
-                                { i + 1 }
-                            </div>
-                            {version.map((filter, n) => 
-                                <div style={{width}} className="border-primary">
-                                    {filter ?
-                                        <div className={`p-2 d-flex align-items-center ${((n % 2 === 0) && selected !== filter.resourceId) ? 'bg-lighter' : 'bg-primary-light'}`}>
-                                            <div className="w-50">
-                                                <p className="mb-0">{ filter.name }</p>
-                                                <p className="mb-0 text-muted">{ filter['@type'] }</p>
-                                            </div>
-                                            { filter.comparable &&
-                                                <button className="btn btn-link mx-auto" onClick={() => setSelected(filter.resourceId)}>
-                                                    <FontAwesomeIcon icon={ selected === filter.resourceId ? faCheckSquare : faSquare } size="lg" />
-                                                    <span className="sr-only">Compare</span>
-                                                </button>
-                                            }
-                                        </div>
-                                        :
-                                        <div className="p-2 w-100">-</div>
-                                    }
-                                </div>
-                            )}
-                        </div>
+                        <MetadataFilterVersionListItem
+                            limited={limited}
+                            filters={version}
+                            key={i}
+                            width={width}
+                            index={i}
+                            selected={selected}
+                            comparing={comparing}
+                            onSelect={(id) => setSelected(id)} />
                     ) }
                     { configuration &&
                         <React.Fragment>
@@ -65,18 +52,22 @@ export function MetadataFilterVersionList ({ configuration, columns }) {
                                 </div>
                                 :
                                 <div className="d-flex justify-content-end my-2">
-                                    <button className="btn btn-primary" disabled={!selected} onClick={() => setComparing()}>
+                                    {comparing ? 
+                                        <button class="btn btn-success" onClick={resetFilterComparison}>
+                                            <FontAwesomeIcon icon={faArrowLeft} />&nbsp;
+                                            <Translate value="label.filter-versions">Filter Versions</Translate>
+                                        </button>
+                                    :
+                                    <button className="btn btn-primary" disabled={!selected} onClick={() => setComparing(selected)}>
                                         <Translate value="label.compare-selected">Compare Selected</Translate>
                                     </button>
+                                    }
                                 </div>
                             }
                         </React.Fragment>
                     }
                 </React.Fragment>
             }
         </React.Fragment>
-
-
-
     );
 }
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { MetadataConfiguration } from '../../../component/MetadataConfiguration';
+import { getDefinition } from '../../../domain/index';
+import { useMetadataSchema } from '../../../hooks/api';
+import { useMetadataConfiguration } from '../../../hooks/configuration';
+
+export function MetadataFilterVersionListItem ({ filters, width, selected, index, comparing, limited, onSelect }) {
+
+    const filter = filters.find(f => f.hasOwnProperty('@type'));
+    const type = filter['@type'];
+
+    React.useEffect(() => console.log(filters), [filters]);
+
+    const definition = React.useMemo(() => getDefinition(type), [type]);
+
+    const { get, response } = useMetadataSchema();
+
+    const [schema, setSchema] = React.useState();
+
+    async function loadSchema(d) {
+        const source = await get(`/${d.schema}`)
+        if (response.ok) {
+            setSchema(source);
+        }
+    }
+
+    /*eslint-disable react-hooks/exhaustive-deps*/
+    React.useEffect(() => { loadSchema(definition) }, [definition]);
+
+    const config = useMetadataConfiguration([...filters.filter(f => !!f)], schema, definition, limited);
+
+    return (
+        <React.Fragment>
+            {!comparing &&
+                <div className="d-flex border-bottom border-light">
+                    <div style={{ width }} className="py-2">
+                        {index + 1}
+                    </div>
+                    {filters.map((filter, n) =>
+                        <React.Fragment key={n}>
+
+                            <div style={{ width }} className="border-primary">
+                                {filter ?
+                                    <div className={`p-2 d-flex align-items-center ${((n % 2 === 0) && selected !== filter.resourceId) ? 'bg-lighter' : 'bg-primary-light'}`}>
+                                        <div className="w-50">
+                                            <p className="mb-0">{filter.name}</p>
+                                            <p className="mb-0 text-muted">{filter['@type']}</p>
+                                        </div>
+                                        {filter.comparable &&
+                                            <button className="btn btn-link mx-auto" onClick={() => onSelect(filter.resourceId)}>
+                                                <FontAwesomeIcon icon={selected === filter.resourceId ? faCheckSquare : faSquare} size="lg" />
+                                                <span className="sr-only">Compare</span>
+                                            </button>
+                                        }
+                                    </div>
+                                    :
+                                    <div className="p-2 w-100">-</div>
+                                }
+                            </div>
+
+                        </React.Fragment>
+                    )}
+                </div>
+            }
+            {comparing === filter.resourceId &&
+                <MetadataConfiguration configuration={config} />
+            }
+        </React.Fragment>
+    );
+}
diff --git a/ui/src/app/metadata/hoc/MetadataVersionLoader.js b/ui/src/app/metadata/hoc/MetadataVersionLoader.js
@@ -38,9 +38,10 @@ export function MetadataVersionLoader ({versions, children}) {
         loadVersion(v);
     }
 
+    /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => {
         loadNext(versions[0]);
-    }, []);
+    }, [versions]);
 
     return (<React.Fragment>
         {children(versions.map(v => list[v]).filter(v => !!v))}

diff --git a/ui/src/app/metadata/hooks/schema.js b/ui/src/app/metadata/hooks/schema.js
@@ -1,6 +1,4 @@
-import { MetadataFilterTypes } from "../domain/filter";
-
-export function getDefinition(path, definitions) {
+function getDefinition(path, definitions) {
     let def = path.split('/').pop();
     return definitions[def];
 }

diff --git a/ui/src/app/metadata/view/MetadataComparison.js b/ui/src/app/metadata/view/MetadataComparison.js
@@ -31,6 +31,11 @@ export function MetadataComparison () {
 
     return (
         <>
+        <h2 class="mb-4">
+            Compare&nbsp;
+            <Translate value={type === 'resolver' ? 'label.source' : 'label.provider'}>Source</Translate>
+            &nbsp;Configuration
+        </h2>
         {versions &&
         <MetadataVersionLoader versions={versions}>
             {(v) =>
@@ -61,7 +66,7 @@ export function MetadataComparison () {
                                         </h2>
                                     </div>
                                     <MetadataFilterVersionContext models={v} dates={config.dates}>
-                                        {(c) => <MetadataFilterVersionList configuration={c} columns={ c.dates.length }/>}
+                                        {(c) => <MetadataFilterVersionList configuration={c} columns={ c.dates.length } limited={limited}/>}
                                     </MetadataFilterVersionContext>
                                 </React.Fragment>
                                 }

diff --git a/ui/src/app/metadata/view/MetadataHistory.js b/ui/src/app/metadata/view/MetadataHistory.js
@@ -7,6 +7,8 @@ import FormattedDate from '../../core/components/FormattedDate';
 
 import Translate from '../../i18n/components/translate';
 import { useMetadataHistory } from '../hooks/api';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUndo } from '@fortawesome/free-solid-svg-icons';
 
 const sortVersionsByDate = (versions) => {
     return versions.sort((a, b) => {
@@ -34,8 +36,8 @@ export function MetadataHistory () {
     };
     const restore = () => {};
     const compare = (versions) => {
-        const sorted = sortVersionsByDate(versions);
-        const path = `/metadata/${type}/${id}/configuration/compare?${queryString.stringify({versions: sorted.map(s => s.id)}, {
+        const s = sortVersionsByDate(versions);
+        const path = `/metadata/${type}/${id}/configuration/compare?${queryString.stringify({versions: s.map(s => s.id)}, {
             skipNull: true,
         })}`;
         history.push(path);
@@ -71,7 +73,7 @@ export function MetadataHistory () {
                         </tr>
                     </thead>
                     <tbody>
-                        {data.map((version, i) =>
+                        {sorted.map((version, i) =>
                             <tr key={i}>
                                 <td>
                                     <div className="custom-control custom-checkbox" onClick={() => toggleVersionSelected(version)}>
@@ -95,7 +97,7 @@ export function MetadataHistory () {
                                 <td>
                                     {i > 0 &&
                                     <button className="btn btn-text btn-link" onClick={ () => restore(version) }>
-                                        <i className="fa fa-undo"></i>&nbsp;
+                                        <FontAwesomeIcon icon={faUndo} />&nbsp;
                                         <Translate value="action.restore">Restore</Translate>
                                     </button>
                                     }

diff --git a/ui/src/app/metadata/view/MetadataVersion.js b/ui/src/app/metadata/view/MetadataVersion.js
@@ -37,6 +37,7 @@ export function MetadataVersion() {
         }
     }
 
+    /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => {
         loadVersion(versionId);
     }, [versionId]);
@@ -85,7 +86,7 @@ export function MetadataVersion() {
                                                 <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>
+                                                    <Translate value="action.add-filter">Add Filter</Translate>
                                                 </Link>
                                             </div>
                                         </div>

diff --git a/ui/src/theme/assets/exclamation-circle.svg b/ui/src/theme/assets/exclamation-circle.svg
diff --git a/ui/src/theme/project/utility.scss b/ui/src/theme/project/utility.scss
@@ -28,14 +28,16 @@
     position: relative;
     border-color: #CCC !important;
     &::before {
-        $size: 24px;
-        content: "\f06a";
+        $size: 16px;
+        content: "";
+        opacity: 0.75;
+        background: url('../assets/exclamation-circle.svg');
         font-family: 'FontAwesome';
         text-align: center;
         width: $size;
         height: $size;
         position: absolute;
-        left: -$size;
-        top: 0.5rem;
+        left: -$size - 4;
+        top: 0.75rem;
     }
 }
diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1189,6 +1189,13 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.2.35"
 
+"@fortawesome/free-regular-svg-icons@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz#1ec4f2410ff638db549c5c5484fc60b66407dbe6"
+  integrity sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
 "@fortawesome/free-solid-svg-icons@^5.15.3":
   version "5.15.3"
   resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz#52eebe354f60dc77e0bde934ffc5c75ffd04f9d8"