Routing to Cloud cost page

Signed-off-by: Thomas Evans <tevans3@icloud.com>

ui/default.nginx.conf

@@ -52,7 +52,9 @@ server {
 
     add_header Cache-Control "max-age=300";
     location / {
-        try_files $uri $uri/ /index.html;
+        root /var/www;
+        index index.html index.htm;
+        try_files $uri /index.html;
     }
 
     add_header ETag "1.96.0";

ui/package-lock.json

@@ -151,12 +151,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@parcel/codeframe/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/srcset": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/srcset/-/srcset-4.0.0.tgz",
@@ -537,18 +531,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@parcel/codeframe/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
@@ -783,21 +765,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@parcel/codeframe/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/@parcel/node-resolver-core/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -861,18 +828,6 @@
         "@parcel/core": "^2.10.1"
       }
     },
-    "node_modules/parcel/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
     "node_modules/babel-plugin-polyfill-regenerator": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.3.tgz",
@@ -2095,12 +2050,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/parcel/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -3015,12 +2964,6 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@parcel/transformer-svg/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -3307,18 +3250,6 @@
         "@parcel/core": "^2.10.1"
       }
     },
-    "node_modules/@parcel/core/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/node-gyp-build-optional-packages/node_modules/detect-libc": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
@@ -3421,18 +3352,6 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@parcel/markdown-ansi/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
     "node_modules/@parcel/transformer-posthtml/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -3978,12 +3897,6 @@
         "darwin"
       ]
     },
-    "node_modules/@parcel/core/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/jss-plugin-nested": {
       "version": "10.10.0",
       "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
@@ -4106,12 +4019,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@parcel/markdown-ansi/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4415,18 +4322,6 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@parcel/transformer-svg/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@parcel/optimizer-svgo/node_modules/svgo": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
@@ -4687,21 +4582,6 @@
         }
       ]
     },
-    "node_modules/@parcel/markdown-ansi/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/@parcel/transformer-js/node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",

ui/src/CloudCostReports.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Page from "./components/Page";
+import Header from "./components/Header";
+import IconButton from "@material-ui/core/IconButton";
+import RefreshIcon from "@material-ui/icons/Refresh";
+import { makeStyles } from "@material-ui/styles";
+import { Paper } from "@material-ui/core";
+
+const useStyles = makeStyles({
+  reportHeader: {
+    display: "flex",
+    flexFlow: "row",
+    padding: 24,
+  },
+  titles: {
+    flexGrow: 1,
+  },
+});
+
+const CloudCostReports = () => {
+  const classes = useStyles();
+
+  return (
+    <Page active="cloud.html">
+      <Header>
+        <IconButton aria-label="refresh" onClick={() => setFetch(true)}>
+          <RefreshIcon />
+        </IconButton>
+      </Header>
+
+      <Paper id="cloud-cost">
+        <div>Cloud Cost </div>
+      </Paper>
+    </Page>
+  );
+};
+
+export default React.memo(CloudCostReports);

ui/src/app.js

@@ -1,18 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { BrowserRouter as Router } from 'react-router-dom';
+import React from "react";
+import ReactDOM from "react-dom";
+import Routes from "./route";
 
-import Reports from './Reports.js';
-
-function ReportsPage() {
-  return (
-    <Router>
-      <Reports path="/" />
-    </Router>
-  );
-}
-
-ReactDOM.render(
-  <ReportsPage />,
-  document.getElementById('app')
-);
+ReactDOM.render(<Routes />, document.getElementById("app"));

ui/src/index.html

@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
-		<meta content="utf-8" http-equiv="encoding" />
-		<link rel="icon" href="./images/favicon.ico" />
-		<link rel="stylesheet" href="./css/index.css" />
-	</head>
-	<body>
-		<div id="app" class="page-container"></div>
-		<script src="./app.js" type="module"></script>
-	</body>
-</html>
+
+<head>
+	<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+	<meta content="utf-8" http-equiv="encoding" />
+	<link rel="icon" href="./images/favicon.ico" />
+	<link rel="stylesheet" href="./css/index.css" />
+</head>
+
+<body>
+	<div id="app" class="page-container"></div>
+	<script src="./app.js" type="module"></script>
+</body>
+
+</html>

ui/src/route.js

@@ -0,0 +1,23 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+
+import Reports from "./Reports.js";
+import CloudCostReports from "./CloudCostReports.js";
+
+const Routes = () => {
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/">
+          <Reports />
+        </Route>
+        <Route exact path="/cloud">
+          <CloudCostReports />
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
+
+export default Routes;