CEC-3944 Static dashboard (#301)

* CEC-3944 Static dashboard

* Unit test

.env.cec-euprd

@@ -7,4 +7,5 @@ REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 REACT_APP_OTA_SERVICE_URL=https://gw.cec-euprd.fiskerinc.com/ota_update
 REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
 REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_STATIC_DASHBOARDS_URL=https://assets.fiskerdps.com/dashboards
 REACT_APP_SUPERSET_URL=https://superset.cec-euprd.fiskerinc.com

.env.cec-prd

@@ -7,4 +7,5 @@ REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 REACT_APP_OTA_SERVICE_URL=https://gw.cec-prd.fiskerinc.com/ota_update
 REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
 REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_STATIC_DASHBOARDS_URL=https://assets.fiskerdps.com/dashboards
 REACT_APP_SUPERSET_URL=https://superset.cec-prd.fiskerinc.com

.env.dev

@@ -7,4 +7,5 @@ REACT_APP_MAGNA_GROUP_ID=efcc3025-e2d8-4212-8227-805c7be39d2c
 REACT_APP_OTA_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/ota_update
 REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
 REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_STATIC_DASHBOARDS_URL=https://assets.fiskerdps.com/dashboards
 REACT_APP_SUPERSET_URL=https://dev-superset-new.cloud.fiskerinc.com

.env.local

@@ -7,4 +7,6 @@ REACT_APP_MAGNA_GROUP_ID=efcc3025-e2d8-4212-8227-805c7be39d2c
 REACT_APP_OTA_SERVICE_URL=http://localhost/ota_update
 REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
 REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_STATIC_DASHBOARDS_URL=https://assets.fiskerdps.com/dashboards
 REACT_APP_SUPERSET_URL=https://dev-superset-new.cloud.fiskerinc.com
+

.env.prd

@@ -7,4 +7,5 @@ REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 REACT_APP_OTA_SERVICE_URL=https://gw.cloud.fiskerinc.com/ota_update
 REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
 REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_STATIC_DASHBOARDS_URL=https://assets.fiskerdps.com/dashboards
 REACT_APP_SUPERSET_URL=https://superset.cloud.fiskerinc.com

.env.stg

@@ -7,4 +7,5 @@ REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 REACT_APP_OTA_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/ota_update
 REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
 REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_STATIC_DASHBOARDS_URL=https://assets.fiskerdps.com/dashboards
 REACT_APP_SUPERSET_URL=https://stg-superset.cloud.fiskerinc.com

src/components/App/App.test.js

@@ -126,6 +126,10 @@ describe("App", () => {
     await check("/tools/security-dll", "span.MuiButton-label", "Sign In");
   });
 
+  it("Route /dashboards/0 unauthenticated", async () => {
+    await check("/dashboards/0", "span.MuiButton-label", "Sign In");
+  });
+
   it("Route /page-not-found unauthenticated", async () => {
     await check("/page-not-found", "h1", "Page Not Found");
   });
@@ -200,4 +204,15 @@ describe("App", () => {
     setToken(TEST_AUTH_OBJECT_MAGNA);
     await sleepAndCheck("/tools/security-dll", "h6", "Security.dll Download");
   });
+
+  it("Route /dashboards/0 authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT_FISKER);
+    await check("/dashboards/0", "h6", "Datascope");
+  });
+
+  // test bad dashboard
+  it("Route /dashboards/1000 authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT_FISKER);
+    await check("/dashboards/1000", "span.error", "Invalid Dashboard");
+  });
 });

src/components/DashboardStatic/index.jsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+import { getStaticDashboard } from "../../services/staticDashboards";
+import { useStatusContext } from "../Contexts/StatusContext";
+import useStyles from "../useStyles";
+
+const StaticDashboard = () => {
+  const classes = useStyles();
+  const [dashboard, setDashboard] = useState(null);
+  const { setTitle, setSitePath } = useStatusContext();
+  const { index } = useParams();
+
+  useEffect(() => {
+    const result = getStaticDashboard(parseInt(index));
+    setDashboard(result);
+    setTitle("Datascope");
+    setSitePath([{ label: result.label}]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index]);
+
+  if (!dashboard) return <div>Loading...</div>;
+  if (dashboard.error) return <span className="error">{dashboard.error}</span>;
+  return <iframe className={classes.iframe} src={dashboard.url} title={dashboard.label}/>;
+
+};
+
+export default StaticDashboard;

src/components/Layouts/SideMenu.jsx

@@ -1,19 +1,19 @@
 import { List } from "@material-ui/core";
 import AssessmentIcon from "@material-ui/icons/Assessment";
+import BugReportIcon from "@material-ui/icons/BugReport";
 import BuildIcon from "@material-ui/icons/Build";
 import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
 import CommuteIcon from "@material-ui/icons/Commute";
 import DirectionsCarIcon from "@material-ui/icons/DirectionsCar";
-import BugReportIcon from "@material-ui/icons/BugReport";
 import HomeIcon from "@material-ui/icons/Home";
 import SettingsInputCompositeIcon from "@material-ui/icons/SettingsInputComposite";
 import { default as React, useEffect, useState } from "react";
 
+import { getStaticDashboardSubmenu } from "../../services/staticDashboards";
 import { hasRole, Permissions } from "../../utils/roles";
 import { useUserContext } from "../Contexts/UserContext";
 import SupersetDashboardList from "../SupersetDashboardList/SupersetDashboardList";
 import { ExpandableSideMenuItem, MenuItem } from "./MenuItem";
-
 const menuData = [
   {
     label: "Home",
@@ -51,6 +51,7 @@ const menuData = [
     icon: <AssessmentIcon />,
     rolesPerProvider: Permissions.FiskerRead,
     component: SupersetDashboardList,
+    submenus: getStaticDashboardSubmenu(Permissions.FiskerRead),
   },
   {
     label: "Suppliers",

src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap

@@ -188,6 +188,7 @@ exports[`SideMenu Authenticated 1`] = `
           />
         </a>
       </li>
+      <span>
         <li>
           <div
             aria-disabled="false"
@@ -249,6 +250,33 @@ exports[`SideMenu Authenticated 1`] = `
             </li>
           </ul>
         </li>
+      </span>
+      <ul
+        style="margin-left: 50px;"
+      >
+        <li>
+          <a
+            aria-disabled="false"
+            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+            href="/dashboards/0"
+            role="button"
+            tabindex="0"
+          >
+            <div
+              class="MuiListItemText-root"
+            >
+              <span
+                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              >
+                Vehicle Paths
+              </span>
+            </div>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </a>
+        </li>
+      </ul>
       <li>
         <a
           aria-disabled="false"

src/components/Routes/SiteRoutes.jsx

@@ -41,6 +41,8 @@ const SMSSend = React.lazy(() => import("../SMS/Send"));
 const SuppliersList = React.lazy(() => import("../Suppliers/List"));
 const SupplierDetails = React.lazy(() => import("../Suppliers/Details"));
 const Datascope = React.lazy(() => import("../Dashboard"));
+const StaticDashboard = React.lazy(() => import("../DashboardStatic"));
+
 const SiteRoutes = () => {
   const { token, groups, providers } = useUserContext();
   return (
@@ -54,6 +56,15 @@ const SiteRoutes = () => {
           type={TYPES.GUEST}
           token={token}
         />
+        <AuthRoute
+          path="/dashboards/:index"
+          render={() => <StaticDashboard />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          rolesPerGroup={Permissions.FiskerRead}
+          providers={providers}
+        />
         <AuthRoute
           path="/filter-add"
           render={() => <CANFilterCreate />}

src/services/staticDashboards.js

@@ -0,0 +1,26 @@
+const STATIC_DASHBOARDS_URL = process.env.REACT_APP_STATIC_DASHBOARDS_URL;
+
+const INVALID_DASHBOARD = {
+  label: "Invalid Dashboard",
+  error: "Invalid Dashboard"
+}
+
+export const StaticDashboardList = [
+  {
+    label: "Vehicle Paths",
+    url: `${STATIC_DASHBOARDS_URL}/paths.html`
+  }
+];
+
+export const getStaticDashboard = (index) => {
+  if (index < 0 || index >= StaticDashboardList.length) return INVALID_DASHBOARD;
+  return StaticDashboardList[index];
+};
+
+export const getStaticDashboardSubmenu = (role) => {
+  return StaticDashboardList.map((item, index) => ({
+    label: item.label,
+    to: `/dashboards/${index}`,
+    rolesPerProvider: role,
+  }));
+}