From 80729ef3e6d781d867f773c64e37352c8ea1dc42 Mon Sep 17 00:00:00 2001 From: Philippe Modard Date: Mon, 19 Sep 2016 19:01:02 -0400 Subject: [PATCH 1/7] get deployments --- script.js | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/script.js b/script.js index 9d04c45..83a5901 100644 --- a/script.js +++ b/script.js @@ -30,6 +30,7 @@ var truncate = function(str, width, left) { var pods = []; var services = []; var controllers = []; +var deployments = []; var uses = {}; var groups = {}; @@ -204,7 +205,7 @@ var renderNodes = function() { var eltDiv = $('
'); - eltDiv.html('Node

' + + eltDiv.html('Node

' + truncate(value.metadata.name, 6) + ''); div.append(eltDiv); @@ -221,7 +222,7 @@ var renderGroups = function() { var y = 10; var serviceLeft = 0; var groupOrder = makeGroupOrder(); - var counts = {} + var counts = {} $.each(groupOrder, function(ix, key) { list = groups[key]; // list = value; @@ -241,7 +242,7 @@ var renderGroups = function() { } eltDiv = $('
'); - eltDiv.html('' + + eltDiv.html('' + truncate(value.metadata.name, 8, true) + (value.metadata.labels.version ? "
" + value.metadata.labels.version : "") + "

" + "(" + (value.spec.nodeName ? truncate(value.spec.nodeName, 6) : "None") +")" + @@ -249,9 +250,9 @@ var renderGroups = function() { } else if (value.type == "service") { eltDiv = $('
'); - eltDiv.html('' + + eltDiv.html('' + value.metadata.name + - (value.metadata.labels.version ? "

" + value.metadata.labels.version : "") + + (value.metadata.labels.version ? "

" + value.metadata.labels.version : "") + (value.spec.clusterIP ? "

" + value.spec.clusterIP : "") + (value.status.loadBalancer && value.status.loadBalancer.ingress ? "
" + value.status.loadBalancer.ingress[0].ip + "" : "") + ''); @@ -265,9 +266,9 @@ var renderGroups = function() { var left = minLeft > calcLeft ? minLeft : calcLeft; eltDiv = $('
'); - eltDiv.html('' + + eltDiv.html('' + value.metadata.name + - (value.metadata.labels.version ? "

" + value.metadata.labels.version : "") + + (value.metadata.labels.version ? "

" + value.metadata.labels.version : "") + ''); } div.append(eltDiv); @@ -334,10 +335,17 @@ var loadData = function() { }); }); - $.when(req1, req2, req3, req4).then(function() { - deferred.resolve(); + var req5 = $.getJSON("/apis/extensions/v1beta1/deployments?labelSelector=visualize%3Dtrue", function( data ) { + deployments = data; + $.each(data.items, function(key, val) { + val.type = 'deployments'; + console.log("Deployment ID = " + val.metadata.name, val) + }); }); + $.when(req1, req2, req3, req4, req5).then(function() { + deferred.resolve(); + }); return deferred; } @@ -346,6 +354,7 @@ function refresh(instance) { pods = []; services = []; controllers = []; + deployments = []; nodes = []; uses = {}; groups = {}; From ee842ed7372da1cdb7d503fdece2dc15ceca2907 Mon Sep 17 00:00:00 2001 From: Philippe Modard Date: Mon, 19 Sep 2016 19:23:04 -0400 Subject: [PATCH 2/7] clean connect uses --- script.js | 38 ++++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/script.js b/script.js index 83a5901..7638abe 100644 --- a/script.js +++ b/script.js @@ -67,7 +67,6 @@ var matchesLabelQuery = function(labels, selector) { } var connectControllers = function() { - connectUses(); for (var i = 0; i < controllers.items.length; i++) { var controller = controllers.items[i]; //console.log("controller: " + controller.metadata.name) @@ -130,26 +129,26 @@ var connectUses = function() { if (colorIx >= colors.length) { colorIx = 0;}; $.each(pods.items, function(i, pod) { var podKey = pod.metadata.labels.name; - //console.log('connect uses key: ' +key + ', ' + podKey); + // console.log('connect uses key: ' +key + ', ' + podKey); if (podKey == key) { $.each(list, function(j, serviceId) { - //console.log('connect: ' + 'pod-' + pod.metadata.name + ' to service-' + serviceId); + // console.log('connect: ' + 'pod-' + pod.metadata.name + ' to service-' + serviceId); jsPlumb.connect( - { - source: 'pod-' + pod.metadata.name, - target: 'service-' + serviceId, - endpoint: "Blank", - //anchors:["Bottom", "Top"], - anchors:[[ 0.5, 1, 0, 1, -30, 0 ], "Top"], - //connector: "Straight", - connector: ["Bezier", { curviness:75 }], - paintStyle:{lineWidth:2,strokeStyle:color}, - overlays:[ - [ "Arrow", { width:15, length:30, location: 0.3}], - [ "Arrow", { width:15, length:30, location: 0.6}], - [ "Arrow", { width:15, length:30, location: 1}], - ], - }); + { + source: 'pod-' + pod.metadata.name, + target: 'service-' + serviceId, + endpoint: "Blank", + //anchors:["Bottom", "Top"], + anchors:[[ 0.5, 1, 0, 1, -30, 0 ], "Top"], + //connector: "Straight", + connector: ["Bezier", { curviness:75 }], + paintStyle:{lineWidth:2,strokeStyle:color}, + overlays:[ + [ "Arrow", { width:15, length:30, location: 0.3}], + [ "Arrow", { width:15, length:30, location: 0.6}], + [ "Arrow", { width:15, length:30, location: 1}], + ], + }); }); } }); @@ -194,7 +193,6 @@ var renderNodes = function() { var y = 25; var x = 100; $.each(nodes.items, function(index, value) { - console.log(value); var div = $('
'); var ready = 'not_ready'; $.each(value.status.conditions, function(index, condition) { @@ -234,7 +232,6 @@ var renderGroups = function() { $.each(list, function(index, value) { //console.log("render groups: " + value.type + ", " + value.metadata.name + ", " + index) var eltDiv = null; - console.log(value); var phase = value.status.phase ? value.status.phase.toLowerCase() : ''; if (value.type == "pod") { if ('deletionTimestamp' in value.metadata) { @@ -365,6 +362,7 @@ function refresh(instance) { $('#sheet').empty(); renderNodes(); renderGroups(); + connectUses(); connectControllers(); setTimeout(function() { From 40aece656a1ea7794a2ed630efaf5d2801996a39 Mon Sep 17 00:00:00 2001 From: Philmod Date: Mon, 19 Sep 2016 19:57:47 -0400 Subject: [PATCH 3/7] show and connect deployments to pods --- script.js | 47 +++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 39 insertions(+), 8 deletions(-) diff --git a/script.js b/script.js index 7638abe..6e62886 100644 --- a/script.js +++ b/script.js @@ -40,7 +40,7 @@ var insertByName = function(index, value) { return; } // console.log("type = " + value.type + " labels = " + value.metadata.name); - // var list = groups[value.metadata.name]; + // var list = groups[value.metadata.name]; var key = value.metadata.labels.name; var list = groups[key]; if (!list) { @@ -54,6 +54,7 @@ var groupByName = function() { $.each(pods.items, insertByName); $.each(controllers.items, insertByName); $.each(services.items, insertByName); + $.each(deployments.items, insertByName); }; var matchesLabelQuery = function(labels, selector) { @@ -66,6 +67,28 @@ var matchesLabelQuery = function(labels, selector) { return match; } +var connectDeployments = function() { + for (var i = 0; i < deployments.items.length; i++) { + var deployment = deployments.items[i]; + for (var j = 0; j < pods.items.length; j++) { + var pod = pods.items[j]; + if (pod.metadata.labels.name == deployment.metadata.labels.name) { + if (deployment.metadata.labels.version && pod.metadata.labels.version && (deployment.metadata.labels.version != pod.metadata.labels.version)) { + continue; + } + jsPlumb.connect({ + source: 'deployment-' + deployment.metadata.name, + target: 'pod-' + pod.metadata.name, + anchors:["Bottom", "Bottom"], + paintStyle:{lineWidth:5,strokeStyle:'rgb(51,105,232)'}, + joinStyle:"round", + endpointStyle:{ fillStyle: 'rgb(51,105,232)', radius: 7 }, + connector: ["Flowchart", { cornerRadius:5 }]}); + } + } + } +} + var connectControllers = function() { for (var i = 0; i < controllers.items.length; i++) { var controller = controllers.items[i]; @@ -88,6 +111,9 @@ var connectControllers = function() { } } } +} + +var connectServices = function() { for (var i = 0; i < services.items.length; i++) { var service = services.items[i]; // if (service.metadata.name == 'kubernetes' || service.metadata.name == 'skydns' || service.metadata.name == 'kubernetes-ro') { continue; } @@ -230,10 +256,10 @@ var renderGroups = function() { var div = $('
'); var x = 100; $.each(list, function(index, value) { - //console.log("render groups: " + value.type + ", " + value.metadata.name + ", " + index) + // console.log("render groups: " + value.type + ", " + value.metadata.name + ", " + index) var eltDiv = null; var phase = value.status.phase ? value.status.phase.toLowerCase() : ''; - if (value.type == "pod") { + if (value.type === "pod") { if ('deletionTimestamp' in value.metadata) { phase = 'terminating'; } @@ -244,7 +270,7 @@ var renderGroups = function() { (value.metadata.labels.version ? "
" + value.metadata.labels.version : "") + "

" + "(" + (value.spec.nodeName ? truncate(value.spec.nodeName, 6) : "None") +")" + ''); - } else if (value.type == "service") { + } else if (value.type === "service") { eltDiv = $('
'); eltDiv.html('' + @@ -254,14 +280,18 @@ var renderGroups = function() { (value.status.loadBalancer && value.status.loadBalancer.ingress ? "
" + value.status.loadBalancer.ingress[0].ip + "" : "") + ''); } else { - var key = 'controller-' + value.metadata.labels.name; + type = 'controller'; + if (value.type === 'deployments') { + type = 'deployment'; + } + var key = type + '-' + value.metadata.labels.name; counts[key] = key in counts ? counts[key] + 1 : 0; //eltDiv = $('
'); var minLeft = 900; var calcLeft = 400 + (value.status.replicas * 130); var left = minLeft > calcLeft ? minLeft : calcLeft; - eltDiv = $('
'); eltDiv.html('' + value.metadata.name + @@ -336,7 +366,6 @@ var loadData = function() { deployments = data; $.each(data.items, function(key, val) { val.type = 'deployments'; - console.log("Deployment ID = " + val.metadata.name, val) }); }); @@ -362,8 +391,10 @@ function refresh(instance) { $('#sheet').empty(); renderNodes(); renderGroups(); - connectUses(); + connectDeployments(); connectControllers(); + connectServices(); + connectUses(); setTimeout(function() { refresh(instance); From 47f8a4fe13a3a536ed6f1de2c713b3320340df29 Mon Sep 17 00:00:00 2001 From: Philmod Date: Mon, 10 Oct 2016 18:51:32 -0400 Subject: [PATCH 4/7] show containers not running yet --- script.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/script.js b/script.js index 6e62886..d9d71f6 100644 --- a/script.js +++ b/script.js @@ -211,7 +211,6 @@ var makeGroupOrder = function() { }); groupOrder.sort(function(a, b) { return groupScores[a] - groupScores[b]; }); - //console.log(groupOrder); return groupOrder; }; @@ -223,7 +222,7 @@ var renderNodes = function() { var ready = 'not_ready'; $.each(value.status.conditions, function(index, condition) { if (condition.type === 'Ready') { - ready = (condition.status === 'True' ? 'ready' : 'not_ready' ) + ready = (condition.status === 'True' ? 'ready' : 'not_ready' ); } }); @@ -263,11 +262,21 @@ var renderGroups = function() { if ('deletionTimestamp' in value.metadata) { phase = 'terminating'; } + $.each(value.status.conditions, function(index, condition) { + if (condition.type === 'Ready' && condition.status === 'False') { + phase = 'pending' + } + }); + // Get the last part of pod's id, which is unique. + var arr = /(\w+)-(\w+)-(\w+)/.exec(value.metadata.name); + var name = arr[3]; + eltDiv = $('
'); - eltDiv.html('' + - truncate(value.metadata.name, 8, true) + - (value.metadata.labels.version ? "
" + value.metadata.labels.version : "") + "

" + + eltDiv.html('' + '..-' + + truncate(name, 8, true) + + // (value.metadata.labels.version ? "
" + value.metadata.labels.version : "") + + "

" + "(" + (value.spec.nodeName ? truncate(value.spec.nodeName, 6) : "None") +")" + ''); } else if (value.type === "service") { @@ -301,7 +310,7 @@ var renderGroups = function() { div.append(eltDiv); x += 130; }); - y += 400; + y += 300; serviceLeft += 200; elt.append(div); }); @@ -344,8 +353,6 @@ var loadData = function() { var req3 = $.getJSON("/api/v1/services?labelSelector=visualize%3Dtrue", function( data ) { services = data; - //console.log("loadData(): Services"); - //console.log(services); $.each(data.items, function(key, val) { val.type = 'service'; //console.log("service ID = " + val.metadata.name) @@ -354,8 +361,6 @@ var loadData = function() { var req4 = $.getJSON("/api/v1/nodes", function( data ) { nodes = data; - //console.log("loadData(): Services"); - //console.log(nodes); $.each(data.items, function(key, val) { val.type = 'node'; //console.log("service ID = " + val.metadata.name) @@ -387,6 +392,7 @@ function refresh(instance) { $.when(loadData()).then(function() { + console.log('refreshing...') groupByName(); $('#sheet').empty(); renderNodes(); From 64969f06ceb42c5ccfdd71636b2922b7efae61a7 Mon Sep 17 00:00:00 2001 From: Philmod Date: Sat, 15 Oct 2016 18:02:11 -0400 Subject: [PATCH 5/7] fix for latest kubernetes version --- script.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/script.js b/script.js index d9d71f6..22f4bf4 100644 --- a/script.js +++ b/script.js @@ -259,14 +259,11 @@ var renderGroups = function() { var eltDiv = null; var phase = value.status.phase ? value.status.phase.toLowerCase() : ''; if (value.type === "pod") { - if ('deletionTimestamp' in value.metadata) { + if (value.status.phase == 'Failed' || 'deletionTimestamp' in value.metadata) { phase = 'terminating'; + } else if (value.status.phase == 'Pending') { + phase = 'pending' } - $.each(value.status.conditions, function(index, condition) { - if (condition.type === 'Ready' && condition.status === 'False') { - phase = 'pending' - } - }); // Get the last part of pod's id, which is unique. var arr = /(\w+)-(\w+)-(\w+)/.exec(value.metadata.name); var name = arr[3]; From 05ffebb7de80da9ced0897aa09115c8594c18745 Mon Sep 17 00:00:00 2001 From: Philmod Date: Tue, 18 Oct 2016 22:17:30 -0400 Subject: [PATCH 6/7] bigger font, more compact to see 4 rows --- script.js | 15 ++++++++------- style.css | 19 +++++++++++++++++++ 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/script.js b/script.js index 22f4bf4..d5788cf 100644 --- a/script.js +++ b/script.js @@ -229,7 +229,7 @@ var renderNodes = function() { var eltDiv = $('
'); eltDiv.html('Node

' + - truncate(value.metadata.name, 6) + + truncate(value.metadata.name, 5) + ''); div.append(eltDiv); @@ -274,16 +274,17 @@ var renderGroups = function() { truncate(name, 8, true) + // (value.metadata.labels.version ? "
" + value.metadata.labels.version : "") + "

" + - "(" + (value.spec.nodeName ? truncate(value.spec.nodeName, 6) : "None") +")" + + "(" + (value.spec.nodeName ? truncate(value.spec.nodeName, 5) : "None") +")" + ''); } else if (value.type === "service") { eltDiv = $('
'); eltDiv.html('' + value.metadata.name + - (value.metadata.labels.version ? "

" + value.metadata.labels.version : "") + - (value.spec.clusterIP ? "

" + value.spec.clusterIP : "") + - (value.status.loadBalancer && value.status.loadBalancer.ingress ? "
" + value.status.loadBalancer.ingress[0].ip + "" : "") + + ' service' + + // (value.metadata.labels.version ? "

" + value.metadata.labels.version : "") + + // (value.spec.clusterIP ? "

" + value.spec.clusterIP : "") + + // (value.status.loadBalancer && value.status.loadBalancer.ingress ? "
" + value.status.loadBalancer.ingress[0].ip + "" : "") + ''); } else { type = 'controller'; @@ -301,13 +302,13 @@ var renderGroups = function() { '" style="left: ' + (left + counts[key] * 100) + '; top: ' + (y + 100 + counts[key] * 100) + '"/>'); eltDiv.html('' + value.metadata.name + - (value.metadata.labels.version ? "

" + value.metadata.labels.version : "") + + // (value.metadata.labels.version ? "

" + value.metadata.labels.version : "") + ''); } div.append(eltDiv); x += 130; }); - y += 300; + y += 200; serviceLeft += 200; elt.append(div); }); diff --git a/style.css b/style.css index 4198bf3..8d618ca 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ + .wide { width: 150px; } @@ -7,16 +8,34 @@ color: white; } +.service span { + font-size: 1.7em; + line-height: 1.7em; +} + .controller { background-color:rgb(51,105,232); color: white; } +.controller span { + font-size: 1.7em; + line-height: 1.7em; +} + .pod { width: 100px; background-color:#eeeeef; } +.pod span { + font-size: 1.3em; +} + +.node span { + font-size: 1.3em; +} + .pending { background-color:yellow; } From 9c164476a5f46fc6b2394f3dc2148070f6cc61b6 Mon Sep 17 00:00:00 2001 From: Philmod Date: Wed, 19 Oct 2016 22:20:09 -0400 Subject: [PATCH 7/7] fix bug when the number of nodes decreases --- script.js | 11 +++++++---- style.css | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index d5788cf..78d77c5 100644 --- a/script.js +++ b/script.js @@ -215,8 +215,12 @@ var makeGroupOrder = function() { }; var renderNodes = function() { - var y = 25; - var x = 100; + var elt = $('.nodesbar'); + var y = 25; + var x = 100; + + elt.empty(); + $.each(nodes.items, function(index, value) { var div = $('
'); var ready = 'not_ready'; @@ -233,7 +237,6 @@ var renderNodes = function() { ''); div.append(eltDiv); - var elt = $('.nodesbar'); elt.append(div); x += 120; @@ -402,7 +405,7 @@ function refresh(instance) { setTimeout(function() { refresh(instance); - }, 2000); + }, 250); }); } diff --git a/style.css b/style.css index 8d618ca..ea47d87 100644 --- a/style.css +++ b/style.css @@ -33,7 +33,7 @@ } .node span { - font-size: 1.3em; + font-size: 1.5em; } .pending {