This commit is contained in:
crusader 2018-09-19 17:13:55 +09:00
parent 59eeb06473
commit fda4b3c610
10 changed files with 305 additions and 274 deletions

View File

@ -4,7 +4,7 @@ import {
import {
DropdownPanelComponent,
PopupPanelComponent
PopupPanelComponent,
} from './primeng';
import {

View File

@ -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';

View File

@ -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"
},

View File

@ -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">

View File

@ -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%;
}

View File

@ -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 () {

View File

@ -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 { }

View File

@ -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">

View File

@ -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>

View File

@ -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"