ing
This commit is contained in:
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"
|
||||
},
|
||||
|
|
|
@ -1,3 +1,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">
|
||||
|
@ -78,16 +79,21 @@
|
|||
<div>Elapsed: </div>{{resultMsg[2]}}
|
||||
</div>
|
||||
</p-card>
|
||||
</div>
|
||||
|
||||
<p-confirmDialog></p-confirmDialog>
|
||||
<div #detailSidebar style="position: relative; top: 0; left: 0; height: 100%;"></div>
|
||||
|
||||
<p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right" (onHide)="onHideDetail()">
|
||||
<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>
|
||||
|
||||
|
||||
<!-- <div class="ui-fluid">
|
||||
<div class="ui-g">
|
||||
|
|
|
@ -13,9 +13,9 @@
|
|||
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;
|
||||
|
@ -23,6 +23,7 @@
|
|||
color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
|
||||
.start-button {
|
||||
width: 200px;
|
||||
height: 210px;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -125,8 +124,15 @@
|
|||
border-bottom: 1px solid #d6d6d6;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .ui-card-body {
|
||||
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,6 +361,21 @@ 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;
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
__this.selectedNode = node;
|
||||
|
||||
nodeElements.each(function () {
|
||||
const _thisElement = this as Element;
|
||||
|
@ -385,28 +399,28 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
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,7 +17,7 @@
|
|||
<p-tabView class="detail-content">
|
||||
|
||||
<p-tabPanel header="General">
|
||||
<perfect-scrollbar>
|
||||
<!-- <perfect-scrollbar> -->
|
||||
<ul class="key-value">
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
|
@ -121,11 +121,11 @@
|
|||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</perfect-scrollbar>
|
||||
<!-- </perfect-scrollbar> -->
|
||||
</p-tabPanel>
|
||||
|
||||
<p-tabPanel header="Hosts">
|
||||
<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">
|
||||
|
@ -134,7 +134,7 @@
|
|||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</perfect-scrollbar>
|
||||
<!-- </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