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>
</g>
<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'">
<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>

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

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

369
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.r = 60;
// const hostNode = new Node('192.168.1.1');
// hostNode.group = 'host';
// hostNode.target = {
// metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
// name: 'Host1',
// address: '192.168.1.1',
// mac: '44:8a:5b:f1:f1:f3',
// osType: 'UNKNOWN',
// hostType: 'HOST',
// hostVendor: 'UNKNOWN',
// hostModel: 'UNKNOWN',
// zone: this.zone,
// };
// hostNode.r = 40;
const hostNode = new Node('192.168.1.1');
hostNode.group = 'host';
hostNode.target = {
metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
name: 'Host1',
address: '192.168.1.1',
mac: '44:8a:5b:f1:f1:f3',
osType: 'UNKNOWN',
hostType: 'HOST',
hostVendor: 'UNKNOWN',
hostModel: 'UNKNOWN',
zone: this.zone,
};
hostNode.r = 40;
// const hostNode2 = new Node('192.168.1.2');
// hostNode2.group = 'host';
// hostNode2.target = {
// metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
// name: 'Host2',
// address: '192.168.1.2',
// mac: '44:8a:5b:f1:f1:f3',
// osType: 'UNKNOWN',
// hostType: 'HOST',
// hostVendor: 'UNKNOWN',
// hostModel: 'UNKNOWN',
// zone: this.zone,
// };
// hostNode2.r = 40;
const hostNode2 = new Node('192.168.1.2');
hostNode2.group = 'host';
hostNode2.target = {
metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
name: 'Host2',
address: '192.168.1.2',
mac: '44:8a:5b:f1:f1:f3',
osType: 'UNKNOWN',
hostType: 'HOST',
hostVendor: 'UNKNOWN',
hostModel: 'UNKNOWN',
zone: this.zone,
};
hostNode2.r = 40;
// const hostNode3 = new Node('192.168.1.3');
// hostNode3.group = 'host';
// hostNode3.target = {
// metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
// name: 'Host2',
// address: '192.168.1.3',
// mac: '44:8a:5b:f1:f1:f3',
// osType: 'UNKNOWN',
// hostType: 'HOST',
// hostVendor: 'UNKNOWN',
// hostModel: 'UNKNOWN',
// zone: this.zone,
// };
// hostNode3.r = 40;
const hostNode3 = new Node('192.168.1.3');
hostNode3.group = 'host';
hostNode3.target = {
metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
name: 'Host2',
address: '192.168.1.3',
mac: '44:8a:5b:f1:f1:f3',
osType: 'UNKNOWN',
hostType: 'HOST',
hostVendor: 'UNKNOWN',
hostModel: 'UNKNOWN',
zone: this.zone,
};
hostNode3.r = 40;
// const serviceNode1 = new Node('192.168.1.1-10-HTTP');
// serviceNode1.target = {
// metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
// key: 'HTTP',
// name: 'Apache',
// serviceType: 'WEB',
// serviceVendor: 'Apache',
// serviceVersion: 'UNKNOWN',
const serviceNode1 = new Node('192.168.1.1-10-HTTP');
serviceNode1.target = {
metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
key: 'HTTP',
name: 'Apache',
serviceType: 'WEB',
serviceVendor: 'Apache',
serviceVersion: 'UNKNOWN',
// };
// serviceNode1.group = 'service';
// serviceNode1.r = 30;
};
serviceNode1.group = 'service';
serviceNode1.r = 30;
// const serviceNode2 = new Node('192.168.1.1-20-HTTP');
// serviceNode2.target = {
// metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
// key: 'HTTP',
// name: 'Apache',
// serviceType: 'WEB',
// serviceVendor: 'Apache',
// serviceVersion: 'UNKNOWN',
const serviceNode2 = new Node('192.168.1.1-20-HTTP');
serviceNode2.target = {
metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
key: 'HTTP',
name: 'Apache',
serviceType: 'WEB',
serviceVendor: 'Apache',
serviceVersion: 'UNKNOWN',
// };
// serviceNode2.group = 'service';
// serviceNode2.r = 30;
};
serviceNode2.group = 'service';
serviceNode2.r = 30;
// const serviceNode3 = new Node('192.168.1.1-30-HTTP');
// serviceNode3.target = {
// metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
// key: 'HTTP',
// name: 'Apache',
// serviceType: 'WEB',
// serviceVendor: 'Apache',
// serviceVersion: 'UNKNOWN',
const serviceNode3 = new Node('192.168.1.1-30-HTTP');
serviceNode3.target = {
metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
key: 'HTTP',
name: 'Apache',
serviceType: 'WEB',
serviceVendor: 'Apache',
serviceVersion: 'UNKNOWN',
// };
// serviceNode3.group = 'service';
// serviceNode3.r = 30;
};
serviceNode3.group = 'service';
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.zoneNode,
// hostNode,
// hostNode2,
// hostNode3,
// serviceNode1,
// serviceNode2,
// serviceNode3,
hostNode,
hostNode2,
hostNode3,
serviceNode1,
serviceNode2,
serviceNode3,
serviceNode31,
serviceNode32,
);
this.links.push(
// new Link(this.zoneNode, hostNode),
// new Link(this.zoneNode, hostNode2),
// new Link(this.zoneNode, hostNode3),
// new Link(hostNode, serviceNode1),
// new Link(hostNode, serviceNode2),
// new Link(hostNode, serviceNode3),
new Link(this.zoneNode, hostNode),
new Link(this.zoneNode, hostNode2),
new Link(this.zoneNode, hostNode3),
new Link(hostNode, serviceNode1),
new Link(hostNode, serviceNode2),
new Link(hostNode, serviceNode3),
new Link(hostNode3, serviceNode31),
new Link(hostNode3, serviceNode32),
);
this.simulationRestart(true);
this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost);
// this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost);
}
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);
if (node === _node) {
return ConnectedNode.TARGET;
}
for (let i = 0; i < node.links.length; i++) {
const link = node.links[i];
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) {
@ -411,82 +451,147 @@ export class HomePageComponent implements OnInit, OnDestroy {
}
if (null === __this.selectedNode) {
nodeElements.classed('unfocused', function (): boolean {
if (isConnectedNode(node, this as Element)) {
return false;
nodeElements.each(function () {
const _thisElement = this as Element;
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)) {
return false;
linkElements.each(function () {
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 {
nodeElements.classed('focused', function (): boolean {
if (isConnectedNode(node, this as Element)) {
return true;
nodeElements.each(function () {
const _thisElement = this as Element;
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)) {
return true;
linkElements.each(function () {
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 () {
const node = getNodeFromElement(this as Element);
const nodeElement = this as Element;
const node = getNodeFromElement(nodeElement);
if (null === node || 'zone' === node.group) {
return;
}
if (null === __this.selectedNode) {
__this.selectedNode = node;
nodeElements.classed('unfocused', function (): boolean {
return false;
});
linkElements.classed('unfocused', function (): boolean {
return false;
nodeElements.each(function () {
const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-unfocused', false);
d3.select(_thisElement).classed('unfocused', false);
});
nodeElements.classed('unselected', function (): boolean {
if (isConnectedNode(node, this as Element)) {
return false;
}
return true;
});
linkElements.classed('unselected', function (): boolean {
if (isConnectedLink(node, this as Element)) {
return false;
}
return true;
linkElements.each(function () {
const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-unfocused', false);
d3.select(_thisElement).classed('unfocused', false);
});
nodeElements.each(function () {
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;
}
});
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 () {
const node = getNodeFromElement(this as Element);
if (null === __this.selectedNode) {
nodeElements.classed('unfocused', function (): boolean {
return false;
nodeElements.each(function () {
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 {
nodeElements.classed('focused', function (): boolean {
return false;
nodeElements.each(function () {
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);
});
}
})
;