Merge branch 'develop' into release/0.0.3

.env.cec-euprd

@@ -7,5 +7,4 @@ 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,5 +7,4 @@ 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,5 +7,4 @@ REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 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,6 +7,5 @@ REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 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,5 +7,4 @@ 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,5 +7,4 @@ 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

package-lock.json

@@ -15,6 +15,7 @@
         "@emotion/styled": "^11.8.1",
         "@material-ui/core": "^4.12.4",
         "@material-ui/icons": "^4.11.3",
+        "@material-ui/lab": "^4.0.0-alpha.61",
         "@material-ui/pickers": "^3.3.10",
         "@mui/material": "^5.10.14",
         "@superset-ui/embedded-sdk": "^0.1.0-alpha.8",
@@ -4237,6 +4238,33 @@
         }
       }
     },
+    "node_modules/@material-ui/lab": {
+      "version": "4.0.0-alpha.61",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz",
+      "integrity": "sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==",
+      "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.",
+      "dependencies": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.3",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "@material-ui/core": "^4.12.1",
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@material-ui/pickers": {
       "version": "3.3.10",
       "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",
@@ -20962,6 +20990,18 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.61",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz",
+      "integrity": "sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.3",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@material-ui/pickers": {
       "version": "3.3.10",
       "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",

package.json

@@ -10,6 +10,7 @@
     "@emotion/styled": "^11.8.1",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/pickers": "^3.3.10",
     "@mui/material": "^5.10.14",
     "@superset-ui/embedded-sdk": "^0.1.0-alpha.8",

src/components/App/__snapshots__/App.test.js.snap

@@ -334,30 +334,7 @@ exports[`App Route / authenticated 1`] = `
             </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"
@@ -747,7 +724,7 @@ exports[`App Route /dashboards/0 authenticated 1`] = `
                     class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit"
                     href="/dashboards/0"
                   >
-                    Vehicle Paths
+                    Invalid Dashboard
                   </a>
                 </li>
               </ol>
@@ -1042,30 +1019,7 @@ exports[`App Route /dashboards/0 authenticated 1`] = `
             </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"
@@ -1178,11 +1132,11 @@ exports[`App Route /dashboards/0 authenticated 1`] = `
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
-          <iframe
+          <span
-            class="makeStyles-iframe-0"
+            class="error"
-            src="https://assets.fiskerdps.com/dashboards/paths.html"
+          >
-            title="Vehicle Paths"
+            Invalid Dashboard
-          />
+          </span>
         </main>
       </main>
     </div>
@@ -1585,30 +1539,7 @@ exports[`App Route /home authenticated 1`] = `
             </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"
@@ -2309,30 +2240,7 @@ exports[`App Route /issue-info authenticated 1`] = `
             </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"
@@ -2944,30 +2852,7 @@ exports[`App Route /issues authenticated 1`] = `
             </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"
@@ -3894,30 +3779,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
             </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"
@@ -5033,30 +4895,7 @@ exports[`App Route /package-status authenticated 1`] = `
             </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"
@@ -5839,30 +5678,7 @@ exports[`App Route /packages authenticated 1`] = `
             </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"
@@ -6909,30 +6725,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
             </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"
@@ -7560,30 +7353,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
             </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"
@@ -7850,7 +7620,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         class="PrivateSwitchBase-input-0"
                         name="cert-type"
                         type="radio"
-                        value="ICC"
+                        value="Charging"
                       />
                       <div
                         class="PrivateRadioButtonIcon-root-0"
@@ -7884,7 +7654,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                   >
-                    ICC
+                    Charging
                   </span>
                 </label>
                 <label
@@ -7938,57 +7708,6 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                     Aftersales
                   </span>
                 </label>
-                <label
-                  class="MuiFormControlLabel-root"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
-                  >
-                    <span
-                      class="MuiIconButton-label"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-0"
-                        name="cert-type"
-                        type="radio"
-                        value="Charging"
-                      />
-                      <div
-                        class="PrivateRadioButtonIcon-root-0"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                          />
-                        </svg>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </div>
-                    </span>
-                    <span
-                      class="MuiTouchRipple-root"
-                    />
-                  </span>
-                  <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
-                  >
-                    Charging
-                  </span>
-                </label>
               </div>
               <button
                 class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
@@ -8372,30 +8091,7 @@ exports[`App Route /tools/security-dll authenticated 1`] = `
             </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>
             <span>
               <li>
                 <a
@@ -8951,30 +8647,7 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
             </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"
@@ -9701,30 +9374,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
             </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"
@@ -10869,30 +10519,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             </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"
@@ -11229,6 +10856,24 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                         class="MuiTouchRipple-root"
                       />
                     </button>
+                    <button
+                      aria-controls="tabpanel-10"
+                      aria-selected="false"
+                      class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                      id="tab-10"
+                      role="tab"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiTab-wrapper"
+                      >
+                        DTC Timeline
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
                   </div>
                   <span
                     class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -11472,6 +11117,12 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               id="tabpanel-9"
               role="tabpanel"
             />
+            <div
+              aria-labelledby="tab-10"
+              hidden=""
+              id="tabpanel-10"
+              role="tabpanel"
+            />
           </div>
         </main>
       </main>
@@ -11936,30 +11587,7 @@ exports[`App Route /vehicles authenticated 1`] = `
             </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/Cars/Status/__snapshots__/index.test.jsx.snap

@@ -213,6 +213,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-10"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-10"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      DTC Timeline
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -400,6 +418,12 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-9"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-10"
+            hidden=""
+            id="tabpanel-10"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -19,6 +19,7 @@ import ECUsTab from "./ECUsTab";
 import FleetsTab from "./FleetsTab";
 import RemoteCommandsTab from "./RemoteCommandsTab";
 import TRexLogsTab from "./TRexLogsTab";
+import DTCTimeline from "../../DTCTimeline/DTCTimeline";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -72,7 +73,13 @@ const TabViews = [
     label: "CAN Signal Export",
     component: SelfServeTab,
     rolesPerProvider: Permissions.FiskerRead,
+  },
+  {
+    label: "DTC Timeline",
+    component: DTCTimeline,
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   }
+
 ];
 
 const filterTabs = (data, groups, providers) => {

src/components/Certificates/Add/CreateForm.jsx

@@ -24,7 +24,7 @@ const getCertsTypes = (providers) => {
   if (providers.length === 0) return [];
   if ((providers[0] === Providers.MAGNA) || (providers[0] === Providers.FISKER_QA)) {
     return CertTypeData.filter((item) => {
-      return (item.label === CertTypes.TBOX || item.label === CertTypes.ICC);
+      return (item.label === CertTypes.TBOX);
     })
   }
   return CertTypeData;

src/components/Contexts/DTCTimelineContext.jsx

@@ -0,0 +1,43 @@
+import React, { useContext, useState } from "react";
+import api from "../../services/DTCTimelineAPI";
+
+const DTCTimelineContext = React.createContext();
+
+export const DTCTimelineProvider = ({ children }) => {
+  const [busy, setBusy] = useState(false);
+
+  const [dtcData, setDTCData] = useState([]);
+  const [total, setTotal] = useState(0)
+
+  const getDTCData = async (vin, ecu, startDate, endDate, search,token) => {
+    try {
+      setBusy(true);
+      const result = await api.getDTCData(vin, ecu, startDate, endDate, search,token);
+      if (result.error) {
+        throw new Error(`Get DTC data error. ${result.message}`);
+      }
+      setDTCData(result.data ?? []);
+      if (result.total){
+        setTotal(result.total)
+      }
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <DTCTimelineContext.Provider
+      value={{
+        busy,
+        total,
+        dtcData,
+        getDTCData
+      }}
+    >
+      {children}
+    </DTCTimelineContext.Provider>
+  );
+};
+
+export const useDTCTimelineContext = () => useContext(DTCTimelineContext);

src/components/DTCTimeline/DTCTimeline/index.jsx

@@ -0,0 +1,228 @@
+import DateFnsUtils from '@date-io/date-fns';
+import { Button, CircularProgress, Grid, TableFooter, TablePagination, TableCell, Table, TableRow, TableBody} from "@material-ui/core";
+import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import React, { useEffect, useState } from "react";
+import { logger } from "../../../services/monitoring";
+import { DTCTimelineProvider, useDTCTimelineContext } from '../../Contexts/DTCTimelineContext';
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useLocalStorage } from "../../useLocalStorage";
+import clsx from "clsx";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import SearchField from '../../Controls/SearchField';
+import useStyles from "../../useStyles";
+
+const MainForm = ({ vin }) => {
+  const classes = useStyles();
+
+  const PAGE_SIZE = "DTC_TABLE_PAGE_SIZE";
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [orderBy, setOrderBy] = useState("epoch_usec");
+  const [order, setOrder] = useState("desc");
+  const { dtcData, getDTCData, total=0 } = useDTCTimelineContext();
+  const [selectedStartDate, setSelectedStartDate] = useState(new Date(Date.now() - 24 * 60 * 60 * 1000));
+  const [selectedEndDate, setSelectedEndDate] = useState(new Date());
+  const [selectedECU, setSelectedECU] = useState("");
+  const [loading, setLoading] = useState(false);
+  const { setMessage } = useStatusContext();
+
+  const tableColumns = [
+    {
+      id: "id",
+      label: "Id",
+    },
+    {
+      id: "vin",
+      label: "VIN",
+    },
+    {
+      id: "ecu",
+      label: "ECU",
+    },
+    {
+      id: "dtc",
+      label: "DTC",
+    },
+    {
+      id: "epoch_usec",
+      label: "Date",
+    },
+  ];
+
+  const handleSort = (_event, property) => {
+    if (property === orderBy) {
+      if (order === "asc") {
+        setOrder("desc");
+      } else {
+        setOrder("asc");
+      }
+    } else {
+      setOrderBy(property);
+      setOrder("desc");
+    }
+  };
+
+  const handleChangePageIndex = (_event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  const fetchDTCData = async () => {
+    setLoading(true);
+    try {
+      let start_date = new Date(selectedStartDate);
+      start_date.setHours(0, 0, 0, 0);
+      start_date = start_date.toISOString();
+
+      let end_date = new Date(selectedEndDate);
+      end_date.setHours(23, 59, 59, 999);
+      end_date = end_date.toISOString();
+
+      const search = {
+        limit: pageSize,
+        offset: pageSize * pageIndex,
+        order: `${orderBy} ${order}`,
+      }
+      await getDTCData(vin, selectedECU, start_date, end_date, search, token);
+      // setDTCData(data);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+    setLoading(false);
+  };
+
+  function formatDate(microseconds) {
+    const date = new Date(microseconds / 1000);
+    return date.toLocaleString();
+  }
+
+ useEffect(() => {
+   fetchDTCData();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin, selectedECU, selectedStartDate, selectedEndDate, pageIndex, pageSize, order, orderBy]);
+
+  return (
+    <div className={classes.paper}>
+      <Grid container spacing={3} alignItems="flex-end">
+        <Grid item xs={6} md={3}>
+          <div style={{ marginBottom: '8px' }}>
+            <SearchField
+              classes={classes}
+              onSearch={(searchValue) => {
+                setSelectedECU(searchValue);
+              }}
+            />
+          </div>
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <MuiPickersUtilsProvider utils={DateFnsUtils}>
+            <KeyboardDatePicker
+              disableToolbar
+              variant="inline"
+              format="MM/dd/yyyy"
+              margin="normal"
+              label="Start Date"
+              value={selectedStartDate}
+              onChange={setSelectedStartDate}
+              KeyboardButtonProps={{
+                'aria-label': 'change date',
+              }}
+              fullWidth
+            />
+          </MuiPickersUtilsProvider>
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <MuiPickersUtilsProvider utils={DateFnsUtils}>
+            <KeyboardDatePicker
+              disableToolbar
+              variant="inline"
+              format="MM/dd/yyyy"
+              margin="normal"
+              label="End Date"
+              value={selectedEndDate}
+              onChange={setSelectedEndDate}
+              KeyboardButtonProps={{
+                'aria-label': 'change date',
+              }}
+              fullWidth
+            />
+          </MuiPickersUtilsProvider>
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={fetchDTCData}
+            disabled={loading}
+            fullWidth
+            style={{ marginTop: '15px' }}
+          >
+            {loading ? <CircularProgress size={24} /> : "Filter"}
+          </Button>
+        </Grid>
+      </Grid>
+      <div className={clsx(classes.paper, classes.tableSize)}>
+          <Table aria-label="dtc table">
+            <TableHeaderSortable
+              classes={classes}
+              orderBy={orderBy}
+              order={order}
+              columnData={tableColumns}
+              onSortRequest={handleSort}
+            />
+            <TableBody>
+              {(dtcData || []).map((dtc, index) => (
+                <TableRow key={index}>
+                  <TableCell component="th" scope="row">
+                    {dtc.id}
+                  </TableCell>
+                  <TableCell>{dtc.vin}</TableCell>
+                  <TableCell>{dtc.ecu_name}</TableCell>
+                  <TableCell>{dtc.dtc}</TableCell>
+                  <TableCell>{formatDate(dtc.epoch_usec)}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+            <TableFooter>
+            <TableRow>
+                <TablePagination
+                  rowsPerPageOptions={[5, 10, 25, 100]}
+                  colSpan={6}
+                  count={total}
+                  rowsPerPage={pageSize}
+                  page={pageIndex}
+                  SelectProps={{
+                    inputProps: { "aria-label": "rows per page" },
+                    native: true,
+                  }}
+                  onPageChange={handleChangePageIndex}
+                  onRowsPerPageChange={handleChangePageSize}
+                />
+            </TableRow>
+          </TableFooter>
+          </Table>
+      </div>
+    </div>
+  );
+  
+};
+
+const DTCTimeline = (props) => (
+  <DTCTimelineProvider>
+    <MainForm {...props} />
+  </DTCTimelineProvider>
+);
+
+export default DTCTimeline;

src/components/DTCTimeline/DTCTimelineTab.jsx

@@ -0,0 +1,21 @@
+import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React from "react";
+import { useParams } from "react-router";
+
+import useStyles from "../useStyles";
+import DTCTimeline from "./DTCTimeline";
+
+const SelfServeTab = () => {
+  const { vin } = useParams();
+  const classes = useStyles();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">DTC Timeline</Typography>
+      <DTCTimeline id={vin} classes={classes} />
+    </div >
+  );
+};
+
+export default SelfServeTab;

src/components/DashboardCustom/index.jsx

@@ -1,18 +1,18 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
-import { getStaticDashboard } from "../../services/staticDashboards";
+import { getCustomDashboard } from "../../services/customDashboards";
 import { useStatusContext } from "../Contexts/StatusContext";
 import useStyles from "../useStyles";
 
-const StaticDashboard = () => {
+const DashboardCustom = () => {
   const classes = useStyles();
   const [dashboard, setDashboard] = useState(null);
   const { setTitle, setSitePath } = useStatusContext();
   const { index } = useParams();
 
   useEffect(() => {
-    const result = getStaticDashboard(parseInt(index));
+    const result = getCustomDashboard(parseInt(index));
     setDashboard(result);
     setTitle("Datascope");
     setSitePath([{ label: result.label}]);
@@ -21,8 +21,10 @@ const StaticDashboard = () => {
 
   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}/>;
+  if (dashboard.url) return <iframe className={classes.iframe} src={dashboard.url} title={dashboard.label}/>;
+  if (dashboard.component) return dashboard.component;
 
+  return <div>{dashboard.label} misconfigured</div>
 };
 
-export default StaticDashboard;
+export default DashboardCustom;

src/components/Layouts/SideMenu.jsx

@@ -9,7 +9,7 @@ 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 { getCustomDashboardSubmenu } from "../../services/customDashboards";
 import { hasRole, Permissions } from "../../utils/roles";
 import { useUserContext } from "../Contexts/UserContext";
 import SupersetDashboardList from "../SupersetDashboardList/SupersetDashboardList";
@@ -51,7 +51,7 @@ const menuData = [
     icon: <AssessmentIcon />,
     rolesPerProvider: Permissions.FiskerMagnaRead,
     component: SupersetDashboardList,
-    submenus: getStaticDashboardSubmenu(Permissions.FiskerMagnaRead),
+    submenus: getCustomDashboardSubmenu(Permissions.FiskerMagnaRead),
   },
   {
     label: "Suppliers",

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

@@ -253,30 +253,7 @@ exports[`SideMenu Authenticated 1`] = `
       </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"
@@ -585,30 +562,7 @@ exports[`SideMenu Magna Authenticated 1`] = `
       </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>
       <span>
         <li>
           <a

src/components/Routes/SiteRoutes.jsx

@@ -41,7 +41,7 @@ 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 DashboardCustom = React.lazy(() => import("../DashboardCustom"));
 
 const SiteRoutes = () => {
   const { token, groups, providers } = useUserContext();
@@ -58,7 +58,7 @@ const SiteRoutes = () => {
         />
         <AuthRoute
           path="/dashboards/:index"
-          render={() => <StaticDashboard />}
+          render={() => <DashboardCustom />}
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}

src/services/DTCTimelineAPI.js

@@ -0,0 +1,32 @@
+import {
+  addQueryParams,
+  errorHandler,
+  fetchRespHandler,
+  getAuthHeaderOptions,
+} from "../utils/http";
+
+const API_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
+
+const DTCTimelineAPI = {
+  getDTCData: async (vin, ecu, startDate, endDate,search,token) => {
+    const queryParams = {
+      ecu,
+      start_time: startDate,
+      end_time: endDate,
+      ...search,
+    };
+    const url = addQueryParams(`${API_ENDPOINT}/ecus/${vin}`, queryParams);
+    console.log(url)
+    return fetch(url, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
+  },
+};
+
+export default DTCTimelineAPI;

src/services/customDashboards.js

@@ -0,0 +1,30 @@
+const INVALID_DASHBOARD = {
+  label: "Invalid Dashboard",
+  error: "Invalid Dashboard"
+}
+
+export const CustomDashboardList = [
+  /*
+  {
+    label: "IFrame example",
+    url: `https://www.fiskerinc.com/page.html`
+  },
+  {
+    label: "Custom Component Example",
+    component: <MyCustomComponent />
+  }
+  */
+];
+
+export const getCustomDashboard = (index) => {
+  if (index < 0 || index >= CustomDashboardList.length) return INVALID_DASHBOARD;
+  return CustomDashboardList[index];
+};
+
+export const getCustomDashboardSubmenu = (role) => {
+  return CustomDashboardList.map((item, index) => ({
+    label: item.label,
+    to: `/dashboards/${index}`,
+    rolesPerProvider: role,
+  }));
+}

src/services/staticDashboards.js

@@ -1,26 +0,0 @@
-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,
-  }));
-}

src/utils/certificates.js

@@ -1,6 +1,5 @@
 export const CertTypes = {
   TBOX: "TBOX",
-  ICC: "ICC",
   Charging: "Charging",
   Aftersales: "Aftersales",
 };
@@ -12,8 +11,8 @@ export const CertTypeData = [
     inputlabel: "VIN",
   },
   {
-    value: CertTypes.ICC,
+    value: CertTypes.Charging,
-    label: "ICC",
+    label: "Charging",
     inputlabel: "VIN",
   },
   {
@@ -21,9 +20,4 @@ export const CertTypeData = [
     label: "Aftersales",
     inputlabel: "Service Tool ID",
   },
-  {
-    value: CertTypes.Charging,
-    label: "Charging",
-    inputlabel: "VIN",
-  },
 ];