Skip to content

Commit

Permalink
✨ Regroup the dependencies table on name only, version/sha shown in d…
Browse files Browse the repository at this point in the history 
…etails (#1536)

Resolves: #1338
Resolves: https://issues.redhat.com/browse/MTA-1585

Depends on hub change konveyor/tackle2-hub#557
/ konveyor/tackle2-hub#558.

Summary of changes:
  - The dependency table will show a single row for every named
    dependency.
  - Multiple versions will be aggregated as a single row.
  - Details about multiple versions will be available in the details
    drawer.
  - The details view application table will show the application +
    version, allowing for all versions used to be listed.

---------

Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
  • Loading branch information
@sjd78
sjd78 authored Nov 15, 2023
1 parent 44e6eeb commit 06d6551
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 91 deletions.
13 changes: 5 additions & 8 deletions client/src/app/api/models.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -503,13 +503,10 @@ export interface TrackerProjectIssuetype {
}

export interface AnalysisDependency {
createTime: string;
name: string;
provider: string;
version: string;
sha: string;
applications: number;
name: string;
labels: string[];
applications: number;
}

export interface AnalysisAppDependency {
Expand All @@ -519,12 +516,12 @@ export interface AnalysisAppDependency {
businessService: string;
dependency: {
id: number;
provider: string;
name: string;
version: string;
provider: string;
sha: string;
indirect: boolean;
//TODO: Glean from labels somehow
// management?: string;
labels: string[];
};
}

Expand Down
125 changes: 44 additions & 81 deletions client/src/app/pages/dependencies/dependencies.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,31 +79,10 @@ export const Dependencies: React.FC = () => {
}) + "...",
getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
},
{
key: "version",
title: t("terms.version"),
type: FilterType.search,
filterGroup: "Dependency",
placeholderText:
t("actions.filterBy", {
what: t("terms.label").toLowerCase(),
}) + "...",
getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
},
{
key: "sha",
title: "SHA",
type: FilterType.search,
filterGroup: "Dependency",
placeholderText:
t("actions.filterBy", {
what: t("terms.name").toLowerCase(),
}) + "...",
getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
},
],
initialItemsPerPage: 10,
});

const {
result: { data: currentPageItems, total: totalItemCount },
isFetching,
Expand Down Expand Up @@ -179,8 +158,6 @@ export const Dependencies: React.FC = () => {
<Th {...getThProps({ columnKey: "foundIn" })} />
<Th {...getThProps({ columnKey: "provider" })} />
<Th {...getThProps({ columnKey: "labels" })} />
<Th {...getThProps({ columnKey: "version" })} />
<Th {...getThProps({ columnKey: "sha" })} />
</TableHeaderContentWithControls>
</Tr>
</Thead>
Expand All @@ -190,63 +167,49 @@ export const Dependencies: React.FC = () => {
isNoData={totalItemCount === 0}
numRenderedColumns={numRenderedColumns}
>
{currentPageItems?.map((dependency, rowIndex) => {
return (
<Tbody key={dependency.name + rowIndex}>
<Tr {...getTrProps({ item: dependency })}>
<TableRowContentWithControls
{...tableControls}
item={dependency}
rowIndex={rowIndex}
>
<Td width={25} {...getTdProps({ columnKey: "name" })}>
{dependency.name}
</Td>
<Td
width={10}
{...getTdProps({ columnKey: "foundIn" })}
>
<Button
className={spacing.pl_0}
variant="link"
onClick={(_) => {
if (activeItem && activeItem === dependency) {
clearActiveItem();
} else {
setActiveItem(dependency);
}
}}
>
{`${dependency.applications} application(s)`}
</Button>
</Td>
<Td
width={10}
{...getTdProps({ columnKey: "provider" })}
>
{dependency.provider}
</Td>
<Td width={10} {...getTdProps({ columnKey: "labels" })}>
<LabelGroup>
{dependency?.labels?.map((label) => {
return <Label>{label}</Label>;
})}
</LabelGroup>
</Td>
<Td
width={10}
{...getTdProps({ columnKey: "version" })}
<Tbody>
{currentPageItems?.map((dependency, rowIndex) => (
<Tr
key={dependency.name + rowIndex}
{...getTrProps({ item: dependency })}
>
<TableRowContentWithControls
{...tableControls}
item={dependency}
rowIndex={rowIndex}
>
<Td width={25} {...getTdProps({ columnKey: "name" })}>
{dependency.name}
</Td>
<Td width={10} {...getTdProps({ columnKey: "foundIn" })}>
<Button
className={spacing.pl_0}
variant="link"
onClick={(_) => {
if (activeItem && activeItem === dependency) {
clearActiveItem();
} else {
setActiveItem(dependency);
}
}}
>
{dependency.version}
</Td>
<Td width={10} {...getTdProps({ columnKey: "sha" })}>
{dependency.sha}
</Td>
</TableRowContentWithControls>
</Tr>
</Tbody>
);
})}
{`${dependency.applications} application(s)`}
</Button>
</Td>
<Td width={10} {...getTdProps({ columnKey: "provider" })}>
{dependency.provider}
</Td>
<Td width={10} {...getTdProps({ columnKey: "labels" })}>
<LabelGroup>
{dependency?.labels?.map((label, index) => (
<Label key={index}>{label}</Label>
))}
</LabelGroup>
</Td>
</TableRowContentWithControls>
</Tr>
))}
</Tbody>
</ConditionalTableBody>
</Table>
<SimplePagination
Expand All @@ -259,7 +222,7 @@ export const Dependencies: React.FC = () => {
<DependencyAppsDetailDrawer
dependency={activeItem || null}
onCloseClick={() => setActiveItem(null)}
></DependencyAppsDetailDrawer>
/>
</>
);
};
2 changes: 0 additions & 2 deletions client/src/app/pages/dependencies/dependency-apps-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,6 @@ export const DependencyAppsTable: React.FC<IDependencyAppsTableProps> = ({
},
implicitFilters: [
{ field: "dep.name", operator: "=", value: dependency.name },
{ field: "dep.version", operator: "=", value: dependency.version },
{ field: "dep.sha", operator: "=", value: dependency.sha },
],
})
);
Expand Down

0 comments on commit 06d6551

Please sign in to comment.