Skip to content

Commit

Permalink
DEVPROD-5469 Update job logs page to support resmoke logs not hosted …
Browse files Browse the repository at this point in the history
…in logkeeper (#22)
  • Loading branch information
khelif96 authored Apr 5, 2024
1 parent 8f7b1f5 commit bfcdd72
Show file tree
Hide file tree
Showing 31 changed files with 755 additions and 224 deletions.
2 changes: 1 addition & 1 deletion apps/spruce/.env-cmdrc.local.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"REACT_APP_API_URL": "http://localhost:3000/api",
"REACT_APP_UI_URL": "http://localhost:9090",
"REACT_APP_SPRUCE_URL": "http://localhost:3000",
"REACT_APP_PARSLEY_URL": "https://parsley.mongodb.com"
"REACT_APP_PARSLEY_URL": "http://localhost:5173"
},
"devProduction": {
"REACT_APP_SIGNAL_PROCESSING_URL": "https://performance-monitoring-and-analysis.server-tig.prod.corp.mongodb.com",
Expand Down
82 changes: 49 additions & 33 deletions apps/spruce/cypress/integration/job_logs.ts
Original file line number Diff line number Diff line change
@@ -1,41 +1,57 @@
const buildId = "7e208050e166b1a9025c817b67eee48d";
const invalidBuildId = "9b07c7f9677e49ddae4c53076ca4f4ca";

describe("Job logs page", () => {
beforeEach(() => {
cy.visit(`job-logs/${buildId}`);
});

it("renders a table with test links", () => {
cy.dataCy("job-logs-table-row").should("have.length", 105);
const buildId = "7e208050e166b1a9025c817b67eee48d";
const invalidBuildId = "9b07c7f9677e49ddae4c53076ca4f4ca";
const taskIdWithResmokeLogs =
"mongodb_mongo_master_enterprise_amazon_linux2_arm64_all_feature_flags_jsCore_patch_9801cf147ed208ce4c0ff8dff4a97cdb216f4c22_65f06bd09ccd4eaaccca1391_24_03_12_14_51_29";

// Sort is not enabled
cy.get("th")
.should("have.length", 1)
.then((th) => {
cy.wrap(th).should("not.have.attr", "aria-sort");
});
describe("Logkeeper job logs page", () => {
beforeEach(() => {
cy.visit(`job-logs/${buildId}`);
});

cy.dataCy("complete-test-logs-link")
.should("have.attr", "href")
.then((href) => {
cy.wrap(href).should(
"contain",
"/resmoke/7e208050e166b1a9025c817b67eee48d/all",
);
});
});
});
it("renders a table with test links", () => {
cy.dataCy("leafygreen-table-row").should("have.length", 105);

describe("Invalid job logs page", () => {
beforeEach(() => {
cy.visit(`job-logs/${invalidBuildId}`);
cy.dataCy("complete-test-logs-link")
.should("have.attr", "href")
.then((href) => {
cy.wrap(href).should(
"contain",
"/resmoke/7e208050e166b1a9025c817b67eee48d/all",
);
});
});
it("visiting an invalid job logs page shows an error toast", () => {
cy.visit(`job-logs/${invalidBuildId}`);
cy.validateToast(
"error",
"There was an error retrieving logs for this build: Logkeeper returned HTTP status 404",
);
});
});
describe("Evergreen job logs page", () => {
beforeEach(() => {
cy.visit(`job-logs/${taskIdWithResmokeLogs}/0/job0`);
});
it("renders a table with test links", () => {
cy.dataCy("leafygreen-table-row").should("have.length", 655);

it("shows an error toast", () => {
cy.validateToast(
"error",
"There was an error retrieving logs for this build: Logkeeper returned HTTP status 404",
);
// ALl logs link does not work and will be completed in https://jira.mongodb.org/browse/DEVPROD-5949
// cy.dataCy("complete-test-logs-link")
// .should("have.attr", "href")
// .then((href) => {
// cy.wrap(href).should(
// "contain",
// "/resmoke/7e208050e166b1a9025c817b67eee48d/all",
// );
// });
});
it("visiting an invalid job logs page shows an error toast", () => {
cy.visit(`job-logs/DNE/0/job0`);
cy.validateToast(
"error",
"There was an error retrieving logs for this task: task not found",
);
});
});
});
10 changes: 6 additions & 4 deletions apps/spruce/src/analytics/joblogs/useJobLogsAnalytics.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import { useAnalyticsRoot } from "analytics/useAnalyticsRoot";

type Action =
| { name: "Filter Job Logs"; filterBy: string }
| { name: "Clicked lobster testlog url"; testId: string }
| { name: "Clicked HTML testlog url"; testId: string }
| { name: "Clicked complete logs link"; buildId: string }
| { name: "Clicked Parsley test log link"; buildId: string };
| { name: "Clicked complete logs link"; buildId?: string }
| { name: "Clicked Parsley test log link"; buildId?: string };

export const useJobLogsAnalytics = () => useAnalyticsRoot<Action>("JobLogs");
export const useJobLogsAnalytics = (isLogkeeper: boolean) =>
useAnalyticsRoot<Action>("JobLogs", {
isLogkeeperHostedLog: isLogkeeper,
});
10 changes: 8 additions & 2 deletions apps/spruce/src/components/Content/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,14 @@ export const Content: React.FC = () => (
/>
<Route path={routes.host} element={<Host />} />
<Route path={routes.hosts} element={<Hosts />} />
<Route path={routes.jobLogs} element={<JobLogs />}>
<Route path={`:${slugs.groupId}`} element={null} />
<Route path={routes.jobLogs} element={null}>
<Route path={`:${slugs.buildId}`} element={<JobLogs isLogkeeper />}>
<Route path={`:${slugs.groupId}`} element={null} />
</Route>
<Route
path={`:${slugs.taskId}/:${slugs.execution}/:${slugs.groupId}`}
element={<JobLogs isLogkeeper={false} />}
/>
</Route>
<Route path={routes.myPatches} element={<MyPatches />} />
<Route path={routes.patch} element={<VersionPage />}>
Expand Down
2 changes: 1 addition & 1 deletion apps/spruce/src/components/MetadataCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { SiderCard, wordBreakCss } from "components/styles";
import { Divider } from "components/styles/divider";

interface Props {
error: ApolloError;
error?: ApolloError;
loading?: boolean;
children: React.ReactNode;
}
Expand Down
38 changes: 38 additions & 0 deletions apps/spruce/src/components/PageTitle/PageTitle.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import Badge from "@leafygreen-ui/badge";
import { CustomMeta, CustomStoryObj } from "test_utils/types";
import PageTitle from ".";

export default {
component: PageTitle,
} satisfies CustomMeta<typeof PageTitle>;

export const Default: CustomStoryObj<typeof PageTitle> = {
render: (args) => <PageTitle {...args} />,
argTypes: {},
args: {
loading: false,
title: "Test Page",
size: "large",
badge: <Badge>Some Badge</Badge>,
},
};

export const WithBadge: CustomStoryObj<typeof PageTitle> = {
render: (args) => <PageTitle {...args} />,
argTypes: {},
args: {
loading: false,
title: "Test Page",
badge: <Badge>Some Badge</Badge>,
},
};

export const WithSubtitle: CustomStoryObj<typeof PageTitle> = {
render: (args) => <PageTitle {...args} />,
argTypes: {},
args: {
loading: false,
title: "Test Page",
subtitle: <>Some subtitle</>,
},
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Snapshot Tests PageTitle.stories Default 1`] = `
<div>
<div
class="css-1ogcarq-Container exz365g3"
>
<div
class="css-1pr1jy2-PageHeader exz365g1"
>
<span
class="css-1up2o4-TitleWrapper exz365g0"
>
<h2
class="leafygreen-ui-oaqrgz"
>
<span
data-cy="page-title"
>
Test Page
</span>
<div
class="css-2i76u1-BadgeWrapper exz365g2"
>
<div
class="leafygreen-ui-ohl2hc"
>
Some Badge
</div>
</div>
</h2>
</span>
</div>
</div>
</div>
`;

exports[`Snapshot Tests PageTitle.stories WithBadge 1`] = `
<div>
<div
class="css-1mjm61p-Container exz365g3"
>
<div
class="css-z0zdsn-PageHeader exz365g1"
>
<span
class="css-6bgihq-TitleWrapper exz365g0"
>
<h6
class="leafygreen-ui-19p3n10"
>
<span
data-cy="page-title"
>
Test Page
</span>
<div
class="css-yrksc4-BadgeWrapper exz365g2"
>
<div
class="leafygreen-ui-ohl2hc"
>
Some Badge
</div>
</div>
</h6>
</span>
</div>
</div>
</div>
`;

exports[`Snapshot Tests PageTitle.stories WithSubtitle 1`] = `
<div>
<div
class="css-1mjm61p-Container exz365g3"
>
<div
class="css-z0zdsn-PageHeader exz365g1"
>
<span
class="css-6bgihq-TitleWrapper exz365g0"
>
<h6
class="leafygreen-ui-19p3n10"
>
<span
data-cy="page-title"
>
Test Page
</span>
<div
class="css-yrksc4-BadgeWrapper exz365g2"
/>
</h6>
</span>
</div>
Some subtitle
</div>
</div>
`;
Original file line number Diff line number Diff line change
@@ -1,26 +1,22 @@
import styled from "@emotion/styled";
import { Skeleton } from "@leafygreen-ui/skeleton-loader";
import { H2, Subtitle } from "@leafygreen-ui/typography";
import { Skeleton } from "antd";
import { size as tokenSize } from "constants/tokens";
import { usePageTitle } from "hooks";

type Size = "large" | "medium";

interface Props {
loading: boolean;
title: string | JSX.Element | React.ReactNodeArray;
title: string | JSX.Element | React.ReactNode[];
pageTitle?: string;
subtitle?: string | JSX.Element | React.ReactNode[];
badge: JSX.Element;
buttons?: JSX.Element;
size?: Size;
children?: React.ReactNode;
}

interface TitleTypographyProps {
size: Size;
children: React.ReactNode | string;
}

const TitleTypography: React.FC<TitleTypographyProps> = ({
children,
size,
Expand All @@ -33,40 +29,49 @@ const TitleTypography: React.FC<TitleTypographyProps> = ({
}
};

export const PageTitle: React.FC<Props> = ({
const PageTitle: React.FC<Props> = ({
badge,
buttons,
children,
loading,
pageTitle = "Evergreen",
size = "medium",
subtitle,
title,
}) => {
usePageTitle(pageTitle);

return (
<>
{loading && (
<PageHeader size={size}>
<Skeleton active paragraph={{ rows: 0 }} />
</PageHeader>
)}
{!loading && (
<PageHeader size={size}>
<TitleWrapper size={size}>
<TitleTypography size={size}>
<span data-cy="page-title">{title}</span>
{children}
<BadgeWrapper size={size}>{badge}</BadgeWrapper>
</TitleTypography>
</TitleWrapper>
{buttons ?? null}
</PageHeader>
)}
</>
return loading ? (
<PageHeader size={size}>
<Skeleton />
</PageHeader>
) : (
<Container size={size}>
<PageHeader size={size}>
<TitleWrapper size={size}>
<TitleTypography size={size}>
<span data-cy="page-title">{title}</span>
{children}
<BadgeWrapper size={size}>{badge}</BadgeWrapper>
</TitleTypography>
</TitleWrapper>
{buttons ?? null}
</PageHeader>
{subtitle}
</Container>
);
};

interface TitleTypographyProps {
size: Size;
children: React.ReactNode | string;
}
const Container = styled.div<TitleTypographyProps>`
display: flex;
flex-direction: column;
margin-bottom: ${(props) =>
props.size === "medium" ? tokenSize.m : tokenSize.l};
`;
const BadgeWrapper = styled.div<TitleTypographyProps>`
display: inline-flex;
margin-left: ${({ size }) => (size === "large" ? tokenSize.m : tokenSize.s)};
Expand All @@ -75,8 +80,6 @@ const BadgeWrapper = styled.div<TitleTypographyProps>`
`;

const PageHeader = styled.div<TitleTypographyProps>`
margin-bottom: ${(props) =>
props.size === "medium" ? tokenSize.m : tokenSize.l};
${({ size }) => size === "large" && `margin-top: ${tokenSize.s};`}
display: flex;
justify-content: space-between;
Expand All @@ -86,3 +89,5 @@ const PageHeader = styled.div<TitleTypographyProps>`
const TitleWrapper = styled.span<TitleTypographyProps>`
max-width: ${(props) => (props.size === "medium" ? "70%" : "100%")};
`;

export default PageTitle;
Loading

0 comments on commit bfcdd72

Please sign in to comment.