probe

src/app/commons/component/info-table/info-table.component.html

@@ -0,0 +1,6 @@
+<table *ngFor="let elem of data">
+  <tr>
+    <td>{{elem.key}}</td>
+    <td>{{elem.value}}</td>
+  </tr>
+</table>

src/app/commons/component/info-table/info-table.component.scss

@@ -0,0 +1,10 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+  }
+  
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
+  }

src/app/commons/component/info-table/info-table.component.spec.ts

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

src/app/commons/component/info-table/info-table.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { MatTableDataSource } from '@angular/material';
+
+@Component({
+  selector: 'of-info-table',
+  templateUrl: './info-table.component.html',
+  styleUrls: ['./info-table.component.scss']
+})
+
+export class InfoTableComponent {
+
+  @Input() title: string;
+  @Input() data: any;
+
+  constructor() { }
+
+}

src/app/commons/component/info-table/info-table.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InfoTableComponent } from 'app/commons/component/info-table/info-table.component';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule
+  ],
+  declarations: [
+    InfoTableComponent
+  ],
+  exports: [
+    InfoTableComponent
+  ]
+})
+export class InfoTableModule { }

src/app/commons/component/layouts.module.ts

@@ -6,6 +6,7 @@ import { FooterComponent } from './footer/footer.component';
 import { MenuItemComponent } from './menu-item/menu-item.component';
 import { SubMenubarComponent } from './sub-menubar/sub-menubar.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { InfoTableComponent } from './info-table/info-table.component';
 
 
 @NgModule({
@@ -13,6 +14,6 @@ import { FlexLayoutModule } from '@angular/flex-layout';
     CommonModule,
     FlexLayoutModule,
   ],
-  declarations: [SidebarComponent, HeaderComponent, FooterComponent, MenuItemComponent, SubMenubarComponent]
+  declarations: [SidebarComponent, HeaderComponent, FooterComponent, MenuItemComponent, SubMenubarComponent, InfoTableComponent]
 })
 export class LayoutsModule { }

src/app/commons/ui/material/material.module.ts

@@ -24,11 +24,11 @@ const MATERIAL_MODULES: any[] = [
 @NgModule({
   imports: [
     MATERIAL_MODULES,
-    FlexLayoutModule
+    FlexLayoutModule,
   ],
   exports: [
     MATERIAL_MODULES,
-    FlexLayoutModule
+    FlexLayoutModule,
   ],
 })
 export class MaterialModule { }

src/app/packages/probe/component/detail/detail.component.html

@@ -1,59 +1,23 @@
 <div>{{probeId}}</div>
-<button class="Follow " mat-raised-button color="primary">Status: UP</button>
+
+<div fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between center">
+  <mat-card>Status: UP</mat-card>
+  <div>
+    <button *ngIf="!isUpState" mat-raised-button color="primary" (click)="handleStartStop()">Start</button>
+    <button *ngIf="isUpState" mat-raised-button color="accent" (click)="handleStartStop()">Stop</button>
+    
+    <button mat-raised-button color="warn" (click)="handleRemove()">Remove</button>
+  </div>
+</div>
 
 <div fxLayout="row" fxLayoutWrap fxLayoutGap="10px" fxLayoutAlign="center">
-  <mat-card class="example-card" fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
-    <mat-card-header>
-      <div mat-card-avatar class="example-header-image"></div>
-      <mat-card-title>Shiba Inu</mat-card-title>
-      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-    </mat-card-header>
-    <mat-card-content>
-      <p>
-        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
-        very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
-      </p>
-    </mat-card-content>
-    <mat-card-actions>
-      <button mat-button>LIKE</button>
-      <button mat-button>SHARE</button>
-    </mat-card-actions>
+  <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
+    <of-info-table [title]="'Title1'" [data]="data"></of-info-table>
   </mat-card>
-
-  <mat-card class="example-card" fxFlex="30" fxFlex.lt-sm="100" fxFlex.sm="30">
-    <mat-card-header>
-      <div mat-card-avatar class="example-header-image"></div>
-      <mat-card-title>Shiba Inu</mat-card-title>
-      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-    </mat-card-header>
-    <mat-card-content>
-      <p>
-        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
-        very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
-      </p>
-    </mat-card-content>
-    <mat-card-actions>
-      <button mat-button>LIKE</button>
-      <button mat-button>SHARE</button>
-    </mat-card-actions>
+  <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
+    <of-info-table [title]="'Title2'" [data]="data"></of-info-table>
   </mat-card>
-
-  <mat-card class="example-card" fxFlex="30" fxFlex.lt-sm="100" fxFlex.sm="30">
-      <mat-card-header>
-        <div mat-card-avatar class="example-header-image"></div>
-        <mat-card-title>Shiba Inu</mat-card-title>
-        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-      </mat-card-header>
-      <mat-card-content>
-        <p>
-          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
-          very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
-        </p>
-      </mat-card-content>
-      <mat-card-actions>
-        <button mat-button>LIKE</button>
-        <button mat-button>SHARE</button>
-      </mat-card-actions>
+  <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
+    <of-info-table [title]="'Title3'" [data]="data"></of-info-table>
   </mat-card>
-
 </div>

src/app/packages/probe/component/detail/detail.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 
 @Component({
   selector: 'of-probe-detail',
@@ -9,11 +10,42 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class DetailComponent implements OnInit {
 
   probeId = undefined;
+  isUpState = false;
 
-  constructor(private route: ActivatedRoute, private router: Router) { }
+  data = [
+    {
+      key: 'key1',
+      value: 'this is value'
+    },
+    {
+      key: 'key2',
+      value: 'this is value'
+    },
+    {
+      key: 'key3',
+      value: 'this is value'
+    },
+    {
+      key: 'key4',
+      value: 'this is value'
+    },
+  ];
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    public dialog: MatDialog) { }
 
   ngOnInit() {
     this.probeId = this.route.snapshot.paramMap.get('id');
   }
 
+  handleStartStop() {
+    this.isUpState = !this.isUpState;
   }
+
+  handleRemove() {
+    console.log('remove');
+  }
+}
+

src/app/packages/probe/component/download/download.component.html

@@ -1,3 +1,15 @@
-<p>
-  download works!
-</p>
+<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAglign="center">
+  <div fxFlex.xs="100" fxFlex.lg="20" fxFlex.md="20" fxFlex.sm="20" >
+    <div class="tab">
+      <button class="tablinks" *ngFor="let os of OS_LIST" (click)="handleTabSelection(os)" >{{os}}</button>
+    </div>
+  </div>
+
+  <div fxFlex.xs="100" fxFlex.lg="80" fxFlex.md="80" fxFlex.sm="80">
+    <div class="tabcontent">
+      <div *ngIf="selected == 'Windows' || selected==undefined">Windows Manual</div>
+      <div *ngIf="selected == 'Ubuntu'">Ubuntu Manual</div>
+      <div *ngIf="selected == 'CentOS'">CentOS Manual</div>
+    </div>
+  </div>
+</div>

src/app/packages/probe/component/download/download.component.scss

@@ -0,0 +1,36 @@
+.tab {
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+    height: 100%;
+}
+
+/* Style the buttons that are used to open the tab content */
+.tab button {
+    display: block;
+    background-color: inherit;
+    color: black;
+    padding: 22px 16px;
+    width: 100%;
+    border: none;
+    outline: none;
+    text-align: left;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+    background-color: #ddd;
+}
+
+/* Create an active/current "tab button" class */
+.tab button.active {
+    background-color: #ccc;
+}
+
+/* Style the tab content */
+.tabcontent {
+    padding: 0px 12px;
+    border: 1px solid #ccc;
+    height: 100%;
+}

src/app/packages/probe/component/download/download.component.ts

@@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DownloadComponent implements OnInit {
 
+  selected: string = undefined;
+
+  OS_LIST = [
+    'Windows',
+    'Ubuntu',
+    'CentOS',
+  ];
+
   constructor() { }
 
   ngOnInit() {
   }
 
+  handleTabSelection(osName: string) {
+    console.log(osName);
+    this.selected = osName;
+  }
 }

src/app/packages/probe/probe.module.ts

@@ -3,17 +3,19 @@ import { CommonModule } from '@angular/common';
 import { ListComponent } from 'app/packages/probe/component/list/list.component';
 import { DownloadComponent } from 'app/packages/probe/component/download/download.component';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { InfoTableModule } from 'app/commons/component/info-table/info-table.module';
 import { DetailComponent } from 'app/packages/probe/component/detail/detail.component';
 
 @NgModule({
   imports: [
     CommonModule,
     MaterialModule,
+    InfoTableModule,
   ],
   declarations: [
     ListComponent,
     DownloadComponent,
-    DetailComponent
+    DetailComponent,
   ],
 })
 export class ProbeModule { }

src/app/pages/targets/targets.component.html

@@ -0,0 +1,3 @@
+<p>
+  targets works!
+</p>

src/app/pages/targets/targets.component.spec.ts

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

src/app/pages/targets/targets.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-targets',
+  templateUrl: './targets.component.html',
+  styleUrls: ['./targets.component.scss']
+})
+export class TargetsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}