Merge pull request #1232 from akto-api-security/feature/export_csv

exporting csv
akto-api-security · Jul 1, 2024 · 80e991b · 80e991b
2 parents f127ce7 + 224b895
commit 80e991b
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 3 deletions.
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/tables/GithubServerTable.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/tables/GithubServerTable.js
@@ -9,8 +9,12 @@ import {
   HorizontalStack,
   Key,
   ChoiceList,
-  Tabs} from '@shopify/polaris';
-import {GithubRow} from './rows/GithubRow';
+  Tabs,
+  Button,
+  Icon,
+  Box,
+  Tooltip} from '@shopify/polaris';
+import {CellType, GithubRow} from './rows/GithubRow';
 import { useState, useCallback, useEffect } from 'react';
 import "./style.css"
 import transform from '../../pages/observe/transform';
@@ -19,8 +23,11 @@ import PersistStore from '../../../main/PersistStore';
 import tableFunc from './transform';
 import useTable from './TableContext';
 import { debounce } from 'lodash';
+import { saveAs } from 'file-saver'
+import { FileMinor } from "@shopify/polaris-icons"
 
 import { useSearchParams } from 'react-router-dom';
+import func from '@/util/func';
 
 function GithubServerTable(props) {
 
@@ -239,6 +246,23 @@ function GithubServerTable(props) {
       })
   }
 
+  function exportCsv(csvFileName) {
+    if (!props?.loading) {
+        const startInd = page * pageLimit + Math.min(0, total);
+        const endInd = Math.min((page + 1) * pageLimit, total)
+        let headerTextToValueMap = Object.fromEntries(props?.headings.map(x => [x.text, x.isText === CellType.TEXT ? x.value : x.textValue]).filter(x => x[0]?.length > 0));
+        let csv = Object.keys(headerTextToValueMap).join(",") + "\r\n"
+        data.slice(startInd, endInd).forEach(i => {
+            csv += Object.values(headerTextToValueMap).map(h => (i[h] || "-")).join(",") + "\r\n"
+        })
+        let blob = new Blob([csv], {
+            type: "application/csvcharset=UTF-8"
+        });
+        saveAs(blob, csvFileName + ".csv");
+        func.setToast(true, false,"CSV exported successfully")
+    }
+}
+
   const handleFiltersClearAll = useCallback(() => {
     setFiltersMap({
       ...filtersMap,
@@ -342,6 +366,12 @@ function GithubServerTable(props) {
               />
               {props?.bannerComp?.selected === props?.selected ? props?.bannerComp?.comp : null}
               <div className={tableHeightClass}>
+                <div className="add-new-buttons">
+                  {props?.csvFileName ? <Button plain monochrome removeUnderline onClick={() => exportCsv(props?.csvFileName)}>
+                    <Tooltip content="Download as CSV" dismissOnMouseOut><Box minHeight="36px" minWidth="36px"><Icon source={FileMinor} /></Box></Tooltip>
+                  </Button>
+                  : null}
+                </div>
               <IndexTable
                 resourceName={props.resourceName}
                 itemCount={data.length}

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/tables/GithubSimpleTable.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/tables/GithubSimpleTable.js
@@ -37,6 +37,7 @@ function GithubSimpleTable(props) {
         filterStateUrl={props?.filterStateUrl}
         hidePagination={props?.hidePagination}
         bannerComp={props?.bannerComp}
+        csvFileName={props?.csvFileName}
     />
 
 }

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/tables/style.css b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/tables/style.css
@@ -16,4 +16,21 @@
 
 .removeHeaderColor .Polaris-IndexTable__TableHeading {
     background:none;
+}
+
+.add-new-buttons{
+    position: absolute;
+    z-index: 1000;
+    right: 144px;
+    margin-top: -36px;
+}
+
+.add-new-buttons .Polaris-Icon__Svg{
+    max-width: 120% !important;
+    max-height: 120% !important;
+    width: 120% !important;
+}
+
+.add-new-buttons .Polaris-Icon{
+    color: rgba(97, 106, 117, 1) !important;
 }
diff --git a/...d/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/ApiCollections.jsx b/...d/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/ApiCollections.jsx
@@ -25,6 +25,7 @@ const headers = [
         text: "API collection name",
         value: "displayNameComp",
         filterKey:"displayName",
+        textValue: 'displayName',
         showFilter:true
     },
     {
@@ -37,6 +38,8 @@ const headers = [
     {
         title: <HeadingWithTooltip content={<Text variant="bodySm">Risk score of collection is maximum risk score of the endpoints inside this collection</Text>} title="Risk score" />,
         value: 'riskScoreComp',
+        textValue: 'riskScore',
+        text: 'Risk Score',
         sortActive: true
     },
     {   
@@ -50,12 +53,14 @@ const headers = [
         title: 'Issues', 
         text: 'Issues', 
         value: 'issuesArr',
+        textValue: 'issuesArrVal',
         tooltipContent: (<Text variant="bodySm">Severity and count of issues present in the collection</Text>)
     },
     {   
         title: 'Sensitive data' , 
         text: 'Sensitive data' , 
         value: 'sensitiveSubTypes',
+        textValue: 'sensitiveSubTypesVal',
         tooltipContent: (<Text variant="bodySm">Types of data type present in response of endpoint inside the collection</Text>)
     },
     {
@@ -64,6 +69,7 @@ const headers = [
         value: 'envTypeComp',
         filterKey: "envType",
         showFilter: true,
+        textValue: 'envType',
         tooltipContent: (<Text variant="bodySm">Environment type for an API collection, Staging or Production </Text>)
     },
     {   
@@ -454,6 +460,7 @@ function ApiCollections() {
             tableTabs={tableTabs}
             onSelect={handleSelectedTab}
             selected={selected}
+            csvFileName={"Inventory"}
         />
     )
 

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/transform.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/transform.js
@@ -365,6 +365,16 @@ const transform = {
         )
     },
 
+    getIssuesListText(severityInfo){
+        let val = "-"
+        if(Object.keys(severityInfo).length > 0){
+            Object.keys(severityInfo).map((key) => {
+                val += (key + ": " + severityInfo[key] + ", ")
+            })
+        } 
+        return val
+    },
+
     prettifySubtypes(sensitiveTags, deactivated){
         return(
             <Box maxWidth="200px">
@@ -403,12 +413,14 @@ const transform = {
                 riskScoreComp: isLoading ? loadingComp : <Badge key={c?.id} status={this.getStatus(c.riskScore)} size="small">{c.riskScore}</Badge>,
                 coverage: isLoading ? '...' : calcCoverage,
                 issuesArr: isLoading ? loadingComp : this.getIssuesList(c.severityInfo),
+                issuesArrVal: this.getIssuesListText(c.severityInfo),
                 sensitiveSubTypes: isLoading ? loadingComp : this.prettifySubtypes(c.sensitiveInRespTypes, c.deactivated),
                 lastTraffic: isLoading ? '...' : c.detected,
                 riskScore: c.riskScore,
                 deactivatedRiskScore: c.deactivated ? (c.riskScore - 10 ) : c.riskScore,
                 activatedRiskScore: -1 * (c.deactivated ? c.riskScore : (c.riskScore - 10 )),
-                envTypeComp: isLoading ? loadingComp : c.envType ? <Badge size="small" status="info">{func.toSentenceCase(c.envType)}</Badge> : null
+                envTypeComp: isLoading ? loadingComp : c.envType ? <Badge size="small" status="info">{func.toSentenceCase(c.envType)}</Badge> : null,
+                sensitiveSubTypesVal: c?.sensitiveInRespTypes.join(" ") ||  "-"
             }
         })