From 322ea7d219273ade2a811929a67b170238c5e857 Mon Sep 17 00:00:00 2001 From: Pooja Jaiswal Date: Tue, 17 Oct 2023 19:39:40 +0530 Subject: [PATCH] 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 | 2 ++ package.json | 1 + setup.template.js | 1 + src/Pages/Tableau/Tableau.module.scss | 14 ++++++++++ src/Pages/Tableau/constants.tsx | 2 ++ src/Pages/Tableau/index.tsx | 26 +++++++++++++++++++ src/assets/GroupIcon.tsx | 37 +++++++++++++++++++++++++++ src/components/LeftNav/index.tsx | 11 +++++--- src/router.tsx | 13 +++++----- src/types/index.d.ts | 6 +++++ 10 files changed, 104 insertions(+), 9 deletions(-) create mode 100644 src/Pages/Tableau/Tableau.module.scss create mode 100644 src/Pages/Tableau/constants.tsx create mode 100644 src/Pages/Tableau/index.tsx create mode 100644 src/assets/GroupIcon.tsx diff --git a/entrypoint.sh b/entrypoint.sh index 619862d..bce8812 100644 --- a/entrypoint.sh +++ b/entrypoint.sh @@ -6,5 +6,7 @@ sed -i "s~~${ENVIRONMENT}~g" /usr/share/nginx/html/config.js sed -i "s~~${BASE_API_URL}~g" /usr/share/nginx/html/config.js sed -i "s~~${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}~g" /usr/share/nginx/html/config.js + exec "$@" diff --git a/package.json b/package.json index 9e93db7..d47f3f8 100644 --- a/package.json +++ b/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", diff --git a/setup.template.js b/setup.template.js index c0a6986..751ec5d 100644 --- a/setup.template.js +++ b/setup.template.js @@ -5,4 +5,5 @@ window.config = { BASE_API_URL: '', CSP_HEADER: '', DISABLE_UNIVERSAL_AUTH: '', + TABLEAU_SERVER_URL: '', }; diff --git a/src/Pages/Tableau/Tableau.module.scss b/src/Pages/Tableau/Tableau.module.scss new file mode 100644 index 0000000..47f6d51 --- /dev/null +++ b/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%; +} diff --git a/src/Pages/Tableau/constants.tsx b/src/Pages/Tableau/constants.tsx new file mode 100644 index 0000000..6773226 --- /dev/null +++ b/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`; diff --git a/src/Pages/Tableau/index.tsx b/src/Pages/Tableau/index.tsx new file mode 100644 index 0000000..77b7c0a --- /dev/null +++ b/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 ( +
+
+ Houston metrics +
+
+ +
+
+ ); +}; + +export default Tableau; diff --git a/src/assets/GroupIcon.tsx b/src/assets/GroupIcon.tsx new file mode 100644 index 0000000..52d6d75 --- /dev/null +++ b/src/assets/GroupIcon.tsx @@ -0,0 +1,37 @@ +import { IconProps } from '@navi/web-ui/lib/icons/types'; +import { FC } from 'react'; + +const GroupIcon: FC = () => { + return ( + + + + + + + ); +}; + +export default GroupIcon; diff --git a/src/components/LeftNav/index.tsx b/src/components/LeftNav/index.tsx index e9565c2..f8a7e0a 100644 --- a/src/components/LeftNav/index.tsx +++ b/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 = ({ 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 = ({ children }) => { Icon: LeadIcon, handleNavigation: () => navigate('/team'), }, + { + itemType: 'simpleNavItem', + label: 'Houston metrics', + route: '/metrics', + Icon: GroupIcon, + handleNavigation: () => navigate('/metrics'), + }, ]; const returnUserData = () => { diff --git a/src/router.tsx b/src/router.tsx index efc18aa..cc39281 100644 --- a/src/router.tsx +++ b/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: , }, + { + id: 'TABLEAU', + path: '/metrics', + element: , + }, ]; export default routes; diff --git a/src/types/index.d.ts b/src/types/index.d.ts index eb6ee49..e9b238b 100644 --- a/src/types/index.d.ts +++ b/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';