Implemented version view

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": {

ui/src/app/App.js

@@ -5,14 +5,15 @@ import {
     Redirect,
     Route
 } from "react-router-dom";
+import { QueryParamProvider } from 'use-query-params';
 import { Provider as HttpProvider } from 'use-http';
 
 import './App.scss';
 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>

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 }</>);
 }