Merge pull request #49 from amanjpro/upkeep/add-anchor-links

Make pages navigable/sharable
amanjpro · Jul 29, 2020 · 3d2315d · 3d2315d
2 parents 4c8e562 + c096b16
commit 3d2315d
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -4,5 +4,9 @@
   "devDependencies": {
     "babel-cli": "^6.0.0",
     "babel-preset-react-app": "^3.0.0"
+  },
+  "dependencies": {
+    "react-router-hash-link": "^2.0.0",
+    "react-router-dom": "^5.0.0"
   }
 }
diff --git a/src/main/resources/dashboard/group_container.jsx b/src/main/resources/dashboard/group_container.jsx
@@ -1,3 +1,5 @@
+const Link = ReactRouterDOM.Link;
+
 class GroupContainer extends React.Component {
   intervalID
   constructor(props) {
@@ -58,7 +60,12 @@ class GroupContainer extends React.Component {
       )
     } else {
       const sub = (
-        <sub className="link" onClick={this.handleBack}>&nbsp;See main dashboard</sub>
+        <sub>
+          <Link to={loc => `${loc.pathname}?page=main`}
+              className="link" onClick={this.handleBack}>
+            &nbsp;See main dashboard
+          </Link>
+        </sub>
       )
       return (
         <div key='group-div-view'>

diff --git a/src/main/resources/dashboard/index.html b/src/main/resources/dashboard/index.html
@@ -11,16 +11,19 @@
   <!-- Load React. -->
   <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
+  <script src="https://unpkg.com/react-router/umd/react-router.min.js" crossorigin></script>
+  <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js" crossorigin></script>
+
 
   <!-- Load Greenish React components. -->
-  <script src="common_lib.js"></script>
-  <script src="summary_container.js"></script>
-  <script src="state_container.js"></script>
-  <script src="group_container.js"></script>
-  <script src="job_container.js"></script>
-  <script src="version_container.js"></script>
-  <script src="namespace_container.js"></script>
-  <script src="time_container.js"></script>
-  <script src="main_container.js"></script>
+  <script src="common_lib.js" crossorigin></script>
+  <script src="summary_container.js" crossorigin></script>
+  <script src="state_container.js" crossorigin></script>
+  <script src="group_container.js" crossorigin></script>
+  <script src="job_container.js" crossorigin></script>
+  <script src="version_container.js" crossorigin></script>
+  <script src="namespace_container.js" crossorigin></script>
+  <script src="time_container.js" crossorigin></script>
+  <script src="main_container.js" crossorigin></script>
 </body>
 </html>
diff --git a/src/main/resources/dashboard/job_container.jsx b/src/main/resources/dashboard/job_container.jsx
@@ -1,3 +1,5 @@
+const Link = ReactRouterDOM.Link;
+
 class JobContainer extends React.Component {
   intervalID
   constructor(props) {
@@ -63,7 +65,13 @@ class JobContainer extends React.Component {
         <div key='job-div-view' className='detail-box'>
           <h2 key={`job-view-${gid}-${jid}-header`}>
             {job.job.name}&nbsp;
-            <sub className="link" onClick={this.handleBack}>See main dashboard</sub>
+            <sub>
+              <Link to={loc => `${loc.pathname}?page=main`}
+                  onClick={this.handleBack}
+                  className="link">
+                See main dashboard
+              </Link>
+            </sub>
           </h2>
           {encloseInTable(jobs, 'job-view', this.state.gid)}
         </div>

diff --git a/src/main/resources/dashboard/main_container.jsx b/src/main/resources/dashboard/main_container.jsx
@@ -1,12 +1,13 @@
 const e = React.createElement;
+const Link = ReactRouterDOM.Link;
 
 class MainContainer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      page: 'main',
-      gid: null,
-      jid: null
+      page: props.page,
+      gid: props.group,
+      jid: props.job
     }
     this.handler = this.handler.bind(this);
     this.renderMain = this.renderMain.bind(this);
@@ -17,7 +18,12 @@ class MainContainer extends React.Component {
       return (
         <div className='detail-div'>
           <h2 key="state_header">All data sets&nbsp;
-            <sub className="link" onClick={() => this.setState({page:"main"})}>See main dashboard</sub>
+            <sub>
+              <Link to={loc => `${loc.pathname}?page=main`}
+                  onClick={() => this.setState({page:"main"})} className="link">
+                See main dashboard
+              </Link>
+            </sub>
           </h2>
           <StateContainer endpoint='state'/>
         </div>
@@ -44,7 +50,12 @@ class MainContainer extends React.Component {
           </div>
           <div className="detail-div">
             <h2 key="state_header">Detailed missing periods&nbsp;
-              <sub className="link" onClick={() => this.setState({page:"state"})}>See all periods</sub>
+              <sub>
+                <Link to={loc => `${loc.pathname}?page=state`}
+                    onClick={() => this.setState({page:"state"})} className="link">
+                  See all periods
+                </Link>
+              </sub>
             </h2>
             <StateContainer endpoint='missing'/>
           </div>
@@ -54,6 +65,7 @@ class MainContainer extends React.Component {
   }
 
   handler(page, gid, jid) {
+
     this.setState({
       page: page,
       gid: gid,
@@ -80,4 +92,22 @@ class MainContainer extends React.Component {
 }
 
 const domContainer = document.querySelector('#main_container');
-ReactDOM.render(e(MainContainer), domContainer);
+const BrowserRouter = ReactRouterDOM.BrowserRouter;
+const Route = ReactRouterDOM.Route;
+const useLocation = ReactRouterDOM.useLocation;
+
+function useQuery() {
+  return new URLSearchParams(useLocation().search);
+}
+
+function ShowPage() {
+  let query = useQuery();
+  let page = query.get("page");
+  let gid = query.get("gid");
+  let jid = query.get("jid");
+  return (<MainContainer page={page} group={gid} job={jid}/>);
+}
+ReactDOM.render(
+  <BrowserRouter><Route><ShowPage/></Route></BrowserRouter>,
+  domContainer
+);
diff --git a/src/main/resources/dashboard/summary_container.jsx b/src/main/resources/dashboard/summary_container.jsx
@@ -1,3 +1,5 @@
+const Link = ReactRouterDOM.Link;
+
 class SummaryContainer extends React.Component {
   intervalID
   constructor(props) {
@@ -68,9 +70,11 @@ class SummaryContainer extends React.Component {
               const gid = group.group_id;
               return (
                 <div key={`group-${gid}`} className='grid-item summary-box'>
-                  <h2 key={`group-${gid}-header`} className='link'
-                        onClick={() => {this.handleGroupClick(gid)}}>
-                    {group.name}
+                  <h2 key={`group-${gid}-header`}>
+                    <Link to={loc => `${loc.pathname}?page=group&gid=${gid}`}
+                        onClick={() => {this.handleGroupClick(gid)}} className="link">
+                      {group.name}
+                    </Link>
                   </h2>
                   <table key={`group-${gid}-table`}>
                     <tbody key={`group-${gid}-tbody`}>
@@ -83,10 +87,11 @@ class SummaryContainer extends React.Component {
                           const jid = job.job_id;
                           return(
                             <tr key={`job-${gid}-${jid}-row`}>
-                              <td key={`job-${gid}-${jid}-name`}
-                                  className='link'
-                                  onClick={() => {this.handleJobClick(gid, jid)}}>
-                                {job.name}
+                              <td key={`job-${gid}-${jid}-name`}>
+                                <Link to={loc => `${loc.pathname}?page=job&gid=${gid}&jid=${jid}`}
+                                    onClick={() => {this.handleJobClick(gid, jid)}} className="link">
+                                  {job.name}
+                                </Link>
                               </td>
                               <td className={job.alert_level}
                                 key={`job-${gid}-${jid}-missing`}>{job.missing}</td>