ing

@overflow/sensor/component/list/filter/filter.component.html

@@ -0,0 +1,30 @@
+<div>
+  <mat-form-field >
+    <input matInput placeholder='IP or Application Name' value=''>
+  </mat-form-field>
+</div>
+<div [style.margin]="'30px 0px'">
+  <mat-form-field>
+    <mat-select placeholder="Crawler">
+      <mat-option *ngFor="let crawler of crawlers" value="crawler.value">
+        {{ crawler.name }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>
+<div [style.margin]="'30px 0px'">
+  <div>Status</div>
+  <mat-radio-group class="radio-group">
+    <mat-radio-button class="radio-button" value="0" [checked]="true">All</mat-radio-button>
+    <mat-radio-button class="radio-button" value="1">Active</mat-radio-button>
+    <mat-radio-button class="radio-button" value="2">Inactive</mat-radio-button>
+  </mat-radio-group>
+</div>
+<div [style.margin]="'30px 0px'">
+  <div>Type</div>
+  <mat-radio-group class="radio-group">
+    <mat-radio-button class="radio-button" value="0" [checked]="true">All</mat-radio-button>
+    <mat-radio-button class="radio-button" value="1">Host</mat-radio-button>
+    <mat-radio-button class="radio-button" value="2">Application</mat-radio-button>
+  </mat-radio-group>
+</div>

@overflow/sensor/component/list/filter/filter.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterComponent } from './filter.component';
+
+describe('FilterComponent', () => {
+  let component: FilterComponent;
+  let fixture: ComponentFixture<FilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

@overflow/sensor/component/list/filter/filter.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-target-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss']
+})
+export class FilterComponent implements OnInit {
+
+  crawlers = [
+    {value: 'ALL', name: 'All'},
+    {value: 'WMI', name: 'WMI'},
+    {value: 'SSH', name: 'SSH'},
+    {value: 'MySQL', name: 'MySQL'},
+    {value: 'Redis', name: 'Redis'},
+  ];
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}

@overflow/sensor/component/list/list.component.html

@@ -0,0 +1,120 @@
+<h1>Sensors</h1>
+
+<div class="ui-g">
+        <div class="ui-g-12">
+            <p-panel [showHeader]="false" *ngIf="paramTarget">
+                <div class="ui-key-value">
+                    <span>Status</span>
+                    <span class="ng-star-inserted"><i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span>
+                </div>
+                <of-key-value [key]="'Alias'" [value]="paramTarget.target.displayName" class="ui-key-value"></of-key-value>
+                <of-key-value [key]="'Description'" [value]="paramTarget.target.description" class="ui-key-value"></of-key-value>
+                <of-key-value [key]="'Type'" [value]="paramTarget.infraType.name" class="ui-key-value"></of-key-value>
+                <of-key-value [key]="'Created at'" [value]="paramTarget.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value>
+                <of-key-value [key]="'Sensors'" [value]="'todo: count'" class="ui-key-value"></of-key-value>
+            </p-panel>
+        </div>
+    </div>
+
+<div class="ui-g">
+    <div class="ui-g-12">
+        <div class="ui-g">
+            <div class="ui-g-12 ui-md-5 ui-g-nopad">
+                <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-large ui-button-width-fit" (click)="onAddSensor()"></button>
+            </div>
+            <div class="ui-g-12 ui-md-7 ui-g-nopad">
+                <div style="float: right; margin-top: 30px;">
+                    <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>Down
+                    <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-md-3">
+        <p-panel [showHeader]="false">
+            <div class="ui-g">
+                <h3>Search</h3>
+                <div class="ui-g-12 ui-inputgroup ui-bottom-space-10">
+                    <span class="md-inputfield">
+                        <input type="text" pInputText [(ngModel)]="filteredName">
+                        <label>IP or Application name</label>
+                    </span>
+                </div>
+
+                <div class="ui-g-12 ui-bottom-space-10">
+                    <p-multiSelect [options]="targetOptions" [(ngModel)]="selectedTargets"></p-multiSelect>
+                    <!-- <p-multiSelect [options]="targetOptions" (onChange)="onTargetFilterSelect($event)"></p-multiSelect> -->
+                </div>
+
+
+                <div class="ui-g-6">
+                    <p-checkbox name="cg" value="Active" label="Active" [(ngModel)]="selectedStatus"></p-checkbox>
+                </div>
+                <div class="ui-g-6">
+                    <p-checkbox name="cg" value="Inactive" label="Inactive" [(ngModel)]="selectedStatus"></p-checkbox>
+                </div>
+                <button pButton type="button" label="Search" class="ui-button-secondary ui-top-space-10" (click)="onSearch()"></button>
+            </div>
+        </p-panel>
+    </div>
+
+    <div class="ui-g-12 ui-md-9">
+        <p-dataList [value]="targetSensor" [paginator]="true" styleClass="ui-sensors-datalist" [rows]="10">
+            <!-- <p-header>
+                List of Cars
+            </p-header> -->
+            <ng-template let-item pTemplate="item">
+                <div class="clearfix ui-sensors ui-bottom-border-1">
+                    <div class="ui-g-12 ui-md-3 ui-lg-3 ui-sensor">
+                        <i class="fa ui-icon-devices ui-icon-lg"></i><br>
+                        {{item.target.id}} - {{item.target.displayName}}
+                    </div>
+                    <div class="ui-g-12 ui-md-9 ui-lg-9 ui-sensors-details">
+                        <div class="ui-g">
+                            <div class="ui-g-10">
+                                <div *ngFor="let sensor of item.sensors" class="ui-g-12">
+                                    <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>
+                                    <a href="javascript:void(0)" (click)="onSensorClick(sensor)">{{sensor.crawler.name}} | {{sensor.itemCount}} items | {{sensor.status.name}}</a>
+                                </div>
+                            </div>
+                            <div class="ui-g-2" style="text-align: center !important">
+                                <div style="width:14px; height:14px; margin: auto;">
+                                <button type="button" pButton icon="ui-icon-add" (click)="onAddSensorWithTarget(item.target)"></button>
+                            </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+        </p-dataList>
+
+        <!-- <p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+            <ng-template pTemplate="header">
+                <tr>
+                    <th>No.</th>
+                    <th>Description</th>
+                    <th>Status</th>
+                    <th>Crawler</th>
+                    <th>Items</th>
+                    <th>Created at</th>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="body" let-sensor let-rowIndex="rowIndex">
+                <tr [pSelectableRow]="sensor">
+                    <td>{{rowIndex + 1}}</td>
+                    <td>{{sensor.Description}}</td>
+                    <td>{{sensor.status.name}}</td>
+                    <td>{{sensor.crawler.name}}</td>
+                    <td>???</td>
+                    <td>{{sensor.createDate | date: 'dd.MM.yyyy'}}</td>
+                </tr>
+            </ng-template>
+        </p-table> -->
+    </div>
+</div>

@overflow/sensor/component/list/list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

@overflow/sensor/component/list/list.component.ts

@@ -0,0 +1,163 @@
+import { Component, OnInit, AfterViewInit, ViewChild, AfterContentInit, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Sensor } from '@overflow/commons-typescript/model/sensor';
+import { Store, select } from '@ngrx/store';
+import * as SensorStore from '../../store';
+import { RPCClientError } from '@loafer/ng-rpc';
+import * as ListStore from '../../store/list';
+import { sensorListSelector } from '../../store';
+import { Domain } from '@overflow/commons-typescript/model/domain';
+import { AuthSelector } from '@overflow/member/store';
+// import { Page, PageParams } from 'app/commons/model';
+import { Target } from '@overflow/commons-typescript/model/target';
+import { SettingComponent } from '../setting/setting.component';
+import { SelectItem } from 'primeng/primeng';
+
+import { Infra } from '@overflow/commons-typescript/model/infra';
+import * as InfraDetailStore from '@overflow/infra/store/detail';
+import { DetailSelector as InfraDetailSelector } from '@overflow/infra/store';
+import { Subscription } from 'rxjs/Subscription';
+
+
+@Component({
+  selector: 'of-sensor-list',
+  templateUrl: './list.component.html',
+})
+export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
+
+  sensorsSubscription$: Subscription;
+  sensorList$ = this.store.pipe(select(sensorListSelector.select('page')));
+  PAGE_SIZE = '99999';
+  totalLength = 0;
+  sensorSettingDisplay = false;
+
+  sensors: Sensor[];
+  target: Target = null;
+  targetSensor;
+
+  // filter
+  targetOptions: SelectItem[];
+  filteredName: string;
+  selectedTargets: string[] = [];
+  selectedStatus: string[] = [];
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private store: Store<ListStore.State>,
+  ) { }
+
+  ngOnInit() {
+
+    // this.sensorsSubscription$ = this.sensorList$.subscribe(
+    //   (page: Page) => {
+    //     if (page != null) {
+    //       this.sensors = page.content;
+    //       this.generateSensorMap();
+    //     }
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
+  }
+
+  ngAfterContentInit() {
+    this.getSensors(0);
+  }
+
+  ngOnDestroy() {
+    if (this.sensorsSubscription$) {
+      this.sensorsSubscription$.unsubscribe();
+    }
+  }
+
+
+  getSensors(pageIndex: number) {
+    // this.store.select(AuthSelector.select('domain')).subscribe(
+    //   (domain: Domain) => {
+    //     const pageParams: PageParams = {
+    //       pageNo: pageIndex + '',
+    //       countPerPage: this.PAGE_SIZE,
+    //       sortCol: 'id',
+    //       sortDirection: 'descending'
+    //     };
+    //     this.store.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
+  }
+
+  generateSensorMap() {
+    const tempList = [];
+    for (const sensor of this.sensors) {
+      const targetNode = this.existTarget(sensor, tempList);
+      if (targetNode === null) {
+        const sensorsNode = [];
+        sensorsNode.push(sensor);
+        const node = {
+          target: sensor.target,
+          sensors: sensorsNode,
+        };
+
+        tempList.push(node);
+      } else {
+        targetNode.sensors.push(sensor);
+      }
+    }
+    this.totalLength = tempList.length;
+    this.targetSensor = tempList;
+
+    this.generateTargetFilter();
+  }
+
+
+  generateTargetFilter() {
+    if (this.targetOptions) {
+      return;
+    }
+    const tempList = [];
+    for (const data of this.targetSensor) {
+      tempList.push({ label: data.target.displayName, value: data.target.id });
+    }
+    this.targetOptions = tempList;
+  }
+
+  existTarget(sensor: Sensor, tempList) {
+    let targetNode = null;
+    for (const node of tempList) {
+      if (node.target.id === sensor.target.id) {
+        targetNode = node;
+      }
+    }
+    return targetNode;
+  }
+
+  onAddSensor() {
+    this.target = null;
+    this.sensorSettingDisplay = true;
+  }
+
+  onAddSensorWithTarget(target: Target) {
+    this.target = target;
+    this.sensorSettingDisplay = true;
+  }
+
+  onSensorSettingClose() {
+    this.sensorSettingDisplay = false;
+  }
+  onSensorClick(sensor) {
+    this.router.navigate(['sensor', sensor.id, 'info']);
+  }
+
+  onSearch() {
+    console.log(this.filteredName);
+    console.log(this.selectedTargets);
+    console.log(this.selectedStatus);
+    alert('서버-검색 기능 구현 필요');
+  }
+
+}
+