From f8466c04563d8076f06a5366e9128d0a500e656b Mon Sep 17 00:00:00 2001 From: Ian Lewis Date: Tue, 10 May 2016 14:55:50 +0900 Subject: [PATCH 1/3] Cleaned up whitespace 1. Changed tabs to spaces 2. Changed a bit of formatting. --- script.js | 434 +++++++++++++++++++++++++++--------------------------- 1 file changed, 217 insertions(+), 217 deletions(-) diff --git a/script.js b/script.js index 9d04c45..65a1c87 100644 --- a/script.js +++ b/script.js @@ -17,14 +17,14 @@ limitations under the License. var truncate = function(str, width, left) { if (!str) return ""; - if (str.length > width) { + if (str.length > width) { if (left) { - return str.slice(0, width) + "..."; + return str.slice(0, width) + "..."; } else { - return "..." + str.slice(str.length - width, str.length); + return "..." + str.slice(str.length - width, str.length); } - } - return str; + } + return str; } var pods = []; @@ -39,162 +39,162 @@ 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) { - list = []; - groups[key] = list; - } - list.push(value); + var list = groups[key]; + if (!list) { + list = []; + groups[key] = list; + } + list.push(value); }; var groupByName = function() { - $.each(pods.items, insertByName); - $.each(controllers.items, insertByName); - $.each(services.items, insertByName); + $.each(pods.items, insertByName); + $.each(controllers.items, insertByName); + $.each(services.items, insertByName); }; var matchesLabelQuery = function(labels, selector) { - var match = true; - $.each(selector, function(key, value) { - if (labels[key] != value) { - match = false; - } - }); - return match; + var match = true; + $.each(selector, function(key, value) { + if (labels[key] != value) { + match = false; + } + }); + return match; } var connectControllers = function() { connectUses(); - for (var i = 0; i < controllers.items.length; i++) { - var controller = controllers.items[i]; + for (var i = 0; i < controllers.items.length; i++) { + var controller = controllers.items[i]; //console.log("controller: " + controller.metadata.name) - for (var j = 0; j < pods.items.length; j++) { - var pod = pods.items[j]; - if (pod.metadata.labels.name == controller.metadata.labels.name) { + for (var j = 0; j < pods.items.length; j++) { + var pod = pods.items[j]; + if (pod.metadata.labels.name == controller.metadata.labels.name) { if (controller.metadata.labels.version && pod.metadata.labels.version && (controller.metadata.labels.version != pod.metadata.labels.version)) { continue; } //console.log('connect controller: ' + 'controller-' + controller.metadata.name + ' to pod-' + pod.metadata.name); - jsPlumb.connect({ - source: 'controller-' + controller.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 }]}); - } - } - } - for (var i = 0; i < services.items.length; i++) { - var service = services.items[i]; + jsPlumb.connect({ + source: 'controller-' + controller.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 }] + }); + } + } + } + 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; } - for (var j = 0; j < pods.items.length; j++) { - var pod = pods.items[j]; + for (var j = 0; j < pods.items.length; j++) { + var pod = pods.items[j]; //console.log('connect service: ' + 'service-' + service.metadata.name + ' to pod-' + pod.metadata.name); - if (matchesLabelQuery(pod.metadata.labels, service.spec.selector)) { - jsPlumb.connect( - { - source: 'service-' + service.metadata.name, - target: 'pod-' + pod.metadata.name, - anchors:["Bottom", "Top"], - paintStyle:{lineWidth:5,strokeStyle:'rgb(0,153,57)'}, - endpointStyle:{ fillStyle: 'rgb(0,153,57)', radius: 7 }, - connector:["Flowchart", { cornerRadius:5 }]}); - } - } - } + if (matchesLabelQuery(pod.metadata.labels, service.spec.selector)) { + jsPlumb.connect({ + source: 'service-' + service.metadata.name, + target: 'pod-' + pod.metadata.name, + anchors:["Bottom", "Top"], + paintStyle:{lineWidth:5,strokeStyle:'rgb(0,153,57)'}, + endpointStyle:{ fillStyle: 'rgb(0,153,57)', radius: 7 }, + connector:["Flowchart", { cornerRadius:5 }] + }); + } + } + } }; var colors = [ - 'rgb(213,15,37)', - 'rgb(238,178,17)', - 'rgb(17,178,238)' + 'rgb(213,15,37)', + 'rgb(238,178,17)', + 'rgb(17,178,238)' ] var connectUses = function() { - var colorIx = 0; - var keys = []; - $.each(uses, function(key) { - keys.push(key); - }); - keys.sort(function(a, b) { return a > b; }); - $.each(keys, function(idx) { - var key = keys[idx]; - var list = uses[key]; - var color = colors[colorIx]; - colorIx++; - if (colorIx >= colors.length) { colorIx = 0;}; - $.each(pods.items, function(i, pod) { + var colorIx = 0; + var keys = []; + $.each(uses, function(key) { + keys.push(key); + }); + keys.sort(function(a, b) { return a > b; }); + $.each(keys, function(idx) { + var key = keys[idx]; + var list = uses[key]; + var color = colors[colorIx]; + colorIx++; + 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); - if (podKey == key) { - $.each(list, function(j, serviceId) { + if (podKey == key) { + $.each(list, function(j, 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"], + 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: "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}], - ], - }); - }); - } - }); - }); + 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}], + ] + }); + }); + } + }); + }); }; var makeGroupOrder = function() { var groupScores = {}; $.each(groups, function(key, val) { //console.log("group key: " + key); - if (!groupScores[key]) { - groupScores[key] = 0; - } - if (uses[key]) { - value = uses[key]; - $.each(value, function(ix, uses_label) { - if (!groupScores[uses_label]) { - groupScores[uses_label] = 1; - } else { - groupScores[uses_label]++; - } - }); - } else { - if (!groupScores["no-service"]) { - groupScores["no-service"] = 1; - } else { - groupScores["no-service"]++; - } - } - }); + if (!groupScores[key]) { + groupScores[key] = 0; + } + if (uses[key]) { + value = uses[key]; + $.each(value, function(ix, uses_label) { + if (!groupScores[uses_label]) { + groupScores[uses_label] = 1; + } else { + groupScores[uses_label]++; + } + }); + } else { + if (!groupScores["no-service"]) { + groupScores["no-service"] = 1; + } else { + groupScores["no-service"]++; + } + } + }); var groupOrder = []; $.each(groupScores, function(key, value) { groupOrder.push(key); - }); + }); groupOrder.sort(function(a, b) { return groupScores[a] - groupScores[b]; }); - //console.log(groupOrder); + //console.log(groupOrder); return groupOrder; }; var renderNodes = function() { - var y = 25; - var x = 100; + var y = 25; + var x = 100; $.each(nodes.items, function(index, value) { console.log(value); - var div = $('
'); + var div = $('
'); var ready = 'not_ready'; $.each(value.status.conditions, function(index, condition) { if (condition.type === 'Ready') { @@ -202,81 +202,81 @@ var renderNodes = function() { } }); - var eltDiv = $('
'); - eltDiv.html('Node

' + + eltDiv.html('Node

' + truncate(value.metadata.name, 6) + ''); div.append(eltDiv); - var elt = $('.nodesbar'); - elt.append(div); + var elt = $('.nodesbar'); + elt.append(div); x += 120; }); } var renderGroups = function() { - var elt = $('#sheet'); - var y = 10; - var serviceLeft = 0; - var groupOrder = makeGroupOrder(); + var elt = $('#sheet'); + var y = 10; + var serviceLeft = 0; + var groupOrder = makeGroupOrder(); var counts = {} - $.each(groupOrder, function(ix, key) { - list = groups[key]; - // list = value; + $.each(groupOrder, function(ix, key) { + list = groups[key]; + // list = value; if (!list) { - return; + return; } - var div = $('
'); - var x = 100; - $.each(list, function(index, value) { + var div = $('
'); + var x = 100; + $.each(list, function(index, value) { //console.log("render groups: " + value.type + ", " + value.metadata.name + ", " + index) - var eltDiv = null; + var eltDiv = null; console.log(value); var phase = value.status.phase ? value.status.phase.toLowerCase() : ''; - if (value.type == "pod") { + if (value.type == "pod") { if ('deletionTimestamp' in value.metadata) { phase = 'terminating'; } - eltDiv = $('
'); - eltDiv.html('' + + eltDiv = $('
'); + 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") +")" + ''); - } else if (value.type == "service") { - eltDiv = $('
'); - eltDiv.html('' + + } 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 + "" : "") + ''); - } else { + } else { var key = 'controller-' + value.metadata.labels.name; counts[key] = key in counts ? counts[key] + 1 : 0; - //eltDiv = $('
'); + //eltDiv = $('
'); var minLeft = 900; var calcLeft = 400 + (value.status.replicas * 130); var left = minLeft > calcLeft ? minLeft : calcLeft; - eltDiv = $('
'); - eltDiv.html('' + + eltDiv = $('
'); + eltDiv.html('' + value.metadata.name + (value.metadata.labels.version ? "

" + value.metadata.labels.version : "") + ''); - } - div.append(eltDiv); - x += 130; - }); - y += 400; - serviceLeft += 200; - elt.append(div); - }); + } + div.append(eltDiv); + x += 130; + }); + y += 400; + serviceLeft += 200; + elt.append(div); + }); }; var insertUse = function(name, use) { @@ -289,98 +289,98 @@ var insertUse = function(name, use) { }; var loadData = function() { - var deferred = new $.Deferred(); - var req1 = $.getJSON("/api/v1/pods?labelSelector=visualize%3Dtrue", function( data ) { - pods = data; - $.each(data.items, function(key, val) { - val.type = 'pod'; + var deferred = new $.Deferred(); + var req1 = $.getJSON("/api/v1/pods?labelSelector=visualize%3Dtrue", function( data ) { + pods = data; + $.each(data.items, function(key, val) { + val.type = 'pod'; if (val.metadata.labels && val.metadata.labels.uses) { - var key = val.metadata.labels.name; - if (!uses[key]) { - uses[key] = val.metadata.labels.uses.split("_"); - } else { - $.each(val.metadata.labels.uses.split("_"), function(ix, use) { insertUse(key, use); }); - } - } + var key = val.metadata.labels.name; + if (!uses[key]) { + uses[key] = val.metadata.labels.uses.split("_"); + } else { + $.each(val.metadata.labels.uses.split("_"), function(ix, use) { insertUse(key, use); }); + } + } }); - }); + }); - var req2 = $.getJSON("/api/v1/replicationcontrollers?labelSelector=visualize%3Dtrue", function( data ) { - controllers = data; - $.each(data.items, function(key, val) { + var req2 = $.getJSON("/api/v1/replicationcontrollers?labelSelector=visualize%3Dtrue", function( data ) { + controllers = data; + $.each(data.items, function(key, val) { val.type = 'replicationController'; //console.log("Controller ID = " + val.metadata.name) }); - }); + }); - 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) { + 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) }); - }); + }); - var req4 = $.getJSON("/api/v1/nodes", function( data ) { - nodes = data; - //console.log("loadData(): Services"); - //console.log(nodes); - $.each(data.items, function(key, val) { + 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) }); - }); + }); - $.when(req1, req2, req3, req4).then(function() { - deferred.resolve(); - }); + $.when(req1, req2, req3, req4).then(function() { + deferred.resolve(); + }); - return deferred; + return deferred; } function refresh(instance) { - pods = []; - services = []; - controllers = []; + pods = []; + services = []; + controllers = []; nodes = []; - uses = {}; - groups = {}; + uses = {}; + groups = {}; - $.when(loadData()).then(function() { - groupByName(); - $('#sheet').empty(); + $.when(loadData()).then(function() { + groupByName(); + $('#sheet').empty(); renderNodes(); - renderGroups(); - connectControllers(); + renderGroups(); + connectControllers(); - setTimeout(function() { - refresh(instance); - }, 2000); + setTimeout(function() { + refresh(instance); + }, 2000); }); } jsPlumb.bind("ready", function() { - var instance = jsPlumb.getInstance({ - // default drag options - DragOptions : { cursor: 'pointer', zIndex:2000 }, - // the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this - // case it returns the 'labelText' member that we set on each connection in the 'init' method below. - ConnectionOverlays : [ - [ "Arrow", { location:1 } ], - //[ "Label", { - // location:0.1, - // id:"label", - // cssClass:"aLabel" - //}] - ], - Container:"flowchart-demo" - }); - - refresh(instance); - jsPlumb.fire("jsPlumbDemoLoaded", instance); + var instance = jsPlumb.getInstance({ + // default drag options + DragOptions : { cursor: 'pointer', zIndex:2000 }, + // the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this + // case it returns the 'labelText' member that we set on each connection in the 'init' method below. + ConnectionOverlays : [ + [ "Arrow", { location:1 } ], + //[ "Label", { + // location:0.1, + // id:"label", + // cssClass:"aLabel" + //}] + ], + Container:"flowchart-demo" }); + + refresh(instance); + jsPlumb.fire("jsPlumbDemoLoaded", instance); +}); From 33351b9660e9e41bb2e792613afcf85956a53557 Mon Sep 17 00:00:00 2001 From: Ian Lewis Date: Tue, 10 May 2016 14:59:24 +0900 Subject: [PATCH 2/3] Fixed bug --- script.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index 65a1c87..cef0b9d 100644 --- a/script.js +++ b/script.js @@ -146,7 +146,7 @@ var connectUses = function() { overlays: [ [ "Arrow", { width:15, length:30, location: 0.3}], [ "Arrow", { width:15, length:30, location: 0.6}], - [ "Arrow", { width:15, length:30, location: 1}], + [ "Arrow", { width:15, length:30, location: 1}] ] }); }); @@ -290,7 +290,7 @@ var insertUse = function(name, use) { var loadData = function() { var deferred = new $.Deferred(); - var req1 = $.getJSON("/api/v1/pods?labelSelector=visualize%3Dtrue", function( data ) { + var req1 = $.getJSON("/api/v1/pods", function( data ) { pods = data; $.each(data.items, function(key, val) { val.type = 'pod'; @@ -305,7 +305,7 @@ var loadData = function() { }); }); - var req2 = $.getJSON("/api/v1/replicationcontrollers?labelSelector=visualize%3Dtrue", function( data ) { + var req2 = $.getJSON("/api/v1/replicationcontrollers", function( data ) { controllers = data; $.each(data.items, function(key, val) { val.type = 'replicationController'; @@ -314,7 +314,7 @@ var loadData = function() { }); - var req3 = $.getJSON("/api/v1/services?labelSelector=visualize%3Dtrue", function( data ) { + var req3 = $.getJSON("/api/v1/services", function( data ) { services = data; //console.log("loadData(): Services"); //console.log(services); From c2a3f198c043ac4af8b488ec44ba4c90791dd4a7 Mon Sep 17 00:00:00 2001 From: Ian Lewis Date: Tue, 10 May 2016 15:03:16 +0900 Subject: [PATCH 3/3] Added back labelSelector --- script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/script.js b/script.js index cef0b9d..c31a442 100644 --- a/script.js +++ b/script.js @@ -290,7 +290,7 @@ var insertUse = function(name, use) { var loadData = function() { var deferred = new $.Deferred(); - var req1 = $.getJSON("/api/v1/pods", function( data ) { + var req1 = $.getJSON("/api/v1/pods?labelSelector=visualize%3Dtrue", function( data ) { pods = data; $.each(data.items, function(key, val) { val.type = 'pod'; @@ -305,7 +305,7 @@ var loadData = function() { }); }); - var req2 = $.getJSON("/api/v1/replicationcontrollers", function( data ) { + var req2 = $.getJSON("/api/v1/replicationcontrollers?labelSelector=visualize%3Dtrue", function( data ) { controllers = data; $.each(data.items, function(key, val) { val.type = 'replicationController'; @@ -314,7 +314,7 @@ var loadData = function() { }); - var req3 = $.getJSON("/api/v1/services", function( data ) { + var req3 = $.getJSON("/api/v1/services?labelSelector=visualize%3Dtrue", function( data ) { services = data; //console.log("loadData(): Services"); //console.log(services);