Merge pull request #1278 from akto-api-security/temp/ui_fixes

UI fixes from feedback
akto-api-security · Jul 15, 2024 · 498dcb7 · 498dcb7
2 parents 4310c1e + fb2d5b8
commit 498dcb7
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 48 deletions.
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/DonutChart.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/DonutChart.jsx
@@ -4,9 +4,10 @@ import Highcharts from "highcharts"
 import { useRef } from "react";
 import { useNavigate } from "react-router-dom"
 import PersistStore from '../../../main/PersistStore';
+import observeFunc from "../../pages/observe/transform"
 
 
-function DonutChart({data, title, size,type,navUrl}) {
+function DonutChart({data, title, size,type,navUrl, isRequest}) {
     const chartComponentRef = useRef(null)
     const navigate = useNavigate()
     const filtersMap = PersistStore(state => state.filtersMap)
@@ -44,7 +45,9 @@ function DonutChart({data, title, size,type,navUrl}) {
                 ]
             },
             headerFormat: '',
-            pointFormat: '<b>{point.name} </b> {point.y}',
+            formatter: function() {
+                return `<b>${this.point.name} </b> ${observeFunc.formatNumberWithCommas(this.point.y)}`;
+            },
             borderWidth: 1,
             borderColor: '#AAA'
         },
@@ -63,6 +66,15 @@ function DonutChart({data, title, size,type,navUrl}) {
                         click: (event) => {
                             const { point } = event;
                             if(navUrl && navUrl ==='/dashboard/observe/sensitive/'){
+                                if(isRequest){
+                                    const filterUrl = `${navUrl}${point.name}`
+                                    let updatedFiltersMap = { ...filtersMap };
+                                    updatedFiltersMap[filterUrl] = {}
+                                    const filterObj = [{key: "isRequest", label: "In request", value: [true]}]
+                                    updatedFiltersMap[filterUrl]['filters'] = filterObj;
+                                    updatedFiltersMap[filterUrl]['sort'] = [];
+                                    setFiltersMap(updatedFiltersMap)
+                                }
                                 navigate(`${navUrl}${point.name}`);
                             }
                             else if( navUrl && navUrl==='/dashboard/issues/'){

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/tables/transform.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/tables/transform.js
@@ -48,7 +48,7 @@ const tableFunc = {
             tempData = tempData.filter(value => singleFilterData.includes(value));
           })
           tempData = tempData.filter((value) => {
-            return func.findInObjectValue(value, queryValue.toLowerCase(), ['id', 'time', 'icon', 'order']);
+            return func.findInObjectValue(value, queryValue.toLowerCase(), ['id', 'time', 'icon', 'order', 'conditions']);
           })
           let dataSortKey = props?.sortOptions?.filter(value => {
             return (value.value.startsWith(sortKey))

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard/HomeDashboard.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard/HomeDashboard.jsx
@@ -181,7 +181,7 @@ function HomeDashboard() {
                     docsUrl={"https://docs.akto.io/api-inventory/concepts/sensitive-data"}
                 />
                 <HorizontalGrid gap={5} columns={2}>
-                    <ChartypeComponent navUrl={"/dashboard/observe/sensitive/"} data={sensitiveData.request} title={"Request"} isNormal={true} boxHeight={'100px'}/>
+                    <ChartypeComponent navUrl={"/dashboard/observe/sensitive/"} isRequest={true} data={sensitiveData.request} title={"Request"} isNormal={true} boxHeight={'100px'}/>
                     <ChartypeComponent navUrl={"/dashboard/observe/sensitive/"} data={sensitiveData.response} title={"Response"} isNormal={true} boxHeight={'100px'}/>
                 </HorizontalGrid>
             </VerticalStack>

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
@@ -152,7 +152,7 @@ function ApiCollections() {
     const [selectedTab, setSelectedTab] = useState("all")
     const [selected, setSelected] = useState(0)
     const [summaryData, setSummaryData] = useState({totalEndpoints:0 , totalTestedEndpoints: 0, totalSensitiveEndpoints: 0, totalCriticalEndpoints: 0})
-    const [hasUsageEndpoints, setHasUsageEndpoints] = useState(false)
+    const [hasUsageEndpoints, setHasUsageEndpoints] = useState(true)
     const [envTypeMap, setEnvTypeMap] = useState({})
     const [refreshData, setRefreshData] = useState(false)
     const [popover,setPopover] = useState(false)
@@ -204,6 +204,8 @@ function ApiCollections() {
         setLoading(true)
         let apiCollectionsResp = await api.getAllCollectionsBasic();
         setLoading(false)
+        let hasUserEndpoints = await api.getUserEndpoints()
+        setHasUsageEndpoints(hasUserEndpoints)
         let tmp = (apiCollectionsResp.apiCollections || []).map(convertToCollectionData)
         let dataObj = {}
         dataObj = convertToNewData(tmp, {}, {}, {}, {}, {}, true);
@@ -222,7 +224,6 @@ function ApiCollections() {
             api.getAllCollections(),
             api.getCoverageInfoForCollections(),
             api.getLastTrafficSeen(),
-            api.getUserEndpoints(),
         ];
         if(shouldCallHeavyApis){
             apiPromises = [
@@ -236,31 +237,30 @@ function ApiCollections() {
         apiCollectionsResp = results[0].status === 'fulfilled' ? results[0].value : {};
         let coverageInfo = results[1].status === 'fulfilled' ? results[1].value : {};
         let trafficInfo = results[2].status === 'fulfilled' ? results[2].value : {};
-        let hasUserEndpoints = results[3].status === 'fulfilled' ? results[3].value : true;
 
         let riskScoreObj = lastFetchedResp
         let sensitiveInfo = lastFetchedSensitiveResp
         let severityObj = lastFetchedSeverityResp
 
         if(shouldCallHeavyApis){
-            if(results[4]?.status === "fulfilled"){
-                const res = results[4].value
+            if(results[3]?.status === "fulfilled"){
+                const res = results[3].value
                 riskScoreObj = {
                     criticalUrls: res.criticalEndpointsCount,
                     riskScoreMap: res.riskScoreOfCollectionsMap
                 } 
             }
 
-            if(results[5]?.status === "fulfilled"){
-                const res = results[5].value
+            if(results[4]?.status === "fulfilled"){
+                const res = results[4].value
                 sensitiveInfo ={ 
                     sensitiveUrls: res.sensitiveUrlsInResponse,
                     sensitiveInfoMap: res.sensitiveSubtypesInCollection
                 }
             }
 
-            if(results[6]?.status === "fulfilled"){
-                const res = results[6].value
+            if(results[5]?.status === "fulfilled"){
+                const res = results[5].value
                 severityObj = res
             }
 

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
@@ -282,6 +282,9 @@ const transform = {
         }
     },
     formatNumberWithCommas(number) {
+        if(number === undefined){
+            return 0;
+        }
         const numberString = number.toString();
         return numberString.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     },

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/QuickStart.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/QuickStart.jsx
@@ -30,7 +30,7 @@ function QuickStart() {
         loading ? <SpinnerCentered/> :
             myConnections.length > 0 ?
             <div className='update-connections'>
-                <UpdateConnections myConnections={myConnections}/>
+                <UpdateConnections myConnections={[]}/>
             </div> : <NewConnection/>
     )
 

diff --git a/...web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx b/...web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx
@@ -10,8 +10,7 @@ import FlyLayout from '../../../components/layouts/FlyLayout';
 function UpdateConnections(props) {
 
     const { myConnections } = props; 
-    const allConnections = quickStartFunc.getConnectorsList()
-    const obj = quickStartFunc.getConnectionsObject(myConnections,allConnections)
+    const obj = quickStartFunc.getConnectorsList()
     const [newCol, setNewCol] = useState(0)
 
     const currentCardObj = QuickStartStore(state => state.currentConnector)
@@ -48,25 +47,14 @@ function UpdateConnections(props) {
                         docsUrl={"https://docs.akto.io/traffic-connections/traffic-data-sources"}
                     />}
         >
-            <div style={{marginBottom: '16px'}}>
-            <HorizontalStack gap={"3"}>
-                <Text variant="headingMd" as="h6" color='subdued'> Your connections </Text>
-                <Tag>{obj.myConnections.length.toString()}</Tag>
-            </HorizontalStack>
-            </div>
-            <GridRows CardComponent={RowCard} columns="3" 
-                items={obj.myConnections} buttonText="Configure" onButtonClick={onButtonClick}
-                changedColumns={newCol}
-            />
-
             <div style={{margin: '24px 0 16px 0'}}>
             <HorizontalStack gap={"3"}>
-                <Text variant="headingMd" as="h6" color='subdued'> Explore other connections </Text>
-                <Tag>{obj.moreConnections.length.toString()}</Tag>
+                <Text variant="headingMd" as="h6" color='subdued'> Explore connections </Text>
+                <Tag>{obj.length.toString()}</Tag>
             </HorizontalStack>
             </div>
             <GridRows CardComponent={RowCard} columns="3" 
-                items={obj.moreConnections} buttonText="Connect" onButtonClick={onButtonClick}     
+                items={obj} buttonText="Connect" onButtonClick={onButtonClick}     
                 changedColumns={newCol}
             />
                 {currentCardObj ?<FlyLayout

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/transform.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/transform.js
@@ -777,21 +777,6 @@ const quickStartFunc = {
         return arr
     },
 
-    getConnectionsObject: function(configuredItems, allItems){
-        let moreConnections = []
-        let myConnections = []
-
-        allItems.forEach(element => {
-            if(element.key && configuredItems.includes(element.key)){
-                myConnections.push(element)
-            }else{
-                moreConnections.push(element)
-            }
-        });
-
-        return {moreConnections,myConnections}
-    },
-
     getPolicyLines: function(key){
         switch(key) {
             case "AWS":

diff --git a/...d/web/polaris_web/web/src/apps/dashboard/pages/testing/TestRunsPage/ChartypeComponent.jsx b/...d/web/polaris_web/web/src/apps/dashboard/pages/testing/TestRunsPage/ChartypeComponent.jsx
@@ -2,8 +2,9 @@ import {Box, DataTable,HorizontalStack, Scrollable, Text, VerticalStack } from '
 import React from 'react'
 import DonutChart from '../../../components/shared/DonutChart'
 import ConcentricCirclesChart from '../../../components/shared/ConcentricCirclesChart'
+import observeFunc from "../../observe/transform"
 
-function ChartypeComponent({data, title,charTitle, chartSubtitle, reverse, isNormal, boxHeight, navUrl}) {
+function ChartypeComponent({data, title,charTitle, chartSubtitle, reverse, isNormal, boxHeight, navUrl, isRequest}) {
     let tableRows = []
     if(data && Object.keys(data).length > 0)
     {
@@ -17,7 +18,7 @@ function ChartypeComponent({data, title,charTitle, chartSubtitle, reverse, isNor
                         </div>
                     </Box>
                 ),
-                <Text>{data[key]?.text}</Text>
+                <Text>{observeFunc.formatNumberWithCommas(data[key]?.text)}</Text>
             ]
             tableRows.push(comp)
         })
@@ -30,7 +31,7 @@ function ChartypeComponent({data, title,charTitle, chartSubtitle, reverse, isNor
 
     const chartComponent = (
 
-        isNormal ? <DonutChart navUrl={navUrl} data={chartData}  title=""  type={title} size={210}/> : <ConcentricCirclesChart data={chartData} title={charTitle} size={210} subtitle={chartSubtitle} />
+        isNormal ? <DonutChart navUrl={navUrl} data={chartData}  title=""  type={title} size={210} isRequest={isRequest}/> : <ConcentricCirclesChart data={chartData} title={charTitle} size={210} subtitle={chartSubtitle} />
     )
 
     return (