Skip to content

Commit

Permalink
Merge pull request #71 from Gkrumbach07/multi-advises
Browse files Browse the repository at this point in the history 
Multi advises
  • Loading branch information
@sesheta
sesheta authored Apr 8, 2022
2 parents ec77dc1 + 7810452 commit e40cb28
Show file tree
Hide file tree
Showing 29 changed files with 1,171 additions and 793 deletions.
162 changes: 61 additions & 101 deletions src/features/home/components/ImageTable.tsx → ...ts/Elements/GenericTable/GenericTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,37 +9,9 @@ import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel";
import Paper from "@mui/material/Paper";
import timeSince from "utils/timeSince";
import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
import { IconButton } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { useContainerImages } from "../api";
import { useMemo } from "react";
import { CircularProgress } from "@mui/material";
import { NotFound } from "routes/NotFound";

const headCells = [
{
id: "environment_name",
label: "Image Name",
},
{
id: "os_name",
label: "OS Name",
},
{
id: "os_version",
label: "OS Version",
},
{
id: "python_version",
label: "Python Version",
},
{
id: "datetime",
label: "Last Updated",
},
];

function descendingComparator(
a: { [key: string]: any },
Expand All @@ -63,23 +35,33 @@ function getComparator(order: "desc" | "asc", orderBy: string) {
-descendingComparator(a, b, orderBy);
}

interface IGenericTable {
headers: {
id: string;
label: string;
}[];
rows: { [key: string]: unknown }[];
action?: (row: any) => void;
}

interface IEnhancedTableHead {
order: "asc" | "desc";
orderBy: typeof headCells[number]["id"];
onRequestSort: (property: typeof headCells[number]["id"]) => void;
orderBy: IGenericTable["headers"][number]["id"];
onRequestSort: (property: IGenericTable["headers"][number]["id"]) => void;
rowCount: number;
headers: IGenericTable["headers"];
}

function EnhancedTableHead(props: IEnhancedTableHead) {
const { order, orderBy, onRequestSort } = props;
const createSortHandler = (property: typeof headCells[number]["id"]) => {
const { order, orderBy, onRequestSort, headers } = props;
const createSortHandler = (property: typeof headers[number]["id"]) => {
onRequestSort(property);
};

return (
<TableHead>
<TableRow>
{headCells.map(headCell => (
{headers.map(headCell => (
<TableCell
key={headCell.id}
sortDirection={orderBy === headCell.id ? order : false}
Expand All @@ -99,30 +81,15 @@ function EnhancedTableHead(props: IEnhancedTableHead) {
);
}

export default function ImageTable() {
export default function GenericTable({ headers, rows, action }: IGenericTable) {
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] =
React.useState<typeof headCells[number]["id"]>("datetime");
const [orderBy, setOrderBy] = React.useState<typeof headers[number]["id"]>(
headers[0].id,
);
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const navigate = useNavigate();

const images = useContainerImages({ useErrorBoundary: false });

const rows = useMemo(() => {
if (images?.data?.data?.container_images) {
return images?.data?.data?.container_images.map(image => {
return {
...image,
date: timeSince(new Date(image.datetime)) + " ago",
};
});
} else {
return [];
}
}, [images?.data]);

const handleRequestSort = (property: typeof headCells[number]["id"]) => {
const handleRequestSort = (property: typeof headers[number]["id"]) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
Expand All @@ -144,19 +111,6 @@ export default function ImageTable() {
const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;

const handleAnalyze = (
package_extract_document_id: string,
environment_name: string | null,
) => {
navigate("/image/" + package_extract_document_id, {
state: { image_name: environment_name },
});
};

if (images.isError) {
return <NotFound />;
}

if (!rows) {
return (
<div className="w-full h-48 flex justify-center items-center">
Expand All @@ -175,6 +129,7 @@ export default function ImageTable() {
orderBy={orderBy}
onRequestSort={handleRequestSort}
rowCount={rows.length}
headers={headers}
/>
<TableBody>
{rows
Expand All @@ -196,42 +151,47 @@ export default function ImageTable() {
<TableRow
hover
tabIndex={-1}
key={
(row?.environment_name ?? "") +
index
}
key={index}
>
<TableCell
component="th"
id={labelId}
scope="row"
>
{row.environment_name}
</TableCell>
<TableCell align="left">
{row.os_name}
</TableCell>
<TableCell align="left">
{row.os_version}
</TableCell>
<TableCell align="left">
{row.python_version}
</TableCell>
<TableCell align="left">
{row.date}
</TableCell>
<TableCell align="right">
<IconButton
onClick={() =>
handleAnalyze(
row.package_extract_document_id,
row.environment_name,
)
}
>
<ArrowForwardRoundedIcon />
</IconButton>
</TableCell>
{headers.map((header, j) => {
if (j === 0) {
return (
<TableCell
component="th"
id={labelId}
scope="row"
>
{
row[
header.id
] as string
}
</TableCell>
);
} else {
return (
<TableCell align="left">
{
row[
header.id
] as string
}
</TableCell>
);
}
})}

{action ? (
<TableCell align="right">
<IconButton
onClick={() =>
action(row)
}
>
<ArrowForwardRoundedIcon />
</IconButton>
</TableCell>
) : undefined}
</TableRow>
);
})}
Expand Down
1 change: 1 addition & 0 deletions src/components/Elements/GenericTable/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./GenericTable";
14 changes: 12 additions & 2 deletions src/components/Layout/AdviseLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ export const AdviseLayout = ({ children, header }: IProps) => {

const currentTab = useMemo(() => {
const ending = location.pathname.split("/").at(-1);
if (ending === "summary" || ending === "details") {
if (
ending === "summary" ||
ending === "details" ||
ending === "compare"
) {
return ending;
} else {
return "summary";
Expand All @@ -39,11 +43,17 @@ export const AdviseLayout = ({ children, header }: IProps) => {
to="summary"
/>
<Tab
label="Advise Results"
label="Details"
value={"details"}
component={RouterLink}
to="details"
/>
<Tab
label="Compare"
value={"compare"}
component={RouterLink}
to="compare"
/>
</Tabs>
</div>
<div>{children}</div>
Expand Down
23 changes: 0 additions & 23 deletions src/components/Metrics/AdviseMetric/AdviseMetric.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ interface IAdviseMetric {
* graph and the Thoth made dependency graph.
*/
export const AdviseMetric = ({ metric }: IAdviseMetric) => {
const total = metric
? metric.added + metric.removed + metric.version + metric.unchanged
: 0;
const justTotal = Object.values(metric?.justification ?? {}).reduce(
(a, b) => a + b,
0,
Expand All @@ -41,27 +38,7 @@ export const AdviseMetric = ({ metric }: IAdviseMetric) => {
<Typography variant="body2" gutterBottom>
{metric?.build}
</Typography>
<Typography variant="h6" gutterBottom mt={2}>
What Thoth Changed
</Typography>
<Divider sx={{ mb: 1 }} />
<ProgressBar
value={metric?.added ?? 0}
total={total}
label={"Added Packages"}
sx={{ mb: 1 }}
/>
<ProgressBar
value={metric?.removed ?? 0}
total={total}
label={"Removed Packages"}
sx={{ mb: 1 }}
/>
<ProgressBar
value={metric?.version ?? 0}
total={total}
label={"Version Changes"}
/>
<Typography variant="h6" mt={3} gutterBottom>
Justification Counts
</Typography>
Expand Down
1 change: 1 addition & 0 deletions src/config/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const useProd = true;
export const LOCAL_STORAGE_KEY = "THOTH_SEARCH_ADVISE_HISTORY";
export const THOTH_URL =
!useProd &&
(process.env.REACT_APP_DEPLOYMENT === "STAGE" ||
Expand Down
24 changes: 23 additions & 1 deletion src/features/advise/api/getAdviseDocument.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import axios, { AxiosError, AxiosResponse } from "axios";
import { THOTH_URL } from "config";
import { useQuery } from "react-query";
import { useQueries, useQuery } from "react-query";
import { paths } from "lib/schema";
import { UseQueryResult } from "react-query/types/react/types";

Expand Down Expand Up @@ -39,7 +39,29 @@ export const useAdviseDocument = (
> => {
return useQuery({
...config,
enabled: !!analysis_id && analysis_id.startsWith("adviser"),
queryKey: ["adviseDocument", analysis_id],
queryFn: () => getAdviseDocument(analysis_id),
});
};

export const useAdviseDocuments = (
analysis_ids: AdviseDocumentRequestParams["analysis_id"][],
config?: { [key: string]: unknown },
): UseQueryResult<
AxiosResponse<AdviseDocumentRequestResponseSuccess>,
AxiosError<requestResponseFailure>
>[] => {
return useQueries(
analysis_ids.map(id => {
return {
...config,
queryKey: ["adviseDocument", id],
queryFn: () => getAdviseDocument(id),
};
}),
) as UseQueryResult<
AxiosResponse<AdviseDocumentRequestResponseSuccess>,
AxiosError<requestResponseFailure>
>[];
};
Loading

0 comments on commit e40cb28

Please sign in to comment.