Initial website add.

duda · Oct 1, 2014 · 219ceac · 219ceac
1 parent 1c29b50
commit 219ceac
Show file tree

Hide file tree

Showing 7 changed files with 1,101 additions and 0 deletions.
diff --git a/www/box.ng b/www/box.ng
@@ -0,0 +1,32 @@
+<!--
+Copyright 2014 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div style="margin-top: 10px">
+<div class="k8s-title-font k8s-box">
+  {{ groupName }}
+
+<div ng-if="group.kind != 'grouping'">
+  <div class="content k8s-item k8s-inline" ng-repeat="item in group">
+    <div class="k8s-title-font k8s-font-regular">
+      <a href="#/pods/{{ item.id }}">{{ item.id }}</a>
+    </div>
+  </div>
+</div>
+<div ng-if="group.kind == 'grouping'">
+  <div ng-repeat="(groupName,group) in group.items" ng-include="'box.ng'">
+  </div>
+</div>
+</div>
+</div>
diff --git a/www/index.html b/www/index.html
@@ -0,0 +1,40 @@
+<!--
+Copyright 2014 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html ng-app="k8s">
+  <head>
+    <title>Kubernetes</title>
+    <link rel="stylesheet" href="bootstrap.min.css">
+    <link href='https://fonts.googleapis.com/css?family=Ubuntu%20Mono' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
+    <!--
+    For local/network free development.
+    <script src="/angular.min.js"></script>
+    <!-- -->
+    <script src="podcontroller.js"></script>
+    <link rel="stylesheet" href="k8s-style.css">
+  </head>
+  <body>
+    <div class="navbar">
+      <div class="navbar-logo">
+        <img src="logotext.svg" id="nav-logo-img" alt="logo">
+      </div>
+    </div>
+
+    <div ng-view></div>
+  </body>
+</html>
diff --git a/www/logotext.svg b/www/logotext.svg
diff --git a/www/partials/groups.html b/www/partials/groups.html
@@ -0,0 +1,20 @@
+<!--
+Copyright 2014 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="content" style="width: 90%; margin-left: 5%" ng-if="selector && selector.length > 0">
+  <div class="k8s-inline">{{selector}}</div>
+  <div class="k8s-inline k8s-button" ng-click="controller.clearSelector()">X</div>
+</div>
+<div ng-repeat="(groupName,group) in groups.items" ng-include="'box.ng'">
diff --git a/www/partials/pod.html b/www/partials/pod.html
@@ -0,0 +1,63 @@
+<!--
+Copyright 2014 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="content k8s-title-font k8s-font-regular">
+  <div class="navbar title k8s-title-font">
+    {{pod.id}}
+  </div>
+  {{pod.currentState.status}} on <a href="#/groups/host/selector/$.DesiredState.Host={{pod.currentState.host}}">{{pod.currentState.host}}</a>
+  <div>
+    Created: {{pod.creationTimestamp}}
+  </div>
+  <div>
+    Pod Networking : {{pod.currentState.podIP}} 
+    <span ng-repeat="container in pod.desiredState.manifest.containers">
+      <span ng-repeat="port in container.ports">
+	:{{port.containerPort}}
+      </span>
+    </span>
+  </div>
+  <div>
+    Host Networking
+    {{pod.currentState.hostIP}}
+    <span ng-repeat="container in pod.desiredState.manifest.containers">
+      <span ng-repeat="port in container.ports">
+	:{{port.hostPort}}
+      </span>
+    </span>
+  </div>
+  <div>
+    <div>
+      Labels:
+      <div class="content">
+	<div ng-repeat="(label, value) in pod.labels">
+	  {{label}} - {{value}}
+	</div>
+      </div>
+    </div>
+
+    Containers:
+    <div class="content">
+      <table width="400">
+	<tr><td>Name</td><td>Image</td><td>Restarts</td></tr>
+	<tr ng-repeat="container in pod.desiredState.manifest.containers">
+	  <td>{{container.name}}</td>
+	  <td>{{container.image}}</td>
+	  <td>{{pod.currentState.info[container.name].restartCount}}</td>
+	</tr>
+      </table>
+    </div>
+  </div>
+</div>
diff --git a/www/podcontroller.js b/www/podcontroller.js
@@ -0,0 +1,168 @@
+/**
+Copyright 2014 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+var k8sApp = angular.module('k8s', ['ngRoute']);
+
+function PodController() {}
+
+var apiBase = '/api/v1beta1/';
+
+PodController.prototype.handlePod = function(podId) {
+    this.scope.loading = true;
+    this.http.get(apiBase + "pods/" + podId)
+    .success(angular.bind(this, function(data) {
+		this.scope.pod = data;
+		this.scope.loading = false;
+	    }))
+    .error(angular.bind(this, this.handleError));
+};
+
+/**
+ * Generic AJAX error handler.  Dumps info to console.
+ */
+PodController.prototype.handleError = function(data, status, headers, config) {
+	console.log("Error (" + status + "): " + data);
+	this.scope_.loading = false;
+};
+
+k8sApp.controller('PodCtrl', function ($scope, $http, $routeParams) {
+	$scope.controller = new PodController();
+	$scope.controller.http = $http;
+        $scope.controller.scope = $scope;
+        $scope.controller.handlePod($routeParams.podId);
+    });
+
+function GroupController() {}
+
+GroupController.prototype.handlePath = function(path) {
+    var parts = path.split("/")
+    // split leaves an empty string at the beginning.
+    parts = parts.slice(1);
+    console.log(parts)
+
+    if (parts.length == 0) {
+	return;
+    }
+    this.handleGroups(parts.slice(1));
+};
+
+
+GroupController.prototype.clearSelector = function() {
+    window.location.hash = "/groups/" + this.groupBy.join("/") + "/selector";
+};
+
+GroupController.prototype.handleGroups = function(parts, selector) {
+    this.groupBy = parts;
+    this.scope.loading = true;
+    this.scope.selector = selector;
+    var url = apiBase + "pods";
+    if (selector && selector.length > 0) {
+	this.scope.selectorPieces = selector.split(",");
+	var labels = [];
+	var fields = [];
+	for (var i = 0; i < this.scope.selectorPieces.length; i++) {
+	    var piece = this.scope.selectorPieces[i];
+	    if (piece[0] == '$') {
+		fields.push(piece.slice(2));
+	    } else {
+		labels.push(piece);
+	    }
+	}
+	url = url + "?labels=" + encodeURI(labels.join(","));
+	if (fields.length > 0) {
+	  url += "&fields=" + encodeURI(fields.join(","));
+        }
+    }
+    this.http.get(url)
+    .success(angular.bind(this, function(data) {
+                this.addLabel("type", "pod", data.items);
+                for (var i = 0; i < data.items.length; ++i) {
+		    data.items[i].labels["host"] = data.items[i].currentState.host;
+                }
+		this.scope.groups = this.groupData(data.items, 0);
+		this.scope.loading = false;
+	    }))
+    .error(angular.bind(this, this.handleError));
+};
+
+GroupController.prototype.addLabel = function(key, value, items) {
+    for (var i = 0; i < items.length; i++) {
+	items[i].labels[key] = value;
+    }
+};
+
+GroupController.prototype.groupData = function(items, index) {
+    var result = {
+	"items": {},
+	"kind": "grouping"
+    };
+    for (var i = 0; i < items.length; i++) {
+	key = items[i].labels[this.groupBy[index]];
+	if (!key) {
+		key = "";
+	}
+	list = result.items[key];
+        if (!list) {
+		list = [];
+		result.items[key] = list;
+	}
+	list.push(items[i]);
+    }
+
+    if (index + 1 < this.groupBy.length) {
+	for (var key in result.items) {
+	    result.items[key] = this.groupData(result.items[key], index + 1);
+	}
+    }
+    return result;
+};
+
+/**
+ * Generic AJAX error handler.  Dumps info to console.
+ */
+GroupController.prototype.handleError = function(data, status, headers, config) {
+	console.log("Error (" + status + "): " + data);
+	this.scope.loading = false;
+};
+
+k8sApp.controller('GroupCtrl', function ($scope, $http, $route, $routeParams) {
+	$scope.controller = new GroupController();
+	$scope.controller.http = $http;
+        $scope.controller.scope = $scope;
+        $scope.controller.route = $route;
+	$scope.controller.routeParams = $routeParams;
+	var groups = $routeParams.grouping;
+	if (!groups) {
+	    groups = "";
+	}
+	$scope.controller.handleGroups(groups.split("/"), $routeParams.selector);
+    });
+
+
+k8sApp.config(['$routeProvider',
+		function($routeProvider) {
+			  $routeProvider.
+			      when('/groups/:grouping*?\/selector/:selector?', {
+				      templateUrl: 'partials/groups.html',
+					  controller: 'GroupCtrl'
+					  }).
+			      when('/pods/:podId', {
+				      templateUrl: 'partials/pod.html',
+					  controller: 'PodCtrl'
+					  }).
+			      otherwise({
+				      redirectTo: '/error'
+					  });
+		  }]);