This commit is contained in:
snoop 2018-04-19 17:55:19 +09:00
commit 3ab2dc5a99
17 changed files with 322 additions and 164 deletions

View File

@ -0,0 +1,7 @@
<div>
<span>{{key}}</span>
<a *ngIf="clickable" href="javascript:void(0)" (click)="onClick()">
<span>{{value}}</span>
</a>
<span *ngIf="!clickable">{{value}}</span>
</div>

View File

@ -0,0 +1,23 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'of-key-value',
templateUrl: './key-value.component.html'
})
export class KeyValueComponent implements OnInit {
@Input() key: string;
@Input() value: string;
@Input() clickable = false;
@Output() click = new EventEmitter<string>();
constructor(
) { }
ngOnInit() {
}
onClick() {
this.click.emit(this.value);
}
}

View File

@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { KeyValueComponent } from './key-value.component';
import { CommonModule } from '@angular/common';
import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
@NgModule({
imports: [
CommonModule,
PrimeNGModules
],
declarations: [
KeyValueComponent,
],
exports: [
KeyValueComponent,
]
})
export class KeyValueModule { }

View File

@ -5,17 +5,53 @@
</p-dialog>
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g">
<div class="ui-g-6 ui-g-nopad ui-bottom-space-10">
<div class="ui-g-12 ui-md-5 ui-g-nopad ui-bottom-space-10">
<button pButton type="button" class="ui-button-large ui-button-width-fit" icon="ui-icon-play-arrow" label="Discovery" (click)="showDialog()"></button>
</div>
<div class="ui-g-6 ui-g-nopad" dir="rtl">
<button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Expand all" style="margin-top: 16px;" (click)="expandAll()"></button>
<button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Collapse all" style="margin-top: 16px;" (click)="collapseAll()"></button>
<div class="ui-g-12 ui-md-7 ui-g-nopad">
<div style="float: right;">
<button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Expand all" style="margin-top: 16px;"
(click)="expandAll()"></button>
<button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Collapse all" style="margin-top: 16px;"
(click)="collapseAll()"></button>
</div>
<div style="float: right; margin: 30px 15px 0 0;">
<i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up
<i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Dwon
<i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn
<i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error
</div>
</div>
</div>
</div>
<div class="ui-g-12 ui-g-nopad">
<p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree" ></p-tree>
<p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree">
<ng-template let-node pTemplate="default">
<div>{{node.label}}</div>
</ng-template>
<ng-template let-node pTemplate="infra">
<div>{{node.label}}</div>
</ng-template>
<ng-template let-node pTemplate="probe">
<div>{{node.label}}</div>
</ng-template>
<ng-template let-node pTemplate="host">
<div>{{node.label}}</div>
</ng-template>
<ng-template let-node pTemplate="service">
<div>{{node.label}}</div>
</ng-template>
<ng-template let-node pTemplate="sensor">
<div><i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>{{node.label}}</div>
</ng-template>
</p-tree>
</div>
</div>

View File

@ -144,21 +144,18 @@ export class MapComponent implements OnInit, AfterContentInit {
// for (const itt of this.infraTree) {
// }
// }
for (const sensor of sensorList) {
const st = {
label: 'Sensors - ' + sensor.crawler.name,
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
type: 'sensor',
obj: sensor,
expanded: true
};
// FIXME:: target test id ....
const tt = this.targetTreeMap.get(3);
const tt = this.targetTreeMap.get(4);
// const tt = this.targetTreeMap.get(sensor.target.id);
if (tt !== undefined && tt !== null) {
tt.children.push(st);
@ -206,6 +203,7 @@ export class MapComponent implements OnInit, AfterContentInit {
const infraTree = {
label: 'Infra',
type: 'infra',
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
expanded: true,
@ -216,6 +214,7 @@ export class MapComponent implements OnInit, AfterContentInit {
const tp = {
label: 'Probe - ' + key,
type: 'probe',
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
expanded: this.DEFAULT_EXPANDED.valueOf(),
@ -228,6 +227,7 @@ export class MapComponent implements OnInit, AfterContentInit {
const th = {
label: 'Host - ' + ih.ip,
type: 'host',
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
expanded: this.DEFAULT_EXPANDED.valueOf(),
@ -246,6 +246,7 @@ export class MapComponent implements OnInit, AfterContentInit {
for (let i = 0 ; i < ifsl.length; ++i) {
const ts = {
label: 'Service - ' + ifsl[i].vendor.name,
type: 'service',
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
expanded: this.DEFAULT_EXPANDED.valueOf(),
@ -376,18 +377,21 @@ export class MapComponent implements OnInit, AfterContentInit {
const testInfraList = [
{
label: 'Infra',
type: 'infra',
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
expanded: true,
children: [
{
label: 'Zone - 192.168.1.0/24',
type: 'zone',
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
expanded: true,
children: [
{
label: 'Host - 192.168.1.106 - Snoop Host',
type: 'host',
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
expanded: true,

View File

@ -1,42 +1,50 @@
<form [formGroup]="modifyForm" (ngSubmit)="modifyProfile()">
<div class="ui-g">
<div class="ui-g-12 ui-md-3">
<p-panel [showHeader]="false">
<div>
<p-card>
<div class="ui-g">
<div class="ui-g-12 ui-inputgroup ui-bottom-space-10">
</div>
<div class="ui-g-12 ui-bottom-space-10">
<img class="profile-image" src="assets/layout/images/dark-user-bg.png" />
</div>
</div>
</p-panel>
<img class="profile-image ui-img-profile-responsive" src="assets/layout/images/dark-user-bg.png" />
</div>
</p-card>
</div>
</div>
<div class="ui-g-12 ui-md-9">
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-6 ui-lg-6">
<div class="ui-g-12 ui-md-6">
<span class="md-inputfield">
<input type="text" pInputText readonly value="overflow@loafle.com" [readonly]="true">
<input type="text" pInputText readonly value="{{member.email}}">
<label>Email</label>
</span>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-6">
<div class="ui-g-12 ui-md-6">
<span class="md-inputfield">
<input type="text" pInputText readonly value="overflow" >
<input type="text" pInputText value="{{member.name}}" >
<label>Name</label>
</span>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-6">
<div class="ui-g-12 ui-md-6">
<span class="md-inputfield">
<input type="text" pInputText readonly value="loafle" >
<input type="text" pInputText value="{{member.companyName}}" >
<label>Company Name</label>
</span>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-6">
<div class="ui-g-12 ui-md-6">
<span class="md-inputfield">
<input type="text" pInputText readonly value="010-4055-6699" >
<input type="text" pInputText value="{{member.phone}}" >
<label>Phone</label>
</span>
</div>
</div>
</div>
<div class="ui-g-12" dir="rtl">
<button type="submit" [disabled]="selected" class="ui-button ui-button-text-icon-left ui-button-width-fit">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
<span class="ui-button-text ui-c">Save</span>
</button>
</div>
</div>
</form>

View File

@ -1,4 +1,13 @@
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import { PagesComponent } from 'app/pages/pages.component';
import * as AuthStore from '../../store/auth';
import { Member } from '../../model';
import { AuthSelector } from '../../store';
import { Store } from '@ngrx/store';
import {FormBuilder, FormGroup} from '@angular/forms';
@Component({
selector: 'of-member-profile',
@ -7,9 +16,39 @@ import { Component, OnInit } from '@angular/core';
})
export class ProfileComponent implements OnInit {
constructor() { }
member: Member;
modifyForm: FormGroup;
constructor(
public app: PagesComponent,
private activatedRoute: ActivatedRoute,
private router: Router,
private store: Store<AuthStore.State>,
private formBuilder: FormBuilder,
) {
}
ngOnInit() {
this.store.select(AuthSelector.select('member')).subscribe(
(member: Member) => {
this.member = member;
},
(error) => {
console.log(error);
}
);
this.initForm();
}
initForm() {
this.modifyForm = this.formBuilder.group({
});
}
modifyProfile() {
console.log('clicked');
}
}

View File

@ -3,46 +3,33 @@
<of-discovery-setting (close)="onDiscoverycloseDialog()"></of-discovery-setting>
</p-dialog>
<div *ngIf="probe">
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.displayName}}">
<label>Alias</label>
</span>
<of-key-value [key]="'Alias'" [value]="probe.displayName"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.cidr}}">
<label>CIDR</label>
</span>
<of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.description}}">
<label>Description</label>
</span>
<of-key-value [key]="'Description'" [value]="probe.description"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.probeKey}}">
<label>Key</label>
</span>
<of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.authorizeDate | date: 'dd/MM/yyyy'}}">
<label>Authrozied at</label>
</span>
<of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.authorizeMember.name}}">
<label>Authrozied by</label>
</span>
<of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value>
</div>
</div>
<div class="ui-bottom-space-10" dir="rtl">
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton (click)="onRemoveClick()"></button>
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
(click)="onRemoveClick()"></button>
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
</div>
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>

View File

@ -19,8 +19,7 @@ export class DetailComponent implements OnInit, AfterContentInit {
probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
probe: Probe = null;
startIP: string;
endIP: string;
IPRange: string;
display = false;
constructor(
@ -56,13 +55,12 @@ export class DetailComponent implements OnInit, AfterContentInit {
arrangeInfo() {
const cidr = new CIDR(this.probe.cidr);
if (!cidr.isValid()) {
return;
}
this.startIP = cidr.addressStart.address;
this.endIP = cidr.addressEnd.address;
this.IPRange = cidr.addressStart.address + ' ~ ' + cidr.addressEnd.address;
}
onDiscoveryClick() {
// alert('Discovery를 열거라 대훈');
this.display = true;
}

View File

@ -6,9 +6,8 @@ import { ProbeStoreModule } from './probe-store.module';
import { SERVICES } from './service';
import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
import { FormsModule } from '@angular/forms';
// import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
// import { DiscoveryModule } from '../discovery/discovery.module';
import { DiscoveryModule } from 'packages/discovery/discovery.module';
import { KeyValueModule } from 'app/commons/component/key-value/key-value.module';
@NgModule({
imports: [
@ -16,7 +15,8 @@ import { DiscoveryModule } from 'packages/discovery/discovery.module';
PrimeNGModules,
ProbeStoreModule,
FormsModule,
DiscoveryModule
DiscoveryModule,
KeyValueModule
],
declarations: [
COMPONENTS,

View File

@ -1,4 +1,5 @@
<h1>Sensor Alias 출력</h1>
<div *ngIf="sensor">
<h1>{{sensor.crawler.name}}</h1>
<div *ngIf="sensor.status.name === 'RUNNING' ; else STOPPED">
<div class="ui-messages ui-widget ui-corner-all ui-messages-success" style="margin: 0 0 1em 0; display: block">
@ -30,36 +31,13 @@
<div class="ui-g">
<div class="ui-g-12 ui-md-3">
<div class="ui-g form-group">
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{sensor.id}}">
<label>ID</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{sensor.description}}">
<label>Description</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{sensor.crawler.name}}">
<label>Crawler Type</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{sensor.itemCount}}">
<label>Items</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{sensor.createDate | date: 'dd/MM/yyyy'}}">
<label>Created at</label>
</span>
</div>
<of-key-value [key]="'ID'" [value]="sensor.id"></of-key-value>
<of-key-value [key]="'Location'" [value]="sensor.target.displayName" [clickable]="true" (click)="onTargetClick($event)" ></of-key-value>
<of-key-value [key]="'Description'" [value]="sensor.description"></of-key-value>
<of-key-value [key]="'Crawler Type'" [value]="sensor.crawler.name"></of-key-value>
<of-key-value [key]="'Sensor Items'" [value]="sensor.itemCount"></of-key-value>
<of-key-value [key]="'Created at'" [value]="sensor.createDate | date: 'dd/MM/yyyy'"></of-key-value>
</div>
</div>
@ -68,5 +46,5 @@
<of-sensor-item-list></of-sensor-item-list>
</div>
</div>
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
</div>

View File

@ -61,5 +61,8 @@ export class DetailComponent implements OnInit, AfterContentInit {
}
});
}
onTargetClick(event) {
}
}

View File

@ -1,15 +1,14 @@
<h1>Sensors</h1>
<div class="ui-g">
<div class="ui-g-12 ui-md-3">
<div class="ui-bottom-space-10">
<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
<of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
</p-dialog>
<button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-width-fit" (click)="onAddSensor()"></button>
<button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large" (click)="onAddSensor()"></button>
</div>
<div class="ui-g">
<div class="ui-g-12 ui-md-3">
<p-panel [showHeader]="false">
<div class="ui-g">
<h3>Search</h3>
@ -44,13 +43,17 @@
</p-header> -->
<ng-template let-item pTemplate="item">
<div style="border-bottom: 1px solid #bdbdbd" class="clearfix car-item">
<div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{item.target.id}} - {{item.target.displayName}}</div>
<div class="car-details" style="display:inline-block;vertical-align:middle">
<div class="ui-g">
<div class="ui-g-12 ui-md-3 ui-lg-3" style="display:inline-block;margin: auto 0">{{item.target.id}} - {{item.target.displayName}}</div>
<div class="ui-g-10 ui-md-7 ui-lg-8 car-details" style="display:inline-block;margin: auto 0">
<div *ngFor="let sensor of item.sensors">
<a href="javascript:void(0)" (click)="onSensorClick(sensor)">{{sensor.crawler.name}} | {{sensor.itemCount}} items | {{sensor.status.name}}</a>
</div>
</div>
<button type="button" pButton icon="ui-icon-add" style="margin:24px 24px 0 0;float:right" (click)="onAddSensorWithTarget(item.target)"></button>
<div class="ui-g-2 ui-md-2 ui-lg-1">
<button type="button" pButton icon="ui-icon-add" style="margin:auto" (click)="onAddSensorWithTarget(item.target)"></button>
</div>
</div>
</div>
</ng-template>
</p-dataList>

View File

@ -11,6 +11,7 @@
<ng-template #info>
<div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
</ng-template>
<button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton (click)="testCredentials()"></button>
<div dir="rtl">
<button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton class="ui-button-width-fit" (click)="testCredentials()"></button>
</div>
</p-panel>

View File

@ -3,7 +3,7 @@
(onSelectionChange)="onSelectionChange($event)">
<ng-template let-crawler pTemplate="item">
<div class="ui-helper-clearfix">
<div style="font-size:14px;float:right;margin:0">{{crawler.name}}</div>
<div style="font-size:14px;margin:0">{{crawler.name}}</div>
</div>
</ng-template>
</p-orderList>

View File

@ -6,6 +6,7 @@ import { COMPONENTS } from './component';
import { SERVICES } from './service';
import { SensorStoreModule } from './sensor-store.module';
import { SensorItemModule } from '../sensor-item/sensor-item.module';
import { KeyValueModule } from 'app/commons/component/key-value/key-value.module';
// import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
// import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module';
// import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-input.module';
@ -16,9 +17,10 @@ import { SensorItemModule } from '../sensor-item/sensor-item.module';
FormsModule,
SensorStoreModule,
PrimeNGModules,
SensorItemModule
SensorItemModule,
// MetaCrawlerModule,
// MetaSensorDisplayItemModule,
KeyValueModule
],
declarations: [
COMPONENTS,

View File

@ -52,6 +52,14 @@
margin-top: 10px;
}
.ui-top-space--0-5em{
margin-top: -0.5em;
}
.ui-left-space-10{
margin-left: 10px;
}
.ui-float-right{
float:right;
}
@ -88,5 +96,48 @@
}
}
font-size: 0.8em !important;
}
.ui-status-icon{
//margin-top: 3px;
//position: static;
//display: inline-block;
vertical-align: middle;
&.ui-status-info {
color: #2196F3 !important;
}
&.ui-status-warn {
color: #ffc107 !important;
}
&.ui-status-error {
color: #e62a10 !important;
}
&.ui-status-fatal {
color: #212121 !important;
}
&.ui-status-success {
color: #8BC34A !important;
}
}
img.ui-img-profile-responsive {
width : 100%;
height: auto;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
}
}