From ccd21d55c71ec325e8b1fdf4cdacdde6b4cef1ea Mon Sep 17 00:00:00 2001 From: Ark2307 Date: Thu, 4 Jul 2024 22:53:10 +0530 Subject: [PATCH 1/2] temp ui fixes done --- .../dashboard/components/tables/transform.js | 2 +- .../observe/api_collections/ApiCollections.jsx | 18 +++++++++--------- .../dashboard/pages/quick_start/QuickStart.jsx | 2 +- .../components/UpdateConnections.jsx | 18 +++--------------- .../dashboard/pages/quick_start/transform.js | 15 --------------- 5 files changed, 14 insertions(+), 41 deletions(-) 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 index cd336f54fd..1c79f67cba 100644 --- 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/observe/api_collections/ApiCollections.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/ApiCollections.jsx index 019b0fb677..3ce1d82cf6 100644 --- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/ApiCollections.jsx +++ b/apps/dashboard/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/quick_start/QuickStart.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/QuickStart.jsx index b685cacb03..7ac3c31266 100644 --- 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 ? : myConnections.length > 0 ?
- +
: ) diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx index 6b098e762c..e9bdcfe6cf 100644 --- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx +++ b/apps/dashboard/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"} />} > -
- - Your connections - {obj.myConnections.length.toString()} - -
- -
Explore other connections - {obj.moreConnections.length.toString()} + {obj.length.toString()}
{currentCardObj ? { - if(element.key && configuredItems.includes(element.key)){ - myConnections.push(element) - }else{ - moreConnections.push(element) - } - }); - - return {moreConnections,myConnections} - }, - getPolicyLines: function(key){ switch(key) { case "AWS": From fb2d5b888bf13494456ac0141d4dc1589e4340fd Mon Sep 17 00:00:00 2001 From: Ark2307 Date: Mon, 15 Jul 2024 13:42:21 +0530 Subject: [PATCH 2/2] added more ui fixes --- .../dashboard/components/shared/DonutChart.jsx | 16 ++++++++++++++-- .../dashboard/pages/dashboard/HomeDashboard.jsx | 2 +- .../apps/dashboard/pages/observe/transform.js | 3 +++ .../quick_start/components/UpdateConnections.jsx | 2 +- .../testing/TestRunsPage/ChartypeComponent.jsx | 7 ++++--- 5 files changed, 23 insertions(+), 7 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 index 0de8931517..8a18e6894c 100644 --- 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: '{point.name} {point.y}', + formatter: function() { + return `${this.point.name} ${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/pages/dashboard/HomeDashboard.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard/HomeDashboard.jsx index df450b0c42..cd1f8d8219 100644 --- 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"} /> - + 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 index f75bea415e..d8bb019f47 100644 --- 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/components/UpdateConnections.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx index e9bdcfe6cf..8ead3d15f3 100644 --- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx +++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx @@ -49,7 +49,7 @@ function UpdateConnections(props) { >
- Explore other connections + Explore connections {obj.length.toString()}
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/testing/TestRunsPage/ChartypeComponent.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/testing/TestRunsPage/ChartypeComponent.jsx index 18c78a8bcd..aa009a06db 100644 --- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/testing/TestRunsPage/ChartypeComponent.jsx +++ b/apps/dashboard/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 ), - {data[key]?.text} + {observeFunc.formatNumberWithCommas(data[key]?.text)} ] tableRows.push(comp) }) @@ -30,7 +31,7 @@ function ChartypeComponent({data, title,charTitle, chartSubtitle, reverse, isNor const chartComponent = ( - isNormal ? : + isNormal ? : ) return (