ing

@overflow/target/component/detail/detail.component.html

@@ -0,0 +1,72 @@
+<div *ngIf="infra">
+    <div *ngIf="infra.infraType.name == 'HOST'">
+        <button pButton type="button" label="Traceroute" (click)="onTraceroute()"></button>
+    </div>
+
+    <div class="ui-g">
+        <div class="ui-g-12">
+            <div class="ui-inputgroup">
+                <span class="md-inputfield">
+                    <input #input type="text" pInputText value="{{infra.target.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
+                    <label></label>
+                </span>
+                <button pButton label="Save" type="button" (click)="onDisplayNameChange(input.value)"></button>
+            </div>
+        </div>
+        <div class="ui-g-12">
+            <p-panel [showHeader]="false">
+                <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]="'Description'" [value]="infra.target.description" class="ui-key-value"></of-key-value>
+                <of-key-value [key]="'Type'" [value]="infra.infraType.name" class="ui-key-value"></of-key-value>
+                <of-key-value [key]="'Created at'" [value]="infra.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value>
+                <of-key-value [key]="'Sensors'" [value]="infra.target.sensorCount" class="ui-key-value"></of-key-value>
+            </p-panel>
+        </div>
+        <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]="infra.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">
+            <p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th>Alias</th>
+                        <th>Status</th>
+                        <th>Crawler</th>
+                        <th>Items</th>
+                        <th>Created at</th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-sensor>
+                    <tr [pSelectableRow]="sensor">
+                        <td>{{sensor.displayName}}</td>
+                        <td>{{sensor.status.name}}</td>
+                        <td>{{sensor.crawler.name}}</td>
+                        <td>{{sensor.itemCount}}</td>
+                        <td>{{sensor.createDate | date: 'dd.MM.yyyy'}}</td>
+                    </tr>
+                </ng-template>
+            </p-table>
+            <p-paginator [rows]="pageSize" [totalRecords]="sensorsCount" (onPageChange)="onPaging($event)"></p-paginator>
+        </div>
+    </div>
+</div>

@overflow/target/component/detail/detail.component.spec.ts

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

@overflow/target/component/detail/detail.component.ts

@@ -0,0 +1,155 @@
+import { Component, ViewChild, OnInit, Input, AfterContentInit, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Sensor } from '@overflow/commons-typescript/model/sensor';
+import { Infra } from '@overflow/commons-typescript/model/infra';
+import { Store, select } from '@ngrx/store';
+import { DetailSelector as InfraDetailSelector } from '@overflow/infra/store';
+import * as InfraDetailStore from '@overflow/infra/store/detail';
+import { Subscription } from 'rxjs/Subscription';
+import { RPCClientError } from '@loafer/ng-rpc';
+import { sensorListSelector } from '@overflow/sensor/store';
+import * as SensorListStore from '@overflow/sensor/store/list';
+// import { PageParams, Page } from 'app/commons/model';
+import { ModifySelector } from '@overflow/target/store';
+import * as TargetModifyStore from '@overflow/target/store/modify';
+import { Target } from '@overflow/commons-typescript/model/target';
+
+
+@Component({
+  selector: 'of-target-detail',
+  templateUrl: './detail.component.html',
+})
+export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
+
+  infraSubscription$: Subscription;
+  infra$ = this.infraDetailStore.pipe(select(InfraDetailSelector.select('infra')));
+  sensorsSubscription$: Subscription;
+  sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
+  target$ = this.targetModifyStore.pipe(select(ModifySelector.select('target')));
+
+  infraId = null;
+  infra: Infra;
+  sensors: Sensor[];
+  sensorsCount = 0;
+  sensorSettingDisplay = false;
+
+  pageSize = '10';
+  totalLength = 0;
+  currPage = 0;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private infraDetailStore: Store<InfraDetailStore.State>,
+    private sensorListStore: Store<SensorListStore.State>,
+    private targetModifyStore: Store<TargetModifyStore.State>
+  ) { }
+
+  ngOnInit() {
+    this.infraSubscription$ = this.infra$.subscribe(
+      (infra: Infra) => {
+        this.infra = infra;
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+    // this.sensorsSubscription$ = this.sensors$.subscribe(
+    //   (page: Page) => {
+    //     if (page) {
+    //       this.sensorsCount = page.totalElements;
+    //       this.sensors = page.content;
+    //     }
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
+  }
+
+  ngAfterContentInit() {
+    this.infraId = this.route.snapshot.paramMap.get('id');
+    this.getInfra();
+    this.getSensors(this.currPage);
+  }
+
+  ngOnDestroy() {
+    if (this.infraSubscription$) {
+      this.infraSubscription$.unsubscribe();
+    }
+  }
+
+  getInfra() {
+    this.infraDetailStore.dispatch(
+      new InfraDetailStore.Read(
+        { id: this.infraId }
+      )
+    );
+  }
+
+  getSensors(pageIndex) {
+    // const pageParams: PageParams = {
+    //   pageNo: pageIndex + '',
+    //   countPerPage: this.pageSize,
+    //   sortCol: 'id',
+    //   sortDirection: 'descending'
+    // };
+    // this.sensorListStore.dispatch(
+    //   new SensorListStore.ReadAllByInfra(
+    //     { id: this.infraId, pageParams: pageParams }
+    //   )
+    // );
+  }
+
+  onAddSensor() {
+    this.sensorSettingDisplay = true;
+  }
+
+  onSensorSettingClose() {
+    this.sensorSettingDisplay = false;
+  }
+
+  onPaging(e) {
+    this.getSensors(e.page);
+  }
+
+  onRowSelect(event) {
+    this.router.navigate(['sensor', event.data.id, 'info']);
+  }
+
+  onTraceroute() {
+    alert('지원 예정');
+  }
+
+
+  onDisplayNameChange(value: string) {
+    if (value === this.infra.target.displayName) {
+      return;
+    }
+    const target = this.infra.target;
+    target.displayName = value;
+    this.targetModifyStore.dispatch(
+      new TargetModifyStore.Modify(target)
+    );
+
+    const modifySuccessSubscription$: Subscription = this.target$.subscribe(
+      (t: Target) => {
+        if (t) {
+        }
+        if (modifySuccessSubscription$) {
+          modifySuccessSubscription$.unsubscribe();
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error);
+      }
+    );
+  }
+
+  onDisplayNameChangeKeypress(event, value) {
+    if (event.key === 'Enter') {
+      this.onDisplayNameChange(value);
+    }
+  }
+
+}

@overflow/target/component/index.ts

@@ -0,0 +1,9 @@
+import { DetailComponent } from './detail/detail.component';
+import { ListComponent } from './list/list.component';
+import { FilterComponent } from './list/filter/filter.component';
+
+export const COMPONENTS = [
+  ListComponent,
+  DetailComponent,
+  FilterComponent
+];

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

@@ -0,0 +1 @@
+<div>filter</div>

@overflow/target/component/list/filter/filter.component.scss

@@ -0,0 +1,9 @@
+.radio-group {
+    display: inline-flex;
+    flex-direction: column;
+  }
+  
+  .radio-button {
+    margin: 5px;
+  }
+  

@overflow/target/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/target/component/list/filter/filter.component.ts

@@ -0,0 +1,17 @@
+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 {
+
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}

@overflow/target/component/list/list.component.html

@@ -0,0 +1,34 @@
+<h1>Targets</h1>
+
+<p-table [value]="infras" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true" >
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 4em">No.</th>
+      <th style="width: 8em">Status</th>
+      <th style="width: 8em">Type</th>
+      <th>Name</th>
+      <th style="width: 15em">Sensors</th>
+      <th style="width: 8em">Created at</th>
+      <th style="width: 10em"></th>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="body" let-infra let-rowIndex="rowIndex">
+    <tr [pSelectableRow]="infra">
+      <td>{{rowIndex + 1}}</td>
+      <td>??</td>
+      <td>{{infra.infraType.name}}</td>
+      <td>{{infra.target.displayName}}</td>
+      <td>{{infra.target.sensorCount}}</td>
+      <td>{{infra.createDate | date: 'dd.MM.yyyy'}}</td>
+      <td>
+        <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-s-button" (click)="onAddSensor(infra.target)"></button>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>
+
+
+<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>

@overflow/target/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/target/component/list/list.component.ts

@@ -0,0 +1,101 @@
+import { Component, OnInit, AfterContentInit, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Infra } from '@overflow/commons-typescript/model/infra';
+import { Store, select } from '@ngrx/store';
+import { ListSelector } from '@overflow/infra/store';
+import * as InfraListStore from '@overflow/infra/store/list';
+// import { Page, PageParams } from 'app/commons/model';
+import { RPCClientError } from '@loafer/ng-rpc';
+import { Probe } from '@overflow/commons-typescript/model/probe';
+
+import { Target } from '@overflow/commons-typescript/model/target';
+import { Subscription } from 'rxjs/Subscription';
+
+
+@Component({
+    selector: 'of-target-list',
+    templateUrl: './list.component.html',
+})
+export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
+
+    infrasSubscription$: Subscription;
+    infras$ = this.infraListStore.pipe(select(ListSelector.select('page')));
+    infras: Infra[];
+    probe: Probe;
+    target: Target = null;
+    sensorSettingDisplay = false;
+
+    pageSize = '10';
+    totalLength = 0;
+    currPage = 0;
+
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router,
+        private infraListStore: Store<InfraListStore.State>,
+    ) {
+    }
+
+    ngOnInit() {
+        // this.infrasSubscription$ = this.infras$.subscribe(
+        //     (page: Page) => {
+        //         if (!page) {
+        //             return;
+        //         }
+        //         this.totalLength = page.totalElements;
+        //         this.infras = page.content;
+        //     },
+        //     (error: RPCClientError) => {
+        //         console.log(error);
+        //     }
+        // );
+    }
+
+    ngAfterContentInit() {
+        this.route.params.subscribe((params: any) => {
+            this.probe = {
+                id: params['id'],
+            };
+            this.getInfras(0);
+        });
+    }
+
+    ngOnDestroy() {
+        if (this.infrasSubscription$) {
+            this.infrasSubscription$.unsubscribe();
+        }
+    }
+
+    getInfras(pageNo) {
+        // const pageParams: PageParams = {
+        //     pageNo: pageNo + '',
+        //     countPerPage: this.pageSize,
+        //     sortCol: 'id',
+        //     sortDirection: 'descending'
+        // };
+        // this.infraListStore.dispatch(
+        //     new InfraListStore.ReadAllByProbe(
+        //         { probe: this.probe, pageParams: pageParams }
+        //     )
+        // );
+    }
+
+    onRowSelect(event) {
+        // this.router.navigate(['target'], { queryParams: { target: event.data.id } });
+        this.router.navigate(['target', event.data.id, 'info']);
+    }
+
+    onAddSensor(target: Target) {
+        this.target = target;
+        this.sensorSettingDisplay = true;
+    }
+
+    onSensorSettingClose() {
+        this.sensorSettingDisplay = false;
+    }
+
+    onPaging(e) {
+        this.getInfras(e.page);
+    }
+
+}

@overflow/target/service/index.ts

@@ -0,0 +1,5 @@
+import { TargetService } from './target.service';
+
+export const SERVICES = [
+    TargetService,
+];

@overflow/target/service/target.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { TargetService } from './target.service';
+
+describe('TargetService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [TargetService]
+    });
+  });
+
+  it('should be created', inject([TargetService], (service: TargetService) => {
+    expect(service).toBeTruthy();
+  }));
+});

@overflow/target/service/target.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RPCService } from '@loafer/ng-rpc';
+
+import { Target } from '@overflow/commons-typescript/model/target';
+
+
+@Injectable()
+export class TargetService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public modify(target: Target): Observable<Target> {
+    return this.rpcService.call('TargetService.modify', target);
+  }
+
+}

@overflow/target/store/index.ts

@@ -0,0 +1,30 @@
+import {
+    createSelector,
+    createFeatureSelector,
+    ActionReducerMap,
+  } from '@ngrx/store';
+
+  import { StateSelector } from '@overflow/core/ngrx/store';
+
+  import { MODULE } from '../target.constant';
+
+  import * as TargetModifyStore from './modify';
+
+  export interface State {
+    modify: TargetModifyStore.State;
+  }
+
+  export const REDUCERS = {
+    modify: TargetModifyStore.reducer,
+  };
+
+  export const EFFECTS = [
+    TargetModifyStore.Effects,
+  ];
+
+  export const selectTargetState = createFeatureSelector<State>(MODULE.name);
+
+  export const ModifySelector = new StateSelector<TargetModifyStore.State>(createSelector(
+    selectTargetState,
+    (state: State) => state.modify
+  ));

@overflow/target/store/modify/index.ts

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

@overflow/target/store/modify/modify.action.ts

@@ -0,0 +1,34 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc';
+import { Target } from '@overflow/commons-typescript/model/target';
+
+export enum ActionType {
+  Modify = '[Target.modify] Modify',
+  ModifySuccess = '[Target.modify] ModifySuccess',
+  ModifyFailure = '[Target.modify] ModifyFailure',
+}
+
+export class Modify implements Action {
+  readonly type = ActionType.Modify;
+
+  constructor(public payload: Target) {}
+}
+
+export class ModifySuccess implements Action {
+  readonly type = ActionType.ModifySuccess;
+
+  constructor(public payload: Target) {}
+}
+
+export class ModifyFailure implements Action {
+  readonly type = ActionType.ModifyFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export type Actions =
+  | Modify
+  | ModifySuccess
+  | ModifyFailure
+;

@overflow/target/store/modify/modify.effect.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './modify.effect';
+
+describe('Target.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});

@overflow/target/store/modify/modify.effect.ts

@@ -0,0 +1,44 @@
+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/map';
+import 'rxjs/add/operator/take';
+
+import { TargetService } from '../../service/target.service';
+
+import {
+  Modify,
+  ModifySuccess,
+  ModifyFailure,
+  ActionType,
+} from './modify.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private targetService: TargetService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  modify$: Observable<Action> = this.actions$
+    .ofType(ActionType.Modify)
+    .map((action: Modify) => action.payload)
+    .exhaustMap(target =>
+      this.targetService.modify(target)
+        .map(targets => new ModifySuccess(targets))
+        .catch(error => of(new ModifyFailure(error)))
+    );
+
+}

@overflow/target/store/modify/modify.reducer.ts

@@ -0,0 +1,43 @@
+import {
+  Actions,
+  ActionType,
+} from './modify.action';
+
+import {
+  State,
+  initialState,
+} from './modify.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.Modify: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.ModifySuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        target: action.payload
+      };
+    }
+
+    case ActionType.ModifyFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        target: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

@overflow/target/store/modify/modify.state.ts

@@ -0,0 +1,14 @@
+import { RPCClientError } from '@loafer/ng-rpc';
+import { Target } from '@overflow/commons-typescript/model/target';
+
+export interface State {
+  error: RPCClientError | null;
+  pending: boolean;
+  target: Target | null;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  target: null,
+};

@overflow/target/target-store.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './target.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class TargetStoreModule { }

@overflow/target/target.constant.ts

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

@overflow/target/target.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { COMPONENTS } from './component';
+import { SERVICES } from './service';
+import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
+import { SensorModule } from '../sensor/sensor.module';
+// import { KeyValueModule } from 'app/commons/component/key-value/key-value.module';
+import { InfraModule } from '../infra/infra.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PrimeNGModules,
+    SensorModule,
+    // KeyValueModule,
+    InfraModule
+  ],
+  declarations: [
+    COMPONENTS,
+  ],
+  exports: [
+    COMPONENTS,
+  ],
+  providers: [
+    SERVICES,
+  ],
+})
+export class TargetModule { }