Merge pull request #503 from ClusterCockpit/dev

Add csv export for user/prject list

web/frontend/src/List.root.svelte

@@ -61,6 +61,9 @@
     }
     return colbase
   })
+  const sortedRows = $derived(
+    $stats.data ? sort($stats.data.rows, sorting, nameFilter) : []
+  );
 
   let stats = $derived(
     queryStore({
@@ -87,6 +90,40 @@
   );
 
   /* Functions */
+  function exportCsv() {
+    const isUser = type === "USER";
+    const header = [
+      isUser ? "Username" : "Project",
+      ...(isUser ? ["Name"] : []),
+      "Total Jobs",
+      "Short Jobs",
+      ...(fetchRunning ? ["Total Cores", "Total Accelerators"] : []),
+      "Total Walltime",
+      "Total Core Hours",
+      "Total Accelerator Hours",
+    ];
+    const rows = sortedRows.map((row) => [
+      row.id,
+      ...(isUser ? [row?.name ?? ""] : []),
+      row.totalJobs,
+      row.shortJobs,
+      ...(fetchRunning ? [row.totalCores, row.totalAccs] : []),
+      row.totalWalltime,
+      row.totalCoreHours,
+      row.totalAccHours,
+    ]);
+    const csv = [header, ...rows]
+      .map((row) => row.map((v) => `"${String(v ?? "").replace(/"/g, '""')}"`).join(","))
+      .join("\n");
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${type.toLowerCase()}s.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
   function changeSorting(newField) {
     if (sorting.field == newField) {
       // Same Field, Change Direction
@@ -137,6 +174,14 @@
           PROJECT: 'project',
         }[type]}"
       />
+      <Button
+        color="success"
+        title="Export current view as CSV"
+        disabled={!$stats.data}
+        onclick={() => exportCsv()}
+      >
+        <Icon name="download" /> CSV
+      </Button>
     </InputGroup>
   </Col>
   <Col xs="12" md="7" lg="8" xl="9">