From c333dda05c046520c433bf02674e68b0faa61c32 Mon Sep 17 00:00:00 2001 From: Indra Date: Wed, 24 Jan 2024 14:52:49 +0530 Subject: [PATCH] DBZ-7346: initial fixes (#828) --- .../components/ConnectorStatusComponent.tsx | 5 +- src/app/pages/connector/ConnectorPage.tsx | 13 +- .../connectorDetails/ConnectorDetails.tsx | 329 ++++++++++++------ .../connectorPlugins/ConnectorPlugins.tsx | 77 ++-- .../createConnector/CreateConnectorWizard.tsx | 40 ++- src/app/pages/createConnector/FilterStep.tsx | 50 +-- 6 files changed, 336 insertions(+), 178 deletions(-) diff --git a/src/app/components/ConnectorStatusComponent.tsx b/src/app/components/ConnectorStatusComponent.tsx index bd28858b..d51383db 100644 --- a/src/app/components/ConnectorStatusComponent.tsx +++ b/src/app/components/ConnectorStatusComponent.tsx @@ -5,6 +5,7 @@ import { ExclamationCircleIcon, ExclamationTriangleIcon, PauseCircleIcon, + SyncAltIcon, } from "@patternfly/react-icons"; import React from "react"; import './ConnectorStatusComponent.css' @@ -33,7 +34,7 @@ export const ConnectorStatusComponent: React.FC< case "RUNNING": labelColor = "green"; variant = "success"; - icon = ; + icon = ; break; case "STOPPED": labelColor = "orange"; @@ -60,7 +61,7 @@ export const ConnectorStatusComponent: React.FC< if (task) return ( - + {status} diff --git a/src/app/pages/connector/ConnectorPage.tsx b/src/app/pages/connector/ConnectorPage.tsx index 70b0ffe2..87eb56bd 100644 --- a/src/app/pages/connector/ConnectorPage.tsx +++ b/src/app/pages/connector/ConnectorPage.tsx @@ -14,6 +14,7 @@ import { OverflowMenuGroup, OverflowMenuItem, PageSection, + Spinner, Text, TextContent, Toolbar, @@ -140,7 +141,13 @@ const ConnectorPage: React.FunctionComponent = () => { <> {(connectorsInfoLoading || connectorsStatusLoading) && (isNull(connectorsInfo) || isNull(connectorsStatus)) ? ( -

Loading...

+ + } + /> + ) : isEmpty(connectorsInfo) || isEmpty(connectorsStatus) ? ( <> @@ -162,7 +169,9 @@ const ConnectorPage: React.FunctionComponent = () => { - + diff --git a/src/app/pages/connectorDetails/ConnectorDetails.tsx b/src/app/pages/connectorDetails/ConnectorDetails.tsx index 96164673..ca654b07 100644 --- a/src/app/pages/connectorDetails/ConnectorDetails.tsx +++ b/src/app/pages/connectorDetails/ConnectorDetails.tsx @@ -13,6 +13,10 @@ import { Dropdown, DropdownItem, DropdownList, + EmptyState, + EmptyStateBody, + EmptyStateHeader, + EmptyStateIcon, Flex, FlexItem, Grid, @@ -24,6 +28,7 @@ import { MenuToggleElement, PageSection, PageSectionVariants, + Skeleton, Split, SplitItem, Stack, @@ -46,6 +51,7 @@ import { import { POLLING_INTERVAL } from "@app/constants"; import { CheckCircleIcon, + CheckIcon, ExclamationCircleIcon, PencilAltIcon, TimesCircleIcon, @@ -334,21 +340,39 @@ export const ConnectorDetails: React.FC = (props) => { isAutoFit autoFitMinModifier={{ default: "200px" }} > - {connectorConfiguration && - Object.keys(connectorConfiguration).map( - (property: string) => { - return ( - - - {property} - - - {connectorConfiguration[property]} - - - ); - } - )} + {connectorsSchemaLoading + ? "loading".split("").map((char: string) => ( + + + + + + + + + )) + : connectorConfiguration && + Object.keys(connectorConfiguration).map( + (property: string) => { + return ( + + + {property} + + + {connectorConfiguration[property]} + + + ); + } + )} + {} @@ -362,33 +386,44 @@ export const ConnectorDetails: React.FC = (props) => { - {connectorStatus?.tasks.map((task) => { - return ( - - {`Id: ${task.id}`} - - - {task.trace}}> - - + {connectorStatusLoading ? ( +
+ +
+ ) : ( + connectorStatus?.tasks.map((task) => { + return ( + + {`Id: ${task.id}`} + + + {task.trace}}> + + - Worker Id:  {task.worker_id} - - - - ); - })} + Worker Id:  {task.worker_id} + + + + ); + }) + )} + {} @@ -400,27 +435,50 @@ export const ConnectorDetails: React.FC = (props) => { - - - - Streaming in progress: - - - {connectorMetrics?.connector.metrics.Connected ? ( - - - - ) : ( - - - - )} - - - - {connectorMetrics?.tasks && - connectorMetrics?.tasks.map((task) => { - return ( + {connectorMetricsError ? ( + + + } + /> + + Message: {connectorMetricsError.message} + + + ) : ( + <> + + + + Streaming in progress: + + + {connectorMetricsLoading ? ( + + ) : connectorMetrics?.connector.metrics + .Connected ? ( + + + + ) : ( + + + + )} + + + + {connectorMetricsLoading ? ( <>
= (props) => { fontWeight: "bold", }} > - Task Id: {task.id} + Task Id:{" "} +
- - {task.namespaces && - task.namespaces.map((namespace) => { - return ( - <> - {namespace.name && ( -
- Namespace: {namespace.name} -
- )} - - - - Time since last event: - - - {convertMilliSecToTime( - +namespace.metrics - .MilliSecondsSinceLastEvent - )} - - - - - Total number of events: - - - { - namespace.metrics - .TotalNumberOfEventsSeen - } - - - - - ); - })} + + + + Time since last event: + + + + + + + + Total number of events: + + + + + + - ); - })} + ) : ( + connectorMetrics?.tasks && + connectorMetrics?.tasks.map((task) => { + return ( + <> +
+ Task Id: {task.id} +
+ + {task.namespaces && + task.namespaces.map((namespace) => { + return ( + <> + {namespace.name && ( +
+ Namespace: {namespace.name} +
+ )} + + + + Time since last event: + + + {convertMilliSecToTime( + +namespace.metrics + .MilliSecondsSinceLastEvent + )} + + + + + Total number of events: + + + { + namespace.metrics + .TotalNumberOfEventsSeen + } + + + + + ); + })} + + ); + }) + )} + {} + + )} diff --git a/src/app/pages/connectorPlugins/ConnectorPlugins.tsx b/src/app/pages/connectorPlugins/ConnectorPlugins.tsx index bf2f4397..d1d7786e 100644 --- a/src/app/pages/connectorPlugins/ConnectorPlugins.tsx +++ b/src/app/pages/connectorPlugins/ConnectorPlugins.tsx @@ -11,6 +11,7 @@ import { Gallery, PageSection, SearchInput, + Skeleton, Switch, Text, TextContent, @@ -104,37 +105,55 @@ export const ConnectorPlugins: React.FC = (props) => { {PageTemplateTitle} - {connectorPlugins && - connectorPlugins.map((plugins, key) => ( - - ( + + )) + : connectorPlugins && + connectorPlugins.map((plugins, key) => ( + - {plugins.className.includes("oracle") ? : } - - - {plugins.displayName} + + {plugins.className.includes("oracle") ? ( + + ) : ( + + )} + + {plugins.displayName} - - - Version: {plugins.version} - - - - ))} + + + Version: {plugins.version} + + + + ))} + {} diff --git a/src/app/pages/createConnector/CreateConnectorWizard.tsx b/src/app/pages/createConnector/CreateConnectorWizard.tsx index 22e9d0a7..045474ca 100644 --- a/src/app/pages/createConnector/CreateConnectorWizard.tsx +++ b/src/app/pages/createConnector/CreateConnectorWizard.tsx @@ -63,8 +63,8 @@ export const CreateConnectorWizard: React.FunctionComponent = () => { >({}); const [topicGroupFormData, setTopicGroupFormData] = React.useState< - Record ->({}); + Record + >({}); const [dataOptionFormData, setDataOptionFormData] = React.useState< Record @@ -193,15 +193,21 @@ export const CreateConnectorWizard: React.FunctionComponent = () => { }, [connectionFormData, connectorName]); useEffect(() => { - if(clusterUrl){ - connectorService.getTopicCreationEnabled(clusterUrl).then((response) => { - setTopicCreationEnabled(response); - }).catch((err) => { - addNewNotification("danger", "Something went wrong: Topic Creation Enabled", err.message); - }); + if (clusterUrl) { + connectorService + .getTopicCreationEnabled(clusterUrl) + .then((response) => { + setTopicCreationEnabled(response); + }) + .catch((err) => { + addNewNotification( + "danger", + "Something went wrong: Topic Creation Enabled", + err.message + ); + }); } - - },[clusterUrl]) + }, [clusterUrl]); const generateConnectorProperties = () => { const connectorProperties = {} as Record; @@ -379,8 +385,8 @@ export const CreateConnectorWizard: React.FunctionComponent = () => { const ConnectionStepFooter = () => { const { goToNextStep, goToPrevStep, close } = useWizardContext(); - const [isLoading, setIsLoading] = useState(false); + const connectorPluginPage = () => navigate("/plugins"); async function onValidate() { setIsLoading(true); @@ -429,7 +435,11 @@ export const CreateConnectorWizard: React.FunctionComponent = () => { return ( -