Merge pull request #1096 from akto-api-security/develop

Develop

apps/dashboard/src/main/java/com/akto/action/ApiCollectionsAction.java

@@ -430,9 +430,13 @@ public String fetchRiskScoreInfo(){
             try {
                 BasicDBObject basicDBObject = cursor.next();
                 BasicDBObject id = (BasicDBObject) basicDBObject.get("_id");
-                riskScoreMap.put(id.getInt("apiCollectionId"), basicDBObject.getDouble(ApiInfo.RISK_SCORE));
+                double riskScore = 0;
+                if(basicDBObject.get(ApiInfo.RISK_SCORE) != null){
+                    riskScore = basicDBObject.getDouble(ApiInfo.RISK_SCORE);
+                }
+                riskScoreMap.put(id.getInt("apiCollectionId"), riskScore);
             } catch (Exception e) {
-                loggerMaker.errorAndAddToDb("error in calculating risk score for collections " + e.toString(), LogDb.DASHBOARD);
+                loggerMaker.errorAndAddToDb(e,"error in calculating risk score for collections " + e.toString(), LogDb.DASHBOARD);
                 e.printStackTrace();
             }
         }

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/ConditionsPicker.jsx

@@ -4,12 +4,13 @@ import Dropdown from './layouts/Dropdown';
 import {DeleteMinor} from "@shopify/polaris-icons"
 import func from "@/util/func"
 import ConditionComponent from './ConditionComponent';
+import TitleWithInfo from './shared/TitleWithInfo';
 
 function ConditionsPicker(props) {
 
     const id = props.id ? props.id : "condition"
 
-    const {title, param, selectOptions, conditions, operator, dispatch} = props
+    const {title, param, selectOptions, conditions, operator, dispatch, tooltipContent} = props
 
     const handleDelete = (index) => {
         dispatch({type:"delete", key: "condition", index: index})
@@ -59,9 +60,7 @@ function ConditionsPicker(props) {
 
     return (
         <LegacyCard.Section title={
-            <Text color='subdued' variant='headingSm'>
-                {title}
-            </Text>
+            <TitleWithInfo titleText={title} tooltipContent={tooltipContent} textProps={{variant: 'headingSm', color: 'subdued'}} />
         } >
             {fieldsComponent}
             <br/>

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/FlyLayout.jsx

@@ -6,24 +6,27 @@ import "./style.css"
 
 function FlyLayout(props) {
 
-    const { title, show, setShow, components,loading, showDivider, newComp, handleClose, isHandleClose} = props
+    const { title, titleComp,  show, setShow, components,loading, showDivider, newComp, handleClose, isHandleClose, width} = props
     const handleExit = () => {
         setShow(!show)
         if(isHandleClose){
             handleClose()
         }
     }
+    const divWidth = width || "50vw";
     return (
-        <div className={"flyLayout " + (show ? "show" : "")}>
+        <div className={"flyLayout " + (show ? "show" : "")} style={{width: divWidth}}>
             <div className="innerFlyLayout">
-                <Box borderColor="border-subdued" borderWidth="1" background="bg" width="50vw" minHeight="100%">
+                <Box borderColor="border-subdued" borderWidth="1" background="bg" width={divWidth} minHeight="100%">
                     { loading ? <div style={{position: "absolute", right: "25vw" , top: "50vh"}}><Spinner size="large" /></div>:
                     <VerticalStack gap={"5"}>
                         <Box padding={"4"} paddingBlockEnd={"0"} >
                             <HorizontalStack align="space-between">
-                                <Text variant="headingMd">
-                                    {title}
-                                </Text>
+                                {titleComp ? titleComp : 
+                                    <Text variant="headingMd">
+                                        {title}
+                                    </Text>
+                                }
                                 <Button icon={CancelMajor} onClick={() => { handleExit()}} plain></Button>
                             </HorizontalStack>
                         </Box>

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/style.css

@@ -3,7 +3,6 @@
     top: 0;
     right: -50vw;
     transition: right 0.3s ease-in-out;
-    width:50vw;
     z-index: 400;
     height: 100vh;
 }

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/HeadingWithTooltip.jsx

@@ -0,0 +1,12 @@
+import { Text, Tooltip } from '@shopify/polaris'
+import React from 'react'
+
+function HeadingWithTooltip({title, content}) {
+    return (
+        <Tooltip borderRadius="2" padding="4" hasUnderline={true} content={content}>
+            <Text>{title}</Text>
+        </Tooltip> 
+    )
+}
+
+export default HeadingWithTooltip

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/TitleWithInfo.jsx

@@ -0,0 +1,51 @@
+import { Avatar, Box, HorizontalStack, Link, Popover, Text } from '@shopify/polaris'
+import React, { useState } from 'react'
+
+function TitleWithInfo({titleComp, textProps, titleText, tooltipContent, docsUrl}) {
+
+    const content = docsUrl ?
+
+        <Box as="span">
+            {tooltipContent} {" "}
+            <Link url={docsUrl} target="_blank">Learn more</Link>
+        </Box> 
+         : tooltipContent
+    const [active, setActive] = useState(false)
+    const [contentActive,setContentActive] = useState(false)
+    return (
+        <HorizontalStack gap={"1"}>
+            {titleComp ? titleComp : <Text variant="headingLg" {...textProps}>{titleText}</Text>}
+            <Popover 
+                active={active || contentActive}
+                activator={
+                    <div  
+                        onMouseEnter={()=> setTimeout(()=> {
+                            setActive(true)
+                        },300)}
+                        onMouseLeave={()=> setTimeout(()=> {
+                            setActive(false)
+                        },100)}
+                    > 
+                        <div className='reduce-size'>
+                            <Avatar shape="round" size="extraSmall" source='/public/info_filled_icon.svg'/>
+                        </div> 
+                    </div>
+                }
+                preferredPosition="top"
+                onClose={() => setActive(false)}
+            >
+                <div style={{maxWidth: '350px' ,padding: "12px"}} >
+                    <div  
+                        onMouseEnter={()=>setContentActive(true)}
+                        onMouseLeave={() => setContentActive(false)}
+                    >
+                        {content}
+                    </div>
+                </div>
+            </Popover>
+
+        </HorizontalStack>
+    )
+}
+
+export default TitleWithInfo

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard/HomeDashboard.jsx

@@ -19,6 +19,7 @@ import ActivityTracker from './components/ActivityTracker';
 import NullData from './components/NullData';
 import {DashboardBanner} from './components/DashboardBanner';
 import RiskScoreTrend from './components/RiskScoreTrend';
+import TitleWithInfo from '@/apps/dashboard/components/shared/TitleWithInfo';
 
 function HomeDashboard() {
 
@@ -131,7 +132,11 @@ function HomeDashboard() {
         Object.keys(subCategoryInfo).length > 0 ? 
             <Card key="subcategoryTrend">
                 <VerticalStack gap={5}>
-                    <Text variant="bodyLg" fontWeight="semibold">Issues by category</Text>
+                    <TitleWithInfo
+                        titleText={"Issues by category"}
+                        tooltipContent={"Testing run issues present in dashboard categorised by subcategory of tests."}
+                        textProps={{variant: "headingMd"}}
+                    />
                     <ChartypeComponent navUrl={"/dashboard/issues/"} data={subCategoryInfo} title={"Categories"} isNormal={true} boxHeight={'200px'}/>
                 </VerticalStack>
             </Card>
@@ -166,7 +171,12 @@ function HomeDashboard() {
         :
         <Card key="sensitiveTrend">
             <VerticalStack gap={5}>
-                <Text variant="bodyLg" fontWeight="semibold">Sensitive Data</Text>
+                <TitleWithInfo
+                    titleText={"Sensitive data"}
+                    tooltipContent={"Count of endpoints per data type."}
+                    textProps={{variant: "headingMd"}}
+                    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/"} data={sensitiveData.response} title={"Response"} isNormal={true} boxHeight={'100px'}/>
@@ -179,7 +189,11 @@ function HomeDashboard() {
         (issuesTrendMap.allSubCategories.length > 0 && issuesTrendMap.trend.length > 0) ? 
         <Card key="issuesTrend">
             <VerticalStack gap={5}>
-                <Text variant="bodyLg" fontWeight="semibold">Issues timeline</Text>
+                <TitleWithInfo
+                    titleText={"Issues timeline"}
+                    tooltipContent={"Count of issues per category against the time they were last seen"}
+                    textProps={{variant: "headingMd"}}
+                />
                 <VerticalStack gap={3}>
                     <HorizontalStack align="end">
                         <Scrollable style={{ width: '350px' }} shadow>

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard/components/RiskScoreTrend.jsx

@@ -4,20 +4,26 @@ import { Badge, Box, Card, Divider, HorizontalGrid, HorizontalStack, Text, Verti
 import HighchartsReact from 'highcharts-react-official'
 import transform from '../transform'
 import Highcharts from "highcharts"
+import TitleWithInfo from '@/apps/dashboard/components/shared/TitleWithInfo'
 
 function RiskScoreTrend({riskScoreRangeMap, riskScoreRanges}) {
 
     const [showComponent, setShowComponent] = useState()
     const riskScoreTrendRef = useRef(null)
 
     const nullComponent = (
-        <NullData text={"APIS by risk score"} url={"/dashboard/observe/inventory"} urlText={"to create a collection and upload traffic in it."} description={"No apis found."} key={"riskScoreNullTrend"}/>
+        <NullData text={"APIs by risk score"} url={"/dashboard/observe/inventory"} urlText={"to create a collection and upload traffic in it."} description={"No apis found."} key={"riskScoreNullTrend"}/>
     )
 
     const dataComponent = (
         <Card key="scoreTrend">
             <VerticalStack gap={5}>
-                <Text variant="bodyLg" fontWeight="semibold">APIS by risk score</Text>
+                <TitleWithInfo
+                    titleText={"APIs by risk score"}
+                    tooltipContent={"All your endpoints grouped on the basis of their risk score."}
+                    textProps={{variant: "headingMd"}}
+                    docsUrl={"https://docs.akto.io/api-inventory/concepts/risk-score"}
+                />
                 <HorizontalGrid columns={2} gap={5}>
                 <HighchartsReact
                     highcharts={Highcharts}

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/issues/IssuesPage/IssuesPage.jsx

@@ -12,6 +12,7 @@ import EmptyScreensLayout from "../../../components/banners/EmptyScreensLayout";
 import { ISSUES_PAGE_DOCS_URL } from "../../../../main/onboardingData";
 import {SelectCollectionComponent} from "../../testing/TestRunsPage/TestrunsBannerComponent"
 import { useEffect } from "react";
+import TitleWithInfo from "@/apps/dashboard/components/shared/TitleWithInfo";
 
 const headers = [
     {
@@ -154,7 +155,6 @@ function IssuesPage(){
     const [issuesFilters, setIssuesFilters] = useState({})
     const [key, setKey] = useState(false);
     const apiCollectionMap = PersistStore(state => state.collectionsMap);
-    const allCollections = PersistStore(state => state.allCollections);
     const [showEmptyScreen, setShowEmptyScreen] = useState(true)
 
     const setToastConfig = Store(state => state.setToastConfig)
@@ -319,7 +319,10 @@ function IssuesPage(){
 
     return (
         <PageWithMultipleCards
-            title="Issues"
+            title={<TitleWithInfo
+                    titleText={"Issues"}
+                    tooltipContent={"Issues are created when a test from test library has passed validation and thus a potential vulnerability is found."}
+                />}
             isFirstPage={true}
             components = {[
                 showEmptyScreen ? 

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/AllSensitiveData/AllSensitiveData.jsx

@@ -12,6 +12,7 @@ import {
 import { useNavigate } from "react-router-dom"
 import dashboardFunc from "../../transform"
 import AktoGptLayout from "../../../components/aktoGpt/AktoGptLayout"
+import TitleWithInfo from "@/apps/dashboard/components/shared/TitleWithInfo"
 
 const headers = [
     {
@@ -162,12 +163,12 @@ function AllSensitiveData() {
 
     return (
         <PageWithMultipleCards
-        title={
-                <Text variant='headingLg' truncate>
-            {
-                "Sensitive data exposure"
-            }
-        </Text>
+            title={
+                <TitleWithInfo 
+                    titleText={"Sensitive data exposure"} 
+                    tooltipContent={"Akto allows you to identify which sensitive data an API contains in request or response."}
+                    docsUrl="https://docs.akto.io/api-inventory/concepts/sensitive-data" 
+                />
             }
             primaryAction={<Button id={"all-data-types"} primary onClick={handleRedirect}>Create custom data types</Button>}
             secondaryActions={<Button onClick={displayGPT}>Ask AktoGPT</Button>}

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/SingleRequest/SingleRequest.jsx

@@ -1,3 +1,4 @@
+
 import PageWithMultipleCards from "../../../components/layouts/PageWithMultipleCards"
 import { useParams } from "react-router-dom"
 import { Button, Text, Box, Popover, ActionList, VerticalStack, HorizontalStack, Icon } from "@shopify/polaris"

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/ApiChanges.jsx

@@ -13,6 +13,7 @@ import PersistStore from "../../../../main/PersistStore";
 import ApiChangesTable from "./component/ApiChangesTable";
 import SummaryCardInfo from "../../../components/shared/SummaryCardInfo";
 import StackedChart from "../../../components/charts/StackedChart";
+import TitleWithInfo from "@/apps/dashboard/components/shared/TitleWithInfo";
 import { useLocation } from "react-router-dom";
 
 
@@ -199,9 +200,11 @@ function ApiChanges() {
     return (
         <PageWithMultipleCards
             title={
-                <Text variant='headingLg'>
-                    API changes
-                </Text>
+                <TitleWithInfo
+                    titleText={"API changes"}
+                    docsUrl={"https://docs.akto.io/api-inventory/concepts/api-changes"}
+                    tooltipContent={"Information about endpoints and parameters found in your inventory."}
+                />
             }
             isFirstPage={true}
             primaryAction={<DateRangeFilter initialDispatch = {currDateRange} dispatch={(dateObj) => dispatchCurrDateRange({type: "update", period: dateObj.period, title: dateObj.title, alias: dateObj.alias})}/>}