Tableau (#61)

* Tp 44154 | Tableau integration implemented (#58)

* TP-44154 | Integrating tableau dashboard to houston

* TP-44154 | Tableau dashboard integration implemented

* TP-44154 | resolving pr reviews comments

* TP-44154 | resolving pr comments'2

* TP-44154 | Resolving pr comments'3

* TP-44154_new | QA env fix

* TP-44154 | prettier fix

* TP-44154 | changed route name and header

* TP-44154 | removed scroll, footer  and fixed height

* TP-44154 | added scrolling

entrypoint.sh

@@ -6,5 +6,7 @@ sed -i "s~<ENVIRONMENT>~${ENVIRONMENT}~g" /usr/share/nginx/html/config.js
 sed -i "s~<BASE_API_URL>~${BASE_API_URL}~g" /usr/share/nginx/html/config.js
 sed -i "s~<DISABLE_UNIVERSAL_AUTH>~${DISABLE_UNIVERSAL_AUTH}~g" /usr/share/nginx/html/config.js
 sed -i "s~CSP_HEADER~${CSP_HEADER}~g" /etc/nginx/conf.d/nginx.conf
+sed -i "s~<TABLEAU_SERVER_URL>~${TABLEAU_SERVER_URL}~g" /usr/share/nginx/html/config.js
+
 
 exec "$@"

package.json

@@ -33,6 +33,7 @@
   "dependencies": {
     "@navi/dark-knight": "^1.0.13",
     "@navi/web-ui": "^1.58.13",
+    "@stoddabr/react-tableau-embed-live": "^0.3.26",
     "axios": "^1.3.4",
     "classnames": "^2.3.2",
     "node-sass": "^8.0.0",

setup.template.js

@@ -5,4 +5,5 @@ window.config = {
   BASE_API_URL: '<BASE_API_URL>',
   CSP_HEADER: '<CSP_HEADER>',
   DISABLE_UNIVERSAL_AUTH: '<DISABLE_UNIVERSAL_AUTH>',
+  TABLEAU_SERVER_URL: '<TABLEAU_SERVER_URL>',
 };

src/Pages/Tableau/Tableau.module.scss

@@ -0,0 +1,14 @@
+.incident-body {
+  height: 100%;
+  width: 100%;
+}
+
+.tableau-wrapper {
+  padding: 24px 24px 10px 24px;
+}
+
+.incident-metrics {
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}

src/Pages/Tableau/constants.tsx

@@ -0,0 +1,2 @@
+export const TABLEAU_SDK_VERSION = '3.1.0';
+export const TABLEAU_URL = `${window?.config?.TABLEAU_SERVER_URL}/views/HoustonDashboard/HoustonIncidentReporting?:iid=1`;

src/Pages/Tableau/index.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import Typography from '@navi/web-ui/lib/primitives/Typography';
+import { TableauEmbed } from '@stoddabr/react-tableau-embed-live';
+import { TABLEAU_SDK_VERSION, TABLEAU_URL } from './constants';
+import styles from './Tableau.module.scss';
+
+const Tableau: FC = () => {
+  return (
+    <div className={styles['incident-body']}>
+      <div className={styles['tableau-wrapper']}>
+        <Typography variant="h2">Houston metrics</Typography>
+      </div>
+      <div className={styles['incident-metrics']}>
+        <TableauEmbed
+          width={'100%'}
+          toolbar={'hidden'}
+          version={TABLEAU_SDK_VERSION}
+          sourceUrl={TABLEAU_URL}
+          device="desktop"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Tableau;

src/assets/GroupIcon.tsx

@@ -0,0 +1,37 @@
+import { IconProps } from '@navi/web-ui/lib/icons/types';
+import { FC } from 'react';
+
+const GroupIcon: FC<IconProps> = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <rect
+        x="2"
+        y="2"
+        width="20"
+        height="19.9998"
+        rx="0.2"
+        stroke="white"
+        strokeWidth="1.2"
+      />
+      <path
+        d="M5.75 13.25L8.95046 9.64948C9.02384 9.56692 9.15025 9.55949 9.23281 9.63287L12.6811 12.698C12.7647 12.7724 12.893 12.7636 12.9658 12.6787L17.8333 7"
+        stroke="white"
+        strokeWidth="1.2"
+      />
+      <path
+        d="M14.0833 7H17.6332C17.7437 7 17.8332 7.08954 17.8332 7.2V10.75"
+        stroke="white"
+        strokeWidth="1.2"
+      />
+      <path d="M5.75 17H18.25" stroke="white" strokeWidth="1.2" />
+    </svg>
+  );
+};
+
+export default GroupIcon;

src/components/LeftNav/index.tsx

@@ -7,7 +7,6 @@ import DashboardIcon from '@navi/web-ui/lib/icons/DashboardIcon/DashboardIcon';
 import NaviNewLogoIcon from '@navi/web-ui/lib/icons/NaviLogoIcon/NaviNewLogoIcon';
 import AlertOutlineIcon from '@navi/web-ui/lib/icons/AlertOutlineIcon';
 import LeadIcon from '@navi/web-ui/lib/icons/LeadIcon';
-
 import { NavItemType } from '@navi/web-ui/lib/components/Navbar/types';
 import { Typography } from '@navi/web-ui/lib/primitives';
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
@@ -15,7 +14,7 @@ import { toast } from '@navi/web-ui/lib/primitives/Toast';
 import Dialog from '../Dialog';
 import styles from './LeftNav.module.scss';
 import Footer from '../Footer';
-
+import GroupIcon from '../../assets/GroupIcon';
 interface LeftNavProps {
   children?: React.ReactNode;
 }
@@ -25,7 +24,6 @@ const LeftNav: React.FC<LeftNavProps> = ({ children }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const userDetails = localStorage.getItem('user-data');
-  console.log('userDetails: ', userDetails);
 
   const openDialog = (): void => setDialogOpen(true);
   const closeDialog = (): void => setDialogOpen(false);
@@ -63,6 +61,13 @@ const LeftNav: React.FC<LeftNavProps> = ({ children }) => {
       Icon: LeadIcon,
       handleNavigation: () => navigate('/team'),
     },
+    {
+      itemType: 'simpleNavItem',
+      label: 'Houston metrics',
+      route: '/metrics',
+      Icon: GroupIcon,
+      handleNavigation: () => navigate('/metrics'),
+    },
   ];
 
   const returnUserData = () => {

src/router.tsx

@@ -4,12 +4,8 @@ const Dashboard = lazy(() => import('./Pages/Dashboard/index'));
 const Incident = lazy(() => import('./Pages/Incidents/index'));
 const Team = lazy(() => import('./Pages/Team/index'));
 const Severity = lazy(() => import('./Pages/Severity/index'));
-
-interface CustomRouteObject {
-  id: string;
-  path: string;
-  element: JSX.Element;
-}
+const Tableau = lazy(() => import('./Pages/Tableau/index'));
+import { CustomRouteObject } from './types';
 
 const routes: CustomRouteObject[] = [
   {
@@ -32,6 +28,11 @@ const routes: CustomRouteObject[] = [
     path: '/severity',
     element: <Severity />,
   },
+  {
+    id: 'TABLEAU',
+    path: '/metrics',
+    element: <Tableau />,
+  },
 ];
 
 export default routes;

src/types/index.d.ts

@@ -7,6 +7,7 @@ interface AppConfig {
   BASE_API_URL: string;
   CSP_HEADER: string;
   DISABLE_UNIVERSAL_AUTH: string;
+  TABLEAU_SERVER_URL: string;
 }
 
 declare global {
@@ -15,4 +16,9 @@ declare global {
   }
 }
 
+export interface CustomRouteObject {
+  id: string;
+  path: string;
+  element: JSX.Element;
+}
 declare module '*.module.scss';