This commit is contained in:
insanity 2018-09-18 21:26:47 +09:00
commit 52884393d6
6 changed files with 77 additions and 30 deletions

View File

@ -18,8 +18,12 @@
<svg #discoveryTarget width="100%" height="100%">
<g>
<g *ngFor="let link of links">
<line class="link" [attr.sourceId]="link.source.id" [attr.targetId]="link.target.id" [attr.x1]="link.source.x"
[attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
<g class="link-container" [ngClass]="'link-'+link.target.group" [attr.sourceId]="link.source.id"
[attr.targetId]="link.target.id">
<line class="link" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
<text *ngIf="link.target.group === 'service'" class="linkTextClass" [attr.x]="(link.source.x - link.target.x) / 2 + link.target.x"
[attr.y]="(link.source.y - link.target.y) / 2 + link.target.y">{{link.target.target.port.portNumber}}</text>
</g>
</g>
<g *ngFor="let node of nodes">
<g class="node-container" [ngClass]="node.group" [attr.nodeId]="node.id" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
@ -38,7 +42,7 @@
<image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
attr.xlink:href="../../assets/image/icon/icon_{{node.target.hostType | lowercase}}.svg"></image>
</g>
<g *ngIf="node.group === 'host' && node.target.hostType === 'HOST'">
<g *ngIf="node.group === 'host' && node.target.hostType === 'HOST' && node.target.osType !== 'UNKNOWN'">
<image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
attr.xlink:href="../../assets/image/logo/logo_{{node.target.osType | lowercase}}.svg"></image>
</g>
@ -52,7 +56,7 @@
<image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
attr.xlink:href="../../assets/image/icon/icon_{{node.target.serviceType | lowercase}}.svg"></image>
</g>
<g *ngIf="node.group === 'service'">
<g *ngIf="node.group === 'service' && node.target.key !== 'UNKNOWN'">
<image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
attr.xlink:href="../../assets/image/logo/logo_{{node.target.key | lowercase}}.svg"></image>
</g>
@ -63,14 +67,10 @@
</g>
</g>
</svg>
</div>
<p-card class="ui-map-info" *ngIf="resultMsg">
<b>Total Hosts: </b> {{resultMsg[0]}}<br />
<b>Total Services:</b> {{resultMsg[1]}}<br />
<b>Time Spent: </b>{{resultMsg[2]}}
<p-card class="ui-map-info">
Content
</p-card>
</div>
<p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right" (onHide)="onHideDetail()">
<div *ngIf="selectedNode !== null">
@ -78,6 +78,7 @@
</div>
</p-sidebar>
<p-growl [(value)]="resultMsg" [sticky]="true"></p-growl>
<p-dialog header="Ping" [(visible)]="pingDisplay" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200"
[minY]="70" [maximizable]="true" [baseZIndex]="10000">

View File

@ -67,6 +67,14 @@
font-size: 14px;
}
.linkTextClass {
stroke: #b6b4b4;
font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
font-weight: normal;
stroke-width: .3;
font-size: 9px;
}
.focused {
opacity: 1 !important;
}

View File

@ -14,7 +14,12 @@ import { Node } from '../../../commons/model/node';
import { Link } from '../../../commons/model/link';
import { RPCError } from '@overflow/rpc-js';
<<<<<<< HEAD
import { toMetaIPType, MetaIPTypeEnum, toMetaCryptoType, MetaCryptoTypeEnum } from '@overflow/model/meta';
=======
import { toMetaIPType, MetaIPTypeEnum, toMetaCryptoType, MetaCryptoTypeEnum, toMetaPortType, MetaPortTypeEnum } from '@overflow/model/meta';
import { Message } from 'primeng/primeng';
>>>>>>> 42243565d710c6f755deb99207bfaa337ffbbc78
import { DiscoveryModeType } from '@overflow/model/discovery/discovery';
import { PingResult } from '@overflow/model/ping';
@ -238,7 +243,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
const __this = this;
const nodeElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container');
const linkElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.link');
const linkElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.link-container');
function getNodeFromElement(element: Element): Node | null {
const container = d3.select(element);
@ -537,7 +542,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
const __this = this;
const nodeElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container');
const linkElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.link');
const linkElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.link-container');
__this.selectedNode = null;
@ -770,9 +775,8 @@ export class HomePageComponent implements OnInit, OnDestroy {
}
private setTestData() {
const hostNode = new Node('192.168.1.1');
hostNode.group = 'host';
hostNode.target = {
const host1: Host = {
metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
name: 'Host1',
address: '192.168.1.1',
@ -783,11 +787,13 @@ export class HomePageComponent implements OnInit, OnDestroy {
hostModel: 'UNKNOWN',
zone: this.zone,
};
const hostNode = new Node('192.168.1.1');
hostNode.group = 'host';
hostNode.target = host1;
hostNode.r = 40;
const hostNode2 = new Node('192.168.1.2');
hostNode2.group = 'host';
hostNode2.target = {
const host2: Host = {
metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
name: 'Host2',
address: '192.168.1.2',
@ -798,11 +804,13 @@ export class HomePageComponent implements OnInit, OnDestroy {
hostModel: 'UNKNOWN',
zone: this.zone,
};
const hostNode2 = new Node('192.168.1.2');
hostNode2.group = 'host';
hostNode2.target = host2;
hostNode2.r = 40;
const hostNode3 = new Node('192.168.1.3');
hostNode3.group = 'host';
hostNode3.target = {
const host3: Host = {
metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
name: 'Host2',
address: '192.168.1.3',
@ -813,6 +821,10 @@ export class HomePageComponent implements OnInit, OnDestroy {
hostModel: 'UNKNOWN',
zone: this.zone,
};
const hostNode3 = new Node('192.168.1.3');
hostNode3.group = 'host';
hostNode3.target = host3;
hostNode3.r = 40;
const serviceNode1 = new Node('192.168.1.1-10-HTTP');
@ -823,7 +835,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
serviceType: 'WEB',
serviceVendor: 'Apache',
serviceVersion: 'UNKNOWN',
port: {
host: host1,
portNumber: 10,
metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
},
};
serviceNode1.group = 'service';
serviceNode1.r = 30;
@ -836,7 +852,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
serviceType: 'WEB',
serviceVendor: 'Apache',
serviceVersion: 'UNKNOWN',
port: {
host: host1,
portNumber: 20,
metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
},
};
serviceNode2.group = 'service';
serviceNode2.r = 30;
@ -849,6 +869,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
serviceType: 'WEB',
serviceVendor: 'Apache',
serviceVersion: 'UNKNOWN',
port: {
host: host1,
portNumber: 30,
metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
},
};
serviceNode3.group = 'service';
@ -863,6 +888,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
serviceType: 'WEB',
serviceVendor: 'Apache',
serviceVersion: 'UNKNOWN',
port: {
host: host3,
portNumber: 10,
metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
},
};
serviceNode31.group = 'service';
@ -876,6 +906,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
serviceType: 'WEB',
serviceVendor: 'Apache',
serviceVersion: 'UNKNOWN',
port: {
host: host3,
portNumber: 20,
metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
},
};
serviceNode32.group = 'service';

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

View File

@ -18,7 +18,7 @@
</svg>
</button>
</p-header>
<div id="nic-list-border">
<div>
<p-listbox [options]="nics" [(ngModel)]="selected" [style]="{'width':'100%'}" (ngModelChange)="nicSelected($event)"></p-listbox>
</div>
<!-- <div>Body Content</div>

View File

@ -1,15 +1,18 @@
#nic-list-border div.ui-widget-content {
border: 0px !important;
/deep/ .ui-widget-content {
border: 0px;
}
#nic-list-border div.ui-listbox-list {
/deep/ .ui-listbox-list {
line-height: 2em;
}
#nic-list-border div.ui-listbox-item {
/deep/ .ui-listbox-item {
padding: 1em;
.title{
font-weight: bold;
}
.description {
font-size: 0.8em;
}
}
/deep/ .ui-corner-all {
border-radius: 0px;
}