overflow_scanner/app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ing

Browse Source
This commit is contained in:
crusader 2018-09-17 14:00:55 +09:00
parent daaf4b7c75
commit f5f4e846a5
3 changed files with 252 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/pages/home/home-page.component.html
View File

@ -22,7 +22,7 @@
[attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line> [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
</g> </g>
<g *ngFor="let node of nodes"> <g *ngFor="let node of nodes">
<g class="node-container" [attr.nodeId]="node.id" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'"> <g class="node-container" [ngClass]="node.group" [attr.nodeId]="node.id" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
<g *ngIf="node.group === 'zone'"> <g *ngIf="node.group === 'zone'">
<image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2" <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
xlink:href="../../assets/image/icon/icon_overflow.svg"></image> xlink:href="../../assets/image/icon/icon_overflow.svg"></image>

15
src/app/pages/home/home-page.component.scss
View File

@ -71,10 +71,25 @@
opacity: 1 !important; opacity: 1 !important;
} }
.semi-focused {
opacity: 0.8 !important;
}
.semi-unfocused {
opacity: 0.8;
}
.unfocused { .unfocused {
opacity: 0.3; opacity: 0.3;
} }
.semi-unselected {
opacity: 0.8;
}
.unselected { .unselected {
opacity: 0.3; opacity: 0.3;
} }

367
src/app/pages/home/home-page.component.ts
View File

@ -169,113 +169,144 @@ export class HomePageComponent implements OnInit, OnDestroy {
this.zoneNode.fy = this.discoveryContainerHeight / 2; this.zoneNode.fy = this.discoveryContainerHeight / 2;
this.zoneNode.r = 60; this.zoneNode.r = 60;
// const hostNode = new Node('192.168.1.1'); const hostNode = new Node('192.168.1.1');
// hostNode.group = 'host'; hostNode.group = 'host';
// hostNode.target = { hostNode.target = {
// metaIPType: toMetaIPType(MetaIPTypeEnum.V4), metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
// name: 'Host1', name: 'Host1',
// address: '192.168.1.1', address: '192.168.1.1',
// mac: '44:8a:5b:f1:f1:f3', mac: '44:8a:5b:f1:f1:f3',
// osType: 'UNKNOWN', osType: 'UNKNOWN',
// hostType: 'HOST', hostType: 'HOST',
// hostVendor: 'UNKNOWN', hostVendor: 'UNKNOWN',
// hostModel: 'UNKNOWN', hostModel: 'UNKNOWN',
// zone: this.zone, zone: this.zone,
// }; };
// hostNode.r = 40; hostNode.r = 40;
// const hostNode2 = new Node('192.168.1.2'); const hostNode2 = new Node('192.168.1.2');
// hostNode2.group = 'host'; hostNode2.group = 'host';
// hostNode2.target = { hostNode2.target = {
// metaIPType: toMetaIPType(MetaIPTypeEnum.V4), metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
// name: 'Host2', name: 'Host2',
// address: '192.168.1.2', address: '192.168.1.2',
// mac: '44:8a:5b:f1:f1:f3', mac: '44:8a:5b:f1:f1:f3',
// osType: 'UNKNOWN', osType: 'UNKNOWN',
// hostType: 'HOST', hostType: 'HOST',
// hostVendor: 'UNKNOWN', hostVendor: 'UNKNOWN',
// hostModel: 'UNKNOWN', hostModel: 'UNKNOWN',
// zone: this.zone, zone: this.zone,
// }; };
// hostNode2.r = 40; hostNode2.r = 40;
// const hostNode3 = new Node('192.168.1.3'); const hostNode3 = new Node('192.168.1.3');
// hostNode3.group = 'host'; hostNode3.group = 'host';
// hostNode3.target = { hostNode3.target = {
// metaIPType: toMetaIPType(MetaIPTypeEnum.V4), metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
// name: 'Host2', name: 'Host2',
// address: '192.168.1.3', address: '192.168.1.3',
// mac: '44:8a:5b:f1:f1:f3', mac: '44:8a:5b:f1:f1:f3',
// osType: 'UNKNOWN', osType: 'UNKNOWN',
// hostType: 'HOST', hostType: 'HOST',
// hostVendor: 'UNKNOWN', hostVendor: 'UNKNOWN',
// hostModel: 'UNKNOWN', hostModel: 'UNKNOWN',
// zone: this.zone, zone: this.zone,
// }; };
// hostNode3.r = 40; hostNode3.r = 40;
// const serviceNode1 = new Node('192.168.1.1-10-HTTP'); const serviceNode1 = new Node('192.168.1.1-10-HTTP');
// serviceNode1.target = { serviceNode1.target = {
// metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE), metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
// key: 'HTTP', key: 'HTTP',
// name: 'Apache', name: 'Apache',
// serviceType: 'WEB', serviceType: 'WEB',
// serviceVendor: 'Apache', serviceVendor: 'Apache',
// serviceVersion: 'UNKNOWN', serviceVersion: 'UNKNOWN',
// }; };
// serviceNode1.group = 'service'; serviceNode1.group = 'service';
// serviceNode1.r = 30; serviceNode1.r = 30;
// const serviceNode2 = new Node('192.168.1.1-20-HTTP'); const serviceNode2 = new Node('192.168.1.1-20-HTTP');
// serviceNode2.target = { serviceNode2.target = {
// metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE), metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
// key: 'HTTP', key: 'HTTP',
// name: 'Apache', name: 'Apache',
// serviceType: 'WEB', serviceType: 'WEB',
// serviceVendor: 'Apache', serviceVendor: 'Apache',
// serviceVersion: 'UNKNOWN', serviceVersion: 'UNKNOWN',
// }; };
// serviceNode2.group = 'service'; serviceNode2.group = 'service';
// serviceNode2.r = 30; serviceNode2.r = 30;
// const serviceNode3 = new Node('192.168.1.1-30-HTTP'); const serviceNode3 = new Node('192.168.1.1-30-HTTP');
// serviceNode3.target = { serviceNode3.target = {
// metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE), metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
// key: 'HTTP', key: 'HTTP',
// name: 'Apache', name: 'Apache',
// serviceType: 'WEB', serviceType: 'WEB',
// serviceVendor: 'Apache', serviceVendor: 'Apache',
// serviceVersion: 'UNKNOWN', serviceVersion: 'UNKNOWN',
// }; };
// serviceNode3.group = 'service'; serviceNode3.group = 'service';
// serviceNode3.r = 30; serviceNode3.r = 30;
const serviceNode31 = new Node('192.168.1.3-10-HTTP');
serviceNode31.target = {
metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
key: 'HTTP',
name: 'Apache',
serviceType: 'WEB',
serviceVendor: 'Apache',
serviceVersion: 'UNKNOWN',
};
serviceNode31.group = 'service';
serviceNode31.r = 30;
const serviceNode32 = new Node('192.168.1.3-20-HTTP');
serviceNode32.target = {
metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
key: 'HTTP',
name: 'Apache',
serviceType: 'WEB',
serviceVendor: 'Apache',
serviceVersion: 'UNKNOWN',
};
serviceNode32.group = 'service';
serviceNode32.r = 30;
this.nodes.push( this.nodes.push(
this.zoneNode, this.zoneNode,
// hostNode, hostNode,
// hostNode2, hostNode2,
// hostNode3, hostNode3,
// serviceNode1, serviceNode1,
// serviceNode2, serviceNode2,
// serviceNode3, serviceNode3,
serviceNode31,
serviceNode32,
); );
this.links.push( this.links.push(
// new Link(this.zoneNode, hostNode), new Link(this.zoneNode, hostNode),
// new Link(this.zoneNode, hostNode2), new Link(this.zoneNode, hostNode2),
// new Link(this.zoneNode, hostNode3), new Link(this.zoneNode, hostNode3),
// new Link(hostNode, serviceNode1), new Link(hostNode, serviceNode1),
// new Link(hostNode, serviceNode2), new Link(hostNode, serviceNode2),
// new Link(hostNode, serviceNode3), new Link(hostNode, serviceNode3),
new Link(hostNode3, serviceNode31),
new Link(hostNode3, serviceNode32),
); );
this.simulationRestart(true); this.simulationRestart(true);
this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost); // this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost);
} }
simulationInit() { simulationInit() {
@ -363,15 +394,24 @@ export class HomePageComponent implements OnInit, OnDestroy {
}) })
); );
function isConnectedNode(node: Node, element: Element): boolean { enum ConnectedNode {
TARGET = 1,
CONNECTED,
NOT_CONNECTED,
}
function isConnectedNode(node: Node, element: Element): ConnectedNode {
const _node = getNodeFromElement(element); const _node = getNodeFromElement(element);
if (node === _node) {
return ConnectedNode.TARGET;
}
for (let i = 0; i < node.links.length; i++) { for (let i = 0; i < node.links.length; i++) {
const link = node.links[i]; const link = node.links[i];
if (node === _node || link.source === _node || link.target === _node) { if (node === _node || link.source === _node || link.target === _node) {
return true; return ConnectedNode.CONNECTED;
} }
} }
return false; return ConnectedNode.NOT_CONNECTED;
} }
function isConnectedLink(node: Node, element: Element) { function isConnectedLink(node: Node, element: Element) {
@ -411,82 +451,147 @@ export class HomePageComponent implements OnInit, OnDestroy {
} }
if (null === __this.selectedNode) { if (null === __this.selectedNode) {
nodeElements.classed('unfocused', function (): boolean { nodeElements.each(function () {
if (isConnectedNode(node, this as Element)) { const _thisElement = this as Element;
return false; switch (isConnectedNode(node, _thisElement)) {
case ConnectedNode.CONNECTED:
d3.select(_thisElement).classed('semi-unfocused', true);
break;
case ConnectedNode.NOT_CONNECTED:
d3.select(_thisElement).classed('unfocused', true);
break;
default:
break;
} }
return true;
}); });
linkElements.classed('unfocused', function (): boolean {
if (isConnectedLink(node, this as Element)) { linkElements.each(function () {
return false; const _thisElement = this as Element;
if (isConnectedLink(node, _thisElement)) {
d3.select(_thisElement).classed('semi-unfocused', true);
} else {
d3.select(_thisElement).classed('unfocused', true);
} }
return true;
}); });
} else { } else {
nodeElements.classed('focused', function (): boolean { nodeElements.each(function () {
if (isConnectedNode(node, this as Element)) { const _thisElement = this as Element;
return true; switch (isConnectedNode(node, _thisElement)) {
case ConnectedNode.TARGET:
d3.select(_thisElement).classed('focused', true);
break;
case ConnectedNode.CONNECTED:
d3.select(_thisElement).classed('semi-focused', true);
break;
default:
break;
} }
return false;
}); });
linkElements.classed('focused', function (): boolean {
if (isConnectedLink(node, this as Element)) { linkElements.each(function () {
return true; const _thisElement = this as Element;
if (isConnectedLink(node, _thisElement)) {
d3.select(_thisElement).classed('semi-focused', true);
} }
return false;
}); });
// linkElements.classed('focused', function (): boolean {
// if (isConnectedLink(node, this as Element)) {
// return true;
// }
// return false;
// });
} }
}) })
.on('mousedown', function () { .on('mousedown', function () {
const node = getNodeFromElement(this as Element); const nodeElement = this as Element;
const node = getNodeFromElement(nodeElement);
if (null === node || 'zone' === node.group) { if (null === node || 'zone' === node.group) {
return; return;
} }
if (null === __this.selectedNode) { if (null === __this.selectedNode) {
__this.selectedNode = node; __this.selectedNode = node;
nodeElements.classed('unfocused', function (): boolean { nodeElements.each(function () {
return false; const _thisElement = this as Element;
}); d3.select(_thisElement).classed('semi-unfocused', false);
linkElements.classed('unfocused', function (): boolean { d3.select(_thisElement).classed('unfocused', false);
return false;
}); });
nodeElements.classed('unselected', function (): boolean { linkElements.each(function () {
if (isConnectedNode(node, this as Element)) { const _thisElement = this as Element;
return false; d3.select(_thisElement).classed('semi-unfocused', false);
} d3.select(_thisElement).classed('unfocused', false);
return true;
}); });
linkElements.classed('unselected', function (): boolean {
if (isConnectedLink(node, this as Element)) { nodeElements.each(function () {
return false; const _thisElement = this as Element;
switch (isConnectedNode(node, _thisElement)) {
case ConnectedNode.CONNECTED:
d3.select(_thisElement).classed('semi-unselected', true);
break;
case ConnectedNode.NOT_CONNECTED:
d3.select(_thisElement).classed('unselected', true);
break;
default:
break;
} }
return true;
}); });
linkElements.each(function () {
const _thisElement = this as Element;
if (isConnectedLink(node, _thisElement)) {
d3.select(_thisElement).classed('semi-unselected', true);
} else {
d3.select(_thisElement).classed('unselected', true);
}
});
// const root = d3.select(__this.discoveryTargetRef.nativeElement);
// const zoneRect = root.select<any>('.zone').node().getBoundingClientRect();
// const nodeRect = d3.select<any, {}>(nodeElement).node().getBoundingClientRect();
// const cx = (nodeRect.x - zoneRect.x);
// const cy = (nodeRect.y - zoneRect.y);
// root
// .transition()
// .duration(500 || 0) // milliseconds
// .call(__this.zoomBehavior.transform, d3.zoomIdentity.translate(cx, cy).scale(1.4));
} }
}) })
.on('mouseout', function () { .on('mouseout', function () {
const node = getNodeFromElement(this as Element); const node = getNodeFromElement(this as Element);
if (null === __this.selectedNode) { if (null === __this.selectedNode) {
nodeElements.classed('unfocused', function (): boolean { nodeElements.each(function () {
return false; const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-unfocused', false);
d3.select(_thisElement).classed('unfocused', false);
}); });
linkElements.classed('unfocused', function (): boolean {
return false; linkElements.each(function () {
const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-unfocused', false);
d3.select(_thisElement).classed('unfocused', false);
}); });
} else { } else {
nodeElements.classed('focused', function (): boolean { nodeElements.each(function () {
return false; const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-focused', false);
d3.select(_thisElement).classed('focused', false);
}); });
linkElements.classed('focused', function (): boolean {
return false; linkElements.each(function () {
const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-focused', false);
d3.select(_thisElement).classed('focused', false);
}); });
} }
}) })
; ;