✨ Add download modal for analysis details reports

client/public/locales/en/translation.json

@@ -192,6 +192,7 @@
     "duplicateTag": "A tag with this name already exists. Use a different name.",
     "duplicateWave": "The migration wave could not be created due to a conflict with an existing wave. Make sure the name and start/end dates are unique and try again.",
     "importErrorCheckDocumentation": "For status Error imports, check the documentation to ensure your file is structured correctly.",
+    "unsupportedFileType": "Unsupported file type. Only Excel, ODS, and CSV files are allowed.",
     "insecureTracker": "Insecure mode deactivates certificate verification. Use insecure mode for instances that have self-signed certificates.",
     "inheritedReviewTooltip": "This application is inheriting a review from an archetype.",
     "inheritedReviewTooltip_plural": "This application is inheriting reviews from {{count}} archetypes.",

client/src/app/api/rest.ts

@@ -358,6 +358,24 @@ export function getTaskByIdAndFormat(
     });
 }
 
+export function getTasksByIds(
+  ids: number[],
+  format: "json" | "yaml"
+): Promise<Task[]> {
+  const isYaml = format === "yaml";
+  const headers = isYaml ? { ...yamlHeaders } : { ...jsonHeaders };
+  const responseType = isYaml ? "text" : "json";
+
+  return axios
+    .post<Task[]>(`${TASKS}/multiple`, ids, {
+      headers: headers,
+      responseType: responseType,
+    })
+    .then((response) => {
+      return response.data;
+    });
+}
+
 export const getTasksDashboard = () =>
   axios
     .get<TaskDashboard[]>(`${TASKS}/report/dashboard`)

client/src/app/pages/applications/applications-table/applications-table.tsx

@@ -16,8 +16,10 @@ import {
   DropdownItem,
   Modal,
   Tooltip,
+  FormGroup,
 } from "@patternfly/react-core";
 import {
+  CodeIcon,
   PencilAltIcon,
   TagIcon,
   WarningTriangleIcon,
@@ -71,7 +73,11 @@ import { checkAccess } from "@app/utils/rbac-utils";
 import { useLocalTableControls } from "@app/hooks/table-controls";
 
 // Queries
-import { getArchetypeById, getAssessmentsByItemId } from "@app/api/rest";
+import {
+  getArchetypeById,
+  getAssessmentsByItemId,
+  getTasksByIds,
+} from "@app/api/rest";
 import { Assessment, Ref } from "@app/api/models";
 import {
   useBulkDeleteApplicationMutation,
@@ -109,6 +115,7 @@ import {
   DecoratedApplication,
   useDecoratedApplications,
 } from "./useDecoratedApplications";
+import yaml from "js-yaml";
 
 export const ApplicationsTable: React.FC = () => {
   const { t } = useTranslation();
@@ -145,8 +152,13 @@ export const ApplicationsTable: React.FC = () => {
 
   const [applicationDependenciesToManage, setApplicationDependenciesToManage] =
     useState<DecoratedApplication | null>(null);
+
   const isDependenciesModalOpen = applicationDependenciesToManage !== null;
 
+  const [isDownloadModalOpen, setIsDownloadModalOpen] = useState(false);
+
+  const [selectedFormat, setSelectedFormat] = useState<"json" | "yaml">("json");
+
   const [assessmentToEdit, setAssessmentToEdit] = useState<Assessment | null>(
     null
   );
@@ -194,6 +206,37 @@ export const ApplicationsTable: React.FC = () => {
     });
   };
 
+  const handleDownload = async () => {
+    const ids = selectedRows
+      .map((row) => row.tasks.currentAnalyzer?.id)
+      .filter((id): id is number => typeof id === "number");
+
+    try {
+      const tasks = await getTasksByIds(ids, selectedFormat);
+      const data =
+        selectedFormat === "yaml"
+          ? yaml.dump(tasks, { indent: 2 })
+          : JSON.stringify(tasks, null, 2);
+
+      const blob = new Blob([data], {
+        type:
+          selectedFormat === "json" ? "application/json" : "application/x-yaml",
+      });
+      const url = URL.createObjectURL(blob);
+      const downloadLink = document.createElement("a"); // שינוי שם למשתנה
+      downloadLink.href = url;
+      downloadLink.download = `logs - ${ids}.${selectedFormat}`;
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+      URL.revokeObjectURL(url);
+
+      setIsDownloadModalOpen(false);
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  };
+
   const failedCancelTask = () => {
     pushNotification({
       title: "Task",
@@ -575,6 +618,20 @@ export const ApplicationsTable: React.FC = () => {
         >
           {t("actions.delete")}
         </DropdownItem>,
+        <DropdownItem
+          key="applications-bulk-download"
+          isDisabled={
+            !selectedRows.some(
+              (application: DecoratedApplication) =>
+                application.tasks.currentAnalyzer?.id !== undefined
+            )
+          }
+          onClick={() => {
+            setIsDownloadModalOpen(true);
+          }}
+        >
+          {t("actions.download", { what: "analysis details" })}
+        </DropdownItem>,
         ...(credentialsReadAccess
           ? [
               <DropdownItem
@@ -1302,6 +1359,35 @@ export const ApplicationsTable: React.FC = () => {
           }}
         />
       </div>
+      <Modal
+        isOpen={isDownloadModalOpen}
+        variant="small"
+        title={t("actions.download", { what: "analysis details reports" })}
+        onClose={() => setIsDownloadModalOpen(false)} // סגור את המודל
+      >
+        <FormGroup label="Select Format" fieldId="format-select">
+          <div>
+            <Button
+              variant={selectedFormat === "json" ? "primary" : "secondary"}
+              onClick={() => setSelectedFormat("json")}
+            >
+              {<CodeIcon />}
+              JSON
+            </Button>
+            <Button
+              variant={selectedFormat === "yaml" ? "primary" : "secondary"}
+              onClick={() => setSelectedFormat("yaml")}
+            >
+              {<CodeIcon />}
+              YAML
+            </Button>
+          </div>
+          <p>Selected Format: {selectedFormat}</p>
+        </FormGroup>
+        <Button variant="primary" onClick={handleDownload}>
+          {t("actions.download")}
+        </Button>
+      </Modal>
     </ConditionalRender>
   );
 };

client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx

@@ -95,7 +95,13 @@ export const ImportApplicationsForm: React.FC<ImportApplicationsFormProps> = ({
             }
           }}
           dropzoneProps={{
-            accept: { "text/csv": [".csv"] },
+            accept: {
+              "text/csv": [".csv"],
+              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+                [".xlsx"],
+              "application/vnd.ms-excel": [".xls"],
+              "application/vnd.oasis.opendocument.spreadsheet": [".ods"],
+            },
             onDropRejected: handleFileRejected,
           }}
           onClearClick={() => {
@@ -106,7 +112,7 @@ export const ImportApplicationsForm: React.FC<ImportApplicationsFormProps> = ({
           <FormHelperText>
             <HelperText>
               <HelperTextItem variant="error">
-                You should select a CSV file.
+                {t("message.unsupportedFileType")}
               </HelperTextItem>
             </HelperText>
           </FormHelperText>