ing
This commit is contained in:
crusader
parent
59eeb06473
commit
fda4b3c610
|
|
@ -4,7 +4,7 @@ import {
|
||||||
|
|
||||||
import {
|
import {
|
||||||
DropdownPanelComponent,
|
DropdownPanelComponent,
|
||||||
PopupPanelComponent
|
PopupPanelComponent,
|
||||||
} from './primeng';
|
} from './primeng';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
import { NgModule, Component, ElementRef, OnDestroy, Input, Renderer2, ViewChild, Inject, forwardRef, Output, EventEmitter } from '@angular/core';
|
import {
|
||||||
|
NgModule, Component, ElementRef, OnDestroy,
|
||||||
|
Input, Renderer2, ViewChild, Inject, forwardRef,
|
||||||
|
Output, EventEmitter,
|
||||||
|
} from '@angular/core';
|
||||||
import { trigger, state, style, transition, animate, AnimationEvent } from '@angular/animations';
|
import { trigger, state, style, transition, animate, AnimationEvent } from '@angular/animations';
|
||||||
import { DomHandler } from 'primeng/primeng';
|
import { DomHandler } from 'primeng/primeng';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,6 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"electron-devtools-installer": "^2.2.4",
|
"electron-devtools-installer": "^2.2.4",
|
||||||
"ngx-perfect-scrollbar": "^6.3.1",
|
|
||||||
"rxjs": "^6.2.2",
|
"rxjs": "^6.2.2",
|
||||||
"sqlite3": "^4.0.2"
|
"sqlite3": "^4.0.2"
|
||||||
},
|
},
|
||||||
|
|
@ -90,4 +89,4 @@
|
||||||
"webpack-node-externals": "^1.7.2",
|
"webpack-node-externals": "^1.7.2",
|
||||||
"zone.js": "^0.8.26"
|
"zone.js": "^0.8.26"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,93 +1,99 @@
|
||||||
<div *ngIf="showIntro" class="home-start">
|
<div #discoveryContainer>
|
||||||
<div class="start-button" (click)="discoveryConfigService.setStarted(true)">
|
<div *ngIf="showIntro" class="home-start">
|
||||||
<svg version="1.1" viewBox="0 0 200 210">
|
<div class="start-button" (click)="discoveryConfigService.setStarted(true)">
|
||||||
<path d="M8.3,193.5c0.1,2.4,0.8,4.9,2.1,7.1c4.5,7.7,14.3,10.4,22.1,5.9l152.1-87.8c2-1.3,3.8-3.1,5.1-5.4
|
<svg version="1.1" viewBox="0 0 200 210">
|
||||||
|
<path d="M8.3,193.5c0.1,2.4,0.8,4.9,2.1,7.1c4.5,7.7,14.3,10.4,22.1,5.9l152.1-87.8c2-1.3,3.8-3.1,5.1-5.4
|
||||||
c4.5-7.7,1.8-17.6-5.9-22.1L31.6,3.4c-2.2-1.1-4.6-1.7-7.2-1.7c-8.9,0-16.2,7.2-16.2,16.2V193.5z" />
|
c4.5-7.7,1.8-17.6-5.9-22.1L31.6,3.4c-2.2-1.1-4.6-1.7-7.2-1.7c-8.9,0-16.2,7.2-16.2,16.2V193.5z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="home-description">
|
<div class="home-description">
|
||||||
<h1>overFlow Scanner </h1>
|
<h1>overFlow Scanner </h1>
|
||||||
<br>
|
<br>
|
||||||
<b>를 이용해 주셔서 감사합니다.</b>
|
<b>를 이용해 주셔서 감사합니다.</b>
|
||||||
<br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
|
<br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<div *ngIf="!showIntro" class="discovery-container">
|
||||||
|
<svg #discoveryTarget width="100%" height="100%">
|
||||||
<div *ngIf="!showIntro" class="discovery-container">
|
<g>
|
||||||
<svg #discoveryTarget width="100%" height="100%">
|
<g *ngFor="let link of links">
|
||||||
<g>
|
<g class="link-container" [ngClass]="'link-'+link.target.group" [attr.sourceId]="link.source.id"
|
||||||
<g *ngFor="let link of links">
|
[attr.targetId]="link.target.id">
|
||||||
<g class="link-container" [ngClass]="'link-'+link.target.group" [attr.sourceId]="link.source.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>
|
||||||
[attr.targetId]="link.target.id">
|
<text *ngIf="link.target.group === 'service'" class="linkTextClass" [attr.x]="(link.source.x - link.target.x) / 2 + link.target.x"
|
||||||
<line class="link" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
|
[attr.y]="(link.source.y - link.target.y) / 2 + link.target.y">{{link.target.target.port.portNumber}}</text>
|
||||||
<text *ngIf="link.target.group === 'service'" class="linkTextClass" [attr.x]="(link.source.x - link.target.x) / 2 + link.target.x"
|
</g>
|
||||||
[attr.y]="(link.source.y - link.target.y) / 2 + link.target.y">{{link.target.target.port.portNumber}}</text>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<g *ngFor="let node of nodes">
|
||||||
<g *ngFor="let node of nodes">
|
<g class="node-container" [ngClass]="node.group" [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>
|
</g>
|
||||||
</g>
|
<g *ngIf="node.group === 'zone'">
|
||||||
<g *ngIf="node.group === 'zone'">
|
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.network}}</text>
|
||||||
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.network}}</text>
|
</g>
|
||||||
</g>
|
<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_background.svg"></image>
|
||||||
xlink:href="../../assets/image/icon/icon_background.svg"></image>
|
</g>
|
||||||
</g>
|
<g *ngIf="node.group === 'host'">
|
||||||
<g *ngIf="node.group === 'host'">
|
<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"
|
attr.xlink:href="../../assets/image/icon/icon_{{node.target.hostType | lowercase}}.svg"></image>
|
||||||
attr.xlink:href="../../assets/image/icon/icon_{{node.target.hostType | lowercase}}.svg"></image>
|
</g>
|
||||||
</g>
|
<g *ngIf="node.group === 'host' && node.target.hostType === 'HOST' && node.target.osType !== 'UNKNOWN'">
|
||||||
<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"
|
||||||
<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>
|
||||||
attr.xlink:href="../../assets/image/logo/logo_{{node.target.osType | lowercase}}.svg"></image>
|
</g>
|
||||||
</g>
|
<!-- <g *ngIf="node.group === 'host' && node.target.hostType !== 'HOST' && node.target.hostVendor !== ''">
|
||||||
<!-- <g *ngIf="node.group === 'host' && node.target.hostType !== 'HOST' && node.target.hostVendor !== ''">
|
|
||||||
<text class="textClass" [attr.y]="(node.r - 30) / 10 + 'em'" text-anchor="middle">{{node.target.hostVendor}}</text>
|
<text class="textClass" [attr.y]="(node.r - 30) / 10 + 'em'" text-anchor="middle">{{node.target.hostVendor}}</text>
|
||||||
</g> -->
|
</g> -->
|
||||||
<g *ngIf="node.group === 'host'">
|
<g *ngIf="node.group === 'host'">
|
||||||
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.address}}</text>
|
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.address}}</text>
|
||||||
</g>
|
</g>
|
||||||
<g *ngIf="node.group === 'service'">
|
<g *ngIf="node.group === 'service'">
|
||||||
<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"
|
||||||
attr.xlink:href="../../assets/image/icon/icon_{{node.target.serviceType | lowercase}}.svg"></image>
|
attr.xlink:href="../../assets/image/icon/icon_{{node.target.serviceType | lowercase}}.svg"></image>
|
||||||
</g>
|
</g>
|
||||||
<g *ngIf="node.group === 'service' && node.target.key !== 'UNKNOWN'">
|
<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"
|
<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>
|
attr.xlink:href="../../assets/image/logo/logo_{{node.target.key | lowercase}}.svg"></image>
|
||||||
</g>
|
</g>
|
||||||
<g *ngIf="node.group === 'service'">
|
<g *ngIf="node.group === 'service'">
|
||||||
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.name}}</text>
|
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.name}}</text>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</svg>
|
||||||
</svg>
|
<p-card class="ui-map-info" *ngIf="resultMsg">
|
||||||
<p-card class="ui-map-info" *ngIf="resultMsg">
|
<div class="ui-map-info-row ui-border-bottom">
|
||||||
<div class="ui-map-info-row ui-border-bottom">
|
<div>Total Hosts: </div>{{resultMsg[0]}}
|
||||||
<div>Total Hosts: </div>{{resultMsg[0]}}
|
</div>
|
||||||
</div>
|
<div class="ui-map-info-row ui-border-bottom">
|
||||||
<div class="ui-map-info-row ui-border-bottom">
|
<div>Total Services: </div>{{resultMsg[1]}}
|
||||||
<div>Total Services: </div>{{resultMsg[1]}}
|
</div>
|
||||||
</div>
|
<div class="ui-map-info-row">
|
||||||
<div class="ui-map-info-row">
|
<div>Elapsed: </div>{{resultMsg[2]}}
|
||||||
<div>Elapsed: </div>{{resultMsg[2]}}
|
</div>
|
||||||
</div>
|
</p-card>
|
||||||
</p-card>
|
|
||||||
|
<div #detailSidebar style="position: relative; top: 0; left: 0; height: 100%;"></div>
|
||||||
|
|
||||||
|
<p-sidebar [(visible)]="displaySidebar" [modal]="false" [appendTo]="detailSidebar" styleClass="ui-sidebar-md"
|
||||||
|
position="right" (onHide)="onHideDetail()" [style]="{position:'absolute'}">
|
||||||
|
<div *ngIf="selectedNode !== null">
|
||||||
|
<app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
|
||||||
|
</div>
|
||||||
|
</p-sidebar>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p-confirmDialog></p-confirmDialog>
|
<p-confirmDialog></p-confirmDialog>
|
||||||
|
|
||||||
<p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right" (onHide)="onHideDetail()">
|
|
||||||
<div *ngIf="selectedNode !== null">
|
|
||||||
<app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
|
|
||||||
</div>
|
|
||||||
</p-sidebar>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <div class="ui-fluid">
|
<!-- <div class="ui-fluid">
|
||||||
<div class="ui-g">
|
<div class="ui-g">
|
||||||
|
|
|
||||||
|
|
@ -9,26 +9,27 @@
|
||||||
margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
|
margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-image: linear-gradient(#171a1d, #2b323a , #171a1d);
|
background-image: linear-gradient(#171a1d, #2b323a, #171a1d);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 400px;
|
min-width: 400px; //text-align: center;
|
||||||
//text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-description {
|
.home-description {
|
||||||
color: #b6b6b6;
|
color: #b6b6b6;
|
||||||
width:300px;
|
width: 300px;
|
||||||
h1 {
|
h1 {
|
||||||
color: #e7e7e7;
|
color: #e7e7e7;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-button {
|
.start-button {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 210px;
|
height: 210px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
svg{
|
svg {
|
||||||
fill: #f0f0f0;
|
fill: #f0f0f0;
|
||||||
stroke: #3C2412;
|
stroke: #3C2412;
|
||||||
stroke-miterlimit: 10;
|
stroke-miterlimit: 10;
|
||||||
|
|
@ -41,9 +42,11 @@
|
||||||
transition: 0.1s;
|
transition: 0.1s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .ui-panel .ui-panel-content {
|
/deep/ .ui-panel .ui-panel-content {
|
||||||
padding: .6em .75em;
|
padding: .6em .75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discovery-container {
|
.discovery-container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
|
margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
|
||||||
|
|
@ -52,8 +55,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 400px;
|
min-width: 400px; //text-align: center;
|
||||||
//text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
|
|
@ -93,9 +95,6 @@
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.semi-unselected {
|
.semi-unselected {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
@ -107,8 +106,8 @@
|
||||||
.ui-map-info {
|
.ui-map-info {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left :10px;
|
left: 10px;
|
||||||
.ui-map-info-row{
|
.ui-map-info-row {
|
||||||
//display: inline;
|
//display: inline;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
|
|
@ -121,12 +120,19 @@
|
||||||
width: 75px;
|
width: 75px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ui-border-bottom{
|
.ui-border-bottom {
|
||||||
border-bottom: 1px solid #d6d6d6;
|
border-bottom: 1px solid #d6d6d6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .ui-card-body {
|
/deep/ .ui-card-body {
|
||||||
padding: 0.5em ;
|
padding: 0.5em;
|
||||||
border: 1px solid #d6d6d6;
|
border: 1px solid #d6d6d6;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-sidebar {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -350,7 +350,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (null === __this.selectedNode) {
|
if (null === __this.selectedNode) {
|
||||||
__this.selectedNode = node;
|
|
||||||
nodeElements.each(function () {
|
nodeElements.each(function () {
|
||||||
const _thisElement = this as Element;
|
const _thisElement = this as Element;
|
||||||
d3.select(_thisElement).classed('semi-unfocused', false);
|
d3.select(_thisElement).classed('semi-unfocused', false);
|
||||||
|
|
@ -362,51 +361,66 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
||||||
d3.select(_thisElement).classed('semi-unfocused', false);
|
d3.select(_thisElement).classed('semi-unfocused', false);
|
||||||
d3.select(_thisElement).classed('unfocused', false);
|
d3.select(_thisElement).classed('unfocused', false);
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
nodeElements.each(function () {
|
nodeElements.each(function () {
|
||||||
const _thisElement = this as Element;
|
const _thisElement = this as Element;
|
||||||
switch (isConnectedNode(node, _thisElement)) {
|
d3.select(_thisElement).classed('semi-unselected', false);
|
||||||
case ConnectedNode.CONNECTED:
|
d3.select(_thisElement).classed('unselected', false);
|
||||||
d3.select(_thisElement).classed('semi-unselected', true);
|
|
||||||
break;
|
|
||||||
case ConnectedNode.NOT_CONNECTED:
|
|
||||||
d3.select(_thisElement).classed('unselected', true);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
linkElements.each(function () {
|
linkElements.each(function () {
|
||||||
const _thisElement = this as Element;
|
const _thisElement = this as Element;
|
||||||
if (isConnectedLink(node, _thisElement)) {
|
d3.select(_thisElement).classed('semi-unselected', false);
|
||||||
d3.select(_thisElement).classed('semi-unselected', true);
|
d3.select(_thisElement).classed('unselected', false);
|
||||||
} else {
|
|
||||||
d3.select(_thisElement).classed('unselected', true);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
__this.selectedNode = node;
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
__this.onTargetClick(node);
|
__this.onTargetClick(node);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Highlight
|
// Highlight
|
||||||
const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
|
// const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
|
||||||
discoveryContainer.on('click', function () {
|
// discoveryContainer.on('click', function () {
|
||||||
__this.selectedNode = null;
|
// __this.selectedNode = null;
|
||||||
|
|
||||||
nodeElements.each(function () {
|
// nodeElements.each(function () {
|
||||||
const _thisElement = this as Element;
|
// const _thisElement = this as Element;
|
||||||
d3.select(_thisElement).classed('semi-unselected', false);
|
// d3.select(_thisElement).classed('semi-unselected', false);
|
||||||
d3.select(_thisElement).classed('unselected', false);
|
// d3.select(_thisElement).classed('unselected', false);
|
||||||
});
|
// });
|
||||||
|
|
||||||
linkElements.each(function () {
|
// linkElements.each(function () {
|
||||||
const _thisElement = this as Element;
|
// const _thisElement = this as Element;
|
||||||
d3.select(_thisElement).classed('semi-unselected', false);
|
// d3.select(_thisElement).classed('semi-unselected', false);
|
||||||
d3.select(_thisElement).classed('unselected', false);
|
// d3.select(_thisElement).classed('unselected', false);
|
||||||
});
|
// });
|
||||||
});
|
// });
|
||||||
|
|
||||||
nodeElements
|
nodeElements
|
||||||
.on('mouseover', function () {
|
.on('mouseover', function () {
|
||||||
|
|
|
||||||
|
|
@ -2,21 +2,21 @@ import { NgModule, APP_INITIALIZER } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
|
|
||||||
import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
|
import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
|
||||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
// import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||||
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
|
// import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
|
||||||
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
// import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||||
|
|
||||||
import { COMPONENTS } from './component';
|
import { COMPONENTS } from './component';
|
||||||
|
|
||||||
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
// const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||||
suppressScrollX: true
|
// suppressScrollX: true
|
||||||
};
|
// };
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
CommonsUIModule,
|
CommonsUIModule,
|
||||||
PerfectScrollbarModule
|
// PerfectScrollbarModule
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
...COMPONENTS,
|
...COMPONENTS,
|
||||||
|
|
@ -24,11 +24,11 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||||
declarations: [
|
declarations: [
|
||||||
...COMPONENTS,
|
...COMPONENTS,
|
||||||
],
|
],
|
||||||
providers: [
|
// providers: [
|
||||||
{
|
// {
|
||||||
provide: PERFECT_SCROLLBAR_CONFIG,
|
// provide: PERFECT_SCROLLBAR_CONFIG,
|
||||||
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
|
// useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
|
||||||
}
|
// }
|
||||||
]
|
// ]
|
||||||
})
|
})
|
||||||
export class CommonsModule { }
|
export class CommonsModule { }
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,20 @@
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
<p-scrollPanel [style]="{width: '100%', height: '100px'}">
|
||||||
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
|
His
|
||||||
|
beloved
|
||||||
|
son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just
|
||||||
|
like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence
|
||||||
|
whenever anything stands against the good of the family. The story begins as Don Vito Corleone, the head
|
||||||
|
of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from
|
||||||
|
the war, but does not intend to become part of his father's business. Through Michael's life the nature of
|
||||||
|
the family business becomes clear. The business of the family is just like the head of the family, kind and
|
||||||
|
benevolent to those who give respect, but given to ruthless violence whenever anything stands against the
|
||||||
|
good of the family.
|
||||||
|
</p-scrollPanel>
|
||||||
</p-tabPanel>
|
</p-tabPanel>
|
||||||
|
|
||||||
<p-tabPanel header="Metadata" *ngIf="host.meta">
|
<p-tabPanel header="Metadata" *ngIf="host.meta">
|
||||||
|
|
|
||||||
|
|
@ -17,124 +17,124 @@
|
||||||
<p-tabView class="detail-content">
|
<p-tabView class="detail-content">
|
||||||
|
|
||||||
<p-tabPanel header="General">
|
<p-tabPanel header="General">
|
||||||
<perfect-scrollbar>
|
<!-- <perfect-scrollbar> -->
|
||||||
<ul class="key-value">
|
<ul class="key-value">
|
||||||
<li *ngIf="zone.iface">
|
<li *ngIf="zone.iface">
|
||||||
Interface
|
Interface
|
||||||
<span class="meta-value">{{zone.iface}}</span>
|
<span class="meta-value">{{zone.iface}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.mac">
|
<li *ngIf="zone.mac">
|
||||||
Mac Address
|
Mac Address
|
||||||
<span class="meta-value">{{zone.mac}}</span>
|
<span class="meta-value">{{zone.mac}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.metaIPType">
|
<li *ngIf="zone.metaIPType">
|
||||||
IP Version
|
IP Version
|
||||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.network">
|
<li *ngIf="zone.network">
|
||||||
Network
|
Network
|
||||||
<span class="meta-value">{{zone.network}}</span>
|
<span class="meta-value">{{zone.network}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.network">
|
<li *ngIf="zone.network">
|
||||||
IP Range
|
IP Range
|
||||||
<span class="meta-value">{{ipRange}}</span>
|
<span class="meta-value">{{ipRange}}</span>
|
||||||
</li>
|
</li>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<li *ngIf="zone.iface">
|
<li *ngIf="zone.iface">
|
||||||
Interface
|
Interface
|
||||||
<span class="meta-value">{{zone.iface}}</span>
|
<span class="meta-value">{{zone.iface}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.mac">
|
<li *ngIf="zone.mac">
|
||||||
Mac Address
|
Mac Address
|
||||||
<span class="meta-value">{{zone.mac}}</span>
|
<span class="meta-value">{{zone.mac}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.metaIPType">
|
<li *ngIf="zone.metaIPType">
|
||||||
IP Version
|
IP Version
|
||||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.network">
|
<li *ngIf="zone.network">
|
||||||
Network
|
Network
|
||||||
<span class="meta-value">{{zone.network}}</span>
|
<span class="meta-value">{{zone.network}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.network">
|
<li *ngIf="zone.network">
|
||||||
IP Range
|
IP Range
|
||||||
<span class="meta-value">{{ipRange}}</span>
|
<span class="meta-value">{{ipRange}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.iface">
|
<li *ngIf="zone.iface">
|
||||||
Interface
|
Interface
|
||||||
<span class="meta-value">{{zone.iface}}</span>
|
<span class="meta-value">{{zone.iface}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.mac">
|
<li *ngIf="zone.mac">
|
||||||
Mac Address
|
Mac Address
|
||||||
<span class="meta-value">{{zone.mac}}</span>
|
<span class="meta-value">{{zone.mac}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.metaIPType">
|
<li *ngIf="zone.metaIPType">
|
||||||
IP Version
|
IP Version
|
||||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.network">
|
<li *ngIf="zone.network">
|
||||||
Network
|
Network
|
||||||
<span class="meta-value">{{zone.network}}</span>
|
<span class="meta-value">{{zone.network}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.network">
|
<li *ngIf="zone.network">
|
||||||
IP Range
|
IP Range
|
||||||
<span class="meta-value">{{ipRange}}</span>
|
<span class="meta-value">{{ipRange}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.iface">
|
<li *ngIf="zone.iface">
|
||||||
Interface
|
Interface
|
||||||
<span class="meta-value">{{zone.iface}}</span>
|
<span class="meta-value">{{zone.iface}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.mac">
|
<li *ngIf="zone.mac">
|
||||||
Mac Address
|
Mac Address
|
||||||
<span class="meta-value">{{zone.mac}}</span>
|
<span class="meta-value">{{zone.mac}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.metaIPType">
|
<li *ngIf="zone.metaIPType">
|
||||||
IP Version
|
IP Version
|
||||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.network">
|
<li *ngIf="zone.network">
|
||||||
Network
|
Network
|
||||||
<span class="meta-value">{{zone.network}}</span>
|
<span class="meta-value">{{zone.network}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.network">
|
<li *ngIf="zone.network">
|
||||||
IP Range
|
IP Range
|
||||||
<span class="meta-value">{{ipRange}}</span>
|
<span class="meta-value">{{ipRange}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.iface">
|
<li *ngIf="zone.iface">
|
||||||
Interface
|
Interface
|
||||||
<span class="meta-value">{{zone.iface}}</span>
|
<span class="meta-value">{{zone.iface}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.mac">
|
<li *ngIf="zone.mac">
|
||||||
Mac Address
|
Mac Address
|
||||||
<span class="meta-value">{{zone.mac}}</span>
|
<span class="meta-value">{{zone.mac}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.metaIPType">
|
<li *ngIf="zone.metaIPType">
|
||||||
IP Version
|
IP Version
|
||||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.network">
|
<li *ngIf="zone.network">
|
||||||
Network
|
Network
|
||||||
<span class="meta-value">{{zone.network}}</span>
|
<span class="meta-value">{{zone.network}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="zone.network">
|
<li *ngIf="zone.network">
|
||||||
IP Range
|
IP Range
|
||||||
<span class="meta-value">{{ipRange}}</span>
|
<span class="meta-value">{{ipRange}}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</perfect-scrollbar>
|
<!-- </perfect-scrollbar> -->
|
||||||
</p-tabPanel>
|
</p-tabPanel>
|
||||||
|
|
||||||
<p-tabPanel header="Hosts">
|
<p-tabPanel header="Hosts">
|
||||||
<perfect-scrollbar>
|
<!-- <perfect-scrollbar> -->
|
||||||
<ul class="key-value">
|
<ul class="key-value">
|
||||||
<li *ngFor="let host of zone.hostList | ipSort: 'address'">
|
<li *ngFor="let host of zone.hostList | ipSort: 'address'">
|
||||||
<a href="javascript:void(0)" (click)="hostSelected(host)" style="text-decoration:none">
|
<a href="javascript:void(0)" (click)="hostSelected(host)" style="text-decoration:none">
|
||||||
<span class="meta-value">{{host.address}}</span> <span *ngIf="host.name" class="meta-value">
|
<span class="meta-value">{{host.address}}</span> <span *ngIf="host.name" class="meta-value">
|
||||||
({{host.name}})</span>
|
({{host.name}})</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</perfect-scrollbar>
|
<!-- </perfect-scrollbar> -->
|
||||||
</p-tabPanel>
|
</p-tabPanel>
|
||||||
|
|
||||||
</p-tabView>
|
</p-tabView>
|
||||||
|
|
|
||||||
19
yarn.lock
19
yarn.lock
|
|
@ -5264,13 +5264,6 @@ ngrx-store-freeze@^0.2.4:
|
||||||
dependencies:
|
dependencies:
|
||||||
deep-freeze-strict "^1.1.1"
|
deep-freeze-strict "^1.1.1"
|
||||||
|
|
||||||
ngx-perfect-scrollbar@^6.3.1:
|
|
||||||
version "6.3.1"
|
|
||||||
resolved "https://nexus.loafle.net/repository/npm-all/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-6.3.1.tgz#38e5e3259a61e911d82ba24f06fc01ab92eaf919"
|
|
||||||
dependencies:
|
|
||||||
perfect-scrollbar "^1.4.0"
|
|
||||||
resize-observer-polyfill "^1.4.0"
|
|
||||||
|
|
||||||
nice-try@^1.0.4:
|
nice-try@^1.0.4:
|
||||||
version "1.0.5"
|
version "1.0.5"
|
||||||
resolved "https://nexus.loafle.net/repository/npm-all/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
|
resolved "https://nexus.loafle.net/repository/npm-all/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
|
||||||
|
|
@ -5877,10 +5870,6 @@ pend@~1.2.0:
|
||||||
version "1.2.0"
|
version "1.2.0"
|
||||||
resolved "https://nexus.loafle.net/repository/npm-all/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
|
resolved "https://nexus.loafle.net/repository/npm-all/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
|
||||||
|
|
||||||
perfect-scrollbar@^1.4.0:
|
|
||||||
version "1.4.0"
|
|
||||||
resolved "https://nexus.loafle.net/repository/npm-all/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz#5d014ef9775e1f43058a1dbae9ed1daf0e7091f1"
|
|
||||||
|
|
||||||
performance-now@^2.1.0:
|
performance-now@^2.1.0:
|
||||||
version "2.1.0"
|
version "2.1.0"
|
||||||
resolved "https://nexus.loafle.net/repository/npm-all/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
|
resolved "https://nexus.loafle.net/repository/npm-all/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
|
||||||
|
|
@ -6490,10 +6479,6 @@ requires-port@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://nexus.loafle.net/repository/npm-all/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
|
resolved "https://nexus.loafle.net/repository/npm-all/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
|
||||||
|
|
||||||
resize-observer-polyfill@^1.4.0:
|
|
||||||
version "1.5.0"
|
|
||||||
resolved "https://nexus.loafle.net/repository/npm-all/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
|
|
||||||
|
|
||||||
resolve-cwd@^2.0.0:
|
resolve-cwd@^2.0.0:
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://nexus.loafle.net/repository/npm-all/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
|
resolved "https://nexus.loafle.net/repository/npm-all/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
|
||||||
|
|
@ -6566,6 +6551,10 @@ rx@^4.1.0:
|
||||||
version "4.1.0"
|
version "4.1.0"
|
||||||
resolved "https://nexus.loafle.net/repository/npm-all/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
|
resolved "https://nexus.loafle.net/repository/npm-all/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
|
||||||
|
|
||||||
|
rxjs-compat@^6.3.2:
|
||||||
|
version "6.3.2"
|
||||||
|
resolved "https://nexus.loafle.net/repository/npm-all/rxjs-compat/-/rxjs-compat-6.3.2.tgz#2386ade05e693480fdf96f56042a629aef6c5ea5"
|
||||||
|
|
||||||
rxjs@^6.0.0, rxjs@^6.1.0, rxjs@^6.2.2:
|
rxjs@^6.0.0, rxjs@^6.1.0, rxjs@^6.2.2:
|
||||||
version "6.3.2"
|
version "6.3.2"
|
||||||
resolved "https://nexus.loafle.net/repository/npm-all/rxjs/-/rxjs-6.3.2.tgz#6a688b16c4e6e980e62ea805ec30648e1c60907f"
|
resolved "https://nexus.loafle.net/repository/npm-all/rxjs/-/rxjs-6.3.2.tgz#6a688b16c4e6e980e62ea805ec30648e1c60907f"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user