From 42b20660e413437e9fbea0aa2fdce12eefbd8525 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Fri, 26 Aug 2022 12:42:12 +0800 Subject: [PATCH] fix: set selector parameters for metrics, optimize the process topology (#147) --- src/assets/img/technologies/HTTPDARK.png | Bin 1668 -> 1787 bytes src/assets/img/technologies/HTTPS.png | Bin 847 -> 895 bytes src/views/dashboard/panel/Tool.vue | 188 ++++++------------ .../components/Graph/linkProcess.ts | 43 +--- .../components/ProcessTopology.vue | 18 +- 5 files changed, 86 insertions(+), 163 deletions(-) diff --git a/src/assets/img/technologies/HTTPDARK.png b/src/assets/img/technologies/HTTPDARK.png index 917a85ec31daa4921557de89944f38b03819f01e..71a127723391dedecd385a76ef407b99a332adba 100644 GIT binary patch delta 1758 zcmV<41|j)`4f_p{F@Lp5L_t(&L+x2vj1)x}{{8~#?nRL$F&bXH^~HEAUJsg(7>P1H zyJ}D)mx5CRVnh)QCSs!TLP?aJ9z|Wi17n2gS&T7iqKWZB(MWvo7JNXB35e)+H@f|s zp55-L?&-O9H!dX9%WhYF|MAsd_5W2hgoC`%LGC{e5g6+T9)F5JG6DtLnGO=2@cqu< zFA{I)+7{r{t^@L~{TfHyooWGTXttT4s%P z?dofrfK~R^fqyx0KCSJDlj3cIAUa0@CorlSS|?3yUOOb(B4F9>y8tdtF|Y&7_cQP) z5giqc3tUzC-^Uh3=4UY92crAxL~w^R_2XM5(K3O8?X4&9?1bVS#QZ=mYdlx9-8=(5 z(Kz!)nKiBtzO9n;GKj7V#|UD6&YaL&EIBtZ(Y>`qcz>HTjdNQe(Gr2eW;aIyma5Qa zzJEZ|pI9=3{tWtyWp5iZpB-Wb;9s!V?D!=3USs!98wc@mIL6Fx<+H}+!S|DI@T75` zyHpHDL}_%7G_{ADk!VW5+T1@2LTrpH;#Z_;L^EpHZs5$D3TBfu^{Z7G%XVJ_&>cl# z98SqyrGI}Hep|M)5ujPB41;dSo7&5bNHiy4JD(*s;TO`>qnWNO5!)>Tm>C%&x=v=a zS7HRp-YhUH6CqYhbHdUD$_3cf#?2Z1`>-!q z0*CGQ_9~d~rKz8sHfxsc1~Y!r;28fVP2(69_kV2JJ?S6DmufL2U|G)8SJjI`LjqP} z_Jehwrbu1C^)R7aE7-(-*g2lGY4s|0T>{0j*Tu}6nr)*0W1N6RIa4pB*{VyRU^_1n zsFDT`fL4;G-qjWX%XS?A`T^j4P|5d6Q=8N>f#66?ptnN-2DT9M6RBi~g6cfDEgRuN z41dv5!cc{-2=QfUdN~D`b`(!tLWQz-4Kcr}I9AM?x=b2+`qkY>`V%_-Xogee3btzz zkc&3;{{G3gTsuY0VwIsJj)=N*8EtdYhjaop>67o3rtx4>xbV7j0{u%rRQuC$s+?sz zD*$>RB0Zi@%wK8znABZ^124#%#O8w`9MCG_pX?1Wh z0)1XLd=9Ge(7N-d$!y2g8Ujfi(Q=v59&L$$Rrc-z^CKacd@^%gT2O6ct?0#-+wm4 zsd9yqdn*y1j7TTWL}7mt$L%bknj%JcTxRq;lLUfmrB244sJ{*_wuH*=DlqN{`&@Q9 zZ_jo{i6HE^61cWDu~l*|g_0ftl)xO#T8v1mxM<3034m;M52UA2P%W@-|oj)hAGP7J%uQ1A+kYLYXn5 zq@wy%m%!RGAN?Y1S(;`=}-ERmuWoT@tH1*iKl2vk!BO$(G=6{Ki&5>Ma zdV5)SJ1bE*UCA1s%B*p|>R{3K*0b_rL4wTO%y{7|_IVlhs|5_eZPL_ZnawIWTS0W5 zqI+al%1SmWIdehO8=ukm15{7n{_}+IE60KOrGGH1#V_q*U|{Mk-4lNa^;)*q3-H{S z9p>3GYrN2CA2z+z4;rsk9)IiyL(_Za&!FEc%dPCb&x}i=y#W8>MP|o`!FP|{f02Or zAX;Y3FXppGCBr@c1|Q{k?xN(g3InV1roOCM5^0IRAPM)Ul$W$!KJ(f|Sz~2Nq@r7t zWxK&KxLUl14t+y!tP224O+>g)np&or^TBw_1csJD@`)w1v5SBQ8Gl%zI>SWQR*Wcj z3nKa&%ugk;)g(Y0@}^er?X`weTLgxd)7=0+RA+W}C1!K`5U!d8fF!1xAAHDsmtJgT z=9Mhf4tx+>u)XUEygZhj+E=4WY=`eZB)d9dk72E-Y&!y>(jdipo!(*w7OTas6{8Af zY<}QSoeV1W0DIjGOjieJI>1LXCPDiEeusc}#*wyZ%zk33=VWjcCn2Wz>`x&QQv%!p z|07?U%Vt#J!`=g<>ct3@9U?G-$r}~XgFXWP0gfinPY;KcN&o-=07*qoM6N<$g3JU` A^8f$< delta 1638 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 d.id === pod - ); - if (!currentPod) { - selectorStore.setCurrentProcess(null); - states.currentProcess = ""; - return; - } - selectorStore.setCurrentPod(currentPod); - states.currentPod = currentPod.label; - if (!(selectorStore.processes.length && selectorStore.processes[0])) { - selectorStore.setCurrentProcess(null); - states.currentProcess = ""; - return; - } - const process = params.processId || selectorStore.processes[0].id; - const currentProcess = selectorStore.processes.find( - (d: { id: string }) => d.id === process - ); - if (currentProcess) { - selectorStore.setCurrentProcess(currentProcess); - states.currentProcess = currentProcess.label; - } } async function setDestSelector() { @@ -328,33 +298,6 @@ async function setDestSelector() { selectorStore.currentDestService.id, true ); - if (!(selectorStore.destPods.length && selectorStore.destPods[0])) { - selectorStore.setCurrentDestPod(null); - states.currentDestPod = ""; - return; - } - const destPod = params.destPodId || selectorStore.destPods[0].id; - const currentDestPod = selectorStore.destPods.find( - (d: { id: string }) => d.id === destPod - ); - if (!currentDestPod) { - states.currentDestProcess = ""; - selectorStore.setCurrentProcess(null); - return; - } - selectorStore.setCurrentDestPod(currentDestPod); - states.currentDestPod = currentDestPod.label; - const destProcess = params.destProcessId || selectorStore.destProcesses[0].id; - const currentDestProcess = selectorStore.destProcesses.find( - (d: { id: string }) => d.id === destProcess - ); - if (!currentDestProcess) { - states.currentDestProcess = ""; - selectorStore.setCurrentProcess(null); - return; - } - selectorStore.setCurrentProcess(currentDestProcess); - states.currentDestProcess = currentDestProcess.label; } async function getServices() { @@ -482,10 +425,12 @@ function changeDestPods(pod: Option[]) { function changeDestProcess(pod: Option[]) { selectorStore.setCurrentDestProcess(pod[0] || null); + states.currentDestProcess = pod[0].label || ""; } function changeProcess(pod: Option[]) { selectorStore.setCurrentProcess(pod[0] || null); + states.currentProcess = pod[0].label || ""; } function changeMode() { @@ -612,35 +557,13 @@ async function fetchPods( case EntityType[2].value: resp = await selectorStore.getEndpoints({ serviceId, ...param }); if (setPod) { - let p; - if (states.currentPod) { - p = selectorStore.pods.find( - (d: { label: unknown }) => d.label === states.currentPod - ); - } else { - p = selectorStore.pods.find( - (d: unknown, index: number) => index === 0 - ); - } - selectorStore.setCurrentPod(p || null); - states.currentPod = selectorStore.currentPod.label; + updateCurrentPod(); } break; case EntityType[3].value: resp = await selectorStore.getServiceInstances({ serviceId }); if (setPod) { - let p; - if (states.currentPod) { - p = selectorStore.pods.find( - (d: { label: string }) => d.label === states.currentPod - ); - } else { - p = selectorStore.pods.find( - (d: { label: string }, index: number) => index === 0 - ); - } - selectorStore.setCurrentPod(p || null); - states.currentPod = selectorStore.currentPod.label; + updateCurrentPod(); } break; case EntityType[6].value: @@ -650,18 +573,7 @@ async function fetchPods( ...param, }); if (setPod) { - let p; - if (states.currentDestPod) { - p = selectorStore.destPods.find( - (d: { label: string }) => d.label === states.currentDestPod - ); - } else { - p = selectorStore.destPods.find( - (d: { label: string }, index: number) => index === 0 - ); - } - selectorStore.setCurrentDestPod(p || null); - states.currentDestPod = selectorStore.currentDestPod.label; + updateCurrentDestPod(); } break; case EntityType[5].value: @@ -670,18 +582,7 @@ async function fetchPods( isRelation: true, }); if (setPod) { - let p; - if (states.currentDestPod) { - p = selectorStore.destPods.find( - (d: { label: string }) => d.label === states.currentDestPod - ); - } else { - p = selectorStore.destPods.find( - (d: { label: string }, index: number) => index === 0 - ); - } - selectorStore.setCurrentDestPod(p || null); - states.currentDestPod = selectorStore.currentDestPod.label; + updateCurrentDestPod(); } break; case EntityType[7].value: @@ -705,18 +606,14 @@ async function fetchProcess(setPod: boolean) { instanceId: selectorStore.currentPod.id, }); if (setPod) { - let m; - if (states.currentProcess) { - m = selectorStore.processes.find( - (d: { label: string }) => d.label === states.currentProcess - ); - } else { - m = selectorStore.processes.find( - (d: { label: string }, index: number) => index === 0 - ); + const process = params.processId || selectorStore.processes[0].id; + const currentProcess = selectorStore.processes.find( + (d: { id: string }) => d.id === process + ); + if (currentProcess) { + selectorStore.setCurrentProcess(currentProcess); + states.currentProcess = currentProcess.label; } - selectorStore.setCurrentProcess(m || null); - states.currentProcess = m && m.label; } return resp; } @@ -726,21 +623,58 @@ async function fetchDestProcess(setPod: boolean) { isRelation: true, }); if (setPod) { - let m; - if (states.currentDestProcess) { - m = selectorStore.destProcesses.find( - (d: { label: string }) => d.label === states.currentDestProcess - ); - } else { - m = selectorStore.destProcesses.find( - (d: { label: string }, index: number) => index === 1 - ); + const destProcess = + params.destProcessId || selectorStore.destProcesses[0].id; + const currentDestProcess = selectorStore.destProcesses.find( + (d: { id: string }) => d.id === destProcess + ); + if (!currentDestProcess) { + states.currentDestProcess = ""; + selectorStore.setCurrentDestProcess(null); + return; } - selectorStore.setCurrentDestProcess(m || null); - states.currentDestProcess = m && m.label; + selectorStore.setCurrentDestProcess(currentDestProcess); + states.currentDestProcess = currentDestProcess.label; } return resp; } + +function updateCurrentDestPod() { + if (!(selectorStore.destPods.length && selectorStore.destPods[0])) { + selectorStore.setCurrentDestPod(null); + states.currentDestPod = ""; + return; + } + const destPod = params.destPodId || selectorStore.destPods[0].id; + const currentDestPod = selectorStore.destPods.find( + (d: { id: string }) => d.id === destPod + ); + if (!currentDestPod) { + states.currentDestPod = ""; + selectorStore.setCurrentDestPod(null); + return; + } + selectorStore.setCurrentDestPod(currentDestPod); + states.currentDestPod = currentDestPod.label; +} +function updateCurrentPod() { + if (!(selectorStore.pods.length && selectorStore.pods[0])) { + selectorStore.setCurrentPod(null); + states.currentPod = ""; + return; + } + const pod = params.podId || selectorStore.pods[0].id; + const currentPod = selectorStore.pods.find( + (d: { id: string }) => d.id === pod + ); + if (!currentPod) { + selectorStore.setCurrentPod(null); + states.currentPod = ""; + return; + } + selectorStore.setCurrentPod(currentPod); + states.currentPod = currentPod.label; +} function getTools() { switch (params.entity) { case EntityType[1].value: diff --git a/src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts b/src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts index df32310d..562a509f 100644 --- a/src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts +++ b/src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts @@ -25,18 +25,18 @@ export const linkElement = (graph: any) => { .attr("stroke", "#97B0F8") .attr("d", (d: Call) => { const controlPos = computeControlPoint( - [d.source.x, d.source.y], - [d.target.x, d.target.y], + [d.source.x, d.source.y - 5], + [d.target.x, d.target.y - 5], 0.5 ); if (d.lowerArc) { - controlPos[1] = -controlPos[1]; + controlPos[1] = -controlPos[1] - 10; } return ( "M" + d.source.x + " " + - d.source.y + + (d.source.y - 5) + " " + "Q" + controlPos[0] + @@ -45,7 +45,7 @@ export const linkElement = (graph: any) => { " " + d.target.x + " " + - d.target.y + (d.target.y - 5) ); }); return linkEnter; @@ -53,7 +53,7 @@ export const linkElement = (graph: any) => { export const anchorElement = (graph: any, funcs: any, tip: any) => { const linkEnter = graph .append("g") - .attr("style", "cursor: move;") + .attr("class", "topo-line-anchor") .on("mouseover", function (event: unknown, d: unknown) { tip.html(funcs.tipHtml).show(d, this); }) @@ -63,44 +63,17 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => { .on("click", (event: unknown, d: unknown) => { funcs.handleLinkClick(event, d); }); - linkEnter - .append("text") - .attr("fill", "#444") - .attr("text-anchor", "middle") - .attr("x", (d: Call) => { - const p = getMidpoint(d); - return p[0] + 10; - }) - .attr("y", (d: Call) => { - const p = getMidpoint(d); - return p[1] + 3; - }) - .text((d: Call) => { - const types = [...d.sourceComponents, ...d.targetComponents]; - if (types.includes("tcp")) { - return "TCP"; - } - if (types.includes("https")) { - return "HTTPS"; - } - if (types.includes("http")) { - return "HTTP"; - } - if (types.includes("tls")) { - return "TLS"; - } - }); linkEnter .append("image") .attr("width", 15) .attr("height", 15) .attr("x", (d: Call) => { const p = getMidpoint(d); - return p[0] - 16; + return p[0] - 8; }) .attr("y", (d: Call) => { const p = getMidpoint(d); - return p[1] - 9; + return p[1] - 13; }) .attr("xlink:href", (d: Call) => { const types = [...d.sourceComponents, ...d.targetComponents]; diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue index 6a9b9518..fbf9f810 100644 --- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue +++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue @@ -315,9 +315,21 @@ function drawTopology(nodeArr: any[]) { { handleLinkClick: handleLinkClick, tipHtml: (data: Call) => { + const types = [...data.sourceComponents, ...data.targetComponents]; + let l = "TCP"; + if (types.includes("https")) { + l = "HTTPS"; + } + if (types.includes("http")) { + l = "HTTP"; + } + if (types.includes("tls")) { + l = "TLS"; + } const html = `
${t( "detectPoint" - )}:${data.detectPoints.join(" | ")}
`; + )}: ${data.detectPoints.join(" | ")} +
Type: ${l}
`; return html; }, }, @@ -441,6 +453,10 @@ watch( cursor: move; } +.topo-line-anchor { + cursor: pointer; +} + .switch-icon-edit { cursor: pointer; transition: all 0.5ms linear;