diff --git a/package.json b/package.json index df3d17a..8ed4284 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@ngrx/router-store": "^5.2.0", "@ngrx/store": "^5.2.0", "@ngrx/store-devtools": "^5.2.0", - "angular-tree-component": "^7.0.1", + "angular-tree-component": "^7.0.2", "angularx-qrcode": "^1.0.1", "angular-l10n": "^4.1.5", "core-js": "^2.5.3", diff --git a/src/packages/meta/sensor-display-item/sensor-display-item-store.module.ts b/src/packages/meta/sensor-display-item/sensor-display-item-store.module.ts new file mode 100644 index 0000000..f9ea191 --- /dev/null +++ b/src/packages/meta/sensor-display-item/sensor-display-item-store.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { StoreModule } from '@ngrx/store'; +import { StoreDevtoolsModule } from '@ngrx/store-devtools'; +import { + StoreRouterConnectingModule, + RouterStateSerializer, +} from '@ngrx/router-store'; +import { EffectsModule } from '@ngrx/effects'; +import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store'; + +import { + REDUCERS, + EFFECTS, +} from './store'; + +import { MODULE } from './sensor-display-item.constant'; + +@NgModule({ + imports: [ + StoreModule.forFeature(MODULE.name, REDUCERS), + EffectsModule.forFeature(EFFECTS), + ], +}) +export class MetaSensorDisplayItemStoreModule { } diff --git a/src/packages/meta/sensor-display-item/sensor-display-item.constant.ts b/src/packages/meta/sensor-display-item/sensor-display-item.constant.ts new file mode 100644 index 0000000..d49d9cb --- /dev/null +++ b/src/packages/meta/sensor-display-item/sensor-display-item.constant.ts @@ -0,0 +1,3 @@ +export const MODULE = { + name: 'metaSensorDisplayItem' +}; diff --git a/src/packages/meta/sensor-display-item/sensor-display-item.module.ts b/src/packages/meta/sensor-display-item/sensor-display-item.module.ts new file mode 100644 index 0000000..58b9f07 --- /dev/null +++ b/src/packages/meta/sensor-display-item/sensor-display-item.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { } from './crawler.module'; + +import { MaterialModule } from 'packages/commons/material/material.module'; +import { SERVICES } from './service'; +import { MetaSensorDisplayItemStoreModule } from './sensor-display-item-store.module'; + +@NgModule({ + imports: [ + CommonModule, + MetaSensorDisplayItemStoreModule + ], + declarations: [ + ], + exports: [ + ], + providers: [ + SERVICES, + ] +}) +export class MetaSensorDisplayItemModule { } diff --git a/src/packages/meta/sensor-display-item/service/index.ts b/src/packages/meta/sensor-display-item/service/index.ts new file mode 100644 index 0000000..db97bf7 --- /dev/null +++ b/src/packages/meta/sensor-display-item/service/index.ts @@ -0,0 +1,5 @@ +import { MetaSensorDisplayItemService } from './sensor-display-item.service'; + +export const SERVICES = [ + MetaSensorDisplayItemService, +]; diff --git a/src/packages/meta/sensor-display-item/service/sensor-display-item.service.ts b/src/packages/meta/sensor-display-item/service/sensor-display-item.service.ts new file mode 100644 index 0000000..98e211f --- /dev/null +++ b/src/packages/meta/sensor-display-item/service/sensor-display-item.service.ts @@ -0,0 +1,23 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; + +import 'rxjs/add/operator/map'; + +import { RPCClient } from 'packages/core/rpc/client/RPCClient'; +import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler'; +import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem'; + + +@Injectable() +export class MetaSensorDisplayItemService { + + public constructor( + private rpcClient: RPCClient, + ) { + + } + + public readAllByMetaCrawler(c: MetaCrawler): Observable { + return this.rpcClient.call('MetaSensorDisplayItemService.readAllByCrawler', c); + } +} diff --git a/src/packages/meta/sensor-display-item/store/index.ts b/src/packages/meta/sensor-display-item/store/index.ts new file mode 100644 index 0000000..f8d6dac --- /dev/null +++ b/src/packages/meta/sensor-display-item/store/index.ts @@ -0,0 +1,30 @@ +import { + createSelector, + createFeatureSelector, + ActionReducerMap, +} from '@ngrx/store'; + +import { StateSelector } from 'packages/core/ngrx/store'; + + +import * as ListStore from './list'; +import { MODULE } from '../sensor-display-item.constant'; + +export interface State { + list: ListStore.State; +} + +export const REDUCERS = { + list: ListStore.reducer, +}; + +export const EFFECTS = [ + ListStore.Effects, +]; + +export const selectState = createFeatureSelector(MODULE.name); + +export const ReadAllSensorDisplayItemByCrawlerSelector = new StateSelector(createSelector( + selectState, + (state: State) => state.list +)); diff --git a/src/packages/meta/sensor-display-item/store/list/index.ts b/src/packages/meta/sensor-display-item/store/list/index.ts new file mode 100644 index 0000000..7fd86e0 --- /dev/null +++ b/src/packages/meta/sensor-display-item/store/list/index.ts @@ -0,0 +1,4 @@ +export * from './list.action'; +export * from './list.effect'; +export * from './list.reducer'; +export * from './list.state'; diff --git a/src/packages/meta/sensor-display-item/store/list/list.action.ts b/src/packages/meta/sensor-display-item/store/list/list.action.ts new file mode 100644 index 0000000..f7063bc --- /dev/null +++ b/src/packages/meta/sensor-display-item/store/list/list.action.ts @@ -0,0 +1,37 @@ +import { Action } from '@ngrx/store'; + +import { RPCError } from 'packages/core/rpc/error'; +import { MetaCrawler } from '../../../crawler/model/MetaCrawler'; +import { MetaSensorDisplayItem } from '../../model/MetaSensorDisplayItem'; + + +export enum ActionType { + ReadAllByCrawler = '[meta.sensor-display-item] ReadAllByCrawler', + ReadAllByCrawlerSuccess = '[meta.sensor-display-item] ReadAllByCrawlerSuccess', + ReadAllByCrawlerFailure = '[meta.sensor-display-item] ReadAllByCrawlerFailure', +} + +export class ReadAllByCrawler implements Action { + readonly type = ActionType.ReadAllByCrawler; + + constructor(public payload: MetaCrawler) {} +} + +export class ReadAllByCrawlerSuccess implements Action { + readonly type = ActionType.ReadAllByCrawlerSuccess; + + constructor(public payload: MetaSensorDisplayItem[]) {} +} + +export class ReadAllByCrawlerFailure implements Action { + readonly type = ActionType.ReadAllByCrawlerFailure; + + constructor(public payload: RPCError) {} +} + +export type Actions = + | ReadAllByCrawler + | ReadAllByCrawlerSuccess + | ReadAllByCrawlerFailure + +; diff --git a/src/packages/meta/sensor-display-item/store/list/list.effect.spec.ts b/src/packages/meta/sensor-display-item/store/list/list.effect.spec.ts new file mode 100644 index 0000000..d8f6227 --- /dev/null +++ b/src/packages/meta/sensor-display-item/store/list/list.effect.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { Effects } from './list.effect'; + +describe('List.Effects', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [Effects] + }); + }); + + it('should be created', inject([Effects], (effects: Effects) => { + expect(effects).toBeTruthy(); + })); +}); diff --git a/src/packages/meta/sensor-display-item/store/list/list.effect.ts b/src/packages/meta/sensor-display-item/store/list/list.effect.ts new file mode 100644 index 0000000..a2c3ed2 --- /dev/null +++ b/src/packages/meta/sensor-display-item/store/list/list.effect.ts @@ -0,0 +1,52 @@ +import { Injectable } from '@angular/core'; +import { Router } from '@angular/router'; + +import { Effect, Actions, ofType } from '@ngrx/effects'; +import { Action } from '@ngrx/store'; + +import { Observable } from 'rxjs/Observable'; +import { of } from 'rxjs/observable/of'; + +import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/exhaustMap'; +import 'rxjs/add/operator/switchMap'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/take'; + +import { RPCError } from 'packages/core/rpc/error'; + +import { DomainMember } from 'packages/domain/model'; + + +import { + ReadAllByCrawler, + ReadAllByCrawlerSuccess, + ReadAllByCrawlerFailure, + ActionType, +} from './list.action'; +import { MetaSensorDisplayItem } from '../../model/MetaSensorDisplayItem'; +import { MetaSensorDisplayItemService } from '../../service/sensor-display-item.service'; + +@Injectable() +export class Effects { + + constructor( + private actions$: Actions, + private service: MetaSensorDisplayItemService, + private router: Router + ) { } + + @Effect() + readAllByCrawler$: Observable = this.actions$ + .ofType(ActionType.ReadAllByCrawler) + .map((action: ReadAllByCrawler) => action.payload) + .switchMap(payload => this.service.readAllByMetaCrawler(payload)) + .map(list => { + return new ReadAllByCrawlerSuccess(list); + }) + .catch((error: RPCError) => { + return of(new ReadAllByCrawlerFailure(error)); + }); + +} diff --git a/src/packages/meta/sensor-display-item/store/list/list.reducer.ts b/src/packages/meta/sensor-display-item/store/list/list.reducer.ts new file mode 100644 index 0000000..31c0616 --- /dev/null +++ b/src/packages/meta/sensor-display-item/store/list/list.reducer.ts @@ -0,0 +1,43 @@ +import { + Actions, + ActionType, +} from './list.action'; + +import { + State, + initialState, +} from './list.state'; + +export function reducer(state = initialState, action: Actions): State { + switch (action.type) { + case ActionType.ReadAllByCrawler: { + return { + ...state, + error: null, + pending: true, + }; + } + + case ActionType.ReadAllByCrawlerSuccess: { + return { + ...state, + error: null, + pending: false, + list: action.payload + }; + } + + case ActionType.ReadAllByCrawlerFailure: { + return { + ...state, + error: action.payload, + pending: false, + list: null, + }; + } + + default: { + return state; + } + } +} diff --git a/src/packages/meta/sensor-display-item/store/list/list.state.ts b/src/packages/meta/sensor-display-item/store/list/list.state.ts new file mode 100644 index 0000000..6f19c58 --- /dev/null +++ b/src/packages/meta/sensor-display-item/store/list/list.state.ts @@ -0,0 +1,15 @@ +import { RPCError } from 'packages/core/rpc/error'; +import { MetaSensorDisplayItem } from '../../model/MetaSensorDisplayItem'; + + +export interface State { + error: RPCError | null; + pending: boolean; + list: MetaSensorDisplayItem[] | null; +} + +export const initialState: State = { + error: null, + pending: false, + list: null, +}; diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts index a74e416..0c7c858 100644 --- a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts +++ b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts @@ -29,8 +29,11 @@ export class CrawlerAuthComponent implements OnInit, OnChanges { this.inputItems$.subscribe( (list: MetaCrawlerInputItem[]) => { if (list !== null) { - this.inputItems = list; + console.log('###Auth Inputs###'); console.log(list); + console.log('###################'); + this.inputItems = list; + this.generateAuthComponent(); } }, (error: RPCError) => { @@ -49,5 +52,7 @@ export class CrawlerAuthComponent implements OnInit, OnChanges { } generateAuthComponent() { + this.inputItems.map(function(v, i) { + }); } } diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html index fbfe631..48fbdc0 100644 --- a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html +++ b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html @@ -8,17 +8,17 @@ - +
- - + +
- {{ node.data.title }} + (click)="checkItem(node)"> + {{ node.data.title }} {{node.data.key}}
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts index fcaf066..fb3cb20 100644 --- a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts +++ b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts @@ -1,127 +1,110 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnChanges, Input, Output, EventEmitter, ViewChild, AfterViewInit } from '@angular/core'; import { Router } from '@angular/router'; +import { Store, select } from '@ngrx/store'; +import { RPCError } from 'packages/core/rpc/error'; +import * as ListStore from 'packages/meta/sensor-display-item/store/list'; +import { ReadAllSensorDisplayItemByCrawlerSelector } from 'packages/meta/sensor-display-item/store'; +import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem'; +import { MetaCrawler } from '../../../../meta/crawler/model/MetaCrawler'; +import { ITreeOptions } from 'angular-tree-component'; @Component({ selector: 'of-sensor-item-selector', templateUrl: './sensor-item-selector.component.html', styleUrls: ['./sensor-item-selector.component.scss'] }) -export class SensorItemSelectorComponent implements OnInit { +export class SensorItemSelectorComponent implements OnInit, AfterViewInit, OnChanges { - nodes = [ - { - title: 'host - 3232235781', - className: 'className3232235781', - children: [ - { - title: 'Port - 22', - className: 'className22', - children: [ - { - title: 'SSH', - className: 'classNameSSH' - } - ] - }, - { - title: 'Port - 80', - className: 'className80', - children: [ - { - title: 'HTTP', - className: 'classNameHTTP' - } - ] - }, - { - title: 'Port - 1936', - className: 'className1936', - children: [ - { - title: 'HTTP', - className: 'classNameHTTP' - } - ] - } - ] - }, - { - title: 'host - 3232235781', - className: 'className3232235781', - children: [ - { - title: 'Port - 22', - className: 'className22', - children: [ - { - title: 'SSH', - className: 'classNameSSH' - } - ] - }, - { - title: 'Port - 80', - className: 'className80', - children: [ - { - title: 'HTTP', - className: 'classNameHTTP' - } - ] - }, - { - title: 'Port - 1936', - className: 'className1936', - children: [ - { - title: 'HTTP', - className: 'classNameHTTP' - } - ] - } - ] - }, - { - title: 'host - 3232235781', - className: 'className3232235781', - children: [ - { - title: 'Port - 22', - className: 'className22', - children: [ - { - title: 'SSH', - className: 'classNameSSH' - } - ] - }, - { - title: 'Port - 80', - className: 'className80', - children: [ - { - title: 'HTTP', - className: 'classNameHTTP' - } - ] - }, - { - title: 'Port - 1936', - className: 'className1936', - children: [ - { - title: 'HTTP', - className: 'classNameHTTP' - } - ] - } - ] - } - ]; + @Input() selectedCrawler: MetaCrawler; + @Output() selectedItems = new EventEmitter(); + items$ = this.listStore.pipe(select(ReadAllSensorDisplayItemByCrawlerSelector.select('list'))); + sensorDisplayItems: MetaSensorDisplayItem[]; + @ViewChild('tree') tree; + nodes; - constructor(private router: Router) { } + constructor( + private router: Router, + private listStore: Store, + ) { } ngOnInit() { + this.items$.subscribe( + (list: MetaSensorDisplayItem[]) => { + if (list !== null) { + console.log('###Display Items###'); + console.log(list); + console.log('###################'); + this.sensorDisplayItems = list; + this.generateTreeNode(list); + } + }, + (error: RPCError) => { + console.log(error.response.message); + } + ); + } + + ngAfterViewInit() { + } + + ngOnChanges() { + this.listStore.dispatch(new ListStore.ReadAllByCrawler(this.selectedCrawler)); + } + + generateTreeNode(list: MetaSensorDisplayItem[]) { + this.nodes = new Array(); + for (const item of list) { + const categoryNode = this.existCategory(item); + if (categoryNode === null) { + const childrenNode = new Array(); + childrenNode.push(this.getChildNode(item)); + const node = { + title: item.itemType.name, + children: childrenNode, + isExpanded: true + }; + this.nodes.push(node); + } else { + categoryNode.children.push(this.getChildNode(item)); + } + } + } + + getChildNode(item) { + const childNode = { + title: item.displayName, + key: ' - ' + item.key, + default: item.default + }; + return childNode; + } + + existCategory(item: MetaSensorDisplayItem) { + let categoryNode = null; + for (const node of this.nodes) { + if (node.title === item.itemType.name) { + categoryNode = node; + } + } + return categoryNode; + } + + checkItem(node) { + node.toggleActivated(true); + console.log(node); + // if (node.isActive) { + // if (this.checkedSet.has(node.data) === false) { + // this.checkedSet.add(node.data); + // } + // } else { + // if (this.checkedSet.has(node.data)) { + // this.checkedSet.delete(node.data); + // } + // } + } + + onTreeDataLoad(tree) { + tree.treeModel.expandAll(); } } diff --git a/src/packages/sensor/component/setting/setting.component.html b/src/packages/sensor/component/setting/setting.component.html index 8d3c6ff..4bfbe80 100644 --- a/src/packages/sensor/component/setting/setting.component.html +++ b/src/packages/sensor/component/setting/setting.component.html @@ -11,7 +11,7 @@ - + diff --git a/src/packages/sensor/sensor.module.ts b/src/packages/sensor/sensor.module.ts index 2d08bd7..adca861 100644 --- a/src/packages/sensor/sensor.module.ts +++ b/src/packages/sensor/sensor.module.ts @@ -12,6 +12,7 @@ import { TreeModule } from 'angular-tree-component'; import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; import { MetaCrawlerModule } from '../meta/crawler/crawler.module'; import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-input.module'; +import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module'; @NgModule({ imports: [ @@ -22,7 +23,8 @@ import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-i TreeModule, PerfectScrollbarModule, MetaCrawlerModule, - MetaCrawlerInputItemModule + MetaCrawlerInputItemModule, + MetaSensorDisplayItemModule ], declarations: [ COMPONENTS, diff --git a/yarn.lock b/yarn.lock index 321c918..c24076e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -559,13 +559,13 @@ angular-l10n@^4.1.5: dependencies: tslib "^1.7.1" -angular-tree-component@^7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/angular-tree-component/-/angular-tree-component-7.0.1.tgz#fc8d0e72d8c34b87131a3ba2bd32ad20945689ac" +angular-tree-component@^7.0.2: + version "7.0.2" + resolved "https://registry.yarnpkg.com/angular-tree-component/-/angular-tree-component-7.0.2.tgz#a70c2ed62b0bf5f14d20ada1e68fbc3649bdf783" dependencies: - lodash "4.17.4" - mobx ">=3" - mobx-angular ">=1" + lodash "^4.17.4" + mobx "^3.6.2" + mobx-angular "^2.1.1" angularx-qrcode@^1.0.1: version "1.0.1" @@ -1425,12 +1425,6 @@ chownr@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181" -cidr-range@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/cidr-range/-/cidr-range-1.0.6.tgz#8ce6a648dca7eceb34e82013c22479f843f1c452" - dependencies: - ip "^1.1.3" - cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3: version "1.0.4" resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de" @@ -3530,7 +3524,7 @@ ip@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/ip/-/ip-1.0.1.tgz#c7e356cdea225ae71b36d70f2e71a92ba4e42590" -ip@^1.1.0, ip@^1.1.2, ip@^1.1.3, ip@^1.1.5: +ip@^1.1.0, ip@^1.1.2, ip@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a" @@ -4292,7 +4286,7 @@ lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" -lodash@4.17.4, lodash@^4.0.0, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@~4.17.4: +lodash@^4.0.0, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@~4.17.4: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -4595,13 +4589,13 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd dependencies: minimist "0.0.8" -mobx-angular@>=1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/mobx-angular/-/mobx-angular-3.0.1.tgz#881379acea563c0767550d1f7801ab3434449bb1" +mobx-angular@^2.1.1: + version "2.2.0" + resolved "https://registry.yarnpkg.com/mobx-angular/-/mobx-angular-2.2.0.tgz#f9612160eb585ef3343dfdb476185dbb7b49e1ef" -mobx@>=3: - version "4.0.1" - resolved "https://registry.yarnpkg.com/mobx/-/mobx-4.0.1.tgz#321945580f7d3bf7b1f60ddaa1d623835683b5a2" +mobx@^3.6.2: + version "3.6.2" + resolved "https://registry.yarnpkg.com/mobx/-/mobx-3.6.2.tgz#fb9f5ff5090539a1ad54e75dc4c098b602693320" module-deps@^4.0.8: version "4.1.1"