overflow_backup_2018_0455/overflow-webapp
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sensor item tree

Browse Source
This commit is contained in:
insanity 2018-03-21 16:56:43 +09:00
parent 634aa17885
commit 0b667270ec
19 changed files with 400 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

24
src/packages/meta/sensor-display-item/sensor-display-item-store.module.ts Normal file
View File

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

3
src/packages/meta/sensor-display-item/sensor-display-item.constant.ts Normal file
View File

@ -0,0 +1,3 @@
export const MODULE = {
name: 'metaSensorDisplayItem'
};

23
src/packages/meta/sensor-display-item/sensor-display-item.module.ts Normal file
View File

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

5
src/packages/meta/sensor-display-item/service/index.ts Normal file
View File

@ -0,0 +1,5 @@
import { MetaSensorDisplayItemService } from './sensor-display-item.service';
export const SERVICES = [
MetaSensorDisplayItemService,
];

23
src/packages/meta/sensor-display-item/service/sensor-display-item.service.ts Normal file
View File

@ -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<MetaSensorDisplayItem[]> {
return this.rpcClient.call('MetaSensorDisplayItemService.readAllByCrawler', c);
}
}

30
src/packages/meta/sensor-display-item/store/index.ts Normal file
View File

@ -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<State>(MODULE.name);
export const ReadAllSensorDisplayItemByCrawlerSelector = new StateSelector<ListStore.State>(createSelector(
selectState,
(state: State) => state.list
));

4
src/packages/meta/sensor-display-item/store/list/index.ts Normal file
View File

@ -0,0 +1,4 @@
export * from './list.action';
export * from './list.effect';
export * from './list.reducer';
export * from './list.state';

37
src/packages/meta/sensor-display-item/store/list/list.action.ts Normal file
View File

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

15
src/packages/meta/sensor-display-item/store/list/list.effect.spec.ts Normal file
View File

@ -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();
}));
});

52
src/packages/meta/sensor-display-item/store/list/list.effect.ts Normal file
View File

@ -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<Action> = 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));
});
}

43
src/packages/meta/sensor-display-item/store/list/list.reducer.ts Normal file
View File

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

15
src/packages/meta/sensor-display-item/store/list/list.state.ts Normal file
View File

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

7
src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts
View File

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

10
src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html
View File

@ -8,17 +8,17 @@
<mat-card-content>
<perfect-scrollbar style="height: 150px">
<tree-root id="tree2" [focused]="true" [nodes]="nodes">
<tree-root #tree [focused]="true" [nodes]="nodes" (updateData)="onTreeDataLoad($event)">
<ng-template #treeNodeFullTemplate let-node let-index="index" let-templates="templates">
<div class="tree-node">
<mat-checkbox [checked]="node.isActive" (change)="checkDiscoveryResult(node)"></mat-checkbox>
<tree-node-expander [node]="node"></tree-node-expander>
<tree-node-expander [node]="node" ></tree-node-expander>
<mat-checkbox [checked]="node.data.default" (change)="checkItem(node)"></mat-checkbox>
<div
class="node-content-wrapper"
[class.node-content-wrapper-active]="node.isActive"
[class.node-content-wrapper-focused]="node.isFocused"
(click)="checkDiscoveryResult(node)">
<span [class]="node.data.className" [class.title]="true">{{ node.data.title }}</span>
(click)="checkItem(node)">
<span [class]="node.data.className" [class.title]="true">{{ node.data.title }} {{node.data.key}}</span>
</div>
<tree-node-children [node]="node" [templates]="templates"></tree-node-children>

209
src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts
View File

@ -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<MetaSensorDisplayItem[]>();
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<ListStore.State>,
) { }
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();
}
}

2
src/packages/sensor/component/setting/setting.component.html
View File

@ -11,7 +11,7 @@
</mat-grid-tile>
<mat-grid-tile [colspan]="1" [rowspan]="3" style="background-color: lightgrey">
<of-sensor-item-selector></of-sensor-item-selector>
<of-sensor-item-selector [selectedCrawler]="selectedCrawler" (itemSelectEvent)="handleItemSelection($event)"></of-sensor-item-selector>
</mat-grid-tile>
<mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightpink">

4
src/packages/sensor/sensor.module.ts
View File

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

34
yarn.lock
View File

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