From 8b9fac3e03ee5485ce6efb5e89eb86ce5dd60b14 Mon Sep 17 00:00:00 2001 From: indraraj Date: Mon, 5 Feb 2024 12:37:51 +0530 Subject: [PATCH] DBZ-6409: Initial setup --- src/app/pages/connectorDetails/index.ts | 1 - .../connectorInsight/ConnectorInsight.tsx | 350 ++++++++++++ .../DetailsTab.tsx} | 343 ++---------- src/app/pages/connectorInsight/EditTab.tsx | 505 ++++++++++++++++++ .../IncrementalSnapshotTab.tsx | 18 + src/app/pages/connectorInsight/index.ts | 2 + .../createConnector/CreateConnectorWizard.tsx | 28 +- src/app/routes.tsx | 4 +- 8 files changed, 929 insertions(+), 322 deletions(-) delete mode 100644 src/app/pages/connectorDetails/index.ts create mode 100644 src/app/pages/connectorInsight/ConnectorInsight.tsx rename src/app/pages/{connectorDetails/ConnectorDetails.tsx => connectorInsight/DetailsTab.tsx} (60%) create mode 100644 src/app/pages/connectorInsight/EditTab.tsx create mode 100644 src/app/pages/connectorInsight/IncrementalSnapshotTab.tsx create mode 100644 src/app/pages/connectorInsight/index.ts diff --git a/src/app/pages/connectorDetails/index.ts b/src/app/pages/connectorDetails/index.ts deleted file mode 100644 index f8235ee9..00000000 --- a/src/app/pages/connectorDetails/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./ConnectorDetails"; diff --git a/src/app/pages/connectorInsight/ConnectorInsight.tsx b/src/app/pages/connectorInsight/ConnectorInsight.tsx new file mode 100644 index 00000000..5704e4e2 --- /dev/null +++ b/src/app/pages/connectorInsight/ConnectorInsight.tsx @@ -0,0 +1,350 @@ +import { AppLayoutContext } from "@app/AppLayout"; +import { Services } from "@app/apis/services"; +import { + Divider, + Dropdown, + DropdownItem, + DropdownList, + Flex, + FlexItem, + MenuToggle, + MenuToggleElement, + PageSection, + PageSectionVariants, + Skeleton, + Split, + SplitItem, + Tab, + TabContent, + TabContentBody, + TabTitleText, + Tabs, + Title, +} from "@patternfly/react-core"; +import React, { useCallback } from "react"; +import { useParams } from "react-router-dom"; +import useFetchDynamicApi from "@app/hooks/useFetchDynamicApi"; +import { + ConnectorStatusComponent, + ConnectorTypeLogo, + DeleteConnectorModel, +} from "@app/components"; +import { POLLING_INTERVAL } from "@app/constants"; +import DetailsTab from "./DetailsTab"; +import EditTab from "./EditTab"; +import IncrementalSnapshotTab from "./IncrementalSnapshotTab"; +import { getConnectorType } from "@app/utils"; + +interface ConnectorInsightProps { + // Add any props you need for the component +} + +export const ConnectorInsight: React.FC = (props) => { + const { connectorName } = useParams(); + const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false); + + const [activeTabKey, setActiveTabKey] = React.useState(0); + + const [isConnectorActionOpen, setIsConnectorActionOpen] = + React.useState(false); + + const onToggleClick = () => { + setIsConnectorActionOpen(!isConnectorActionOpen); + }; + + const onActionSelect = ( + _event: React.MouseEvent | undefined, + value: string | number | undefined + ) => { + // eslint-disable-next-line no-console + setIsConnectorActionOpen(false); + }; + + // Toggle currently active tab + const handleTabClick = useCallback((event: any, tabIndex: any) => { + setActiveTabKey(tabIndex); + }, []); + + const appLayoutContext = React.useContext(AppLayoutContext); + const { cluster: clusterUrl, addNewNotification } = appLayoutContext; + const connectorService = Services.getConnectorService(); + + const deleteConnectorModal = () => { + setIsDeleteModalOpen(true); + }; + + const updateDeleteModalOpen = useCallback((isOpen: boolean) => { + setIsDeleteModalOpen(isOpen); + }, []); + + const getConnectorConfig = useFetchDynamicApi>( + clusterUrl, + connectorService.getConnectorConfig, + connectorService, + connectorName + ); + + const getConnectorStatus = useFetchDynamicApi( + clusterUrl, + connectorService.getConnectorStatus, + connectorService, + connectorName, + POLLING_INTERVAL.FiveSeconds + ); + + const { + data: connectorConfiguration, + isLoading: connectorsConfigurationLoading, + error: connectorsSchemaError, + } = getConnectorConfig; + + const { + data: connectorStatus, + isLoading: connectorStatusLoading, + error: connectorStatusError, + } = getConnectorStatus; + + const onConnectorPause = () => { + connectorService + .pauseConnector(clusterUrl, connectorName!) + .then((cConnectors: any) => { + addNewNotification( + "success", + "Connector paused success", + `Connector "${connectorName}" paused successfully.` + ); + }) + .catch((err) => { + addNewNotification("danger", "Connector paused failed", err.message); + }); + }; + + const onConnectorResume = () => { + connectorService + .resumeConnector(clusterUrl, connectorName!) + .then((cConnectors: any) => { + addNewNotification( + "success", + "Connector resume success", + `Connector "${connectorName}" resume successfully.` + ); + }) + .catch((err) => { + addNewNotification("danger", "Connector resume failed", err.message); + }); + }; + + const onConnectorRestart = () => { + connectorService + .pauseConnector(clusterUrl, connectorName!) + .then((cConnectors: any) => { + addNewNotification( + "success", + "Connector restart success", + `Connector "${connectorName}" restart successfully.` + ); + }) + .catch((err) => { + addNewNotification("danger", "Connector restart failed", err.message); + }); + }; + + const PageTemplateTitle = ( + + + + + + + + + + {connectorName} + + + + + + + + + + + setIsConnectorActionOpen(isConnectorActionOpen) + } + toggle={(toggleRef: React.Ref) => ( + + Connector operations + + )} + ouiaId="BasicDropdown" + shouldFocusToggleOnSelect + > + + + Pause + + ev.preventDefault()} + > + Resume + + + Restart + + + + Delete + + + + + + + ); + + return ( + <> + {PageTemplateTitle} + + + Connector details} + tabContentId={`tabContent${0}`} + /> + + Incremental snapshot} + tabContentId={`tabContent${2}`} + /> + Edit connector} + tabContentId={`tabContent${1}`} + /> + + + + + + + + + + ); +}; diff --git a/src/app/pages/connectorDetails/ConnectorDetails.tsx b/src/app/pages/connectorInsight/DetailsTab.tsx similarity index 60% rename from src/app/pages/connectorDetails/ConnectorDetails.tsx rename to src/app/pages/connectorInsight/DetailsTab.tsx index 902c845c..9d1ed616 100644 --- a/src/app/pages/connectorDetails/ConnectorDetails.tsx +++ b/src/app/pages/connectorInsight/DetailsTab.tsx @@ -1,134 +1,38 @@ -import { AppLayoutContext } from "@app/AppLayout"; -import { Services } from "@app/apis/services"; -import { - Button, - Card, - CardBody, - CardTitle, - DescriptionList, - DescriptionListDescription, - DescriptionListGroup, - DescriptionListTerm, - Divider, - Dropdown, - DropdownItem, - DropdownList, - EmptyState, - EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, - Flex, - FlexItem, - Grid, - GridItem, - Icon, - MenuToggle, - MenuToggleElement, - PageSection, - PageSectionVariants, - Skeleton, - Split, - SplitItem, - Stack, - Tab, - TabContent, - TabContentBody, - TabTitleText, - Tabs, - Title, - Tooltip, -} from "@patternfly/react-core"; -import React, { useCallback } from "react"; -import { useNavigate, useParams } from "react-router-dom"; -import useFetchDynamicApi from "@app/hooks/useFetchDynamicApi"; -import { - ConnectorStatusComponent, - ConnectorTypeLogo, - DeleteConnectorModel, -} from "@app/components"; -import { POLLING_INTERVAL } from "@app/constants"; -import { - CheckCircleIcon, - ExclamationCircleIcon, - PencilAltIcon, -} from "@patternfly/react-icons"; -import useFetchApiMultiVariableApi from "@app/hooks/useFetchApiMultiVariableApi"; -import { - convertMilliSecToTime, -} from "@app/utils"; +import { AppLayoutContext } from '@app/AppLayout'; +import { Services } from '@app/apis/services'; +import { ConnectorStatusComponent } from '@app/components'; +import { POLLING_INTERVAL } from '@app/constants'; +import useFetchApiMultiVariableApi from '@app/hooks/useFetchApiMultiVariableApi'; +import { convertMilliSecToTime } from '@app/utils'; +import { Button, Card, CardBody, CardTitle, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, Grid, GridItem, Icon, Skeleton, Split, SplitItem, Stack, Title, Tooltip } from '@patternfly/react-core'; +import { CheckCircleIcon, ExclamationCircleIcon, PencilAltIcon } from '@patternfly/react-icons'; +import React from 'react'; -interface ConnectorDetailsProps { - // Add any props you need for the component +export type DetailsTabProps = { + connectorsSchemaLoading: boolean; + connectorConfiguration: Record | null; + connectorStatusLoading: boolean; + connectorStatus: ConnectorNameStatus | null; + connectorName: string; + goToTab: (event: any, tabIndex: any) => void; } -export const ConnectorDetails: React.FC = (props) => { - const { connectorName } = useParams(); - const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false); - - const [activeTabKey, setActiveTabKey] = React.useState(0); - - const [isConnectorActionOpen, setIsConnectorActionOpen] = - React.useState(false); - - const onToggleClick = () => { - setIsConnectorActionOpen(!isConnectorActionOpen); - }; - - const onActionSelect = ( - _event: React.MouseEvent | undefined, - value: string | number | undefined - ) => { - // eslint-disable-next-line no-console - setIsConnectorActionOpen(false); - }; +const DetailsTab: React.FC = ({ + connectorsSchemaLoading, + connectorConfiguration, + connectorStatusLoading, + connectorStatus, + connectorName, + goToTab, - // Toggle currently active tab - const handleTabClick = (event: any, tabIndex: any) => { - setActiveTabKey(tabIndex); - }; +}) => { - const appLayoutContext = React.useContext(AppLayoutContext); - const { cluster: clusterUrl, addNewNotification } = appLayoutContext; + const appLayoutContext = React.useContext(AppLayoutContext); + const { cluster: clusterUrl } = appLayoutContext; const connectorService = Services.getConnectorService(); - const navigate = useNavigate(); - - const deleteConnectorModal = () => { - setIsDeleteModalOpen(true); - }; - - const updateDeleteModalOpen = useCallback((isOpen: boolean) => { - setIsDeleteModalOpen(isOpen); - }, []); - - const getConnectorConfig = useFetchDynamicApi>( - clusterUrl, - connectorService.getConnectorConfig, - connectorService, - connectorName - ); - - const getConnectorStatus = useFetchDynamicApi( - clusterUrl, - connectorService.getConnectorStatus, - connectorService, - connectorName, - POLLING_INTERVAL.FiveSeconds - ); - - const { - data: connectorConfiguration, - isLoading: connectorsSchemaLoading, - error: connectorsSchemaError, - } = getConnectorConfig; - const { - data: connectorStatus, - isLoading: connectorStatusLoading, - error: connectorStatusError, - } = getConnectorStatus; - - const getConnectorMetricsFetch = + const getConnectorMetricsFetch = useFetchApiMultiVariableApi( clusterUrl, connectorService.getConnectorMetrics, @@ -143,172 +47,8 @@ export const ConnectorDetails: React.FC = (props) => { error: connectorMetricsError, } = getConnectorMetricsFetch; - const onConnectorPause = () => { - connectorService - .pauseConnector(clusterUrl, connectorName!) - .then((cConnectors: any) => { - addNewNotification( - "success", - "Connector paused success", - `Connector "${connectorName}" paused successfully.` - ); - }) - .catch((err) => { - addNewNotification("danger", "Connector paused failed", err.message); - }); - }; - - const onConnectorResume = () => { - connectorService - .resumeConnector(clusterUrl, connectorName!) - .then((cConnectors: any) => { - addNewNotification( - "success", - "Connector resume success", - `Connector "${connectorName}" resume successfully.` - ); - }) - .catch((err) => { - addNewNotification("danger", "Connector resume failed", err.message); - }); - }; - - const onConnectorRestart = () => { - connectorService - .pauseConnector(clusterUrl, connectorName!) - .then((cConnectors: any) => { - addNewNotification( - "success", - "Connector restart success", - `Connector "${connectorName}" restart successfully.` - ); - }) - .catch((err) => { - addNewNotification("danger", "Connector restart failed", err.message); - }); - }; - - const PageTemplateTitle = ( - - - - - - - - - - {connectorName} - - - - - - - - - - - setIsConnectorActionOpen(isConnectorActionOpen) - } - toggle={(toggleRef: React.Ref) => ( - - Connector operations - - )} - ouiaId="BasicDropdown" - shouldFocusToggleOnSelect - > - - - Pause - - ev.preventDefault()} - > - Resume - - - Restart - - - - Delete - - - - - - - ); - - return ( - <> - {PageTemplateTitle} - - - Connector details} - tabContentId={`tabContent${0}`} - /> - Edit connector configuration} - tabContentId={`tabContent${1}`} - /> - - - -