Skip to content

Commit

Permalink
Merge pull request #79 from l3montree-dev/60-vulnerable-project-list-…
Browse files Browse the repository at this point in the history 
…and-vulnerable-asset-list-should-be-links-to-the-corresponding-projects

fixes #60
  • Loading branch information
@timbastin
timbastin authored Oct 29, 2024
2 parents fc5e8c6 + cb32aca commit 1af72cf
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 83 deletions.
16 changes: 9 additions & 7 deletions src/components/overview/VulnerableComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
import { ComponentRisk } from "@/types/api/api";
import { beautifyPurl, classNames, extractVersion } from "@/utils/common";
import EcosystemImage from "../common/EcosystemImage";
import { Badge } from "../ui/badge";

export interface ChartConfig {
[key: string]: {
Expand All @@ -35,16 +36,19 @@ export function VulnerableComponents({ data }: { data: ComponentRisk }) {
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-2">
{d.slice(0, 5).map((item, index) => (
<div
key={item.componentName}
className={classNames("flex items-center gap-4")}
className={classNames(
"flex items-center gap-2",
"-mx-2 rounded-lg px-2 py-2 !text-card-foreground transition-all",
)}
>
<div className="rounded-full bg-muted p-2">
<div className="rounded-full p-2">
<EcosystemImage size={20} packageName={item.componentName} />
</div>
<div className="grid gap-1">
<div className="grid">
<p className="text-sm font-medium leading-none">
{beautifyPurl(item.componentName)}
</p>
Expand All @@ -53,9 +57,7 @@ export function VulnerableComponents({ data }: { data: ComponentRisk }) {
</p>
</div>
<div className="ml-auto font-medium">
{" "}
{item.risk.toFixed(2)}{" "}
<small className="text-muted-foreground">Risk</small>
<Badge variant={"secondary"}>{item.risk.toFixed(2)} Risk</Badge>
</div>
</div>
))}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const AvatarFallback = React.forwardRef<
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
"flex h-full w-full items-center justify-center rounded-full bg-secondary text-secondary-foreground",
className,
)}
{...props}
Expand Down
96 changes: 56 additions & 40 deletions src/pages/[organizationSlug]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,22 @@ import { FunctionComponent } from "react";
import Page from "../../components/Page";
import { withOrgs } from "../../decorators/withOrgs";
import { withSession } from "../../decorators/withSession";
import { useActiveOrg } from "../../hooks/useActiveOrg";

import { useOrganizationMenu } from "@/hooks/useOrganizationMenu";
import Link from "next/link";
import AverageFixingTimeChart from "@/components/overview/AverageFixingTimeChart";
import FlawAggregationState from "@/components/overview/FlawAggregationState";
import { RiskDistributionDiagram } from "@/components/overview/RiskDistributionDiagram";
import { RiskHistoryChart } from "@/components/overview/RiskHistoryDiagram";
import { Badge } from "@/components/ui/badge";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { withOrganization } from "@/decorators/withOrganization";
import { useOrganizationMenu } from "@/hooks/useOrganizationMenu";
import { getApiClientFromContext } from "@/services/devGuardApi";
import {
AssetDTO,
AverageFixingTime,
Expand All @@ -36,21 +46,9 @@ import {
RiskDistribution,
RiskHistory,
} from "@/types/api/api";
import { Project } from "@/types/common";
import AverageFixingTimeChart from "@/components/overview/AverageFixingTimeChart";
import FlawAggregationState from "@/components/overview/FlawAggregationState";
import { RiskDistributionDiagram } from "@/components/overview/RiskDistributionDiagram";
import { RiskHistoryChart } from "@/components/overview/RiskHistoryDiagram";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from "@/components/ui/card";
import { classNames, beautifyPurl } from "@/utils/common";
import { Avatar, AvatarFallback } from "@radix-ui/react-avatar";
import { getApiClientFromContext } from "@/services/devGuardApi";
import { classNames } from "@/utils/common";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import Link from "next/link";

interface Props {
organization: OrganizationDTO & {
Expand All @@ -61,7 +59,12 @@ interface Props {
>;
};
riskDistribution: RiskDistribution[] | null;
riskHistory: Array<{ history: RiskHistory[]; label: string }>;
riskHistory: Array<{
history: RiskHistory[];
label: string;
slug: string;
description: string;
}>;
flawCountByScanner: FlawCountByScanner;
dependencyCountByScanType: DependencyCountByScanType;
flawAggregationStateAndChange: FlawAggregationStateAndChange;
Expand Down Expand Up @@ -129,32 +132,43 @@ const Home: FunctionComponent<Props> = ({
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-2">
{riskHistory.slice(0, 5).map((r) => (
<div
key={r.label}
className={classNames("flex items-center gap-4")}
<Link
href={organization.slug + "/projects/" + r.slug}
key={r.slug}
className="-mx-2 rounded-lg px-2 py-2 !text-card-foreground transition-all hover:bg-background hover:no-underline"
>
<div className="rounded-full bg-muted p-1">
<div
key={r.label}
className={classNames("flex items-center gap-4")}
>
<Avatar>
<AvatarFallback className="flex h-8 w-8 flex-row items-center justify-center">
{r.label[0]}
</AvatarFallback>
<AvatarFallback>{r.label[0]}</AvatarFallback>
</Avatar>

<div className="grid ">
<p className="text-sm font-medium leading-none">
{r.label}
</p>
<small className="line-clamp-1 text-ellipsis text-muted-foreground">
{r.description}
</small>
</div>
<div className="ml-auto font-medium">
<Badge
className="whitespace-nowrap"
variant="secondary"
>
{" "}
{r.history[r.history.length - 1]?.sumOpenRisk.toFixed(
2,
) ?? "0.00"}{" "}
Risk
</Badge>
</div>
</div>
<div className="grid gap-1">
<p className="text-sm font-medium leading-none">
{r.label}
</p>
</div>
<div className="ml-auto font-medium">
{" "}
{r.history[r.history.length - 1]?.sumOpenRisk.toFixed(
2,
) ?? "0.00"}{" "}
<small className="text-muted-foreground">Risk</small>
</div>
</div>
</Link>
))}
</div>
<div className="flex items-center gap-4"></div>
Expand Down Expand Up @@ -315,6 +329,8 @@ export const getServerSideProps = middleware(
riskHistory: riskHistory.map((r) => ({
label: r.project.name,
history: r.riskHistory,
slug: r.project.slug,
description: r.project.description,
})),
flawAggregationStateAndChange,
avgLowFixingTime,
Expand Down
87 changes: 56 additions & 31 deletions src/pages/[organizationSlug]/projects/[projectSlug]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,19 @@ import AverageFixingTimeChart from "@/components/overview/AverageFixingTimeChart
import FlawAggregationState from "@/components/overview/FlawAggregationState";
import { RiskDistributionDiagram } from "@/components/overview/RiskDistributionDiagram";
import { RiskHistoryChart } from "@/components/overview/RiskHistoryDiagram";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { withOrganization } from "@/decorators/withOrganization";
import { withProject } from "@/decorators/withProject";
import { useProjectMenu } from "@/hooks/useProjectMenu";
import { beautifyPurl, classNames } from "@/utils/common";
import Link from "next/link";
import { withOrgs } from "../../../../decorators/withOrgs";
import { withSession } from "../../../../decorators/withSession";
Expand All @@ -27,25 +36,19 @@ import {
RiskDistribution,
RiskHistory,
} from "../../../../types/api/api";
import EcosystemImage from "@/components/common/EcosystemImage";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from "@/components/ui/card";
import { classNames, beautifyPurl, extractVersion } from "@/utils/common";
import d from "react-syntax-highlighter/dist/esm/languages/hljs/d";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { useRouter } from "next/router";
import { useActiveProject } from "@/hooks/useActiveProject";

interface Props {
project: ProjectDTO & {
assets: Array<AssetDTO>;
};
riskDistribution: RiskDistribution[] | null;
riskHistory: Array<{ history: RiskHistory[]; label: string }>;
riskHistory: Array<{
history: RiskHistory[];
label: string;
slug: string;
description: string;
}>;
flawCountByScanner: FlawCountByScanner;
dependencyCountByScanType: DependencyCountByScanType;
flawAggregationStateAndChange: FlawAggregationStateAndChange;
Expand All @@ -67,6 +70,7 @@ const Index: FunctionComponent<Props> = ({
}) => {
const activeOrg = useActiveOrg();
const projectMenu = useProjectMenu();
const activeProject = useActiveProject();

return (
<Page
Expand Down Expand Up @@ -129,30 +133,49 @@ const Index: FunctionComponent<Props> = ({
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-2">
{riskHistory.slice(0, 5).map((r) => (
<div
key={r.label}
className={classNames("flex items-center gap-4")}
<Link
href={
"/" +
activeOrg.slug +
"/projects/" +
activeProject?.slug +
"/assets/" +
r.slug
}
key={r.slug}
className="-mx-2 rounded-lg px-2 py-2 !text-card-foreground transition-all hover:bg-background hover:no-underline"
>
<div className="rounded-full bg-muted p-1">
<div
key={r.label}
className={classNames("flex items-center gap-4")}
>
<Avatar>
<AvatarFallback>{r.label[0]}</AvatarFallback>
</Avatar>

<div className="grid">
<p className="text-sm font-medium leading-none">
{beautifyPurl(r.label)}
</p>
<small className="line-clamp-1 text-ellipsis text-muted-foreground">
{r.description}
</small>
</div>
<div className="ml-auto font-medium">
<Badge
className="whitespace-nowrap"
variant="secondary"
>
{r.history[r.history.length - 1]?.sumOpenRisk.toFixed(
2,
) ?? "0.00"}{" "}
Risk
</Badge>
</div>
</div>
<div className="grid gap-1">
<p className="text-sm font-medium leading-none">
{beautifyPurl(r.label)}
</p>
</div>
<div className="ml-auto font-medium">
{" "}
{r.history[r.history.length - 1]?.sumOpenRisk.toFixed(
2,
) ?? "0.00"}{" "}
<small className="text-muted-foreground">Risk</small>
</div>
</div>
</Link>
))}
</div>
<div className="flex items-center gap-4"></div>
Expand Down Expand Up @@ -314,6 +337,8 @@ export const getServerSideProps = middleware(
riskHistory: riskHistory.map((r) => ({
label: r.asset.name,
history: r.riskHistory,
slug: r.asset.slug,
description: r.asset.description,
})),
flawAggregationStateAndChange,
avgLowFixingTime,
Expand Down
8 changes: 4 additions & 4 deletions src/styles/globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
--primary: 43 95% 56%;
--primary-foreground: 0 0% 2%;

--secondary: 226 15% 15%;
--secondary-foreground: 0 0% 100%;
--secondary: 226 15% 85%;
--secondary-foreground: 0 0% 0%;

--muted: 0 0% 95%;
--muted-foreground: 0 0% 45%;
Expand Down Expand Up @@ -60,8 +60,8 @@
--primary: 43 95% 56%;
--primary-foreground: 0 0% 2%;

--secondary: 213 22% 15%;
--secondary-foreground: 0 0% 98%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;

--muted: 213 15% 15%;
--muted-foreground: 212 9% 59%;
Expand Down

0 comments on commit 1af72cf

Please sign in to comment.