Skip to content
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

Multi advises #71

Merged
merged 2 commits into from
Apr 8, 2022
Merged

Multi advises #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cddc7da
added advise history
Gkrumbach07 Mar 31, 2022
7810452
added advise compare screen
Gkrumbach07 Apr 8, 2022
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
162 changes: 61 additions & 101 deletions src/features/home/components/ImageTable.tsx → ...ts/Elements/GenericTable/GenericTable.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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