Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 05:45:22 +02:00
Code Issues Releases Activity

refactor(app): redesign dashboard-item component [EE-3634] (#7175)

Browse source
This commit is contained in:
Chaim Lev-Ari 2022-07-06 11:23:53 +03:00 • committed by GitHub
parent a66fd78dc1
commit 8bf1c91bc9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 236 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

22
app/azure/Dashboard/DashboardView.test.tsx
View file

@ -19,7 +19,7 @@ jest.mock('@uirouter/react', () => ({
test('dashboard items should render correctly', async () => {
const { getByLabelText } = await renderComponent();
const subscriptionsItem = getByLabelText('Subscriptions');
const subscriptionsItem = getByLabelText('Subscription');
expect(subscriptionsItem).toBeVisible();
const subscriptionElements = within(subscriptionsItem);
@ -31,7 +31,7 @@ test('dashboard items should render correctly', async () => {
'Subscriptions'
);
const resourceGroupsItem = getByLabelText('Resource groups');
const resourceGroupsItem = getByLabelText('Resource group');
expect(resourceGroupsItem).toBeVisible();
const resourceGroupElements = within(resourceGroupsItem);
@ -47,20 +47,20 @@ test('dashboard items should render correctly', async () => {
test('when there are no subscriptions, should show 0 subscriptions and 0 resource groups', async () => {
const { getByLabelText } = await renderComponent();
const subscriptionElements = within(getByLabelText('Subscriptions'));
const subscriptionElements = within(getByLabelText('Subscription'));
expect(subscriptionElements.getByLabelText('value')).toHaveTextContent('0');
const resourceGroupElements = within(getByLabelText('Resource groups'));
const resourceGroupElements = within(getByLabelText('Resource group'));
expect(resourceGroupElements.getByLabelText('value')).toHaveTextContent('0');
});
test('when there is subscription & resource group data, should display these', async () => {
const { getByLabelText } = await renderComponent(1, { 'subscription-1': 2 });
const subscriptionElements = within(getByLabelText('Subscriptions'));
const subscriptionElements = within(getByLabelText('Subscription'));
expect(subscriptionElements.getByLabelText('value')).toHaveTextContent('1');
const resourceGroupElements = within(getByLabelText('Resource groups'));
const resourceGroupElements = within(getByLabelText('Resource group'));
expect(resourceGroupElements.getByLabelText('value')).toHaveTextContent('2');
});
@ -70,7 +70,7 @@ test('should correctly show total number of resource groups across multiple subs
'subscription-2': 3,
});
const resourceGroupElements = within(getByLabelText('Resource groups'));
const resourceGroupElements = within(getByLabelText('Resource group'));
expect(resourceGroupElements.getByLabelText('value')).toHaveTextContent('5');
});
@ -81,8 +81,8 @@ test('when only subscriptions fail to load, dont show the dashboard', async () =
500,
200
);
expect(queryByLabelText('Subscriptions')).not.toBeInTheDocument();
expect(queryByLabelText('Resource groups')).not.toBeInTheDocument();
expect(queryByLabelText('Subscription')).not.toBeInTheDocument();
expect(queryByLabelText('Resource group')).not.toBeInTheDocument();
});
test('when only resource groups fail to load, still show the subscriptions', async () => {
@ -92,8 +92,8 @@ test('when only resource groups fail to load, still show the subscriptions', asy
200,
500
);
expect(queryByLabelText('Subscriptions')).toBeInTheDocument();
expect(queryByLabelText('Resource groups')).not.toBeInTheDocument();
expect(queryByLabelText('Subscription')).toBeInTheDocument();
expect(queryByLabelText('Resource group')).not.toBeInTheDocument();
});
async function renderComponent(

29
app/azure/Dashboard/DashboardView.tsx
View file

@ -7,6 +7,7 @@ import { r2a } from '@/react-tools/react2angular';
import { DashboardItem } from '@@/DashboardItem';
import { PageHeader } from '@@/PageHeader';
import { DashboardGrid } from '@@/DashboardItem/DashboardGrid';
import { useResourceGroups, useSubscriptions } from '../queries';
@ -53,22 +54,24 @@ export function DashboardView() {
<>
<PageHeader title="Home" breadcrumbs={[{ label: 'Dashboard' }]} />
{!subscriptionsQuery.isError && (
<div className="row">
<DashboardItem
value={subscriptionsCount as number}
icon="fa fa-th-list"
type="Subscriptions"
/>
{!resourceGroupsQuery.isError && (
<div className="mx-4">
{subscriptionsQuery.data && (
<DashboardGrid>
<DashboardItem
value={resourceGroupsCount as number}
value={subscriptionsCount as number}
icon="fa fa-th-list"
type="Resource groups"
type="Subscription"
/>
)}
</div>
)}
{!resourceGroupsQuery.isError && !resourceGroupsQuery.isLoading && (
<DashboardItem
value={resourceGroupsCount}
icon="fa fa-th-list"
type="Resource group"
/>
)}
</DashboardGrid>
)}
</div>
</>
);
}