Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

refactor: connected instances extract hook refactoring (#6353)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-02-27 10:49:57 +01:00 committed by GitHub
parent d6e0bea2f0
commit e9603f866b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 147 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/src/component/application/ConnectedInstances/ConnectedInstances.test.tsx Normal file
View File

@ -0,0 +1,95 @@
import { screen } from '@testing-library/react';
import { render } from 'utils/testRenderer';
import { testServerRoute, testServerSetup } from 'utils/testServer';
import { Route, Routes } from 'react-router-dom';
import { ConnectedInstances } from './ConnectedInstances';
import { ApplicationEnvironmentInstancesSchemaInstancesItem } from '../../../openapi';
const server = testServerSetup();
const setupApi = (
instances: ApplicationEnvironmentInstancesSchemaInstancesItem[],
) => {
testServerRoute(server, '/api/admin/metrics/applications/my-app/overview', {
environments: [{ name: 'development' }, { name: 'production' }],
});
testServerRoute(server, '/api/admin/ui-config', {});
testServerRoute(server, '/api/admin/metrics/instances/my-app/development', {
instances,
});
testServerRoute(server, '/api/admin/metrics/instances/my-app/production', {
instances: [
{
instanceId: 'shouldNotShowUp',
clientIp: 'irrelevant',
lastSeen: '2024-02-26T14:00:59.980Z',
sdkVersion: 'irrelevant',
},
],
});
};
test('Display connected instances', async () => {
setupApi([
{
instanceId: 'devInstance1',
clientIp: '192.168.0.1',
lastSeen: '2024-02-26T15:00:59.980Z',
sdkVersion: 'unleash-client-node:5.5.0',
},
{
instanceId: 'devInstance2',
clientIp: '192.168.0.2',
lastSeen: '2024-02-26T14:00:59.980Z',
sdkVersion: 'unleash-client-node:5.5.1',
},
]);
render(
<Routes>
<Route
path={'/applications/:name/instances'}
element={<ConnectedInstances />}
/>
</Routes>,
{
route: '/applications/my-app/instances',
},
);
await screen.findByText('development');
await screen.findByText('production');
await screen.findByText('devInstance1');
await screen.findByText('devInstance2');
await screen.findByText('192.168.0.1');
await screen.findByText('192.168.0.2');
await screen.findByText('unleash-client-node:5.5.0');
await screen.findByText('unleash-client-node:5.5.1');
expect(screen.queryByText('prodInstance')).not.toBeInTheDocument();
// check order
const [, row1, row2] = screen.getAllByRole('row');
expect(row1.textContent?.includes('devInstance1')).toBe(true);
expect(row2.textContent?.includes('devInstance2')).toBe(true);
});
test('Display no connected instances', async () => {
setupApi([]);
render(
<Routes>
<Route
path={'/applications/:name/instances'}
element={<ConnectedInstances />}
/>
</Routes>,
{
route: '/applications/my-app/instances',
},
);
await screen.findByText('development');
await screen.findByText('production');
await screen.findByText(
"There's no data for any connected instances to display. Have you configured your clients correctly?",
);
});

60
frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx
View File

@ -7,30 +7,41 @@ import { Box, ToggleButton, ToggleButtonGroup } from '@mui/material';
import { useApplicationOverview } from 'hooks/api/getters/useApplicationOverview/useApplicationOverview';
import { useConnectedInstances } from 'hooks/api/getters/useConnectedInstances/useConnectedInstances';
import { ApplicationEnvironmentInstancesSchemaInstancesItem } from '../../../openapi';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
export const ConnectedInstances: FC = () => {
const name = useRequiredPathParam('name');
const { data: applicationOverview } = useApplicationOverview(name);
const useEnvironments = (application: string) => {
const { data: applicationOverview } = useApplicationOverview(application);
const applicationEnvironments = applicationOverview.environments
.map((env) => env.name)
.sort();
const availableEnvironments = applicationOverview.environments.map(
(env) => env.name,
);
const allEnvironmentsSorted = Array.from(availableEnvironments).sort(
(a, b) => a.localeCompare(b),
);
const [currentEnvironment, setCurrentEnvironment] = useState(
allEnvironmentsSorted[0],
);
const { data: connectedInstances } = useConnectedInstances(
name,
currentEnvironment,
applicationEnvironments[0],
);
useEffect(() => {
if (!currentEnvironment && availableEnvironments.length > 0) {
setCurrentEnvironment(availableEnvironments[0]);
if (!currentEnvironment && applicationEnvironments.length > 0) {
setCurrentEnvironment(applicationEnvironments[0]);
}
}, [JSON.stringify(availableEnvironments)]);
}, [JSON.stringify(applicationEnvironments)]);
return {
currentEnvironment,
setCurrentEnvironment,
environments: applicationEnvironments,
};
};
export const ConnectedInstances: FC = () => {
const name = useRequiredPathParam('name');
const { currentEnvironment, setCurrentEnvironment, environments } =
useEnvironments(name);
const { data: connectedInstances, loading } = useConnectedInstances(
name,
currentEnvironment,
);
const tableData = useMemo(() => {
const map = ({
@ -61,6 +72,9 @@ export const ConnectedInstances: FC = () => {
environments that have received traffic for this application
will be shown here.
</Box>
<ConditionallyRender
condition={Boolean(currentEnvironment)}
show={
<ToggleButtonGroup
color='primary'
value={currentEnvironment}
@ -71,13 +85,19 @@ export const ConnectedInstances: FC = () => {
}
}}
>
{allEnvironmentsSorted.map((env) => {
return <ToggleButton value={env}>{env}</ToggleButton>;
{environments.map((env) => {
return (
<ToggleButton key={env} value={env}>
{env}
</ToggleButton>
);
})}
</ToggleButtonGroup>
}
/>
</Box>
<ConnectedInstancesTable
loading={false}
loading={loading}
headerGroups={headerGroups}
prepareRow={prepareRow}
getTableBodyProps={getTableBodyProps}