feat(HMS-1897): add export to csv btn to instances table

RHEnVision · Sep 6, 2023 · 5acb5ba · 5acb5ba
1 parent 7dd30a2
commit 5acb5ba
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 15 deletions.
diff --git a/src/Components/InstancesTable/helpers.js b/src/Components/InstancesTable/helpers.js
@@ -12,3 +12,29 @@ export const SSHUsername = (provider) => {
       '';
   }
 };
+
+const flattenInstances = (instances) => {
+  return instances.map(({ instance_id, detail }) => ({ id: instance_id, ...detail }));
+};
+const convertToCSV = (objArray) => {
+  const flatten = flattenInstances(objArray);
+  const header = Object.keys(flatten[0]);
+  const csv = flatten.map((row) => header.map((fieldName) => JSON.stringify(row[fieldName])).join(','));
+  csv.unshift(header.join(','));
+  return csv.join('\r\n');
+};
+
+export const exportToCSV = (data) => {
+  const csv = convertToCSV(data);
+  const blob = new Blob([csv], { type: 'text/csv' });
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.style.display = 'none';
+  a.href = url;
+  a.download = 'instances.csv';
+  document.body.appendChild(a);
+  a.click();
+
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(a);
+};
diff --git a/src/Components/InstancesTable/index.js b/src/Components/InstancesTable/index.js
@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { Button, ClipboardCopy, Card, Pagination, Spinner, Bullseye } from '@patternfly/react-core';
+import { ExternalLinkAltIcon, DownloadIcon } from '@patternfly/react-icons';
+import { Toolbar, ToolbarItem, ToolbarContent, Button, ClipboardCopy, Pagination, Spinner, Bullseye } from '@patternfly/react-core';
 import { useQuery } from '@tanstack/react-query';
 
-import { SSHUsername } from './helpers';
+import { SSHUsername, exportToCSV } from './helpers';
 import { instanceLink, humanizeInstanceID } from '../Common/instanceHelpers';
 import { fetchReservationByProvider } from '../../API';
 
@@ -39,17 +39,28 @@ const InstancesTable = ({ reservationID, provider, region }) => {
       </Bullseye>
     );
   return (
-    <Card style={{ position: 'relative', marginLeft: '-20%', marginRight: '-20%' }}>
-      <Pagination
-        itemCount={instances?.length || 0}
-        page={paginationOptions.page}
-        onSetPage={onSetPage}
-        perPage={paginationOptions.perPage}
-        onPerPageSelect={onPerPageSelect}
-        perPageOptions={PER_PAGE_OPTIONS}
-        isCompact
-        ouiaId="instances-pagination"
-      />
+    <>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarItem>
+            <Button variant="link" icon={<DownloadIcon />} iconPosition="left" onClick={() => exportToCSV(instances)}>
+              Export as CSV
+            </Button>
+          </ToolbarItem>
+          <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+            <Pagination
+              itemCount={instances?.length || 0}
+              page={paginationOptions.page}
+              onSetPage={onSetPage}
+              perPage={paginationOptions.perPage}
+              onPerPageSelect={onPerPageSelect}
+              perPageOptions={PER_PAGE_OPTIONS}
+              isCompact
+              ouiaId="instances-pagination"
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
       <TableComposable ouiaId="instances table" aria-label="instances description table" variant="compact">
         <Thead>
           <Tr>
@@ -99,7 +110,7 @@ const InstancesTable = ({ reservationID, provider, region }) => {
           ))}
         </Tbody>
       </TableComposable>
-    </Card>
+    </>
   );
 };