🐛 Implement assessment settings columns

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

Hide file tree

Showing 3 changed files with 55 additions and 16 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,8 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
+  List,
+  ListItem,
   MenuToggle,
   MenuToggleElement,
   Modal,
@@ -46,12 +48,16 @@ import { ConditionalTooltip } from "@app/components/ConditionalTooltip";
 import { useLocalTableControls } from "@app/hooks/table-controls";
 import { NotificationsContext } from "@app/components/NotificationsContext";
 import { formatPath, getAxiosErrorMessage } from "@app/utils/utils";
-import { Questionnaire } from "@app/api/models";
+import { Questionnaire, Thresholds } from "@app/api/models";
 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 dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
 
 const AssessmentSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -108,7 +114,7 @@ const AssessmentSettings: React.FC = () => {
       name: "Name",
       questions: "Questions",
       rating: "Rating",
-      dateImported: "Date imported",
+      createTime: "Date imported",
     },
     isSelectable: false,
     expandableVariant: null,
@@ -127,10 +133,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,
@@ -153,6 +159,29 @@ const AssessmentSettings: React.FC = () => {
   // TODO: Check RBAC access
   const rbacWriteAccess = true; // checkAccess(userScopes, questionnaireWriteScopes);
 
+  const calculateTotalQuestions = (obj: Questionnaire) => {
+    const totalQuestions = (obj.sections || []).reduce((total, section) => {
+      return total + (section.questions ? section.questions.length : 0);
+    }, 0);
+
+    return totalQuestions.toString();
+  };
+
+  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 (
     <>
       <PageSection variant={PageSectionVariants.light}>
@@ -225,7 +254,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 +276,12 @@ const AssessmentSettings: React.FC = () => {
                 numRenderedColumns={numRenderedColumns}
               >
                 {currentPageItems?.map((questionnaire, rowIndex) => {
+                  console.log(questionnaire);
+
+                  const formattedDate = dayjs(questionnaire.createTime)
+                    .utc()
+                    .format("YYYY-MM-DD HH:mm:ss");
+
                   return (
                     <Tbody key={questionnaire.id}>
                       <Tr>
@@ -283,19 +318,21 @@ const AssessmentSettings: React.FC = () => {
                             width={10}
                             {...getTdProps({ columnKey: "questions" })}
                           >
-                            {questionnaire.questions}
+                            {calculateTotalQuestions(questionnaire)}
                           </Td>
                           <Td
                             width={15}
                             {...getTdProps({ columnKey: "rating" })}
                           >
-                            {questionnaire.rating}
+                            <List isPlain>
+                              {thresholdsToListItems(questionnaire.thresholds)}
+                            </List>
                           </Td>
                           <Td
                             width={25}
-                            {...getTdProps({ columnKey: "dateImported" })}
+                            {...getTdProps({ columnKey: "createTime" })}
                           >
-                            {questionnaire.dateImported}
+                            {formattedDate}
                           </Td>
                           <Td width={10}>
                             <Dropdown

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: [