Working on CRUD interface

2016-07-07 13:02:06 -07:00 · 2016-07-07 13:02:06 -07:00 · 75ff6504ec
--- a/web/vtctld2/package.json~
+++ b/web/vtctld2/package.json~
@ -0,0 +1,60 @@
+{
+  "name": "vtctld2",
+  "version": "0.0.0",
+  "license": "MIT",
+  "angular-cli": {},
+  "scripts": {
+    "start": "ng serve",
+    "postinstall": "typings install",
+    "lint": "tslint \"src/**/*.ts\"",
+    "test": "ng test",
+    "pree2e": "webdriver-manager update",
+    "e2e": "protractor"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "2.0.0-rc.3",
+    "@angular/compiler": "2.0.0-rc.3",
+    "@angular/core": "^2.0.0-rc.3",
+    "@angular/forms": "0.1.1",
+    "@angular/http": "^2.0.0-rc.3",
+    "@angular/platform-browser": "2.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
+    "@angular/router": "3.0.0-alpha.7",
+    "@angular2-material/button": "^2.0.0-alpha.5-2",
+    "@angular2-material/card": "^2.0.0-alpha.5-2",
+    "@angular2-material/core": "^2.0.0-alpha.5-2",
+    "@angular2-material/icon": "^2.0.0-alpha.5-2",
+    "@angular2-material/list": "^2.0.0-alpha.5-2",
+    "@angular2-material/progress-bar": "^2.0.0-alpha.5-2",
+    "@angular2-material/sidenav": "^2.0.0-alpha.5-2",
+    "@angular2-material/tabs": "^2.0.0-alpha.5-2",
+    "@angular2-material/toolbar": "^2.0.0-alpha.5-2",
+    "@salesforce-ux/design-system": "^2.0.2",
+    "angular2-in-memory-web-api": "0.0.14",
+    "es6-shim": "0.35.1",
+    "ng-lightning": "^0.13.1",
+    "primeng": "^1.0.0-beta.9",
+    "primeui": "^4.1.12",
+    "reflect-metadata": "0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "systemjs": "^0.19.26",
+    "tether": "^1.3.2",
+    "zone.js": "0.6.12"
+  },
+  "devDependencies": {
+    "angular-cli": "1.0.0-beta.8",
+    "codelyzer": "0.0.20",
+    "ember-cli-inject-live-reload": "1.4.0",
+    "jasmine-core": "2.4.1",
+    "jasmine-spec-reporter": "2.5.0",
+    "karma": "0.13.22",
+    "karma-chrome-launcher": "0.2.3",
+    "karma-jasmine": "0.3.8",
+    "protractor": "3.3.0",
+    "ts-node": "0.5.5",
+    "tslint": "3.11.0",
+    "typescript": "1.8.10",
+    "typings": "0.8.1"
+  }
+}
--- a/web/vtctld2/src/app/dashboard/NewKeyspace/newkeyspace.component.html
+++ b/web/vtctld2/src/app/dashboard/NewKeyspace/newkeyspace.component.html
@ -1,20 +1,18 @@
-<div *ngIf="openForm" class="vt-popUpContainer" (click)="callToggleForm()">
-  <md-card class="vt-popUp" (click)="blockClicks($event)">
-    <md-card-title>
-      Create a new Keyspace
-    </md-card-title>
-    <md-card-content>
-    <!--Input fields-->
-    <span class="vt-form-member"><label>Name: </label><input [(ngModel)]="NKS.name" placeholder="name"/></span>
-    <span class="vt-form-member"><label>LowerBound: </label><input [(ngModel)]="NKS.lowerBound" placeholder="lowerBound (ex. 40)"/></span>
-    <span class="vt-form-member"><label>UpperBound: </label><input [(ngModel)]="NKS.upperBound" placeholder="upperBound (ex. 80)"/></span>
-    <span class="vt-form-member"><label>Master Eligable? </label><input [(ngModel)]="NKS.master" type="checkbox"/></span>
+<md-card class="vt-popUp">
+  <md-card-title>
+    Create a new Keyspace
+  </md-card-title>
+  <md-card-content>
+  <!--Input fields-->
+  <span class="vt-form-member"><label>Name: </label><input [(ngModel)]="NKS.name" placeholder="name"/></span>
+  <span class="vt-form-member"><label>LowerBound: </label><input [(ngModel)]="NKS.lowerBound" placeholder="lowerBound (ex. 40)"/></span>
+  <span class="vt-form-member"><label>UpperBound: </label><input [(ngModel)]="NKS.upperBound" placeholder="upperBound (ex. 80)"/></span>
+  <span class="vt-form-member"><label>Master Eligable? </label><input [(ngModel)]="NKS.master" type="checkbox"/></span>

-    </md-card-content>
-    <md-card-actions>
-      <a md-button (click)="submitForm()">
-        Submit
-      </a>
-    </md-card-actions>
-  </md-card>
-</div>
+  </md-card-content>
+  <md-card-actions>
+    <a md-button (click)="submitForm()">
+      Submit
+    </a>
+  </md-card-actions>
+</md-card>
--- a/web/vtctld2/src/app/dashboard/NewKeyspace/newkeyspace.component.ts
+++ b/web/vtctld2/src/app/dashboard/NewKeyspace/newkeyspace.component.ts
@ -23,16 +23,16 @@ export class NewKeyspaceComponent implements OnInit{
  keyspaces = [];

  //PopUp code
-  @Input() openForm: boolean;
+  /*@Input() openForm: boolean;
  @Input() toggleForm: any;
-  @Output() onClose = new EventEmitter();
+  @Output() onClose = new EventEmitter();*/
  ngOnInit() {
-    console.log("NKS: ", this.openForm, this.toggleForm);
+    //console.log("NKS: ", this.openForm, this.toggleForm);
  }
-  callToggleForm(){
+  /*callToggleForm(){
    this.onClose.emit({ value:""});
    this.toggleForm();
-  }
+  }*/
  blockClicks(event){
    event.stopPropagation();
  }
--- a/web/vtctld2/src/app/dashboard/dashboard.component.css
+++ b/web/vtctld2/src/app/dashboard/dashboard.component.css
@ -104,4 +104,8 @@ ul {
 }
 .inactive {
  background-color: red;
+}
+
+.ui-widget-overlay ui-dialog-mask{
+  z-index: 0 !important;
 }
--- a/web/vtctld2/src/app/dashboard/keyspaceView/keyspaceView.component.html
+++ b/web/vtctld2/src/app/dashboard/keyspaceView/keyspaceView.component.html
@ -2,7 +2,7 @@
 <div *ngIf="keyspace.servingShards">
  <h2>Serving Shards</h2>
  <div *ngFor="let shard of keyspace.servingShards" class="vt-shardCard">
-    <a [routerLink]="['/keyspace', keyspace.name, '/cell', shard]">
+    <a [routerLink]="['/shard']" [queryParams]="getShardParams(shard)">
      <md-card> 
        <md-card-title>{{shard}}</md-card-title>   
        <md-card-actions>
--- a/web/vtctld2/src/app/dashboard/keyspaceView/keyspaceView.component.ts
+++ b/web/vtctld2/src/app/dashboard/keyspaceView/keyspaceView.component.ts
@ -16,7 +16,7 @@ import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
  providers: [KeyspaceService],
 })
 export class KeyspaceViewComponent implements OnInit, OnDestroy{
-  private sub: any;
+  private routeSub: any;
  keyspaceName: string;
  keyspace = {};
  constructor(
@ -25,15 +25,16 @@ export class KeyspaceViewComponent implements OnInit, OnDestroy{
    private keyspaceService: KeyspaceService) {}

  ngOnInit() {
-    this.sub = this.route.params.subscribe(params => {
-       this.keyspaceName = params['keyspaceName']; 
-       this.getKeyspace(this.keyspaceName);
-     });
-    
+    this.routeSub = this.router.routerState.queryParams
+      .subscribe(params => {
+        this.keyspaceName = params['keyspace'];
+        this.getKeyspace(this.keyspaceName);
+      }
+    );
  }

  ngOnDestroy() {
-    this.sub.unsubscribe();
+    this.routeSub.unsubscribe();
  }

  getKeyspace(keyspaceName) {
@ -43,4 +44,7 @@ export class KeyspaceViewComponent implements OnInit, OnDestroy{
    });
  }

+  getShardParams(shardName: string) {
+    return {keyspace: this.keyspaceName, shard: shardName};
+  }
 }
--- a/web/vtctld2/src/app/dashboard/shardView/shardView.component.html
+++ b/web/vtctld2/src/app/dashboard/shardView/shardView.component.html
@ -1,14 +1,16 @@
 <h1>SHARD VIEW</h1>

 <div class="vt-tablet-container">
-  <div *ngFor="let tablet of tablets" class="vt-tabletCard">
-    <a>
-      <md-card> 
-        <div class="vt-tablet-stat">{{getName(tablet.type)}}</div>
-        <div class="vt-tablet-stat">{{tablet.status}}</div>
-        <div class="vt-tablet-stat">{{tablet.stat}}</div>
-        <div class="vt-tablet-stat">{{tablet.stat2}}</div>   
-      </md-card>
-    </a>
-  </div>
+  <md-card class="vt-tabletCard"> 
+    <p-dataTable [value]="tablets">
+      <p-column field="type" header="Type" sortable="true">
+        <template let-col let-tab="rowData">
+        {{getName(tab[col.field])}}
+        </template>
+      </p-column>
+      <p-column field="status" header="Status" sortable="true"></p-column>
+      <p-column field="stat" header="Stat1" sortable="true"></p-column>
+      <p-column field="stat2" header="Stat2" sortable="true"></p-column>
+    </p-dataTable>
+  </md-card>
 </div>
--- a/web/vtctld2/src/app/dashboard/shardView/shardView.component.ts
+++ b/web/vtctld2/src/app/dashboard/shardView/shardView.component.ts
@ -3,6 +3,8 @@ import { ROUTER_DIRECTIVES, ActivatedRoute, Router } from '@angular/router';
 import { TabletService } from '../../shared/tabletService/tablet.service';
 import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
 import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
+import {DataTable} from 'primeng/primeng';
+import {Column} from 'primeng/primeng';

@Component({
  moduleId: module.id,
@ -12,12 +14,14 @@ import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
  directives: [
            ROUTER_DIRECTIVES,
            MD_CARD_DIRECTIVES,
-            MD_BUTTON_DIRECTIVES],
+            MD_BUTTON_DIRECTIVES,
+            DataTable,
+            Column],
  providers: [
              TabletService],
 })
 export class ShardViewComponent implements OnInit, OnDestroy{
-  private sub: any;
+  private routeSub: any;
  keyspaceName: string;
  shardName: string;
  tablets = [];
@ -27,19 +31,22 @@ export class ShardViewComponent implements OnInit, OnDestroy{
    private tabletService: TabletService) {}

  ngOnInit() {
-    this.sub = this.route.params.subscribe(params => {
-       this.keyspaceName = params['keyspaceName']; 
-       this.shardName = params['shardName'];
-       this.getTablets(this.keyspaceName, this.shardName);
-     }); 
+    this.routeSub = this.router.routerState.queryParams
+      .subscribe(params => {
+        this.keyspaceName = params['keyspace'];
+        this.shardName = params['shard'];
+        this.getTablets(this.keyspaceName, this.shardName);
+      }
+    );
  }

  ngOnDestroy() {
-    this.sub.unsubscribe();
+    this.routeSub.unsubscribe();
  }

  getTablets(keyspaceName, shardName) {
    this.tabletService.getTablets(keyspaceName, shardName).subscribe((tablets) => {
+      console.log(tablets[0]);
      this.tablets = tablets;
    });
  }
--- a/web/vtctld2/src/app/dashboard/shardView/tablet.interface.ts
+++ b/web/vtctld2/src/app/dashboard/shardView/tablet.interface.ts
@ -0,0 +1,6 @@
+export interface Tablet {
+    type;
+    status;
+    stat1;
+    stat2;
+}