Working on CRUD interface

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"
+  }
+}

web/vtctld2/src/app/dashboard/NewKeyspace/newkeyspace.component.html

@@ -1,5 +1,4 @@
-<div *ngIf="openForm" class="vt-popUpContainer" (click)="callToggleForm()">
-  <md-card class="vt-popUp" (click)="blockClicks($event)">
+<md-card class="vt-popUp">
   <md-card-title>
     Create a new Keyspace
   </md-card-title>
@@ -17,4 +16,3 @@
     </a>
   </md-card-actions>
 </md-card>
-</div>

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();
   }

web/vtctld2/src/app/dashboard/dashboard.component.css

@@ -105,3 +105,7 @@ ul {
 .inactive {
   background-color: red;
 }
+
+.ui-widget-overlay ui-dialog-mask{
+  z-index: 0 !important;
+}

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>

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.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};
+  }
 }

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 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>
-    </a>
-  </div>
 </div>

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.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;
     });
   }

web/vtctld2/src/app/dashboard/shardView/tablet.interface.ts

@@ -0,0 +1,6 @@
+export interface Tablet {
+    type;
+    status;
+    stat1;
+    stat2;
+}