Merge branch 'master' into compiler-js-module-root

src/app/backend/replicasetlist.go

@@ -33,16 +33,29 @@ type ReplicaSet struct {
 	// Name of the Replica Set.
 	Name string `json:"name"`
 
+	// Human readable description of this Replica Set.
+	Description string `json:"description"`
+
+	// Label of this Replica Set.
+	Labels map[string]string `json:"labels"`
+
 	// Number of pods that are currently running.
 	PodsRunning int `json:"podsRunning"`
 
-	// Number of pods that are desired to run in this replica set.
-	PodsDesired int `json:"podsDesired"`
+	// Number of pods that are pending in this Replica Set.
+	PodsPending int `json:"podsPending"`
 
-	// Container images of the replica set.
+	// Container images of the Replica Set.
 	ContainerImages []string `json:"containerImages"`
 
-	// TODO(bryk): Add service information here.
+	// Age in milliseconds of the oldest replica in the Set.
+	Age uint64 `json:"age"`
+
+	// Internal endpoints of all Kubernetes services have the same label selector as this Replica Set.
+	InternalEndpoints []string `json:"internalEndpoints"`
+
+	// External endpoints of all Kubernetes services have the same label selector as this Replica Set.
+	ExternalEndpoints []string `json:"externalEndpoints"`
 }
 
 // Returns a list of all Replica Sets in the cluster.
@@ -65,9 +78,19 @@ func GetReplicaSetList(client *client.Client) (*ReplicaSetList, error) {
 
 		replicaSetList.ReplicaSets = append(replicaSetList.ReplicaSets, ReplicaSet{
 			Name: replicaSet.ObjectMeta.Name,
-			ContainerImages: containerImages,
+			// TODO(bryk): This field contains test value. Implement it.
+			Description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+				"Nulla metus nibh, iaculis a consectetur vitae, imperdiet pellentesque turpis.",
+			Labels:          replicaSet.ObjectMeta.Labels,
 			PodsRunning:     replicaSet.Status.Replicas,
-			PodsDesired:     replicaSet.Spec.Replicas,
+			PodsPending:     replicaSet.Spec.Replicas - replicaSet.Status.Replicas,
+			ContainerImages: containerImages,
+			// TODO(bryk): This field contains test value. Implement it.
+			Age: 18,
+			// TODO(bryk): This field contains test value. Implement it.
+			InternalEndpoints: []string{"webapp"},
+			// TODO(bryk): This field contains test value. Implement it.
+			ExternalEndpoints: []string{"81.76.02.198:80"},
 		})
 	}
 

src/app/externs/backendapi.js

@@ -59,9 +59,14 @@ backendApi.ReplicaSetList;
 /**
  * @typedef {{
  *   name: string,
+ *   description: string,
+ *   labels: !Object<string, string>,
  *   podsRunning: number,
- *   podsDesired: number,
- *   containerImages: !Array<string>
+ *   podsPending: number,
+ *   containerImages: !Array<string>,
+ *   age: number,
+ *   internalEndpoints: !Array<string>,
+ *   externalEndpoints: !Array<string>
  * }}
  */
 backendApi.ReplicaSet;

src/app/frontend/deploy/deploy.controller.js

@@ -84,7 +84,7 @@ export default class DeployController {
         (savedConfig) => {
           this.isDeployInProgress_ = false;
           this.log_.info('Successfully deployed application: ', savedConfig);
-          this.state_.go('servicelist');
+          this.state_.go('replicasetlist');
         },
         (err) => {
           this.isDeployInProgress_ = false;

src/app/frontend/replicasetlist/replicasetlist.html

@@ -17,15 +17,71 @@ limitations under the License.
 <div layout="row" layout-wrap layout-margin layout-align="center center">
   <md-card ng-repeat="replicaSet in ctrl.replicaSets">
     <md-card-content class="kd-replicaset-card">
-      <div layout="row" layout-align="space-between center">
-        <span flex>{{replicaSet.name}}</span>
-        <md-button flex class="md-icon-button kd-replicaset-card-menu">
+      <div layout="row" layout-align="space-between start">
+        <div flex layout="column">
+          <div flex>{{replicaSet.name}}</div>
+          <div flex class="md-caption">
+            <span ng-repeat="(label, value) in replicaSet.labels"
+                class="kd-replicaset-card-label">
+              {{label}}:{{value}}
+            </span>
+          </div>
+        </div>
+        <md-button flex="initial" class="md-icon-button kd-replicaset-card-menu">
           <md-icon md-font-library="material-icons">more_vert</md-icon>
         </md-button>
       </div>
       <div class="md-caption">
-        <span>{{replicaSet.podsRunning}} pods running</span>
+        <div layout="row">
+          <span flex="60">
+            {{replicaSet.podsRunning}} pods running, {{replicaSet.podsPending}} pending
+          </span>
+          <a flex="40" href="#" class="kd-replicaset-card-logs">Logs</a>
+        </div>
+        <hr class="kd-replicaset-card-divider"></hr>
+        <div layout="row" layout-wrap>
+          <div ng-if="replicaSet.description" flex="100" layout="column"
+              class="kd-replicaset-card-section">
+            <span flex>Description</span>
+            <div flex>
+              {{replicaSet.description}}
+            </div>
+          </div>
+
+          <div flex="60" layout="column" class="kd-replicaset-card-section">
+            <span flex>Image</span>
+            <div flex>
+              <div ng-repeat="image in replicaSet.containerImages"
+                  class="kd-replicaset-card-section-image">
+                {{image}}
+              </div>
+            </div>
+          </div>
+
+          <div flex="40" layout="column" class="kd-replicaset-card-section">
+            <span flex="initial">Age</span>
+            <span flex>{{replicaSet.age}}d</span>
+          </div>
+
+          <div flex="60" layout="column" class="kd-replicaset-card-section">
+            <span flex="initial">Internal Endpoint</span>
+            <div flex>
+              <span ng-repeat="endpoint in replicaSet.internalEndpoints">
+                {{endpoint}}
+              </span>
+            </div>
+          </div>
+
+          <div flex="40" layout="column" class="kd-replicaset-card-section">
+            <span flex="initial">External Endpoint</span>
+            <div flex>
+              <span ng-repeat="endpoint in replicaSet.externalEndpoints">
+                {{endpoint}}
+              </span>
+            </div>
+          </div>
+        </div>
       </div>
     </md-card-content>
-  </md-card >
+  </md-card>
 </div>

src/app/frontend/replicasetlist/replicasetlist.scss

@@ -13,11 +13,42 @@
 // limitations under the License.    
    
 .kd-replicaset-card {        
-  padding-top: 0;    
   width: 400px;    
 }
 
-.kd-replicaset-card-menu {   
-  max-width: 48px;   
+.kd-replicaset-card-logs {
+  color: inherit;
+  text-decoration: none;
 }
 
+.kd-replicaset-card-logs {
+  color: inherit;
+  text-decoration: none;
+}
+
+.kd-replicaset-card-logs:after {
+  content: '\25BC';
+}
+
+.kd-replicaset-card-logs:hover {
+  text-decoration: underline;
+}
+
+.kd-replicaset-card-divider {
+  border: 0;
+  border-top: 1px solid;
+}
+
+.kd-replicaset-card-section {
+  margin-top: 1em;
+}
+
+.kd-replicaset-card-section-image {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kd-replicaset-card-label {
+  margin-right: 1em;
+}