Skip to content

Commit

Permalink
refactor(Site): ♻️ Create processes tab
Browse files Browse the repository at this point in the history
  • Loading branch information
bartoval committed Sep 16, 2024
1 parent 7f732a6 commit 3069b97
Show file tree
Hide file tree
Showing 9 changed files with 101 additions and 86 deletions.
13 changes: 9 additions & 4 deletions __tests__/pages/Sites/Site.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { fireEvent, render, screen, waitForElementToBeRemoved, waitFor } from '@
import { Server } from 'miragejs';
import * as router from 'react-router';

import { ProcessesRoutesPaths } from '@pages/Processes/Processes.enum';

import processesData from '../../../mocks/data/PROCESSES.json';
import sitesData from '../../../mocks/data/SITES.json';
import { loadMockServer } from '../../../mocks/server';
Expand Down Expand Up @@ -64,21 +66,24 @@ describe('Site component', () => {
await waitFor(() => {
expect(screen.getByText(siteResults[0].name)).toBeInTheDocument();
expect(screen.getByText(siteResults[0].nameSpace)).toBeInTheDocument();
expect(screen.getByText(processResults[0].name)).toBeInTheDocument();
});
});

it('Should ensure the Site details component renders with correct link href after loading page', async () => {
it('Should ensure the Site processes component renders with correct link href after loading page', async () => {
await waitForElementToBeRemoved(() => screen.queryByTestId(getTestsIds.loadingView()), {
timeout: waitForElementToBeRemovedTimeout
});

fireEvent.click(screen.getByText(SiteLabels.Details));
fireEvent.click(screen.getByText(SiteLabels.Processes));

await waitFor(() => {
expect(screen.getByText(processResults[0].name)).toBeInTheDocument();
});

await waitFor(() => {
expect(screen.getByRole('link', { name: processResults[0].name })).toHaveAttribute(
'href',
`#/processes/${processResults[0].name}@${processResults[0].identity}`
`#${ProcessesRoutesPaths.Processes}/${processResults[0].name}@${processResults[0].identity}`
);
});
});
Expand Down
10 changes: 9 additions & 1 deletion cypress/e2e/skupper-console/sites/site.cy.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { getTestsIds } from '@config/testIds';

context('Sites', () => {
context('Site Detail', () => {
const testId = `${getTestsIds.siteView('site-1')}`;

beforeEach(() => {
Expand All @@ -20,6 +20,14 @@ context('Sites', () => {
link.click();
cy.url().should('eq', expectedUrl);
});
});

context('Site Processes', () => {
const testId = `${getTestsIds.siteView('site-1')}`;

beforeEach(() => {
cy.visit('#/sites/site%201@site-1?type=Processes');
});

it('should navigate to the correct process page when clicking on a link', () => {
const expectedUrl = 'http://localhost:3000/#/processes/process%20payment%201@process-payment-1?type=Overview';
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "skupper-web-console",
"version": "1.8.0",
"version": "2.0.0",
"description": "Skupper Web Console",
"license": "Apache-2.0",
"keywords": [
Expand Down Expand Up @@ -59,7 +59,7 @@
"@testing-library/react": "^16.0.1",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.13",
"@types/react": "^18.3.5",
"@types/react": "^18.3.6",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^8.5.0",
"@typescript-eslint/parser": "^8.5.0",
Expand Down
86 changes: 20 additions & 66 deletions src/pages/Sites/components/Details.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ import {
import { Link } from 'react-router-dom';

import ResourceIcon from '@core/components/ResourceIcon';
import SKEmptyData from '@core/components/SkEmptyData';
import { ProcessesRoutesPaths } from '@pages/Processes/Processes.enum';
import { SiteResponse } from '@sk-types/REST.interfaces';

import { useSiteDetailsData } from '../hooks/useSiteDetailsData';
Expand All @@ -31,7 +29,7 @@ interface DetailsProps {
}

const Details: FC<DetailsProps> = function ({ site: { identity: id, nameSpace, siteVersion, platform } }) {
const { sites, links, processes } = useSiteDetailsData(id);
const { sites, links } = useSiteDetailsData(id);

const { linkSiteIds } = SitesController.bindLinksWithSiteIds(
sites.filter(({ identity }) => identity === id),
Expand All @@ -40,8 +38,8 @@ const Details: FC<DetailsProps> = function ({ site: { identity: id, nameSpace, s
const linkedSites = sites.filter(({ identity }) => linkSiteIds.map(({ targetId }) => targetId).includes(identity));

return (
<Grid hasGutter sm={12} xl={6} xl2={6}>
<GridItem sm={12}>
<Grid hasGutter>
<GridItem>
<Card>
<CardTitle>
<Title headingLevel="h2">{SiteLabels.Details}</Title>
Expand All @@ -55,72 +53,28 @@ const Details: FC<DetailsProps> = function ({ site: { identity: id, nameSpace, s
<DescriptionListDescription>{platform}</DescriptionListDescription>
<DescriptionListTerm>{SiteLabels.SiteVersion}</DescriptionListTerm>
<DescriptionListDescription>{siteVersion}</DescriptionListDescription>
<DescriptionListTerm>{SiteLabels.Links}</DescriptionListTerm>
<DescriptionListDescription>
<List isPlain>
{linkedSites.length
? linkedSites.map(({ identity, name: linkedSiteName }) => (
<ListItem key={identity}>
<Flex>
<ResourceIcon type="site" />
<Link to={`${SitesRoutesPaths.Sites}/${linkedSiteName}@${identity}`}>
{linkedSiteName}
</Link>
</Flex>
</ListItem>
))
: '-'}
</List>
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</CardBody>
</Card>
</GridItem>

<GridItem>
<Card isFullHeight>
<CardTitle>
<Title headingLevel="h2">{SiteLabels.Links}</Title>
</CardTitle>
<CardBody>
{(!!linkedSites.length && (
<List isPlain>
{linkedSites.map(({ identity, name: linkedSiteName }) => (
<ListItem key={identity}>
<Flex>
<ResourceIcon type="site" />
<Link to={`${SitesRoutesPaths.Sites}/${linkedSiteName}@${identity}`}>{linkedSiteName}</Link>
</Flex>
</ListItem>
))}
</List>
)) || <SKEmptyData />}
</CardBody>
</Card>
</GridItem>

{/*<GridItem>
<Card isFullHeight>
<CardTitle>
<Title headingLevel="h2">{SiteLabels.Hosts}</Title>
</CardTitle>
<CardBody>
{(!!hosts.length && (
<List isPlain>
{hosts.map(({ identity, provider, name: hostName }) => (
<ListItem key={identity}>{provider ? `${provider} (${hostName})` : hostName}</ListItem>
))}
</List>
)) || <SKEmptyData />}
</CardBody>
</Card>
</GridItem> */}

<GridItem sm={12} xl={12} xl2={6}>
<Card isFullHeight>
<CardTitle>
<Title headingLevel="h2">{SiteLabels.Processes}</Title>
</CardTitle>
<CardBody>
{(!!processes.length && (
<List isPlain>
{processes.map(({ identity, name: processName }) => (
<ListItem key={identity}>
<Flex>
<ResourceIcon type="process" />
<Link to={`${ProcessesRoutesPaths.Processes}/${processName}@${identity}`}>{processName}</Link>
</Flex>
</ListItem>
))}
</List>
)) || <SKEmptyData />}
</CardBody>
</Card>
</GridItem>
</Grid>
);
};
Expand Down
32 changes: 32 additions & 0 deletions src/pages/Sites/components/ProcessList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { FC } from 'react';

import SkTable from '@core/components/SkTable';
import { CustomProcessCells, processesTableColumns } from '@pages/Processes/Processes.constants';
import { ProcessesLabels } from '@pages/Processes/Processes.enum';
import { SiteResponse } from '@sk-types/REST.interfaces';

import { useSiteProcessListData } from '../hooks/useSiteProcessListData';

interface ProcessListProps {
site: SiteResponse;
}

const ProcessList: FC<ProcessListProps> = function ({ site: { identity: id } }) {
const { processes } = useSiteProcessListData(id);

return (
<SkTable
title={ProcessesLabels.Section}
columns={processesTableColumns}
rows={processes}
customCells={{
linkCell: CustomProcessCells.linkCell,
linkComponentCell: CustomProcessCells.linkComponentCell,
TimestampCell: CustomProcessCells.TimestampCell,
ExposureCell: CustomProcessCells.ExposureCell
}}
/>
);
};

export default ProcessList;
12 changes: 3 additions & 9 deletions src/pages/Sites/hooks/useSiteDetailsData.ts
Original file line number Diff line number Diff line change
@@ -1,30 +1,24 @@
import { useSuspenseQueries } from '@tanstack/react-query';

import { RESTApi } from '@API/REST.api';
import { Direction, Role } from '@API/REST.enum';
import { Direction } from '@API/REST.enum';
import { UPDATE_INTERVAL } from '@config/config';

import { QueriesSites } from '../Sites.enum';

const processQueryParams = { processRole: [Role.Remote, Role.External], endTime: 0 };
const linkQueryParams = { direction: Direction.Outgoing };

export const useSiteDetailsData = (id: string) => {
const [{ data: sites }, { data: links }, { data: processes }] = useSuspenseQueries({
const [{ data: sites }, { data: links }] = useSuspenseQueries({
queries: [
{ queryKey: [QueriesSites.GetSites], queryFn: () => RESTApi.fetchSites(), refetchInterval: UPDATE_INTERVAL },
{
queryKey: [QueriesSites.GetLinksBySiteId, id, linkQueryParams],
queryFn: () => RESTApi.fetchLinksBySite(id, linkQueryParams),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesSites.GetProcessesBySiteId, { ...processQueryParams, parent: id }],
queryFn: () => RESTApi.fetchProcesses({ ...processQueryParams, parent: id }),
refetchInterval: UPDATE_INTERVAL
}
]
});

return { sites: sites.results, links: links.results, processes: processes.results };
return { sites: sites.results, links: links.results };
};
19 changes: 19 additions & 0 deletions src/pages/Sites/hooks/useSiteProcessListData.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { useSuspenseQuery } from '@tanstack/react-query';

import { RESTApi } from '@API/REST.api';
import { Role } from '@API/REST.enum';
import { UPDATE_INTERVAL } from '@config/config';

import { QueriesSites } from '../Sites.enum';

const processQueryParams = { processRole: [Role.Remote, Role.External], endTime: 0 };

export const useSiteProcessListData = (id: string) => {
const { data: processes } = useSuspenseQuery({
queryKey: [QueriesSites.GetProcessesBySiteId, { ...processQueryParams, parent: id }],
queryFn: () => RESTApi.fetchProcesses({ ...processQueryParams, parent: id }),
refetchInterval: UPDATE_INTERVAL
});

return { processes: processes.results };
};
3 changes: 3 additions & 0 deletions src/pages/Sites/views/Site.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import useUpdateQueryStringValueWithoutNavigation from 'hooks/useUpdateQueryStri

import Details from '../components/Details';
import Overview from '../components/Overview.';
import ProcessList from '../components/ProcessList';
import { useSiteData } from '../hooks/useSiteData';
import { SiteLabels } from '../Sites.enum';

Expand All @@ -34,6 +35,7 @@ const SiteContent: FC<SiteProps> = function ({ id, defaultTab }) {
<Tabs activeKey={tabSelected} onSelect={handleTabClick} component="nav">
<Tab eventKey={SiteLabels.Overview} title={<TabTitleText>{SiteLabels.Overview}</TabTitleText>} />
<Tab eventKey={SiteLabels.Details} title={<TabTitleText>{SiteLabels.Details}</TabTitleText>} />
<Tab eventKey={SiteLabels.Processes} title={<TabTitleText>{SiteLabels.Processes}</TabTitleText>} />
</Tabs>
);
};
Expand All @@ -48,6 +50,7 @@ const SiteContent: FC<SiteProps> = function ({ id, defaultTab }) {
<>
{tabSelected === SiteLabels.Overview && <Overview site={site} />}
{tabSelected === SiteLabels.Details && <Details site={site} />}
{tabSelected === SiteLabels.Processes && <ProcessList site={site} />}
</>
}
/>
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1952,10 +1952,10 @@
"@types/prop-types" "*"
csstype "^3.0.2"

"@types/react@^18.3.5":
version "18.3.5"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.5.tgz#5f524c2ad2089c0ff372bbdabc77ca2c4dbadf8f"
integrity sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==
"@types/react@^18.3.6":
version "18.3.6"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.6.tgz#1cb5895c5ea0d99d8bc7d659e42f72713cbd3942"
integrity sha512-CnGaRYNu2iZlkGXGrOYtdg5mLK8neySj0woZ4e2wF/eli2E6Sazmq5X+Nrj6OBrrFVQfJWTUFeqAzoRhWQXYvg==
dependencies:
"@types/prop-types" "*"
csstype "^3.0.2"
Expand Down

0 comments on commit 3069b97

Please sign in to comment.