Implemented routing to different views + basic popup template

web/vtctld2/src/app/api/topology-info.service.ts

@@ -15,7 +15,7 @@ export class TopologyInfoService {
        .map(resp => resp.json());
    }
 
-   getCombinedTopologyInfo() {
+   getKeyspacesAndCell() {
      let keyspaceStream = this.getKeyspaces();
      let cellStream = this.getCells();
      return keyspaceStream.combineLatest(cellStream);

web/vtctld2/src/app/status/heatmap.component.html

@@ -12,8 +12,7 @@
 
   <!-- The labels, and nested labels, of the map are drawn -->
   <div *ngFor="let label of yLabels">
-    <tr *ngIf="label.NestedLabels==null" [attr.height]="getRowHeight()">
-      <td  [attr.rowspan]="label.Label.Rowspan" class="bordered"> {{label.Label.Rowspan}} {{label.Label.Name}} </td>
+      <td  [attr.rowspan]="label.Label.Rowspan" class="bordered"> {{label.Label.Name}} </td>
     </tr>
 
     <tr *ngFor="let nestedLabel of label.NestedLabels; let isFirst=first" [attr.height]="getRowHeight()">

web/vtctld2/src/app/status/heatmap.component.ts

@@ -91,8 +91,6 @@ export class HeatmapComponent implements AfterViewInit, OnInit {
 
   closePopup() {
     this.zone.run(() => { this.showPopup = false; });
-    this.popupReady = false;
-  }
 
   // setupColorscale sets the right scale based on what metric the heatmap is displaying.
   setupColorscale(metric) {

web/vtctld2/src/app/status/status.component.html

@@ -6,10 +6,9 @@
 
 <!-- Type selector -->
 <p-dropdown #tabletType (onChange)="handleTypeChange($event)" [options]="tabletTypes" [(ngModel)]="selectedType"></p-dropdown>
-
-<!-- Metric selector -->
 <p-dropdown #metric (onChange)="handleMetricChange($event)" [options]="metrics" [(ngModel)]="selectedMetric"></p-dropdown>
 
+
 <!-- Wait until the heatmap data has been obtained from the service -->
 <div *ngFor="let h of heatmaps">
   <vt-heatmap *ngIf="heatmapDataReady"

web/vtctld2/src/app/status/status.component.ts

@@ -5,6 +5,9 @@ import { HeatmapComponent } from './heatmap.component.ts';
 import { TabletStatusService } from '../api/tablet-status.service';
 import { TopologyInfoService } from '../api/topology-info.service';
 
+import { Router } from '@angular/router';
+
+import { Dropdown } from 'primeng/primeng';
 import { SelectItem } from 'primeng/primeng';
 
 @Component({
@@ -18,6 +21,10 @@ export class StatusComponent implements OnInit {
 
   // Needed for the router.
   private sub: any;
+  metricKey = 'metric';
+  keyspaceKey = 'keyspace';
+  cellKey = 'cell';
+  typeKey = 'type';
 
   // Needed for the construction of the heatmap.
   // heatmaps is an array of heatmap structs.

web/vtctld2/src/app/status/tablet.component.css

@@ -0,0 +1,13 @@
+table, td {
+  border: 1px solid black
+}
+
+.collapsed-border {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.padded {
+  padding: 10px;
+}
+

web/vtctld2/src/app/status/tablet.component.html

@@ -0,0 +1,9 @@
+<div>
+  <b> {{title}} </b>
+    <table class="collapsed-border" >
+      <tr *ngFor="let d of dataToDisplay">
+        <td class="padded"> {{d.name}} </td>
+        <td class="padded"> {{d.value}} </td>
+      <tr>
+    </table>
+</div>

web/vtctld2/src/app/status/tablet.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CORE_DIRECTIVES } from '@angular/common';
+
+@Component({
+  moduleId: module.id,
+  selector: 'vt-tablet',
+    templateUrl: './tablet.component.html',
+    styleUrls: ['./tablet.component.css'],
+    directives: [
+      CORE_DIRECTIVES,
+    ]
+})
+
+export class TabletComponent implements OnInit {
+  @Input() title: string;
+  @Input() data;
+  dataToDisplay: Array<any> = [];
+
+  ngOnInit() {
+    this.parseData();
+  }
+
+  // parseData goes through the input TabletStats object and stores it to display.
+  parseData() {
+    // TODO(pkulshre): test/update this when backend JSON encoder changed.
+    let temp = { name: 'replication lag: ', value: this.data.Stats.secondsBehindMaster };
+    this.dataToDisplay.push(temp);
+    temp = { name: 'qps: ', value: this.data.Stats.qps };
+    this.dataToDisplay.push(temp);
+    temp = { name: 'Heath Error: ', value: this.data.Stats.healthError };
+    this.dataToDisplay.push(temp);
+  }
+}
+