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

View File

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

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

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

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"