github/kubernetes
1
0
Fork 0
mirror of https://github.com/k3s-io/kubernetes.git synced 2025-09-06 11:42:14 +00:00
Code Issues Projects Releases Wiki Activity

Pretty up the demo a little.

Browse Source 
Use images and some better formatting.  Also add scripts to help prevent typos.

This based on an improved version done by Julia Ferraioli.  She came up with the cool images.
This commit is contained in:
Joe Beda
2014-08-19 22:16:53 -07:00
parent 45aaff9993
commit f8e2f927f6
23 changed files with 375 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
examples/update-demo/local/index.html
View File

@@ -13,17 +13,23 @@ 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>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"></link>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"></link>
</head>
<body ng-controller="ButtonsCtrl">
<div ng-repeat="server in servers" class="server" style="background: #FFF">
<b>{{server.id}}</b>
<div class="img" style="background: {{server.color}};"> </div>
<a href="http://{{server.ip}}:8080/data.json">{{server.ip}}</a>
</div>
<div ng-repeat="server in servers" class="pod">
<img src="http://{{server.ip}}:8080/{{server.image}}" height="100px" width="100px" />
<b>ID:</b> {{server.id}}<br>
<b>Host:</b> <a href="http://{{server.ip}}:8080/data.json">{{server.host}}</a><br>
<b>Image:</b> {{server.dockerImage}}<br>
<b>Labels:</b>
<ul>
<li ng-repeat="(key,value) in server.labels">{{key}}={{value}}</li>
</ul>
</div>
</body>
</html>

103
examples/update-demo/local/script.js
View File

@@ -16,72 +16,77 @@ limitations under the License.
var base = "http://localhost:8001/api/v1beta1/";
var updateColor = function($http, server) {
$http.get("http://" + server.ip + ":8080/data.json")
var updateImage = function($http, server) {
$http.get("http://" + server.ip + ":8080/data.json")
.success(function(data) {
server.color = data.color;
console.log(data);
})
server.image = data.image;
console.log(data);
})
.error(function(data) {
server.color = "#000";
console.log(data);
});
server.image = ""
console.log(data);
});
};
var updateServer = function($http, server) {
$http.get(base + "pods/" + server.id)
.success(function(data) {
console.log(data);
server.ip = data.currentState.hostIP;
updateColor($http, server);
})
.error(function(data) {
console.log(data);
});
$http.get(base + "pods/" + server.id)
.success(function(data) {
console.log(data);
server.ip = data.currentState.hostIP;
server.labels = data.labels;
server.host = data.currentState.host.split('.')[0]
server.dockerImage = data.currentState.info["update-demo-container"].Config.Image
updateImage($http, server);
})
.error(function(data) {
console.log(data);
});
};
var updateData = function($scope, $http) {
var servers = $scope.servers
for (var i = 0; i < servers.length; ++i) {
var server = servers[i];
updateServer($http, server);
}
var servers = $scope.servers
for (var i = 0; i < servers.length; ++i) {
var server = servers[i];
updateServer($http, server);
}
};
var ButtonsCtrl = function ($scope, $http, $interval) {
$scope.servers = [];
update($scope, $http);
$interval(angular.bind({}, update, $scope, $http), 2000);
$scope.servers = [];
update($scope, $http);
$interval(angular.bind({}, update, $scope, $http), 2000);
};
var getServer = function($scope, id) {
var servers = $scope.servers;
for (var i = 0; i < servers.length; ++i) {
if (servers[i].id == id) {
return servers[i];
}
var servers = $scope.servers;
for (var i = 0; i < servers.length; ++i) {
if (servers[i].id == id) {
return servers[i];
}
return null;
}
return null;
};
var update = function($scope, $http) {
if (!$http) {
console.log("No HTTP!");
return;
}
$http.get(base + "pods")
.success(function(data) {
console.log(data);
var newServers = [];
for (var i = 0; i < data.items.length; ++i) {
var server = getServer($scope, data.items[i].id);
if (server == null) {
server = { "id": data.items[i].id };
}
newServers.push(server);
}
$scope.servers = newServers;
updateData($scope, $http)
if (!$http) {
console.log("No HTTP!");
return;
}
$http.get(base + "pods")
.success(function(data) {
console.log(data);
var newServers = [];
for (var i = 0; i < data.items.length; ++i) {
var server = getServer($scope, data.items[i].id);
if (server == null) {
server = { "id": data.items[i].id };
}
newServers.push(server);
}
$scope.servers = newServers;
updateData($scope, $http)
})
.error(function(data) {
console.log("ERROR: " + data);
})
.error(function(data) { console.log("ERROR: " + data); })
};

22
examples/update-demo/local/style.css
View File

@@ -14,19 +14,27 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.img {
img {
height: 100px;
width: 100px;
background-size: 100px 100px;
margin-left: 25px;
float: right;
background-size: 100px 100px;
background-color: black;
margin-left: 10px;
border: none;
}
.server {
ul {
margin-top: 0;
margin-bottom: 0;
}
.pod {
font-family: Roboto, Open Sans, arial;
width: 150px;
height: 150px;
border: 1px solid black;
border-radius: 5px;
padding: 10px;
margin: 10px;
display: inline-block;
padding: 3px;
background-color: #D1D1D1;
}