DBZ-6856: Added overview tab & update to connector detail page. (#801)

* DBZ-6856:Initial commit(adding overview tab)

* DBZ-6856: cleanup and nav fix

ui/packages/ui/__tests__/pages/connectors/ConnectorOverview.test.tsx → ui/packages/ui/__tests__/pages/connectors/ConnectorExpandableView.test.tsx

@@ -1,13 +1,13 @@
 import {
   IConnectorcOverviewProps,
-  ConnectorOverview,
-} from '../../../src/app/pages/connectors/ConnectorOverview';
+  ConnectorExpandableView,
+} from '../../../src/app/pages/connectors/ConnectorExpandableView';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 describe('<ConnectorOverview />', () => {
   const renderSetup = (props: IConnectorcOverviewProps) => {
-    return render(<ConnectorOverview {...props} />);
+    return render(<ConnectorExpandableView {...props} />);
   };
 
   it('should render ConnectorOverview', () => {
@@ -18,6 +18,6 @@ describe('<ConnectorOverview />', () => {
 
     renderSetup(props);
 
-    expect(screen.getByText('metrics')).toBeInTheDocument();
+    expect(screen.getAllByText('Loading connector metrics')[0]).toBeInTheDocument();
   });
 });

ui/packages/ui/src/app/components/KafkaConnectCluster.tsx

@@ -21,6 +21,9 @@ export const KafkaConnectCluster: React.FC<IKafkaConnectCluster> = (props) => {
     fetch_retry(globalsService.getConnectCluster, globalsService)
       .then((cClusters: string[]) => {
         setConnectClusters([...cClusters]);
+        if(cClusters.length > 0) {
+          props.handleChange(1);
+        }
       })
       .catch((err: React.SetStateAction<Error>) => {
         alert(err);

ui/packages/ui/src/app/constants/constants.tsx

@@ -0,0 +1,5 @@
+export enum CONNECTOR_DETAILS_TABS {
+    Overview = 'overview',
+    Configuration = 'editConnectorConfig',
+    IncrementalSnapshot = 'incrementalSnapshot',
+  }

ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.css

@@ -0,0 +1,23 @@
+.connector-details-header {
+  padding-bottom: 5px;
+    &-page_breadcrumb {
+      border-bottom: 1px solid var(--pf-global--BorderColor--100);
+      padding-bottom: 0px;
+      .pf-l-level {
+        .pf-c-content {
+          padding: 15px 0px;
+        }
+      }
+    }
+    .pf-l-level {
+      padding-top: 10px;
+    }
+  }
+.connector-details-content{
+  padding: 5px 5px 0 5px;
+  height: 100%;
+  .pf-c-tab-content{
+    height: 100%;
+  }
+
+}

ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.tsx

@@ -0,0 +1,172 @@
+import { CONNECTOR_DETAILS_TABS } from '../../constants/constants';
+import './ConnectorDetailsPage.css';
+import { ConnectorOverview } from './ConnectorOverview';
+import { EditConnectorComponent } from './EditConnectorComponent';
+// import { IncrementalSnapshot } from './incrementalSnapshot/IncrementalSnapshot';
+import { Services } from '@debezium/ui-services';
+import {
+  Stack,
+  StackItem,
+  PageSection,
+  PageSectionVariants,
+  Breadcrumb,
+  BreadcrumbItem,
+  Level,
+  LevelItem,
+  TextContent,
+  Title,
+  TitleSizes,
+  Tab,
+  TabTitleText,
+  Tabs,
+} from '@patternfly/react-core';
+import { AppLayoutContext } from 'layout';
+import React, { useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { fetch_retry } from 'shared';
+
+export const ConnectorDetailsPage = () => {
+  const { hash, pathname } = useLocation();
+  const history = useHistory();
+  const actionConnectorName = pathname.replace(/^\/|\/$/g, '');
+
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(
+    getTab(hash)
+  );
+  const [connectorConfig, setConnectorConfig] = React.useState<
+    Map<string, string>
+  >(new Map<string, string>());
+
+  /**
+   * Toggle currently active tab
+   * @param _event
+   * @param tabIndex
+   */
+  const handleTabClick = (
+    _event: React.MouseEvent<HTMLElement, MouseEvent>,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+    history.push(`#${tabIndex}`);
+  };
+
+  useEffect(() => {
+    setActiveTabKey(getTab(hash));
+  }, [hash]);
+
+  const connectorService = Services.getConnectorService();
+  const appLayoutContext = React.useContext(AppLayoutContext);
+  const clusterID = appLayoutContext.clusterId;
+
+  useEffect(() => {
+    fetch_retry(connectorService.getConnectorConfig, connectorService, [
+      clusterID,
+      actionConnectorName,
+    ])
+      .then((cConnector) => {
+        setConnectorConfig(cConnector);
+      })
+      .catch((err: Error) => console.error('danger', err?.message));
+  }, [clusterID, actionConnectorName]);
+
+  return (
+    <Stack>
+      <StackItem>
+        <PageSection
+          variant={PageSectionVariants.light}
+          className="connector-details-header"
+        >
+          <Breadcrumb>
+            <BreadcrumbItem to="/">Connectors</BreadcrumbItem>
+            <BreadcrumbItem isActive={true}>
+              {actionConnectorName}
+            </BreadcrumbItem>
+          </Breadcrumb>
+          <Level hasGutter={true}>
+            <LevelItem>
+              <TextContent>
+                <Title headingLevel="h3" size={TitleSizes['2xl']}>
+                  {/* {connectorConfig['connector.id'] && (
+                    <ConnectorIcon
+                      connectorType={
+                        connectorConfig['connector.id'] === 'PostgreSQL'
+                          ? ConnectorTypeId.POSTGRES
+                          : connectorConfig['connector.id']
+                      }
+                      alt={actionConnectorName}
+                      width={30}
+                      height={30}
+                    />
+                  )}
+                  {`            ${actionConnectorName}`} */}
+                  {actionConnectorName}
+                </Title>
+              </TextContent>
+            </LevelItem>
+          </Level>
+        </PageSection>
+      </StackItem>
+      <StackItem isFilled>
+        <PageSection
+          variant={PageSectionVariants.light}
+          className="connector-details-content"
+        >
+          <Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
+            <Tab
+              key={CONNECTOR_DETAILS_TABS.Overview}
+              eventKey={CONNECTOR_DETAILS_TABS.Overview}
+              title={<TabTitleText>Overview</TabTitleText>}
+            >
+              <ConnectorOverview
+                connectorConfiguration={connectorConfig}
+                connectorName={actionConnectorName}
+              />
+            </Tab>
+            <Tab
+              key={CONNECTOR_DETAILS_TABS.Configuration}
+              eventKey={CONNECTOR_DETAILS_TABS.Configuration}
+              title={<TabTitleText> Edit connector config</TabTitleText>}
+            >
+              {actionConnectorName && (
+                <EditConnectorComponent
+                  actionConnectorName={actionConnectorName}
+                  connectorConfiguration={connectorConfig}
+                />
+              )}
+            </Tab>
+            {/* <Tab
+              key={CONNECTOR_DETAILS_TABS.IncrementalSnapshot}
+              eventKey={CONNECTOR_DETAILS_TABS.IncrementalSnapshot}
+              title={<TabTitleText>Incremental snapshot</TabTitleText>}
+            >
+              {actionConnectorName && connectorConfig['connector.id'] && (
+                // <IncrementalSnapshot
+                //   actionConnectorName={actionConnectorName}
+                //   connectorConfig={connectorConfig}
+                // />
+                <PageSection isFilled={true}>
+                  <Card>
+                    <CardTitle>Coming soon</CardTitle>
+                    <CardBody></CardBody>
+                  </Card>
+                </PageSection>
+              )}
+            </Tab> */}
+          </Tabs>
+        </PageSection>
+      </StackItem>
+    </Stack>
+  );
+};
+
+/**
+ * Extract the tab name out of the document hash
+ * @param hash
+ * @returns
+ */
+const getTab = (hash: string): string => {
+  const answer = hash.includes('&')
+    ? hash.substring(1, hash.indexOf('&'))
+    : hash.substring(1);
+  return answer !== '' ? answer : CONNECTOR_DETAILS_TABS.Overview;
+};

ui/packages/ui/src/app/pages/connectorDetails/ConnectorOverview.tsx

@@ -0,0 +1,81 @@
+import { ConnectorExpandableView } from '../connectors/ConnectorExpandableView';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Grid,
+  GridItem,
+  PageSection,
+  TextContent,
+  TextList,
+  TextListItem,
+  TextListItemVariants,
+  TextListVariants,
+} from '@patternfly/react-core';
+import { AppLayoutContext } from 'layout';
+import React, { FC, Fragment } from 'react';
+
+export type ConnectorOverviewProps = {
+  connectorConfiguration: Map<string, string>;
+  connectorName: string;
+};
+export const ConnectorOverview: FC<ConnectorOverviewProps> = ({
+  connectorConfiguration,
+  connectorName,
+}) => {
+  const appLayoutContext = React.useContext(AppLayoutContext);
+  const clusterID = appLayoutContext.clusterId;
+
+
+  const textListItem = (title: string, value?: any) => (
+    <Fragment key={title}>
+      {value && (
+        <>
+          <TextListItem component={TextListItemVariants.dt} style={{overflowWrap: 'anywhere'}}>
+            {title}
+          </TextListItem>
+          <TextListItem component={TextListItemVariants.dd} style={{overflowWrap: 'anywhere'}}>
+            {value}
+          </TextListItem>
+        </>
+      )}
+    </Fragment>
+  );
+
+  return (
+    <PageSection isFilled={true}>
+      <Grid hasGutter>
+        <GridItem span={7}>
+          <Card ouiaId="metricsCard" style={{marginBottom: '15px'}}>
+            <CardTitle>Metrics</CardTitle>
+            <CardBody>
+              <ConnectorExpandableView
+                clusterId={clusterID}
+                connectorName={connectorName}
+              />
+            </CardBody>
+          </Card>
+          <Card ouiaId="taskCard">
+            <CardTitle>Task</CardTitle>
+            <CardBody>Coming soon</CardBody>
+          </Card>
+        </GridItem>
+
+        <GridItem span={5}>
+          <Card ouiaId="configCard">
+            <CardTitle>Config</CardTitle>
+            <CardBody>
+              <TextContent>
+                <TextList component={TextListVariants.dl}>
+                  {Object.entries(connectorConfiguration).map((list) => {
+                    return textListItem(list[0], list[1]);
+                  })}
+                </TextList>
+              </TextContent>
+            </CardBody>
+          </Card>
+        </GridItem>
+      </Grid>
+    </PageSection>
+  );
+};

ui/packages/ui/src/app/pages/connectorDetails/EditConnectorComponent.css

@@ -0,0 +1,4 @@
+.edit-footer{
+    position: sticky;
+    bottom: 0;
+}