Merge branch 'main' into unique-answer-ids

client/public/locales/en/translation.json

@@ -71,7 +71,8 @@
     "orange": "Orange",
     "purple": "Purple",
     "red": "Red",
-    "teal": "Teal"
+    "teal": "Teal",
+    "yellow": "Yellow"
   },
   "composed": {
     "add": "Add {{what}}",
@@ -243,7 +244,6 @@
     "businessServices": "Business services",
     "canceled": "Canceled",
     "category": "Category",
-    "cloudNativeReady": "Cloud-native ready",
     "color": "Color",
     "comments": "Comments",
     "completed": "Completed",
@@ -311,7 +311,6 @@
     "member(s)": "Member(s)",
     "memberCount": "Member count",
     "message": "Message",
-    "modernizable": "Modernizable",
     "migrationWave": "Migration wave",
     "migrationWaves": "Migration waves",
     "migrationWave(s)": "Migration wave(s)",
@@ -322,7 +321,6 @@
     "notConnected": "Not connected",
     "notReviewed": "Not reviewed",
     "notStarted": "Not started",
-    "notYetAssessed": "Not yet assessed",
     "notYetReviewed": "Not yet reviewed",
     "other": "Other",
     "owner": "Owner",
@@ -384,7 +382,6 @@
     "unassessed": "Unassessed",
     "unassigned": "Not yet assigned",
     "unknown": "Unknown",
-    "unsuitableForContainers": "Unsuitable for containers",
     "uploadApplicationFile": "Upload your application file",
     "uploadYamlFile": "Upload your YAML file",
     "url": "URL",

client/public/locales/es/translation.json

@@ -55,7 +55,8 @@
     "green": "Verde",
     "orange": "Naranja",
     "purple": "Morado",
-    "red": "Rojo"
+    "red": "Rojo",
+    "yellow": "Amarillo"
   },
   "composed": {
     "add": "Agregar {{what}}",
@@ -194,7 +195,6 @@
     "businessServices": "Servicios de negocio",
     "canceled": "Cancelado",
     "category": "Categoría",
-    "cloudNativeReady": "Listo para Cloud-native",
     "color": "Color",
     "comments": "Comentarios",
     "completed": "Completado",
@@ -247,13 +247,11 @@
     "member(s)": "Miembro(s)",
     "memberCount": "Número de miembros",
     "message": "Mensaje",
-    "modernizable": "Modernizable",
     "name": "Nombre",
     "northboundDependencies": "Dependencias del norte",
     "notAvailable": "No disponible",
     "notReviewed": "No revisado",
     "notStarted": "No empezado",
-    "notYetAssessed": "No evaluado todavía",
     "notYetReviewed": "No revisado todavía",
     "other": "Otro",
     "owner": "Propietario",
@@ -304,7 +302,6 @@
     "trivialButMigratable": "Trivial pero migrable",
     "unassessed": "No evaluado",
     "unknown": "Desconocido",
-    "unsuitableForContainers": "No apto para contenedores",
     "uploadApplicationFile": "Carga tu archivo con aplicaciones",
     "user": "Usuario",
     "version": "Versión",

client/src/app/api/models.ts

@@ -723,11 +723,6 @@ export interface AssessmentRisk {
   applicationId: number;
   risk: Risk;
 }
-export interface AssessmentRisk {
-  assessmentId: number;
-  applicationId: number;
-  risk: Risk;
-}
 
 export interface AssessmentQuestionRisk {
   category: string;

client/src/app/api/rest.ts

@@ -205,6 +205,9 @@ export const getApplicationSummaryCSV = (id: string): AxiosPromise => {
   });
 };
 
+export const getAssessments = (): Promise<Assessment[]> =>
+  axios.get(ASSESSMENTS).then((response) => response.data);
+
 export const getAssessmentsByItemId = (
   isArchetype: boolean,
   itemId?: number | string

client/src/app/pages/assessment-management/import-questionnaire-form/import-questionnaire-form.tsx

@@ -56,12 +56,13 @@ export const ImportQuestionnaireForm: React.FC<
     trigger,
   } = methods;
 
-  const onHandleSuccessfullQuestionnaireCreation = (
-    response: Questionnaire
-  ) => {
+  const onHandleSuccessfulQuestionnaireCreation = (response: Questionnaire) => {
     onSaved(response);
     pushNotification({
-      title: t("toastr.success.questionnaireCreated"),
+      title: t("toastr.success.createWhat", {
+        type: t("terms.questionnaire"),
+        what: response.name,
+      }),
       variant: "success",
     });
     onSaved();
@@ -75,7 +76,7 @@ export const ImportQuestionnaireForm: React.FC<
   };
 
   const { mutate: createQuestionnaire } = useCreateQuestionnaireMutation(
-    onHandleSuccessfullQuestionnaireCreation,
+    onHandleSuccessfulQuestionnaireCreation,
     onHandleFailedQuestionnaireCreation
   );
 

client/src/app/pages/reports/components/landscape/donut.tsx

@@ -11,7 +11,7 @@ export interface IDonutProps {
   total: number;
   color: string;
   riskLabel: string;
-  riskDescription: string;
+  riskDescription?: string;
 }
 
 export const Donut: React.FC<IDonutProps> = ({

client/src/app/pages/reports/components/landscape/landscape.tsx

@@ -7,7 +7,7 @@ import { ConditionalRender } from "@app/components/ConditionalRender";
 import { StateError } from "@app/components/StateError";
 
 import { RISK_LIST } from "@app/Constants";
-import { AssessmentRisk } from "@app/api/models";
+import { Assessment, AssessmentRisk } from "@app/api/models";
 
 import { ApplicationSelectionContext } from "../../application-selection-context";
 import { NoApplicationSelectedEmptyState } from "../no-application-selected-empty-state";
@@ -48,7 +48,11 @@ const extractLandscapeData = (
   return { low, medium, high, unassessed };
 };
 
-export const Landscape: React.FC = () => {
+interface ILandscapeProps {
+  assessments: Assessment[];
+}
+
+export const Landscape: React.FC<ILandscapeProps> = ({ assessments }) => {
   const { t } = useTranslation();
 
   // Context
@@ -89,38 +93,38 @@ export const Landscape: React.FC = () => {
         <Split hasGutter>
           <SplitItem>
             <Donut
-              value={landscapeData.low}
+              value={landscapeData.high}
               total={applications.length}
-              color={RISK_LIST["green"].hexColor}
-              riskLabel={t("terms.lowRisk")}
-              riskDescription={t("terms.cloudNativeReady")}
+              color={RISK_LIST["red"].hexColor}
+              riskLabel={t("colors.red")}
+              // riskDescription={}
             />
           </SplitItem>
           <SplitItem>
             <Donut
               value={landscapeData.medium}
               total={applications.length}
               color={RISK_LIST["yellow"].hexColor}
-              riskLabel={t("terms.mediumRisk")}
-              riskDescription={t("terms.modernizable")}
+              riskLabel={t("colors.yellow")}
+              // riskDescription={}
             />
           </SplitItem>
           <SplitItem>
             <Donut
               value={landscapeData.high}
               total={applications.length}
-              color={RISK_LIST["red"].hexColor}
-              riskLabel={t("terms.highRisk")}
-              riskDescription={t("terms.unsuitableForContainers")}
+              color={RISK_LIST["green"].hexColor}
+              riskLabel={t("colors.green")}
+              // riskDescription={}
             />
           </SplitItem>
           <SplitItem>
             <Donut
               value={landscapeData.unassessed}
               total={applications.length}
               color={RISK_LIST["unknown"].hexColor}
-              riskLabel={t("terms.unassessed")}
-              riskDescription={t("terms.notYetAssessed")}
+              riskLabel={`${t("terms.unassessed")}/${t("terms.unknown")}`}
+              // riskDescription={}
             />
           </SplitItem>
         </Split>

client/src/app/pages/reports/reports.tsx

@@ -9,9 +9,15 @@ import {
   CardExpandableContent,
   CardHeader,
   CardTitle,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  MenuToggleElement,
   PageSection,
   PageSectionVariants,
   Popover,
+  Select,
+  SelectOption,
   Split,
   SplitItem,
   Stack,
@@ -31,11 +37,27 @@ import { Landscape } from "./components/landscape";
 import { AdoptionPlan } from "./components/adoption-plan";
 import { IdentifiedRisksTable } from "./components/identified-risks-table";
 import { useFetchApplications } from "@app/queries/applications";
+import { useFetchAssessments } from "@app/queries/assessments";
+import { Ref } from "@app/api/models";
+
+const ALL_QUESTIONNAIRES = "All questionnaires";
 
 export const Reports: React.FC = () => {
   // i18
   const { t } = useTranslation();
 
+  const [isQuestionnaireSelectOpen, setIsQuestionnaireSelectOpen] =
+    React.useState<boolean>(false);
+
+  const [selectedQuestionnaire, setSelectedQuestionnaire] =
+    React.useState<string>("All questionnaires");
+
+  const {
+    assessments,
+    isFetching: isAssessmentsFetching,
+    fetchError: assessmentsFetchError,
+  } = useFetchAssessments();
+
   // Cards
   const [isAdoptionCandidateTable, setIsAdoptionCandidateTable] =
     useState(true);
@@ -66,6 +88,48 @@ export const Reports: React.FC = () => {
     );
   }
 
+  const toggleQuestionnaire = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      aria-label="kebab dropdown toggle"
+      onClick={() => {
+        setIsQuestionnaireSelectOpen(!isQuestionnaireSelectOpen);
+      }}
+      isExpanded={isQuestionnaireSelectOpen}
+    >
+      {selectedQuestionnaire}
+    </MenuToggle>
+  );
+
+  const onSelectQuestionnaire = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    setSelectedQuestionnaire(value as string);
+    setIsQuestionnaireSelectOpen(false);
+  };
+
+  const answeredQuestionnaires: Ref[] =
+    isAssessmentsFetching || assessmentsFetchError
+      ? []
+      : assessments
+          .reduce((questionnaires: Ref[], assessment) => {
+            if (
+              !questionnaires
+                .map((ref) => ref.id)
+                .includes(assessment.questionnaire.id)
+            ) {
+              assessment.questionnaire &&
+                questionnaires.push(assessment.questionnaire);
+            }
+            return questionnaires;
+          }, [])
+          .sort((a, b) => {
+            if (a.name > b.name) return 1;
+            if (b.name > a.name) return -1;
+            return 0;
+          });
+
   return (
     <>
       {pageHeaderSection}
@@ -78,13 +142,56 @@ export const Reports: React.FC = () => {
               <StackItem>
                 <Card>
                   <CardHeader>
-                    <TextContent>
-                      <Text component="h3">{t("terms.currentLandscape")}</Text>
-                    </TextContent>
+                    <Flex>
+                      <FlexItem>
+                        <TextContent>
+                          <Text component="h3">
+                            {t("terms.currentLandscape")}
+                          </Text>
+                        </TextContent>
+                      </FlexItem>
+                      <FlexItem>
+                        <Select
+                          id="select-questionnaires"
+                          isOpen={isQuestionnaireSelectOpen}
+                          selected={selectedQuestionnaire}
+                          onSelect={onSelectQuestionnaire}
+                          onOpenChange={(_isOpen) =>
+                            setIsQuestionnaireSelectOpen(false)
+                          }
+                          toggle={toggleQuestionnaire}
+                          shouldFocusToggleOnSelect
+                        >
+                          <SelectOption key={0} value={ALL_QUESTIONNAIRES}>
+                            All questionnaires
+                          </SelectOption>
+                          {answeredQuestionnaires.map(
+                            (answeredQuestionnaire, index) => (
+                              <SelectOption
+                                key={index}
+                                value={answeredQuestionnaire.name}
+                              >
+                                {answeredQuestionnaire.name}
+                              </SelectOption>
+                            )
+                          )}
+                        </Select>
+                      </FlexItem>
+                    </Flex>
                   </CardHeader>
                   <CardBody>
                     <Bullseye>
-                      <Landscape />
+                      <Landscape
+                        assessments={
+                          selectedQuestionnaire === "All questionnaires"
+                            ? assessments
+                            : assessments.filter(
+                                (assessment) =>
+                                  assessment.questionnaire.name ===
+                                  selectedQuestionnaire
+                              )
+                        }
+                      />
                     </Bullseye>
                   </CardBody>
                 </Card>

client/src/app/queries/assessments.ts

@@ -4,6 +4,7 @@ import {
   createAssessment,
   deleteAssessment,
   getAssessmentById,
+  getAssessments,
   getAssessmentsByItemId,
   updateAssessment,
 } from "@app/api/rest";
@@ -15,6 +16,18 @@ export const assessmentsQueryKey = "assessments";
 export const assessmentQueryKey = "assessment";
 export const assessmentsByItemIdQueryKey = "assessmentsByItemId";
 
+export const useFetchAssessments = () => {
+  const { isLoading, data, error } = useQuery({
+    queryKey: [QuestionnairesQueryKey],
+    queryFn: getAssessments,
+    onError: (error: AxiosError) => console.log("error, ", error),
+  });
+  return {
+    assessments: data || [],
+    isFetching: isLoading,
+    fetchError: error,
+  };
+};
 export const useCreateAssessmentMutation = (
   isArchetype: boolean,
   onSuccess: (name: string) => void,