diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx index fbc6f47d9..5b14a7d6c 100644 --- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx +++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx @@ -22,6 +22,8 @@ import OasModal from "../../OasModal/OasModal"; import {useCommonStyles} from "../../../helpers/commonStyle" import {TLSWarning} from "../../TLSWarning/TLSWarning"; import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen"; +import serviceMap from "../../assets/serviceMap.svg"; +import services from "../../assets/services.svg"; const useLayoutStyles = makeStyles(() => ({ details: { @@ -277,17 +279,21 @@ export const TrafficPage: React.FC = ({setAnalyzeStatus}) => {
{window["isOasEnabled"] && } {window["isServiceMapEnabled"] &&
} {!isLoading &&
+
+
- +
+ close onClose()} style={{cursor:"pointer"}}> +
+
+
    +
  • HTTP
    • +
  • HTTP/2
    • +
  • gRPC
    • +
  • AMQP
    • +
  • KAFKA
    • +
  • REDIS
    • +
+
} diff --git a/ui/src/components/ServiceMapModal/ServiceMapOptions.ts b/ui/src/components/ServiceMapModal/ServiceMapOptions.ts index a63339ad7..057ed7101 100644 --- a/ui/src/components/ServiceMapModal/ServiceMapOptions.ts +++ b/ui/src/components/ServiceMapModal/ServiceMapOptions.ts @@ -1,3 +1,142 @@ + +const minNodeScaling = 10 +const maxNodeScaling = 30 + +const minEdgeScaling = 1 +const maxEdgeScaling = maxNodeScaling / 2 + +const minLabelScaling = 11 +const maxLabelScaling = 16 +const selectedNodeColor = "#0C0B1A" +const selectedNodeBorderColor = "#205CF5" +const selectedNodeLabelColor = "#205CF5" +const selectedEdgeLabelColor = "#205CF5" + +const customScaling = (min, max, total, value) => { + if (max === min) { + return 0.5; + } + else { + const scale = 1 / (max - min); + return Math.max(0, (value - min) * scale); + } +} + +const nodeSelected = (values, id, selected, hovering) => { + values.color = selectedNodeColor; + values.borderColor = selectedNodeBorderColor; + values.borderWidth = 4; +} + +const nodeLabelSelected = (values, id, selected, hovering) => { + values.size = values.size + 1; + values.color = selectedNodeLabelColor; + values.strokeColor = selectedNodeLabelColor; + values.strokeWidth = 0.2 +} + +const edgeSelected = (values, id, selected, hovering) => { + values.opacity = 0.4; + values.width = values.width + 1; +} + +const edgeLabelSelected = (values, id, selected, hovering) => { + values.size = values.size + 1; + values.color = selectedEdgeLabelColor; + values.strokeColor = selectedEdgeLabelColor; + values.strokeWidth = 0.2 +} + +const nodeOptions = { + shape: 'dot', + chosen: { + node: nodeSelected, + label: nodeLabelSelected, + }, + color: { + background: '#494677', + border: selectedNodeColor, + }, + font: { + color: selectedNodeColor, + size: 11, // px + face: 'Roboto', + background: '#FFFFFFBF', + strokeWidth: 0.2, // px + strokeColor: selectedNodeColor, + align: 'center', + multi: false, + }, + // defines the node min and max sizes when zoom in/out, based on the node value + scaling: { + min: minNodeScaling, + max: maxNodeScaling, + // defines the label scaling size in px + label: { + enabled: true, + min: minLabelScaling, + max: maxLabelScaling, + maxVisible: maxLabelScaling, + drawThreshold: 5, + }, + customScalingFunction: customScaling, + }, + borderWidth: 2, + labelHighlightBold: true, + opacity: 1, + shadow: true, +} + +const edgeOptions = { + chosen: { + edge: edgeSelected, + label: edgeLabelSelected, + }, + dashes: false, + arrowStrikethrough: false, + arrows: { + to: { + enabled: true, + }, + middle: { + enabled: false, + }, + from: { + enabled: false, + } + }, + smooth: { + enabled: true, + type: 'dynamic', + roundness: 1.0 + }, + font: { + color: '#000000', + size: 11, // px + face: 'Roboto', + background: '#FFFFFFCC', + strokeWidth: 0.2, // px + strokeColor: '#000000', + align: 'horizontal', + multi: false, + }, + scaling: { + min: minEdgeScaling, + max: maxEdgeScaling, + label: { + enabled: true, + min: minLabelScaling, + max: maxLabelScaling, + maxVisible: maxLabelScaling, + drawThreshold: 5 + }, + customScalingFunction: customScaling, + }, + labelHighlightBold: true, + selectionWidth: 1, + shadow: true, +} + const ServiceMapOptions = { physics: { enabled: true, @@ -5,10 +144,10 @@ const ServiceMapOptions = { barnesHut: { theta: 0.5, gravitationalConstant: -2000, - centralGravity: 0.3, + centralGravity: 0.4, springLength: 180, springConstant: 0.04, - damping: 0.09, + damping: 0.2, avoidOverlap: 1 }, }, @@ -16,68 +155,20 @@ const ServiceMapOptions = { hierarchical: false, randomSeed: 1 // always on node 1 }, - nodes: { - shape: 'dot', - chosen: true, - color: { - background: '#27AE60', - border: '#000000', - highlight: { - background: '#27AE60', - border: '#000000', - }, - }, - font: { - color: '#343434', - size: 14, // px - face: 'arial', - background: 'none', - strokeWidth: 0, // px - strokeColor: '#ffffff', - align: 'center', - multi: false, - }, - borderWidth: 1.5, - borderWidthSelected: 2.5, - labelHighlightBold: true, - opacity: 1, - shadow: true, - }, - edges: { - chosen: true, - dashes: false, - arrowStrikethrough: false, - arrows: { - to: { - enabled: true, - }, - middle: { - enabled: false, - }, - from: { - enabled: false, - } - }, - smooth: { - enabled: true, - type: 'dynamic', - roundness: 1.0 - }, - font: { - color: '#343434', - size: 12, // px - face: 'arial', - background: 'none', - strokeWidth: 2, // px - strokeColor: '#ffffff', - align: 'horizontal', - multi: false, - }, - labelHighlightBold: true, - selectionWidth: 1, - shadow: true, - }, + nodes: nodeOptions, + edges: edgeOptions, autoResize: true, + interaction: { + selectable: true, + selectConnectedEdges: true, + multiselect: true, + dragNodes: true, + dragView: true, + hover: true, + hoverConnectedEdges: true, + zoomView: true, + zoomSpeed: 1, + }, }; export default ServiceMapOptions \ No newline at end of file diff --git a/ui/src/components/assets/close.svg b/ui/src/components/assets/close.svg new file mode 100644 index 000000000..1221c0331 --- /dev/null +++ b/ui/src/components/assets/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/src/components/assets/refresh.svg b/ui/src/components/assets/refresh.svg new file mode 100644 index 000000000..de0615856 --- /dev/null +++ b/ui/src/components/assets/refresh.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/src/components/assets/reset.svg b/ui/src/components/assets/reset.svg new file mode 100644 index 000000000..bf1dfb1de --- /dev/null +++ b/ui/src/components/assets/reset.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/src/components/assets/serviceMap.svg b/ui/src/components/assets/serviceMap.svg new file mode 100644 index 000000000..2fbc1f7e8 --- /dev/null +++ b/ui/src/components/assets/serviceMap.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/ui/src/components/assets/services.svg b/ui/src/components/assets/services.svg new file mode 100644 index 000000000..cbc8a3a4d --- /dev/null +++ b/ui/src/components/assets/services.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ui/src/helpers/commonStyle.ts b/ui/src/helpers/commonStyle.ts index 8c4e2e34e..cec0cbf93 100644 --- a/ui/src/helpers/commonStyle.ts +++ b/ui/src/helpers/commonStyle.ts @@ -9,7 +9,7 @@ export const useCommonStyles = makeStyles(() => ({ fontSize: 12, padding: "8px 12px", borderRadius: "6px ! important", - + "&:hover": { backgroundColor: "#205cf5", }, @@ -27,6 +27,11 @@ export const useCommonStyles = makeStyles(() => ({ backgroundColor: "transparent", }, }, + + imagedButton: { + padding: "0px 14px" + }, + textField: { outline: 0, background: "white",