From abbef2df8b0a15fde17a84ddb8b5c13cb160f784 Mon Sep 17 00:00:00 2001 From: darth-coder00 <86726556+darth-coder00@users.noreply.github.com> Date: Thu, 16 Sep 2021 15:08:54 +0530 Subject: [PATCH] Added UI for tableau fields (#506) --- .../AddServiceModal/AddServiceModal.tsx | 399 +++++++++++++++--- .../ui/src/constants/services.const.ts | 4 +- .../resources/ui/src/pages/service/index.tsx | 88 +++- .../resources/ui/src/pages/services/index.tsx | 11 +- 4 files changed, 409 insertions(+), 93 deletions(-) diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx index 64dd6ade39b..9016e752aa4 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx @@ -20,6 +20,7 @@ import { ServiceTypes } from 'Models'; import React, { FunctionComponent, useEffect, useRef, useState } from 'react'; import { serviceTypes } from '../../../constants/services.const'; import { + DashboardServiceType, MessagingServiceType, ServiceCategory, } from '../../../enums/service.enum'; @@ -47,6 +48,12 @@ export type DataObj = { dashboardUrl?: string; username?: string; password?: string; + url?: string; + api_key?: string; + site_name?: string; + api_version?: string; + server?: string; + env?: string; }; type DatabaseService = { @@ -61,9 +68,15 @@ type MessagingService = { }; type DashboardService = { - dashboardUrl: string; - username: string; - password: string; + dashboardUrl?: string; + username?: string; + password?: string; + url?: string; + api_key?: string; + site_name?: string; + api_version?: string; + server?: string; + env?: string; }; export type ServiceDataObj = { @@ -101,6 +114,11 @@ type ErrorMsg = { dashboardUrl?: boolean; username?: boolean; password?: boolean; + redashUrl?: boolean; + apiKey?: boolean; + siteName?: boolean; + apiVersion?: boolean; + server?: boolean; }; type EditorContentRef = { getEditorContent: () => string; @@ -190,6 +208,12 @@ export const AddServiceModal: FunctionComponent = ({ const [dashboardUrl, setDashboardUrl] = useState(data?.dashboardUrl || ''); const [username, setUsername] = useState(data?.username || ''); const [password, setPassword] = useState(data?.password || ''); + const [redashUrl, setRedashUrl] = useState(data?.url || ''); + const [apiKey, setApiKey] = useState(data?.api_key || ''); + const [siteName, setSiteName] = useState(data?.site_name || ''); + const [apiVersion, setApiVersion] = useState(data?.api_version || ''); + const [server, setServer] = useState(data?.server || ''); + const [env, setEnv] = useState(data?.env || ''); const [frequency, setFrequency] = useState( fromISOString(data?.ingestionSchedule?.repeatFrequency) ); @@ -198,10 +222,16 @@ export const AddServiceModal: FunctionComponent = ({ name: false, url: false, // port: false, - // userName: false, - // password: false, driverClass: false, broker: false, + dashboardUrl: false, + username: false, + password: false, + redashUrl: false, + apiKey: false, + siteName: false, + apiVersion: false, + server: false, }); const [sameNameError, setSameNameError] = useState(false); const markdownRef = useRef(); @@ -284,6 +314,11 @@ export const AddServiceModal: FunctionComponent = ({ dashboardUrl, username, password, + redashUrl, + apiKey, + siteName, + apiVersion, + server, } = value; return ( @@ -295,7 +330,12 @@ export const AddServiceModal: FunctionComponent = ({ !broker && !dashboardUrl && !username && - !password + !password && + !redashUrl && + !apiKey && + !siteName && + !apiVersion && + !server ); }; @@ -326,12 +366,43 @@ export const AddServiceModal: FunctionComponent = ({ break; case ServiceCategory.DASHBOARD_SERVICES: { - setMsg = { - ...setMsg, - dashboardUrl: !dashboardUrl, - username: !username, - password: !password, - }; + switch (selectService) { + case DashboardServiceType.REDASH: + { + setMsg = { + ...setMsg, + redashUrl: !redashUrl, + apiKey: !apiKey, + }; + } + + break; + case DashboardServiceType.TABLEAU: + { + setMsg = { + ...setMsg, + dashboardUrl: !dashboardUrl, + siteName: !siteName, + username: !username, + password: !password, + apiVersion: !apiVersion, + server: !server, + }; + } + + break; + default: + { + setMsg = { + ...setMsg, + dashboardUrl: !dashboardUrl, + username: !username, + password: !password, + }; + } + + break; + } } break; @@ -381,12 +452,46 @@ export const AddServiceModal: FunctionComponent = ({ break; case ServiceCategory.DASHBOARD_SERVICES: { - dataObj = { - ...dataObj, - dashboardUrl: dashboardUrl, - username: username, - password: password, - }; + switch (selectService) { + case DashboardServiceType.REDASH: + { + dataObj = { + ...dataObj, + url: redashUrl, + // eslint-disable-next-line @typescript-eslint/camelcase + api_key: apiKey, + }; + } + + break; + case DashboardServiceType.TABLEAU: + { + dataObj = { + ...dataObj, + dashboardUrl: dashboardUrl, + // eslint-disable-next-line @typescript-eslint/camelcase + site_name: siteName, + username: username, + password: password, + // eslint-disable-next-line @typescript-eslint/camelcase + api_version: apiVersion, + server: server, + }; + } + + break; + default: + { + dataObj = { + ...dataObj, + dashboardUrl: dashboardUrl, + username: username, + password: password, + }; + } + + break; + } } break; @@ -496,55 +601,215 @@ export const AddServiceModal: FunctionComponent = ({ }; const getDashboardFields = (): JSX.Element => { - return ( - <> -
- - setDashboardUrl(e.target.value)} - /> - {showErrorMsg.dashboardUrl && errorMsg('Dashboard url is required')} -
-
- - setUsername(e.target.value)} - /> - {showErrorMsg.username && errorMsg('Username is required')} -
-
- - setPassword(e.target.value)} - /> - {showErrorMsg.password && errorMsg('Password is required')} -
- - ); + let elemFields: JSX.Element; + switch (selectService) { + case DashboardServiceType.REDASH: { + elemFields = ( + <> +
+ + setRedashUrl(e.target.value)} + /> + {showErrorMsg.redashUrl && errorMsg('Url is required')} +
+
+ + setApiKey(e.target.value)} + /> + {showErrorMsg.apiKey && errorMsg('Api key is required')} +
+ + ); + + break; + } + case DashboardServiceType.TABLEAU: { + elemFields = ( + <> +
+ + setSiteName(e.target.value)} + /> + {showErrorMsg.siteName && errorMsg('Site name is required')} +
+
+ + setDashboardUrl(e.target.value)} + /> + {showErrorMsg.dashboardUrl && errorMsg('Site url is required')} +
+
+ + setUsername(e.target.value)} + /> + {showErrorMsg.username && errorMsg('Username is required')} +
+
+ + setPassword(e.target.value)} + /> + {showErrorMsg.password && errorMsg('Password is required')} +
+
+ + setServer(e.target.value)} + /> + {showErrorMsg.server && errorMsg('Server is required')} +
+
+ + setApiVersion(e.target.value)} + /> + {showErrorMsg.apiVersion && errorMsg('Api version is required')} +
+
+ + setEnv(e.target.value)} + /> +
+ + ); + + break; + } + default: { + elemFields = ( + <> +
+ + setDashboardUrl(e.target.value)} + /> + {showErrorMsg.dashboardUrl && + errorMsg('Dashboard url is required')} +
+
+ + setUsername(e.target.value)} + /> + {showErrorMsg.username && errorMsg('Username is required')} +
+
+ + setPassword(e.target.value)} + /> + {showErrorMsg.password && errorMsg('Password is required')} +
+ + ); + + break; + } + } + + return elemFields; }; const getOptionalFields = (): JSX.Element => { diff --git a/catalog-rest-service/src/main/resources/ui/src/constants/services.const.ts b/catalog-rest-service/src/main/resources/ui/src/constants/services.const.ts index e5a6af76327..8ff0dca0aa9 100644 --- a/catalog-rest-service/src/main/resources/ui/src/constants/services.const.ts +++ b/catalog-rest-service/src/main/resources/ui/src/constants/services.const.ts @@ -71,8 +71,8 @@ export const serviceTypes: Record> = { 'Athena', 'Presto', ], - messagingServices: ['Kafka', 'Pulsar'], - dashboardServices: ['Superset', 'Looker', 'Tableau', 'Redash'], + messagingServices: ['Kafka'], + dashboardServices: ['Superset', 'Looker', 'Tableau'], }; export const arrServiceTypes: Array = [ diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx index 639bcb8b671..b32865d9e1a 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx @@ -36,7 +36,10 @@ import { ModalWithMarkdownEditor } from '../../components/Modals/ModalWithMarkdo import Tags from '../../components/tags/tags'; import { pagingObject } from '../../constants/constants'; import { SearchIndex } from '../../enums/search.enum'; -import { ServiceCategory } from '../../enums/service.enum'; +import { + DashboardServiceType, + ServiceCategory, +} from '../../enums/service.enum'; import { Dashboard } from '../../generated/entity/data/dashboard'; import { Topic } from '../../generated/entity/data/topic'; import useToastContext from '../../hooks/useToastContext'; @@ -244,27 +247,68 @@ const ServicePage: FunctionComponent = () => { ); } case ServiceCategory.DASHBOARD_SERVICES: { - return ( - - - Dashboard Url : - {' '} - - {serviceDetails?.dashboardUrl ? ( - - {serviceDetails.dashboardUrl} - - ) : ( - '--' - )} - - • - - ); + let elemFields: JSX.Element; + switch (serviceType) { + // case DashboardServiceType.REDASH: + // { + // // TODO: add Redash fields if required + // } + + // break; + case DashboardServiceType.TABLEAU: + { + elemFields = ( + <> + + + Site Url : + {' '} + + {serviceDetails?.dashboardUrl ? ( + + {serviceDetails.dashboardUrl} + + ) : ( + '--' + )} + + • + + + ); + } + + break; + default: { + elemFields = ( + + + Dashboard Url : + {' '} + + {serviceDetails?.dashboardUrl ? ( + + {serviceDetails.dashboardUrl} + + ) : ( + '--' + )} + + • + + ); + } + } + + return elemFields; } default: { return <>; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx index 40a43c0a223..d2ae4079992 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx @@ -48,7 +48,10 @@ import { PLUS, servicesDisplayName, } from '../../constants/services.const'; -import { ServiceCategory } from '../../enums/service.enum'; +import { + DashboardServiceType, + ServiceCategory, +} from '../../enums/service.enum'; import { getCountBadge, getTabClasses } from '../../utils/CommonUtils'; import { getFrequencyTime, serviceTypeLogo } from '../../utils/ServiceUtils'; import SVGIcons from '../../utils/SvgUtils'; @@ -239,7 +242,11 @@ const ServicesPage = () => { return ( <>
- + {service.dashboardUrl}