Appliances list, ref: #14

This commit is contained in:
ziajka 2017-11-30 10:27:41 +01:00
parent 4caeb2a4c7
commit 084ded34b2
14 changed files with 220 additions and 1 deletions

View File

@ -32,6 +32,7 @@ import { HttpServer } from "./shared/services/http-server.service";
import { SnapshotService } from "./shared/services/snapshot.service";
import { ProgressDialogService } from "./shared/progress-dialog/progress-dialog.service";
import { NodeService } from "./shared/services/node.service";
import { ApplianceService } from "./shared/services/appliance.service";
import { ProjectsComponent } from './projects/projects.component';
import { DefaultLayoutComponent } from './default-layout/default-layout.component';
@ -43,6 +44,8 @@ import { ServersComponent, AddServerDialogComponent } from './servers/servers.co
import { NodeContextMenuComponent } from './shared/node-context-menu/node-context-menu.component';
import { StartNodeActionComponent } from './shared/node-context-menu/actions/start-node-action/start-node-action.component';
import { StopNodeActionComponent } from './shared/node-context-menu/actions/stop-node-action/stop-node-action.component';
import { ApplianceComponent } from './appliance/appliance.component';
import { ApplianceListDialogComponent } from './appliance/appliance-list-dialog/appliance-list-dialog.component';
@NgModule({
@ -59,6 +62,8 @@ import { StopNodeActionComponent } from './shared/node-context-menu/actions/stop
NodeContextMenuComponent,
StartNodeActionComponent,
StopNodeActionComponent,
ApplianceComponent,
ApplianceListDialogComponent,
],
imports: [
NgbModule.forRoot(),
@ -86,6 +91,7 @@ import { StopNodeActionComponent } from './shared/node-context-menu/actions/stop
ProjectService,
SymbolService,
ServerService,
ApplianceService,
NodeService,
IndexedDbService,
HttpServer,
@ -95,7 +101,8 @@ import { StopNodeActionComponent } from './shared/node-context-menu/actions/stop
entryComponents: [
AddServerDialogComponent,
CreateSnapshotDialogComponent,
ProgressDialogComponent
ProgressDialogComponent,
ApplianceListDialogComponent
],
bootstrap: [ AppComponent ]
})

View File

@ -0,0 +1,17 @@
<h1 mat-dialog-title>Appliances list</h1>
<div mat-dialog-content>
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let row"> <button [routerLink]="['/server', row.id, 'projects']" mat-button>{{row.name}}</button></mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>
<button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
</div>

View File

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

View File

@ -0,0 +1,53 @@
import {Component, Inject, Input, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import {DataSource} from "@angular/cdk/collections";
import {Observable} from "rxjs/Observable";
import {Appliance} from "../../shared/models/appliance";
import {ApplianceService} from "../../shared/services/appliance.service";
import {Server} from "../../shared/models/server";
@Component({
selector: 'app-appliance-list-dialog',
templateUrl: './appliance-list-dialog.component.html',
styleUrls: ['./appliance-list-dialog.component.scss']
})
export class ApplianceListDialogComponent implements OnInit {
server: Server;
dataSource: ApplianceDataSource;
displayedColumns = ['name'];
constructor(
public dialogRef: MatDialogRef<ApplianceListDialogComponent>,
private applianceService: ApplianceService,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.server = data['server'];
}
ngOnInit() {
this.dataSource = new ApplianceDataSource(this.server, this.applianceService);
}
onAddClick(): void {
this.dialogRef.close();
}
onNoClick(): void {
this.dialogRef.close();
}
}
export class ApplianceDataSource extends DataSource<Appliance> {
constructor(private server: Server, private applianceService: ApplianceService) {
super();
}
connect(): Observable<Appliance[]> {
return this.applianceService.list(this.server);
}
disconnect() {}
}

View File

@ -0,0 +1,3 @@
<button mat-icon-button (click)="listAppliancesModal()">
<mat-icon>add_to_queue</mat-icon>
</button>

View File

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

View File

@ -0,0 +1,33 @@
import {Component, Input, OnInit} from '@angular/core';
import {MatDialog} from "@angular/material";
import {ApplianceListDialogComponent} from "./appliance-list-dialog/appliance-list-dialog.component";
import {Server} from "../shared/models/server";
@Component({
selector: 'app-appliance',
templateUrl: './appliance.component.html',
styleUrls: ['./appliance.component.scss']
})
export class ApplianceComponent implements OnInit {
@Input() server: Server;
constructor(private dialog: MatDialog) { }
ngOnInit() {}
listAppliancesModal() {
const dialogRef = this.dialog.open(ApplianceListDialogComponent, {
width: '600px',
data: {
'server': this.server
}
});
dialogRef.afterClosed().subscribe(() => {
});
}
}

View File

@ -13,6 +13,10 @@
</button>
</mat-toolbar-row>
<mat-toolbar-row>
<app-appliance [server]="server"></app-appliance>
</mat-toolbar-row>
</mat-toolbar>
</div>

View File

@ -0,0 +1,10 @@
export class Appliance {
appliance_id: string;
builtin: boolean;
category: string;
compute_id: string;
default_name_format: string;
name: string;
node_type: string;
symbol: string;
}

View File

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

View File

@ -0,0 +1,20 @@
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Server } from "../models/server";
import { HttpServer } from "./http-server.service";
import {Appliance} from "../models/appliance";
@Injectable()
export class ApplianceService {
constructor(private httpServer: HttpServer) { }
list(server: Server): Observable<Appliance[]> {
return this.httpServer
.get(server, '/appliances')
.map(response => response.json() as Appliance[]);
}
}

View File

@ -6,6 +6,7 @@ import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Server } from "../models/server";
import { HttpServer } from "./http-server.service";
import {Appliance} from "../models/appliance";
@Injectable()
@ -25,4 +26,10 @@ export class NodeService {
.map(response => response.json() as Node);
}
createFromAppliance(server: Server, project: Project, appliance: Appliance): Observable<Node> {
return this.httpServer
.post(server, `/projects/${project.project_id}/appliances/${appliance.appliance_id}`, {})
.map(response => response.json() as Node);
}
}