Skip to content

Commit

Permalink
🐛 Implement assessment settings columns
Browse files Browse the repository at this point in the history
Signed-off-by: ibolton336 <ibolton@redhat.com>
  • Loading branch information
ibolton336 committed Sep 25, 2023
1 parent 4ab5428 commit 65eeaeb
Show file tree
Hide file tree
Showing 9 changed files with 82 additions and 25 deletions.
10 changes: 6 additions & 4 deletions client/src/app/api/models.ts
Original file line number Diff line number Diff line change
Expand Up @@ -646,7 +646,7 @@ export interface Questionnaire {
revision: number;
questions: number;
rating: string;
dateImported: string;
createTime: string;
required: boolean;
system: boolean;
sections: Section[];
Expand Down Expand Up @@ -687,10 +687,12 @@ export interface Answer {
selected?: boolean;
}
export interface Thresholds {
red: number;
unknown: number;
yellow: number;
red?: number;
unknown?: number;
yellow?: number;
green?: number;
}

export type AssessmentStatus = "empty" | "started" | "complete";
export type Risk = "green" | "yellow" | "red" | "unknown";

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
EmptyState,
EmptyStateBody,
EmptyStateIcon,
List,
MenuToggle,
MenuToggleElement,
Modal,
Expand Down Expand Up @@ -51,7 +52,10 @@ import { useHistory } from "react-router-dom";
import { Paths } from "@app/Paths";
import { ImportQuestionnaireForm } from "@app/pages/assessment-management/import-questionnaire-form/import-questionnaire-form";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog/ConfirmDeleteDialog";
import { ExportQuestionnaireDropdownItem } from "./ExportQuestionnaireDropdownItem";
import { ExportQuestionnaireDropdownItem } from "./components/export-questionnaire-dropdown-item";
import dayjs from "dayjs";
import { QuestionnaireQuestionsColumn } from "./components/questionnaire-questions-column";
import { QuestionnaireThresholdsColumn } from "./components/questionnaire-thresholds-column";

const AssessmentSettings: React.FC = () => {
const { t } = useTranslation();
Expand Down Expand Up @@ -108,7 +112,7 @@ const AssessmentSettings: React.FC = () => {
name: "Name",
questions: "Questions",
rating: "Rating",
dateImported: "Date imported",
createTime: "Date imported",
},
isSelectable: false,
expandableVariant: null,
Expand All @@ -127,10 +131,10 @@ const AssessmentSettings: React.FC = () => {
},
},
],
sortableColumns: ["name", "dateImported"],
sortableColumns: ["name", "createTime"],
getSortValues: (questionnaire) => ({
name: questionnaire.name || "",
dateImported: questionnaire.dateImported || "",
createTime: questionnaire.createTime || "",
}),
initialSort: { columnKey: "name", direction: "asc" },
hasPagination: true,
Expand Down Expand Up @@ -225,7 +229,7 @@ const AssessmentSettings: React.FC = () => {
<Th {...getThProps({ columnKey: "name" })} />
<Th {...getThProps({ columnKey: "questions" })} />
<Th {...getThProps({ columnKey: "rating" })} />
<Th {...getThProps({ columnKey: "dateImported" })} />
<Th {...getThProps({ columnKey: "createTime" })} />
</TableHeaderContentWithControls>
</Tr>
</Thead>
Expand All @@ -247,6 +251,10 @@ const AssessmentSettings: React.FC = () => {
numRenderedColumns={numRenderedColumns}
>
{currentPageItems?.map((questionnaire, rowIndex) => {
const formattedDate = dayjs(questionnaire.createTime)
.utc()
.format("YYYY-MM-DD HH:mm:ss");

return (
<Tbody key={questionnaire.id}>
<Tr>
Expand Down Expand Up @@ -283,19 +291,25 @@ const AssessmentSettings: React.FC = () => {
width={10}
{...getTdProps({ columnKey: "questions" })}
>
{questionnaire.questions}
<QuestionnaireQuestionsColumn
questionnaire={questionnaire}
/>
</Td>
<Td
width={15}
{...getTdProps({ columnKey: "rating" })}
>
{questionnaire.rating}
<List isPlain>
<QuestionnaireThresholdsColumn
questionnaire={questionnaire}
/>
</List>
</Td>
<Td
width={25}
{...getTdProps({ columnKey: "dateImported" })}
{...getTdProps({ columnKey: "createTime" })}
>
{questionnaire.dateImported}
{formattedDate}
</Td>
<Td width={10}>
<Dropdown
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";
import { Text } from "@patternfly/react-core";
import { Questionnaire } from "@app/api/models";

export const QuestionnaireQuestionsColumn: React.FC<{
questionnaire: Questionnaire;
}> = ({ questionnaire }) => {
const totalQuestions = (questionnaire.sections || []).reduce(
(total, section) => {
return total + (section.questions ? section.questions.length : 0);
},
0
);
return <Text>{totalQuestions}</Text>;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from "react";
import { ListItem } from "@patternfly/react-core";
import { Questionnaire, Thresholds } from "@app/api/models";

export const QuestionnaireThresholdsColumn: React.FC<{
questionnaire: Questionnaire;
}> = ({ questionnaire }) => {
const thresholdsToListItems = (thresholds: Thresholds) => {
const thresholdKeys: (keyof Thresholds)[] = Object.keys(
thresholds
) as (keyof Thresholds)[];

return (
<>
{thresholdKeys.map((color) => {
const percentage: number = thresholds[color] || 0;
return (
<ListItem key={color}>
{color} {percentage}%
</ListItem>
);
})}
</>
);
};
return thresholdsToListItems(questionnaire.thresholds || {});
};
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@ import {
useUpdateMigrationWaveMutation,
} from "@app/queries/migration-waves";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import customParseFormat from "dayjs/plugin/customParseFormat";
import {
Stakeholder,
StakeholderGroup,
Expand All @@ -37,8 +35,6 @@ import {
import { OptionWithValue, SimpleSelect } from "@app/components/SimpleSelect";
import { NotificationsContext } from "@app/components/NotificationsContext";
import { DEFAULT_SELECT_MAX_HEIGHT } from "@app/Constants";
dayjs.extend(utc);
dayjs.extend(customParseFormat);

const stakeholderGroupToOption = (
value: StakeholderGroup
Expand Down
5 changes: 0 additions & 5 deletions client/src/app/pages/migration-waves/migration-waves.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ import {
import { useTranslation } from "react-i18next";
import { AxiosError, AxiosResponse } from "axios";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import CubesIcon from "@patternfly/react-icons/dist/esm/icons/cubes-icon";
import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";

Expand Down Expand Up @@ -70,9 +68,6 @@ import { AppPlaceholder } from "@app/components/AppPlaceholder";
import { ToolbarBulkSelector } from "@app/components/ToolbarBulkSelector";
import { ConfirmDialog } from "@app/components/ConfirmDialog";

dayjs.extend(utc);
dayjs.extend(timezone);

export const MigrationWaves: React.FC = () => {
const { t } = useTranslation();
const { pushNotification } = React.useContext(NotificationsContext);
Expand Down
8 changes: 8 additions & 0 deletions client/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,14 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import App from "@app/App";
import reportWebVitals from "@app/reportWebVitals";
import { KeycloakProvider } from "@app/components/KeycloakProvider";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import customParseFormat from "dayjs/plugin/customParseFormat";

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(customParseFormat);

if (process.env.NODE_ENV === "development") {
import("./mocks/browser").then((browserMocks) => {
Expand Down
6 changes: 3 additions & 3 deletions client/src/mocks/stub-new-work/questionnaireData.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const questionnaireData: Record<number, Questionnaire> = {
revision: 1,
questions: 42,
rating: "5% Red, 25% Yellow",
dateImported: "8 Aug. 2023, 10:20 AM EST",
createTime: "8 Aug. 2023, 10:20 AM EST",
required: false,
system: true,
sections: [
Expand Down Expand Up @@ -189,7 +189,7 @@ const questionnaireData: Record<number, Questionnaire> = {
revision: 1,
questions: 24,
rating: "15% Red, 35% Yellow",
dateImported: "9 Aug. 2023, 03:32 PM EST",
createTime: "9 Aug. 2023, 03:32 PM EST",
required: true,
system: false,
sections: [
Expand Down Expand Up @@ -369,7 +369,7 @@ const questionnaireData: Record<number, Questionnaire> = {
revision: 1,
questions: 34,
rating: "7% Red, 25% Yellow",
dateImported: "10 Aug. 2023, 11:23 PM EST",
createTime: "10 Aug. 2023, 11:23 PM EST",
required: true,
system: false,
sections: [
Expand Down

0 comments on commit 65eeaeb

Please sign in to comment.