diff --git a/src/assets/icons/hierarchy_topology.svg b/src/assets/icons/hierarchy_topology.svg new file mode 100644 index 00000000..07e0c524 --- /dev/null +++ b/src/assets/icons/hierarchy_topology.svg @@ -0,0 +1,18 @@ + + + + + \ No newline at end of file diff --git a/src/assets/img/tools/BROWSER.png b/src/assets/img/tools/BROWSER.png new file mode 100644 index 00000000..c7147ecd Binary files /dev/null and b/src/assets/img/tools/BROWSER.png differ diff --git a/src/assets/img/tools/DATABASE.png b/src/assets/img/tools/DATABASE.png new file mode 100644 index 00000000..043644b7 Binary files /dev/null and b/src/assets/img/tools/DATABASE.png differ diff --git a/src/assets/img/tools/ELASTICSEARCH.png b/src/assets/img/tools/ELASTICSEARCH.png new file mode 100644 index 00000000..043644b7 Binary files /dev/null and b/src/assets/img/tools/ELASTICSEARCH.png differ diff --git a/src/assets/img/tools/GENERAL.png b/src/assets/img/tools/GENERAL.png new file mode 100644 index 00000000..4f22e976 Binary files /dev/null and b/src/assets/img/tools/GENERAL.png differ diff --git a/src/assets/img/tools/K8S.png b/src/assets/img/tools/K8S.png new file mode 100644 index 00000000..f051f5a6 Binary files /dev/null and b/src/assets/img/tools/K8S.png differ diff --git a/src/assets/img/tools/K8S_SERVICE.png b/src/assets/img/tools/K8S_SERVICE.png new file mode 100644 index 00000000..f051f5a6 Binary files /dev/null and b/src/assets/img/tools/K8S_SERVICE.png differ diff --git a/src/assets/img/tools/MESH.png b/src/assets/img/tools/MESH.png new file mode 100644 index 00000000..fea10bc3 Binary files /dev/null and b/src/assets/img/tools/MESH.png differ diff --git a/src/assets/img/tools/MESH_CP.png b/src/assets/img/tools/MESH_CP.png new file mode 100644 index 00000000..fea10bc3 Binary files /dev/null and b/src/assets/img/tools/MESH_CP.png differ diff --git a/src/assets/img/tools/MESH_DP.png b/src/assets/img/tools/MESH_DP.png new file mode 100644 index 00000000..fea10bc3 Binary files /dev/null and b/src/assets/img/tools/MESH_DP.png differ diff --git a/src/assets/img/tools/MONGODB.png b/src/assets/img/tools/MONGODB.png new file mode 100644 index 00000000..043644b7 Binary files /dev/null and b/src/assets/img/tools/MONGODB.png differ diff --git a/src/assets/img/tools/MQ.png b/src/assets/img/tools/MQ.png new file mode 100644 index 00000000..f2bb56fb Binary files /dev/null and b/src/assets/img/tools/MQ.png differ diff --git a/src/assets/img/tools/NGINX.png b/src/assets/img/tools/NGINX.png new file mode 100644 index 00000000..513100ef Binary files /dev/null and b/src/assets/img/tools/NGINX.png differ diff --git a/src/assets/img/tools/OS_LINUX.png b/src/assets/img/tools/OS_LINUX.png new file mode 100644 index 00000000..2cc27c99 Binary files /dev/null and b/src/assets/img/tools/OS_LINUX.png differ diff --git a/src/assets/img/tools/POSTGRESQL.png b/src/assets/img/tools/POSTGRESQL.png new file mode 100644 index 00000000..043644b7 Binary files /dev/null and b/src/assets/img/tools/POSTGRESQL.png differ diff --git a/src/assets/img/tools/RABBITMQ.png b/src/assets/img/tools/RABBITMQ.png new file mode 100644 index 00000000..f2bb56fb Binary files /dev/null and b/src/assets/img/tools/RABBITMQ.png differ diff --git a/src/assets/img/tools/VIRTUAL_CACHE.png b/src/assets/img/tools/VIRTUAL_CACHE.png new file mode 100644 index 00000000..4f22e976 Binary files /dev/null and b/src/assets/img/tools/VIRTUAL_CACHE.png differ diff --git a/src/assets/img/tools/VIRTUAL_DATABASE.png b/src/assets/img/tools/VIRTUAL_DATABASE.png new file mode 100644 index 00000000..4f22e976 Binary files /dev/null and b/src/assets/img/tools/VIRTUAL_DATABASE.png differ diff --git a/src/assets/img/tools/VIRTUAL_GATEWAY.png b/src/assets/img/tools/VIRTUAL_GATEWAY.png new file mode 100644 index 00000000..4f22e976 Binary files /dev/null and b/src/assets/img/tools/VIRTUAL_GATEWAY.png differ diff --git a/src/components/SelectSingle.vue b/src/components/SelectSingle.vue index 6f6cdd5f..796df39b 100644 --- a/src/components/SelectSingle.vue +++ b/src/components/SelectSingle.vue @@ -85,7 +85,7 @@ limitations under the License. --> .bar-select { position: relative; justify-content: space-between; - border: 1px solid #ddd; + border: 1px solid var(--el-border-color); background: $theme-background; border-radius: 3px; color: $font-color; @@ -97,8 +97,8 @@ limitations under the License. --> border-radius: 3px; margin: 3px; color: $active-color; - background-color: #fafafa; - border: 1px solid #e8e8e8; + background-color: var(--theme-background); + border: 1px solid var(--el-color-primary); text-align: center; } } @@ -139,7 +139,7 @@ limitations under the License. --> left: 0; background-color: $theme-background; box-shadow: 0 1px 6px rgb(99 99 99 / 20%); - border: 1px solid #ddd; + border: 1px solid var(--el-border-color); width: 100%; border-radius: 0 0 3px 3px; border-right-width: 1px !important; @@ -169,7 +169,7 @@ limitations under the License. --> } &:hover { - background-color: #f5f5f5; + background-color: var(--layout-background); } } diff --git a/src/components/Tags.vue b/src/components/Tags.vue index b854843a..b5af8150 100644 --- a/src/components/Tags.vue +++ b/src/components/Tags.vue @@ -79,7 +79,7 @@ limitations under the License. --> diff --git a/src/views/dashboard/related/topology/Index.vue b/src/views/dashboard/related/topology/Index.vue index 9fff881f..3101ae6c 100644 --- a/src/views/dashboard/related/topology/Index.vue +++ b/src/views/dashboard/related/topology/Index.vue @@ -13,14 +13,14 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - diff --git a/src/views/dashboard/related/topology/components/utils/layout.ts b/src/views/dashboard/related/topology/components/utils/layout.ts index 52b35e5b..689a7ee9 100644 --- a/src/views/dashboard/related/topology/components/utils/layout.ts +++ b/src/views/dashboard/related/topology/components/utils/layout.ts @@ -120,3 +120,165 @@ export function circleIntersection(ax: number, ay: number, ar: number, bx: numbe { x: gx, y: gy }, ]; } +function findMostFrequent(arr: Call[]) { + const count: any = {}; + let maxCount = 0; + let maxItem = null; + + for (let i = 0; i < arr.length; i++) { + const item = arr[i]; + count[item.sourceObj.id] = (count[item.sourceObj.id] || 0) + 1; + if (count[item.sourceObj.id] > maxCount) { + maxCount = count[item.sourceObj.id]; + maxItem = item.sourceObj; + } + count[item.targetObj.id] = (count[item.targetObj.id] || 0) + 1; + if (count[item.targetObj.id] > maxCount) { + maxCount = count[item.targetObj.id]; + maxItem = item.targetObj; + } + } + + return maxItem; +} +export function computeLevels(calls: Call[], nodeList: Node[], levels: any[]) { + const node = findMostFrequent(calls); + const nodes = JSON.parse(JSON.stringify(nodeList)).sort((a: Node, b: Node) => { + if (a.name.toLowerCase() < b.name.toLowerCase()) { + return -1; + } + if (a.name.toLowerCase() > b.name.toLowerCase()) { + return 1; + } + return 0; + }); + const index = nodes.findIndex((n: Node) => n.type === "USER"); + let key = index; + if (index < 0) { + key = nodes.findIndex((n: Node) => n.id === node.id); + } + levels.push([nodes[key]]); + nodes.splice(key, 1); + for (const level of levels) { + const a = []; + for (const l of level) { + for (const n of calls) { + if (n.target === l.id) { + const i = nodes.findIndex((d: Node) => d.id === n.source); + if (i > -1) { + a.push(nodes[i]); + nodes.splice(i, 1); + } + } + if (n.source === l.id) { + const i = nodes.findIndex((d: Node) => d.id === n.target); + if (i > -1) { + a.push(nodes[i]); + nodes.splice(i, 1); + } + } + } + } + if (a.length) { + levels.push(a); + } + } + if (nodes.length) { + const ids = nodes.map((d: Node) => d.id); + const links = calls.filter((item: Call) => ids.includes(item.source) || ids.includes(item.target)); + const list = computeLevels(links, nodes, []); + levels = list.map((subArrayA, index) => subArrayA.concat(levels[index])); + } + return levels; +} +export function changeNode(d: { x: number; y: number }, currentNode: Nullable, layout: any, radius: number) { + if (!currentNode) { + return; + } + for (const node of layout.nodes) { + if (node.id === currentNode.id) { + node.x = d.x; + node.y = d.y; + } + } + for (const call of layout.calls) { + if (call.sourceObj.id === currentNode.id) { + call.sourceObj.x = d.x; + call.sourceObj.y = d.y; + } + if (call.targetObj.id === currentNode.id) { + call.targetObj.x = d.x; + call.targetObj.y = d.y; + } + if (call.targetObj.id === currentNode.id || call.sourceObj.id === currentNode.id) { + const pos: any = circleIntersection( + call.sourceObj.x, + call.sourceObj.y, + radius, + call.targetObj.x, + call.targetObj.y, + radius, + ); + call.sourceX = pos[0].x; + call.sourceY = pos[0].y; + call.targetX = pos[1].x; + call.targetY = pos[1].y; + } + } + return computeCallPos(layout.calls, radius); +} +export function hierarchy(levels: Node[][], calls: Call[], radius: number) { + // precompute level depth + levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i))); + + const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []); + // layout + const padding = 30; + const node_height = 100; + const node_width = 180; + const bundle_width = 10; + const metro_d = 4; + for (const n of nodes) { + n.width = 5 * metro_d; + } + + let y_offset = padding; + let x_offset = 0; + for (const level of levels) { + x_offset = 0; + y_offset += 3 * bundle_width; + for (const l of level) { + const n: any = l; + for (const call of calls) { + if (call.source === n.id) { + call.sourceObj = n; + } + if (call.target === n.id) { + call.targetObj = n; + } + } + n.x = node_width + x_offset + n.width / 2; + n.y = n.level * node_height + y_offset; + x_offset += node_width + n.width; + } + } + const layout = { + width: d3.max(nodes as any, (n: { x: number }) => n.x) || 0 + node_width + 2 * padding, + height: d3.max(nodes as any, (n: { y: number }) => n.y) || 0 + node_height / 2 + 2 * padding, + }; + + return { nodes, layout, calls: computeCallPos(calls, radius) }; +} +export function computeHierarchyLevels(nodes: Node[]) { + const levelsNum: number[] = nodes.map((d: Node) => d.l || 0); + const list = [...new Set(levelsNum)]; + const sortedArr = list.sort((a, b) => b - a); + const nodesList = []; + + for (const min of sortedArr) { + const arr = nodes.filter((d) => d.l === min); + nodesList.push(arr); + } + + return nodesList; +} diff --git a/src/views/dashboard/related/topology/components/Metrics.vue b/src/views/dashboard/related/topology/config/Metrics.vue similarity index 80% rename from src/views/dashboard/related/topology/components/Metrics.vue rename to src/views/dashboard/related/topology/config/Metrics.vue index 2660d865..12b7263d 100644 --- a/src/views/dashboard/related/topology/components/Metrics.vue +++ b/src/views/dashboard/related/topology/config/Metrics.vue @@ -15,9 +15,12 @@ limitations under the License. -->