🐛 Assessment settings table columns empty (#1391)

Closes https://issues.redhat.com/browse/MTA-1317 <img width="1903" alt="Screenshot 2023-09-22 at 1 25 39 PM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/c994020a-7915-4710-bfdb-c6cc2c96d261"> This pull request addresses the issue of empty columns in the Assessment settings table by making the following changes: Updated Models: Modified the Questionnaire model in client/src/app/api/models.ts to include the createTime field, which is now used for the "Date imported" column in the Assessment settings table. Date Formatting: Utilized the dayjs library to format the date from the createTime field into a human-readable format ("YYYY-MM-DD HH:mm:ss") for display in the table. Thresholds Display: Modified the rendering of thresholds in the "Rating" column to display each color and its percentage. These changes should resolve the issue of empty columns and ensure that the table displays the relevant data correctly. Signed-off-by: ibolton336 <ibolton@redhat.com>
konveyor · Sep 25, 2023 · fbd5e3d · fbd5e3d
1 parent e893ec8
commit fbd5e3d
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: [