Skip to content

add data-test-id for console dashboard components #2287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dantrainor wants to merge 1 commit into from
Closed

add data-test-id for console dashboard components #2287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions frontend/public/components/dashboard/inventory-card/inventory-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const getStatusGroupIcons = () => {
};

export const InventoryItem: React.FC<InventoryItemProps> = React.memo(
({ isLoading, singularTitle, pluralTitle, count, children, error = false }) => {
({ isLoading, singularTitle, pluralTitle, count, children, error = false, ...props }) => {
const title = count !== 1 ? pluralTitle : singularTitle;
let status: React.ReactNode;
if (error) {
Expand All @@ -54,7 +54,7 @@ export const InventoryItem: React.FC<InventoryItemProps> = React.memo(
status = children;
}
return (
<div className="co-inventory-card__item">
<div data-test-id={props['data-test-id']} className="co-inventory-card__item">
<div className="co-inventory-card__item-title">{isLoading || error ? title : `${count} ${title}`}</div>
<div className="co-inventory-card__item-status">{status}</div>
</div>
Expand All @@ -79,18 +79,19 @@ const StatusLink: React.FC<StatusLinkProps> = React.memo(({groupID, count, statu
const to = filterType && statusItems.length > 0 ? `/k8s/${namespacePath}/${kind.plural}?rowFilter-${filterType}=${statusItems}` : `/k8s/${namespacePath}/${kind.plural}`;
const statusGroupIcons = getStatusGroupIcons();
const groupIcon = statusGroupIcons[groupID] || statusGroupIcons[InventoryStatusGroup.NOT_MAPPED];
const cleanStatusItems = statusIDs.join('-').toLowerCase();
return (
<div className="co-inventory-card__status">
<Link to={to} style={{textDecoration: 'none'}}>
{groupIcon}
<span className="co-inventory-card__status-text">{count}</span>
<span data-test-id={`console-dashboard-inventory-count-${ cleanStatusItems }`} className="co-inventory-card__status-text">{count}</span>
</Link>
</div>
);
});

export const ResourceInventoryItem: React.FC<ResourceInventoryItemProps> = React.memo(
({ kind, useAbbr, resources, additionalResources, isLoading, mapper, namespace, error }) => {
({ kind, useAbbr, resources, additionalResources, isLoading, mapper, namespace, error, ...props }) => {
const groups = mapper(resources, additionalResources);
const [singularTitle, pluralTitle] = useAbbr ? [kind.abbr, `${kind.abbr}s`] : [kind.label, kind.labelPlural];
return (
Expand All @@ -100,6 +101,7 @@ export const ResourceInventoryItem: React.FC<ResourceInventoryItemProps> = React
pluralTitle={pluralTitle}
count={resources.length}
error={error}
data-test-id={props['data-test-id']}
>
{Object.keys(groups).filter(key => groups[key].count > 0).map(key => (
<StatusLink
Expand All @@ -126,6 +128,7 @@ type InventoryItemProps = {
count: number;
children?: React.ReactNode;
error: boolean;
'data-test-id'?: string;
};

type StatusProps = {
Expand All @@ -149,4 +152,5 @@ type ResourceInventoryItemProps = {
isLoading: boolean;
namespace?: string;
error: boolean;
'data-test-id'?: string;
}
7 changes: 4 additions & 3 deletions frontend/public/components/dashboards-page/overview-dashboard/inventory-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,9 @@ const InventoryCard_: React.FC<DashboardItemProps> = ({ watchK8sResource, stopWa
<DashboardCardTitle>Cluster Inventory</DashboardCardTitle>
</DashboardCardHeader>
<DashboardCardBody>
<ResourceInventoryItem isLoading={!nodesLoaded} error={!!nodesLoadError} kind={NodeModel} resources={nodesData} mapper={getNodeStatusGroups} />
<ResourceInventoryItem isLoading={!podsLoaded} error={!!podsLoadError} kind={PodModel} resources={podsData} mapper={getPodStatusGroups} />
<ResourceInventoryItem isLoading={!pvcsLoaded} error={!!pvcsLoadError} kind={PersistentVolumeClaimModel} useAbbr resources={pvcsData} mapper={getPVCStatusGroups} />
<ResourceInventoryItem isLoading={!nodesLoaded} error={!!nodesLoadError} kind={NodeModel} resources={nodesData} mapper={getNodeStatusGroups} data-test-id="console-dashboard-inventory-node" />
<ResourceInventoryItem isLoading={!podsLoaded} error={!!podsLoadError} kind={PodModel} resources={podsData} mapper={getPodStatusGroups} data-test-id="console-dashboard-inventory-pod" />
<ResourceInventoryItem isLoading={!pvcsLoaded} error={!!pvcsLoadError} kind={PersistentVolumeClaimModel} useAbbr resources={pvcsData} mapper={getPVCStatusGroups} data-test-id="console-dashboard-inventory-pvc" />
{pluginItems.map((item, index) => {
const resource = _.get(resources, uniqueResource(item.properties.resource, index).prop);
const resourceLoaded = _.get(resource, 'loaded');
Expand Down Expand Up @@ -110,6 +110,7 @@ const InventoryCard_: React.FC<DashboardItemProps> = ({ watchK8sResource, stopWa
additionalResources={additionalResourcesData}
mapper={item.properties.mapper}
useAbbr={item.properties.useAbbr}
data-test-id={`console-dashboard-inventory-${ item.properties.model.id}`}
/>
);
})}
Expand Down