ing
This commit is contained in:
crusader
parent
59eeb06473
commit
fda4b3c610
|
|
@ -4,7 +4,7 @@ import {
|
|||
|
||||
import {
|
||||
DropdownPanelComponent,
|
||||
PopupPanelComponent
|
||||
PopupPanelComponent,
|
||||
} from './primeng';
|
||||
|
||||
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 { DomHandler } from 'primeng/primeng';
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
"private": true,
|
||||
"dependencies": {
|
||||
"electron-devtools-installer": "^2.2.4",
|
||||
"ngx-perfect-scrollbar": "^6.3.1",
|
||||
"rxjs": "^6.2.2",
|
||||
"sqlite3": "^4.0.2"
|
||||
},
|
||||
|
|
@ -90,4 +89,4 @@
|
|||
"webpack-node-externals": "^1.7.2",
|
||||
"zone.js": "^0.8.26"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,93 +1,99 @@
|
|||
<div *ngIf="showIntro" class="home-start">
|
||||
<div class="start-button" (click)="discoveryConfigService.setStarted(true)">
|
||||
<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
|
||||
<div #discoveryContainer>
|
||||
<div *ngIf="showIntro" class="home-start">
|
||||
<div class="start-button" (click)="discoveryConfigService.setStarted(true)">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="home-description">
|
||||
<h1>overFlow Scanner </h1>
|
||||
<br>
|
||||
<b>를 이용해 주셔서 감사합니다.</b>
|
||||
<br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
|
||||
</svg>
|
||||
</div>
|
||||
<div class="home-description">
|
||||
<h1>overFlow Scanner </h1>
|
||||
<br>
|
||||
<b>를 이용해 주셔서 감사합니다.</b>
|
||||
<br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngIf="!showIntro" class="discovery-container">
|
||||
<svg #discoveryTarget width="100%" height="100%">
|
||||
<g>
|
||||
<g *ngFor="let link of links">
|
||||
<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>
|
||||
<div *ngIf="!showIntro" class="discovery-container">
|
||||
<svg #discoveryTarget width="100%" height="100%">
|
||||
<g>
|
||||
<g *ngFor="let link of links">
|
||||
<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>
|
||||
<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 *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>
|
||||
</g>
|
||||
<g *ngIf="node.group === 'zone'">
|
||||
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.network}}</text>
|
||||
</g>
|
||||
<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_background.svg"></image>
|
||||
</g>
|
||||
<g *ngIf="node.group === 'host'">
|
||||
<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' && 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>
|
||||
<!-- <g *ngIf="node.group === 'host' && node.target.hostType !== 'HOST' && node.target.hostVendor !== ''">
|
||||
<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 *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>
|
||||
</g>
|
||||
<g *ngIf="node.group === 'zone'">
|
||||
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.network}}</text>
|
||||
</g>
|
||||
<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_background.svg"></image>
|
||||
</g>
|
||||
<g *ngIf="node.group === 'host'">
|
||||
<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' && 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>
|
||||
<!-- <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>
|
||||
</g> -->
|
||||
<g *ngIf="node.group === 'host'">
|
||||
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.address}}</text>
|
||||
</g>
|
||||
<g *ngIf="node.group === 'service'">
|
||||
<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' && 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>
|
||||
<g *ngIf="node.group === 'service'">
|
||||
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.name}}</text>
|
||||
<g *ngIf="node.group === 'host'">
|
||||
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.address}}</text>
|
||||
</g>
|
||||
<g *ngIf="node.group === 'service'">
|
||||
<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' && 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>
|
||||
<g *ngIf="node.group === 'service'">
|
||||
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.name}}</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<p-card class="ui-map-info" *ngIf="resultMsg">
|
||||
<div class="ui-map-info-row ui-border-bottom">
|
||||
<div>Total Hosts: </div>{{resultMsg[0]}}
|
||||
</div>
|
||||
<div class="ui-map-info-row ui-border-bottom">
|
||||
<div>Total Services: </div>{{resultMsg[1]}}
|
||||
</div>
|
||||
<div class="ui-map-info-row">
|
||||
<div>Elapsed: </div>{{resultMsg[2]}}
|
||||
</div>
|
||||
</p-card>
|
||||
</svg>
|
||||
<p-card class="ui-map-info" *ngIf="resultMsg">
|
||||
<div class="ui-map-info-row ui-border-bottom">
|
||||
<div>Total Hosts: </div>{{resultMsg[0]}}
|
||||
</div>
|
||||
<div class="ui-map-info-row ui-border-bottom">
|
||||
<div>Total Services: </div>{{resultMsg[1]}}
|
||||
</div>
|
||||
<div class="ui-map-info-row">
|
||||
<div>Elapsed: </div>{{resultMsg[2]}}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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-g">
|
||||
|
|
|
|||
|
|
@ -9,26 +9,27 @@
|
|||
margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
background-image: linear-gradient(#171a1d, #2b323a , #171a1d);
|
||||
background-image: linear-gradient(#171a1d, #2b323a, #171a1d);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 400px;
|
||||
//text-align: center;
|
||||
min-width: 400px; //text-align: center;
|
||||
}
|
||||
|
||||
.home-description {
|
||||
color: #b6b6b6;
|
||||
width:300px;
|
||||
h1 {
|
||||
color: #e7e7e7;
|
||||
}
|
||||
color: #b6b6b6;
|
||||
width: 300px;
|
||||
h1 {
|
||||
color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
|
||||
.start-button {
|
||||
width: 200px;
|
||||
height: 210px;
|
||||
margin-right: 20px;
|
||||
transition: 0.3s;
|
||||
svg{
|
||||
svg {
|
||||
fill: #f0f0f0;
|
||||
stroke: #3C2412;
|
||||
stroke-miterlimit: 10;
|
||||
|
|
@ -41,9 +42,11 @@
|
|||
transition: 0.1s;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .ui-panel .ui-panel-content {
|
||||
padding: .6em .75em;
|
||||
}
|
||||
|
||||
.discovery-container {
|
||||
height: 100vh;
|
||||
margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
|
||||
|
|
@ -52,8 +55,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 400px;
|
||||
//text-align: center;
|
||||
min-width: 400px; //text-align: center;
|
||||
}
|
||||
|
||||
.link {
|
||||
|
|
@ -93,9 +95,6 @@
|
|||
opacity: 0.3;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.semi-unselected {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
|
@ -107,8 +106,8 @@
|
|||
.ui-map-info {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left :10px;
|
||||
.ui-map-info-row{
|
||||
left: 10px;
|
||||
.ui-map-info-row {
|
||||
//display: inline;
|
||||
font-size: 0.8em;
|
||||
line-height: 2em;
|
||||
|
|
@ -121,12 +120,19 @@
|
|||
width: 75px;
|
||||
}
|
||||
}
|
||||
.ui-border-bottom{
|
||||
.ui-border-bottom {
|
||||
border-bottom: 1px solid #d6d6d6;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .ui-card-body {
|
||||
padding: 0.5em ;
|
||||
padding: 0.5em;
|
||||
border: 1px solid #d6d6d6;
|
||||
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) {
|
||||
__this.selectedNode = node;
|
||||
nodeElements.each(function () {
|
||||
const _thisElement = this as Element;
|
||||
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('unfocused', false);
|
||||
});
|
||||
|
||||
} else {
|
||||
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;
|
||||
}
|
||||
d3.select(_thisElement).classed('semi-unselected', false);
|
||||
d3.select(_thisElement).classed('unselected', false);
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
d3.select(_thisElement).classed('semi-unselected', false);
|
||||
d3.select(_thisElement).classed('unselected', false);
|
||||
});
|
||||
}
|
||||
|
||||
__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);
|
||||
});
|
||||
|
||||
// Highlight
|
||||
const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
|
||||
discoveryContainer.on('click', function () {
|
||||
__this.selectedNode = null;
|
||||
// const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
|
||||
// discoveryContainer.on('click', function () {
|
||||
// __this.selectedNode = null;
|
||||
|
||||
nodeElements.each(function () {
|
||||
const _thisElement = this as Element;
|
||||
d3.select(_thisElement).classed('semi-unselected', false);
|
||||
d3.select(_thisElement).classed('unselected', false);
|
||||
});
|
||||
// nodeElements.each(function () {
|
||||
// const _thisElement = this as Element;
|
||||
// d3.select(_thisElement).classed('semi-unselected', false);
|
||||
// d3.select(_thisElement).classed('unselected', false);
|
||||
// });
|
||||
|
||||
linkElements.each(function () {
|
||||
const _thisElement = this as Element;
|
||||
d3.select(_thisElement).classed('semi-unselected', false);
|
||||
d3.select(_thisElement).classed('unselected', false);
|
||||
});
|
||||
});
|
||||
// linkElements.each(function () {
|
||||
// const _thisElement = this as Element;
|
||||
// d3.select(_thisElement).classed('semi-unselected', false);
|
||||
// d3.select(_thisElement).classed('unselected', false);
|
||||
// });
|
||||
// });
|
||||
|
||||
nodeElements
|
||||
.on('mouseover', function () {
|
||||
|
|
|
|||
|
|
@ -2,21 +2,21 @@ import { NgModule, APP_INITIALIZER } from '@angular/core';
|
|||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
|
||||
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||
// import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
// import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
|
||||
// import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||
|
||||
import { COMPONENTS } from './component';
|
||||
|
||||
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
suppressScrollX: true
|
||||
};
|
||||
// const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
// suppressScrollX: true
|
||||
// };
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
CommonsUIModule,
|
||||
PerfectScrollbarModule
|
||||
// PerfectScrollbarModule
|
||||
],
|
||||
exports: [
|
||||
...COMPONENTS,
|
||||
|
|
@ -24,11 +24,11 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
|||
declarations: [
|
||||
...COMPONENTS,
|
||||
],
|
||||
providers: [
|
||||
{
|
||||
provide: PERFECT_SCROLLBAR_CONFIG,
|
||||
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
|
||||
}
|
||||
]
|
||||
// providers: [
|
||||
// {
|
||||
// provide: PERFECT_SCROLLBAR_CONFIG,
|
||||
// useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
|
||||
// }
|
||||
// ]
|
||||
})
|
||||
export class CommonsModule { }
|
||||
|
|
|
|||
|
|
@ -52,7 +52,20 @@
|
|||
</li>
|
||||
|
||||
</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 header="Metadata" *ngIf="host.meta">
|
||||
|
|
|
|||
|
|
@ -17,124 +17,124 @@
|
|||
<p-tabView class="detail-content">
|
||||
|
||||
<p-tabPanel header="General">
|
||||
<perfect-scrollbar>
|
||||
<ul class="key-value">
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
<!-- -->
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</perfect-scrollbar>
|
||||
<!-- <perfect-scrollbar> -->
|
||||
<ul class="key-value">
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
<!-- -->
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- </perfect-scrollbar> -->
|
||||
</p-tabPanel>
|
||||
|
||||
<p-tabPanel header="Hosts">
|
||||
<perfect-scrollbar>
|
||||
<ul class="key-value">
|
||||
<li *ngFor="let host of zone.hostList | ipSort: 'address'">
|
||||
<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">
|
||||
({{host.name}})</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</perfect-scrollbar>
|
||||
<!-- <perfect-scrollbar> -->
|
||||
<ul class="key-value">
|
||||
<li *ngFor="let host of zone.hostList | ipSort: 'address'">
|
||||
<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">
|
||||
({{host.name}})</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- </perfect-scrollbar> -->
|
||||
</p-tabPanel>
|
||||
|
||||
</p-tabView>
|
||||
|
|
|
|||
19
yarn.lock
19
yarn.lock
|
|
@ -5264,13 +5264,6 @@ ngrx-store-freeze@^0.2.4:
|
|||
dependencies:
|
||||
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:
|
||||
version "1.0.5"
|
||||
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"
|
||||
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:
|
||||
version "2.1.0"
|
||||
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"
|
||||
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:
|
||||
version "2.0.0"
|
||||
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"
|
||||
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:
|
||||
version "6.3.2"
|
||||
resolved "https://nexus.loafle.net/repository/npm-all/rxjs/-/rxjs-6.3.2.tgz#6a688b16c4e6e980e62ea805ec30648e1c60907f"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user