🐛 Implement assessment settings columns

Signed-off-by: ibolton336 <ibolton@redhat.com>
konveyor · Sep 25, 2023 · 65eeaeb · 65eeaeb
1 parent 4ab5428
commit 65eeaeb
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 25 deletions.
diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
@@ -646,7 +646,7 @@ export interface Questionnaire {
   revision: number;
   questions: number;
   rating: string;
-  dateImported: string;
+  createTime: string;
   required: boolean;
   system: boolean;
   sections: Section[];
@@ -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";
 

diff --git a/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx b/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx
@@ -8,6 +8,7 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
+  List,
   MenuToggle,
   MenuToggleElement,
   Modal,
@@ -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();
@@ -108,7 +112,7 @@ const AssessmentSettings: React.FC = () => {
       name: "Name",
       questions: "Questions",
       rating: "Rating",
-      dateImported: "Date imported",
+      createTime: "Date imported",
     },
     isSelectable: false,
     expandableVariant: null,
@@ -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,
@@ -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>
@@ -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>
@@ -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

diff --git a/...tings/ExportQuestionnaireDropdownItem.tsx → ...ts/export-questionnaire-dropdown-item.tsx b/...tings/ExportQuestionnaireDropdownItem.tsx → ...ts/export-questionnaire-dropdown-item.tsx
diff --git a/...s/assessment-management/assessment-settings/components/questionnaire-questions-column.tsx b/...s/assessment-management/assessment-settings/components/questionnaire-questions-column.tsx
@@ -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>;
+};
diff --git a/.../assessment-management/assessment-settings/components/questionnaire-thresholds-column.tsx b/.../assessment-management/assessment-settings/components/questionnaire-thresholds-column.tsx
@@ -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 || {});
+};
diff --git a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
@@ -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,
@@ -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

diff --git a/client/src/app/pages/migration-waves/migration-waves.tsx b/client/src/app/pages/migration-waves/migration-waves.tsx
@@ -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";
 
@@ -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);

diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -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) => {

diff --git a/client/src/mocks/stub-new-work/questionnaireData.ts b/client/src/mocks/stub-new-work/questionnaireData.ts
@@ -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: [
@@ -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: [
@@ -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: [