3712 lines
102 KiB
JavaScript
3712 lines
102 KiB
JavaScript
angular.module("mapApp")
|
|
.directive("nagiosMap", function() {
|
|
return {
|
|
templateUrl: "map-directive.html",
|
|
restrict: "AE",
|
|
scope: {
|
|
cgiurl: "@cgiurl",
|
|
layoutIndex: "@layout",
|
|
dimensions: "@dimensions",
|
|
ulx: "@ulx",
|
|
uly: "@uly",
|
|
lrx: "@lrx",
|
|
lry: "@lry",
|
|
root: "=root",
|
|
maxzoom: "=maxzoom",
|
|
nolinks: "@nolinks",
|
|
notext: "@notext",
|
|
nopopups: "@nopopups",
|
|
noresize: "@noresize",
|
|
noicons: "@noicons",
|
|
iconurl: "@iconurl",
|
|
updateIntervalValue: "@updateInterval",
|
|
lastUpdate: "=lastUpdate",
|
|
reload: "@reload",
|
|
svgWidth: "=mapWidth",
|
|
svgHeight: "=mapHeight",
|
|
build: "&build"
|
|
},
|
|
controller: function($scope, $element, $attrs, $http,
|
|
nagiosProcessName, layouts) {
|
|
|
|
// Contents of the popup
|
|
$scope.popupContents = {};
|
|
|
|
// Layout variables
|
|
$scope.diameter = Math.min($scope.svgHeight,
|
|
$scope.svgWidth);
|
|
$scope.mapZIndex = 20;
|
|
$scope.popupZIndex = 40;
|
|
$scope.popupPadding = 10;
|
|
$scope.fontSize = 10; // px
|
|
$scope.minRadius = 5;
|
|
// radius of node with zero services
|
|
$scope.maxRadiusCount = 20;
|
|
// number of services at which to max radius
|
|
$scope.maxRadius = 12;
|
|
// radius of node with maxRadiusCount+ services
|
|
$scope.swellRadius = 4;
|
|
// amount by which radius swells when updating
|
|
$scope.nodeID = 0;
|
|
// Incrementing unique node ID for each node
|
|
|
|
// Display variables
|
|
$scope.layout = parseInt($scope.layoutIndex);
|
|
$scope.ulx = parseInt($scope.ulxValue);
|
|
$scope.uly = parseInt($scope.ulyValue);
|
|
$scope.lrx = parseInt($scope.lrxValue);
|
|
$scope.lry = parseInt($scope.lryValue);
|
|
$scope.showText = $scope.notext == "false";
|
|
$scope.showLinks = $scope.nolinks == "false";
|
|
$scope.showPopups = $scope.nopopups == "false";
|
|
$scope.allowResize = $scope.noresize == "false";
|
|
$scope.showIcons = $scope.noicons == "false";
|
|
|
|
// Resize handle variables
|
|
$scope.handleHeight = 8;
|
|
$scope.handleWidth = 8;
|
|
$scope.handlePadding = 2;
|
|
|
|
// Host node tree - initialize the root node
|
|
$scope.hostTree = {
|
|
hostInfo: {
|
|
name: nagiosProcessName,
|
|
objectJSON: {
|
|
name: nagiosProcessName,
|
|
icon_image: "",
|
|
icon_image_alt: "",
|
|
x_2d: 0,
|
|
y_2d: 0
|
|
},
|
|
serviceCount: 0
|
|
},
|
|
saveArc: {
|
|
x: 0,
|
|
dx: 0,
|
|
y: 0,
|
|
dy: 0
|
|
},
|
|
saveLabel: {
|
|
x: 0,
|
|
dx: 0,
|
|
y: 0,
|
|
dy: 0
|
|
}
|
|
};
|
|
$scope.hostList = new Object;
|
|
|
|
// Icon information
|
|
$scope.iconList = new Object;
|
|
$scope.iconsLoading = 0;
|
|
|
|
// Update frequency
|
|
$scope.updateStatusInterval =
|
|
parseInt($scope.updateIntervalValue) * 1000;
|
|
|
|
// Map update variables
|
|
$scope.updateDuration = 0;
|
|
|
|
// Date format for popup dates
|
|
$scope.popupDateFormat = d3.time.format("%m-%d-%Y %H:%M:%S");
|
|
|
|
// Root node name
|
|
$scope.rootNodeName = nagiosProcessName;
|
|
$scope.rootNode = null;
|
|
|
|
// Application state variables
|
|
$scope.fetchingHostlist = false;
|
|
$scope.displayPopup = false;
|
|
var previousLayout = -1;
|
|
var statusTimeout = null;
|
|
var displayMapDone = false;
|
|
|
|
// Placeholder for saving icon url
|
|
var previousIconUrl;
|
|
|
|
// User-supplied layout information
|
|
var userSuppliedLayout = {
|
|
dimensions: {
|
|
upperLeft: {},
|
|
lowerRight: {}
|
|
},
|
|
xScale: d3.scale.linear(),
|
|
yScale: d3.scale.linear()
|
|
}
|
|
|
|
// Force layout information
|
|
var forceLayout = new Object;
|
|
|
|
// Watch for noresize update
|
|
$scope.$watch("noresize", function() {
|
|
$scope.allowResize = $scope.noresize == "false";
|
|
if ($scope.allowResize) {
|
|
d3.select("#resize-handle").style("visibility", "visible");
|
|
} else {
|
|
d3.select("#resize-handle").style("visibility", "hidden");
|
|
}
|
|
})
|
|
|
|
// Watch for changes on the reload value
|
|
$scope.$watch("reload", function(newValue) {
|
|
|
|
// Cancel the timeout if necessary
|
|
if (statusTimeout != null) {
|
|
clearTimeout(statusTimeout);
|
|
}
|
|
|
|
// Clean up after previous maps
|
|
var selectionExit;
|
|
switch (previousLayout) {
|
|
case layouts.UserSupplied.index:
|
|
selectionExit = d3.select("g#container")
|
|
.selectAll("g.node")
|
|
.data([])
|
|
.exit();
|
|
selectionExit.selectAll("circle").remove();
|
|
selectionExit.selectAll("text").remove();
|
|
selectionExit.remove();
|
|
break;
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTree.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
case layouts.CircularBalloon.index:
|
|
selectionExit = d3.select("g#container")
|
|
.selectAll(".node")
|
|
.data([])
|
|
.exit();
|
|
selectionExit.selectAll("circle").remove();
|
|
selectionExit.selectAll("text").remove();
|
|
selectionExit.remove();
|
|
d3.select("g#container")
|
|
.select("g#links")
|
|
.selectAll(".link")
|
|
.data([])
|
|
.exit()
|
|
.remove();
|
|
d3.select("g#links").remove();
|
|
break;
|
|
case layouts.CircularMarkup.index:
|
|
d3.select("g#container")
|
|
.select("g#paths")
|
|
.selectAll("path")
|
|
.data([])
|
|
.remove();
|
|
selectionExit = d3.select("g#container")
|
|
.selectAll("g.label")
|
|
.data([])
|
|
.exit();
|
|
selectionExit.selectAll("rect").remove();
|
|
selectionExit.selectAll("text").remove();
|
|
selectionExit.remove();
|
|
d3.select("g#paths").remove();
|
|
break;
|
|
case layouts.Force.index:
|
|
selectionExit = d3.select("g#container")
|
|
.selectAll(".link")
|
|
.data([])
|
|
.exit();
|
|
selectionExit.selectAll("line").remove();
|
|
selectionExit.remove();
|
|
selectionExit = d3.select("g#container")
|
|
.selectAll("g.node")
|
|
.data([])
|
|
.exit();
|
|
selectionExit.selectAll("circle").remove();
|
|
selectionExit.selectAll("text").remove();
|
|
selectionExit.remove();
|
|
d3.select("g#links").remove();
|
|
break;
|
|
}
|
|
|
|
// Clean up the host list
|
|
$scope.hostList = {};
|
|
|
|
// Clean up the icon image cache if the icon url
|
|
// has changed
|
|
if (previousIconUrl != $scope.iconurl) {
|
|
d3.selectAll("div#image-cache img").remove();
|
|
$scope.iconList = new Object;
|
|
$scope.iconsLoading = 0;
|
|
}
|
|
previousIconUrl = $scope.iconurl;
|
|
|
|
// Reset the zoom and pan
|
|
$scope.zoom.translate([0,0]).scale(1);
|
|
// Show the map
|
|
if ($scope.build()) {
|
|
|
|
// Determine the new layout
|
|
$scope.layout = parseInt($scope.layoutIndex);
|
|
|
|
// Adjust the container appropriately
|
|
d3.select("svg#map g#container")
|
|
.attr({
|
|
transform: function() {
|
|
return getContainerTransform();
|
|
}
|
|
});
|
|
|
|
// Layout-specific steps
|
|
switch ($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
userSuppliedLayout.dimensionType = $scope.dimensions
|
|
break;
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTree.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
case layouts.CircularBalloon.index:
|
|
case layouts.CircularMarkup.index:
|
|
case layouts.Force.index:
|
|
break;
|
|
}
|
|
previousLayout = $scope.layout;
|
|
|
|
// Start the spinner
|
|
$scope.spinnerdiv = d3.select("div#spinner");
|
|
$scope.fetchingHostlist = true;
|
|
$scope.spinner = new Spinner($scope.spinnerOpts)
|
|
.spin($scope.spinnerdiv[0][0]);
|
|
|
|
// Get the host list and move forward
|
|
getHostList();
|
|
}
|
|
});
|
|
|
|
// Watch for changes in the size of the map
|
|
$scope.$watch("svgWidth", function(newValue) {
|
|
if (displayMapDone) {
|
|
updateOnResize(d3.select("#resize-handle").node());
|
|
}
|
|
});
|
|
$scope.$watch("svgHeight", function(newValue) {
|
|
if (displayMapDone) {
|
|
updateOnResize(d3.select("#resize-handle").node());
|
|
}
|
|
});
|
|
|
|
// Get the services of the children of a specific node
|
|
var getServiceList = function() {
|
|
|
|
var parameters = {
|
|
query: "servicelist",
|
|
formatoptions: "enumerate bitmask",
|
|
details: false
|
|
};
|
|
|
|
var getConfig = {
|
|
params: parameters,
|
|
withCredentials: true
|
|
};
|
|
|
|
if ($scope.showIcons && $scope.iconsLoading > 0) {
|
|
setTimeout(function() {
|
|
getServiceList()
|
|
}, 10);
|
|
return;
|
|
}
|
|
|
|
// Send the JSON query
|
|
$http.get($scope.cgiurl + "objectjson.cgi", getConfig)
|
|
.error(function(err) {
|
|
console.warn(err);
|
|
})
|
|
.success(function(json) {
|
|
// Record the time of the last update
|
|
$scope.lastUpdate = json.result.query_time;
|
|
|
|
for(var host in json.data.servicelist) {
|
|
$scope.hostList[host].serviceCount =
|
|
json.data.servicelist[host].length;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Take action on the zoom start
|
|
var onZoomStart = function() {
|
|
|
|
// Hide the popup window
|
|
$scope.displayPopup = false;
|
|
$scope.$apply("displayPopup");
|
|
};
|
|
|
|
// Take action on the zoom
|
|
var onZoom = function() {
|
|
|
|
// Get the event parameters
|
|
var zoomTranslate = $scope.zoom.translate();
|
|
var zoomScale = $scope.zoom.scale();
|
|
|
|
var translate = [];
|
|
switch($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
d3.selectAll("g.node")
|
|
.attr({
|
|
transform: function(d) {
|
|
return getNodeTransform(d);
|
|
}
|
|
});
|
|
d3.selectAll("g.node text")
|
|
.each(function(d) {
|
|
setTextAttrs(d, this);
|
|
});
|
|
break;
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTree.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
d3.selectAll("path.link")
|
|
.attr({
|
|
d: $scope.diagonal
|
|
});
|
|
d3.selectAll("g.node")
|
|
.attr({
|
|
transform: function(d) {
|
|
return getNodeTransform(d);
|
|
}
|
|
});
|
|
break;
|
|
case layouts.CircularBalloon.index:
|
|
// Calculate the real translation taking
|
|
// into account the centering
|
|
translate = [zoomTranslate[0] +
|
|
($scope.svgWidth / 2) * zoomScale,
|
|
zoomTranslate[1] +
|
|
($scope.svgHeight / 2) * zoomScale];
|
|
d3.select("svg#map g#container")
|
|
.attr("transform", "translate(" + translate +
|
|
")");
|
|
d3.selectAll("path.link")
|
|
.attr({
|
|
d: $scope.diagonal
|
|
});
|
|
d3.selectAll("g.node")
|
|
.attr({
|
|
transform: function(d) {
|
|
return getNodeTransform(d);
|
|
}
|
|
});
|
|
break;
|
|
case layouts.CircularMarkup.index:
|
|
// Calculate the real translation taking
|
|
// into account the centering
|
|
translate = [zoomTranslate[0] +
|
|
($scope.svgWidth / 2) * zoomScale,
|
|
zoomTranslate[1] +
|
|
($scope.svgHeight / 2) * zoomScale];
|
|
// Update the group with the new calculated values
|
|
d3.select("svg#map g#container")
|
|
.attr("transform",
|
|
"translate(" + translate + ")");
|
|
d3.selectAll("path")
|
|
.attr("transform", "scale(" + zoomScale + ")");
|
|
d3.selectAll("g.label")
|
|
.attr({
|
|
transform: function(d) {
|
|
return getPartitionLabelGroupTransform(d);
|
|
}
|
|
});
|
|
break;
|
|
case layouts.Force.index:
|
|
d3.selectAll("line.link")
|
|
.attr({
|
|
x1: function(d) {
|
|
return $scope.xZoomScale(d.source.x);
|
|
},
|
|
y1: function(d) {
|
|
return $scope.yZoomScale(d.source.y);
|
|
},
|
|
x2: function(d) {
|
|
return $scope.xZoomScale(d.target.x);
|
|
},
|
|
y2: function(d) {
|
|
return $scope.yZoomScale(d.target.y);
|
|
}
|
|
});
|
|
d3.selectAll("g.node")
|
|
.attr({
|
|
transform: function(d) {
|
|
return "translate(" +
|
|
$scope.xZoomScale(d.x) + ", " +
|
|
$scope.yZoomScale(d.y) + ")";
|
|
}
|
|
});
|
|
break;
|
|
}
|
|
};
|
|
|
|
// Get the tree size
|
|
var getTreeSize = function() {
|
|
|
|
switch($scope.layout) {
|
|
case layouts.DepthLayers.index:
|
|
return [$scope.svgWidth, $scope.svgHeight -
|
|
layouts.DepthLayers.topPadding -
|
|
layouts.DepthLayers.bottomPadding];
|
|
break;
|
|
case layouts.DepthLayersVertical.index:
|
|
return [$scope.svgHeight, $scope.svgWidth -
|
|
layouts.DepthLayersVertical.leftPadding -
|
|
layouts.DepthLayersVertical.rightPadding];
|
|
break;
|
|
case layouts.CollapsedTree.index:
|
|
return [$scope.svgWidth, $scope.svgHeight -
|
|
layouts.CollapsedTree.topPadding -
|
|
layouts.CollapsedTree.bottomPadding];
|
|
break;
|
|
case layouts.CollapsedTreeVertical.index:
|
|
return [$scope.svgHeight, $scope.svgWidth -
|
|
layouts.CollapsedTreeVertical.leftPadding -
|
|
layouts.CollapsedTreeVertical.rightPadding];
|
|
break;
|
|
case layouts.BalancedTree.index:
|
|
return [$scope.svgWidth, $scope.svgHeight -
|
|
layouts.BalancedTree.topPadding -
|
|
layouts.BalancedTree.bottomPadding];
|
|
break;
|
|
case layouts.BalancedTreeVertical.index:
|
|
return [$scope.svgHeight, $scope.svgWidth -
|
|
layouts.BalancedTreeVertical.leftPadding -
|
|
layouts.BalancedTreeVertical.rightPadding];
|
|
break;
|
|
case layouts.CircularBalloon.index:
|
|
return [360, $scope.diameter / 2 -
|
|
layouts.CircularBalloon.outsidePadding];
|
|
break;
|
|
}
|
|
};
|
|
|
|
// Get the node transform
|
|
var getNodeTransform = function(d) {
|
|
|
|
switch($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
var x1 = d.hostInfo.objectJSON.x_2d;
|
|
var x2 = userSuppliedLayout.xScale(x1);
|
|
var x3 = $scope.xZoomScale(x2);
|
|
var y1 = d.hostInfo.objectJSON.y_2d;
|
|
var y2 = userSuppliedLayout.yScale(y1);
|
|
var y3 = $scope.yZoomScale(y2);
|
|
return "translate(" + x3 + "," + y3 + ")";
|
|
break;
|
|
case layouts.DepthLayers.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.BalancedTree.index:
|
|
return "translate(" + $scope.xZoomScale(d.x) + "," +
|
|
$scope.yZoomScale(d.y) + ")";
|
|
break;
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
return "translate(" + $scope.xZoomScale(d.y) + "," +
|
|
$scope.yZoomScale(d.x) + ")";
|
|
break;
|
|
case layouts.CircularBalloon.index:
|
|
if(d.y == 0) return "";
|
|
var rotateAngle = d.x +
|
|
layouts.CircularBalloon.rotation;
|
|
var translate = d.y * $scope.zoom.scale();
|
|
return "rotate(" + rotateAngle + ") translate(" +
|
|
translate + ")";
|
|
break;
|
|
}
|
|
};
|
|
|
|
// Determine the amount of text padding due to an icon
|
|
var getIconTextPadding = function(d) {
|
|
var iconHeight = 0, iconWidth = 0;
|
|
if (d.hostInfo.hasOwnProperty("iconInfo")) {
|
|
iconHeight = d.hostInfo.iconInfo.height;
|
|
iconWidth = d.hostInfo.iconInfo.width;
|
|
}
|
|
else {
|
|
return 0;
|
|
}
|
|
switch($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
switch(layouts.UserSupplied.textAlignment) {
|
|
case "above":
|
|
case "below":
|
|
return iconHeight / 2;
|
|
break;
|
|
case "left":
|
|
case "right":
|
|
return iconWidth / 2;
|
|
break;
|
|
}
|
|
break;
|
|
case layouts.DepthLayers.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.BalancedTree.index:
|
|
return iconHeight / 2;
|
|
break;
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
return iconWidth / 2;
|
|
break;
|
|
case layouts.CircularBalloon.index:
|
|
var rotateAngle = d.x +
|
|
layouts.CircularBalloon.rotation;
|
|
var angle; // angle used to calculate distance
|
|
var r; // radius used to calculate distance
|
|
if (rotateAngle < 45.0) {
|
|
// Text is right of icon
|
|
angle = rotateAngle;
|
|
r = iconWidth / 2;
|
|
}
|
|
else if(rotateAngle < 135.0) {
|
|
// Text is below icon
|
|
angle = Math.abs(90.0 - rotateAngle);
|
|
r = iconHeight / 2;
|
|
}
|
|
else if(rotateAngle < 225.0) {
|
|
// Text is left icon
|
|
angle = Math.abs(180.0 - rotateAngle);
|
|
r = iconWidth / 2;
|
|
}
|
|
else if(rotateAngle < 315.0) {
|
|
// Text is above icon
|
|
angle = Math.abs(270.0 - rotateAngle);
|
|
r = iconHeight / 2;
|
|
}
|
|
else {
|
|
// Text is right of icon
|
|
angle = 360.0 - rotateAngle;
|
|
r = iconWidth / 2;
|
|
}
|
|
var radians = angle * Math.PI / 180.0;
|
|
var cos = Math.cos(radians);
|
|
return r + (r - r * cos) * cos;
|
|
break;
|
|
case layouts.CircularMarkup.index:
|
|
return 0;
|
|
break;
|
|
case layouts.Force.index:
|
|
return iconWidth / 2;
|
|
break;
|
|
}
|
|
};
|
|
|
|
// Set the node label attributes
|
|
var setTextAttrs = function(d, domNode) {
|
|
|
|
// Placeholder for attributes
|
|
var attrs = new Object;
|
|
var state = "ok";
|
|
var stateCounts = {};
|
|
|
|
// Variables used for all layouts
|
|
var serviceCount = getObjAttr(d, ["serviceCount"], 0);
|
|
var iconTextPadding = getIconTextPadding(d);
|
|
var fontSize = $scope.fontSize + "px";
|
|
|
|
if (d.hostInfo.name == $scope.$parent.search.host)
|
|
fontSize = ($scope.fontSize * 2) + "px";
|
|
attrs["font-size"] = fontSize;
|
|
attrs["font-weight"] = "normal";
|
|
attrs["text-decoration"] = "none";
|
|
attrs["fill"] = "#000000";
|
|
|
|
if (d.hostInfo.name != $scope.$parent.search.host && d.hostInfo.hasOwnProperty("serviceStatusJSON")) {
|
|
for (var service in d.hostInfo.serviceStatusJSON) {
|
|
var state = d.hostInfo.serviceStatusJSON[service];
|
|
if(!stateCounts.hasOwnProperty(state))
|
|
stateCounts[state] = 0;
|
|
stateCounts[state]++;
|
|
}
|
|
if (stateCounts["critical"])
|
|
state = "critical";
|
|
else if (stateCounts["warning"])
|
|
state = "warning";
|
|
else if (stateCounts["unknown"])
|
|
state = "unknown";
|
|
else if (stateCounts["pending"])
|
|
state = "pending";
|
|
}
|
|
|
|
switch($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
var textPadding =
|
|
layouts.UserSupplied.textPadding[layouts.UserSupplied.textAlignment];
|
|
if (!d.hostInfo.hasOwnProperty("iconInfo")) {
|
|
textPadding += $scope.nodeScale(serviceCount);
|
|
}
|
|
var x = 0;
|
|
var y = 0;
|
|
switch(layouts.UserSupplied.textAlignment) {
|
|
case "above":
|
|
y = -(textPadding + iconTextPadding);
|
|
attrs["text-anchor"] = "middle";
|
|
break;
|
|
case "left":
|
|
x = -(textPadding + iconTextPadding);
|
|
attrs["text-anchor"] = "end";
|
|
attrs.dy = ".4em";
|
|
break;
|
|
case "right":
|
|
x = textPadding + iconTextPadding;
|
|
attrs["text-anchor"] = "start";
|
|
attrs.dy = ".4em";
|
|
break;
|
|
case "below":
|
|
y = textPadding + iconTextPadding;
|
|
attrs["text-anchor"] = "middle";
|
|
break;
|
|
}
|
|
attrs.transform = "translate(" + x + "," + y + ")";
|
|
break;
|
|
case layouts.DepthLayers.index:
|
|
var textPadding = $scope.nodeScale(serviceCount) +
|
|
layouts.DepthLayers.dyText + iconTextPadding;
|
|
attrs.dy = d.children ? -textPadding : 0;
|
|
attrs.transform = d.children ? "" :
|
|
"rotate(90) translate(" + textPadding +
|
|
", " + (($scope.fontSize / 2) - 1) + ")";
|
|
attrs["text-anchor"] = d.children ? "middle" :
|
|
"start";
|
|
break;
|
|
case layouts.DepthLayersVertical.index:
|
|
var textPadding = $scope.nodeScale(serviceCount) +
|
|
layouts.DepthLayersVertical.dxText +
|
|
iconTextPadding;
|
|
attrs.dx = d.children ? -textPadding : textPadding;
|
|
attrs.dy = layouts.DepthLayersVertical.dyText;
|
|
attrs["text-anchor"] = d.children ? "end" : "start";
|
|
break;
|
|
case layouts.CollapsedTree.index:
|
|
var textPadding = $scope.nodeScale(serviceCount) +
|
|
layouts.CollapsedTree.dyText +
|
|
iconTextPadding;
|
|
attrs.dy = d.children ? -textPadding : 0;
|
|
attrs.transform = d.children ? "" :
|
|
"rotate(90) translate(" + textPadding +
|
|
", " + (($scope.fontSize / 2) - 1) + ")";
|
|
attrs["text-anchor"] = d.children ? "middle" :
|
|
"start";
|
|
break;
|
|
case layouts.CollapsedTreeVertical.index:
|
|
var textPadding = $scope.nodeScale(serviceCount) +
|
|
layouts.CollapsedTreeVertical.dxText +
|
|
iconTextPadding;
|
|
attrs.dx = d.children ? -textPadding : textPadding;
|
|
attrs.dy = layouts.CollapsedTreeVertical.dyText;
|
|
attrs["text-anchor"] = d.children ? "end" : "start";
|
|
break;
|
|
case layouts.BalancedTree.index:
|
|
var textPadding = $scope.nodeScale(serviceCount) +
|
|
layouts.BalancedTree.dyText +
|
|
iconTextPadding;
|
|
attrs.dy = d.children ? -textPadding : 0;
|
|
attrs.transform = d.children ? "" :
|
|
"rotate(90) translate(" + textPadding +
|
|
", " + (($scope.fontSize / 2) - 1) + ")";
|
|
attrs["text-anchor"] = d.children ? "middle" :
|
|
"start";
|
|
break;
|
|
case layouts.BalancedTreeVertical.index:
|
|
var textPadding = $scope.nodeScale(serviceCount) +
|
|
layouts.BalancedTreeVertical.dxText +
|
|
iconTextPadding;
|
|
attrs.dx = d.children ? -textPadding : textPadding;
|
|
attrs.dy = layouts.BalancedTreeVertical.dyText;
|
|
attrs["text-anchor"] = d.children ? "end" : "start";
|
|
break;
|
|
case layouts.CircularBalloon.index:
|
|
var textPadding = $scope.nodeScale(serviceCount) +
|
|
layouts.CircularBalloon.textPadding +
|
|
iconTextPadding;
|
|
if(d.y == 0) {
|
|
attrs["text-anchor"] = "middle";
|
|
attrs.transform = "translate(0,-" +
|
|
$scope.fontSize + ")";
|
|
}
|
|
else if(d.x < 180) {
|
|
attrs["text-anchor"] = "start";
|
|
attrs.transform = "translate(" + textPadding +
|
|
")";
|
|
}
|
|
else {
|
|
attrs["text-anchor"] = "end";
|
|
attrs.transform = "rotate(180) translate(-" +
|
|
textPadding + ")";
|
|
}
|
|
attrs.dy = layouts.CircularBalloon.dyText;
|
|
break;
|
|
case layouts.CircularMarkup.index:
|
|
attrs["alignment-baseline"] = "middle";
|
|
attrs["text-anchor"] = "middle";
|
|
attrs["transform"] = "";
|
|
if (d.hostInfo.hasOwnProperty("iconInfo")) {
|
|
var rotateAngle = (d.x + d.dx / 2) * 180 / Math.PI +
|
|
layouts.CircularBalloon.rotation;
|
|
var translate = (d.hostInfo.iconInfo.height +
|
|
layouts.CircularMarkup.textPadding) / 2;
|
|
attrs["transform"] = "rotate(" + -rotateAngle +
|
|
") translate(0, " + translate + ")";
|
|
}
|
|
else {
|
|
if (d.depth > 0 && d.x + d.dx / 2 > Math.PI) {
|
|
attrs["transform"] = "rotate(180)";
|
|
}
|
|
}
|
|
break;
|
|
case layouts.Force.index:
|
|
attrs["alignment-baseline"] = "middle";
|
|
attrs["x"] = $scope.nodeScale(serviceCount) +
|
|
layouts.Force.textPadding + iconTextPadding;
|
|
break;
|
|
}
|
|
|
|
if (d.hostInfo.name == $scope.$parent.search.host) {
|
|
attrs["font-weight"] = "bold";
|
|
attrs["stroke"] = "red";
|
|
attrs["stroke-width"] = "1";
|
|
attrs["fill"] = "#0000ff";
|
|
} else if (state != "ok") {
|
|
attrs["font-weight"] = "bold";
|
|
attrs["text-decoration"] = "underline";
|
|
switch(state) {
|
|
case "critical":attrs["fill"] = "#ff0000"; break;
|
|
case "warning": attrs["fill"] = "#b0b214"; break;
|
|
case "unknown": attrs["fill"] = "#ff6419"; break;
|
|
case "pending": attrs["fill"] = "#cccccc"; break;
|
|
}
|
|
}
|
|
d3.select(domNode).attr(attrs);
|
|
};
|
|
|
|
// Get the quadrant of the mouse pointer within the svg
|
|
var getQuadrant = function(mouse, bcr) {
|
|
|
|
var quadrant = 0;
|
|
|
|
// mouse is relative to body -
|
|
// convert to relative to svg
|
|
var mouseX = mouse[0] - bcr.left;
|
|
var mouseY = mouse[1] - bcr.top;
|
|
|
|
if(mouseX < ((bcr.width - bcr.left) / 2)) {
|
|
// Left half of svg
|
|
if(mouseY < ((bcr.height - bcr.top) / 2)) {
|
|
// Top half of svg
|
|
quadrant = 2;
|
|
}
|
|
else {
|
|
// Bottom half of svg
|
|
quadrant = 3;
|
|
}
|
|
}
|
|
else {
|
|
// Right half of svg
|
|
if(mouseY < ((bcr.height - bcr.top) / 2)) {
|
|
// Top half of svg
|
|
quadrant = 1;
|
|
}
|
|
else {
|
|
// Bottom half of svg
|
|
quadrant = 4;
|
|
}
|
|
}
|
|
|
|
return quadrant;
|
|
};
|
|
|
|
// Display the popup
|
|
var displayPopup = function(d) {
|
|
|
|
// Get the mouse position relative to the body
|
|
var body = d3.select("body");
|
|
var mouse = d3.mouse(body.node());
|
|
|
|
// Get the bounding client rect of the div
|
|
// containing the map
|
|
var bcr = d3.select("div#mapsvg")
|
|
.node()
|
|
.getBoundingClientRect();
|
|
|
|
// Hide the popup by setting is z-index to
|
|
// less than that of the map div and by
|
|
// centering it under the map div
|
|
var popup = d3.select("#popup")
|
|
.style({
|
|
"z-index": $scope.mapZIndex - 1,
|
|
left: $scope.svgWidth / 2 + "px",
|
|
top: $scope.svgHeight / 2 + "px"
|
|
});
|
|
|
|
// Set it's contents and "display" it (it's still not
|
|
// visible because of it's z-index)
|
|
setPopupContents(popup, d);
|
|
$scope.displayPopup = true;
|
|
$scope.$apply("displayPopup");
|
|
|
|
// Now that it's "displayed", we can get it's size and
|
|
// calculate it's proper placement. Do so and set it's
|
|
// z-index so it is displayed
|
|
var popupBR = popup[0][0].getBoundingClientRect();
|
|
var left;
|
|
var top;
|
|
switch(getQuadrant(mouse, bcr)) {
|
|
case 1:
|
|
left = mouse[0] - bcr.left - popupBR.width -
|
|
$scope.popupPadding;
|
|
top = mouse[1] - bcr.top + $scope.popupPadding;
|
|
break;
|
|
case 2:
|
|
left = mouse[0] - bcr.left + $scope.popupPadding;
|
|
top = mouse[1] - bcr.top + $scope.popupPadding;
|
|
break;
|
|
case 3:
|
|
left = mouse[0] - bcr.left + $scope.popupPadding;
|
|
top = mouse[1] - bcr.top - popupBR.height -
|
|
$scope.popupPadding;
|
|
break;
|
|
case 4:
|
|
left = mouse[0] - bcr.left - popupBR.width -
|
|
$scope.popupPadding;
|
|
top = mouse[1] - bcr.top - popupBR.height -
|
|
$scope.popupPadding;
|
|
break;
|
|
default: // use first quadrant settings
|
|
left = mouse[0] - bcr.left - popupBR.width -
|
|
$scope.popupPadding;
|
|
top = mouse[1] - bcr.top + $scope.popupPadding;
|
|
break;
|
|
}
|
|
popup.style({
|
|
"z-index": $scope.popupZIndex,
|
|
left: left + "px",
|
|
top: top + "px"
|
|
});
|
|
};
|
|
|
|
// Prune any deleted hosts from the host tree
|
|
var pruneHostTree = function(node) {
|
|
|
|
if(node.hasOwnProperty("children")) {
|
|
node.children = node.children.filter(function(e) {
|
|
return e.hostInfo != null;
|
|
});
|
|
node.children.forEach(function(e) {
|
|
pruneHostTree(e);
|
|
});
|
|
}
|
|
};
|
|
|
|
// Sort the children of a node recursively
|
|
var sortChildren = function(node) {
|
|
|
|
if (node.hasOwnProperty("children")) {
|
|
// First sort the children
|
|
node.children.sort(function(a, b) {
|
|
if (a.hostInfo.objectJSON.name <
|
|
b.hostInfo.objectJSON.name) {
|
|
return -1;
|
|
}
|
|
else if (a.hostInfo.objectJSON.name >
|
|
b.hostInfo.objectJSON.name) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
});
|
|
|
|
// Next sort the children of each of these nodes
|
|
node.children.forEach(function(e, i, a) {
|
|
sortChildren(e);
|
|
});
|
|
}
|
|
};
|
|
|
|
// Re-parent the tree with a new root
|
|
var reparentTree = function(node) {
|
|
|
|
// The specified node becomes the new node and all
|
|
// it's children remain in place relative to it
|
|
var newTree = node;
|
|
|
|
// Visit each parent of the specified node
|
|
var currentNode = node;
|
|
while (!(currentNode === $scope.hostTree)) {
|
|
// First record the parent node of the current node
|
|
var parent = currentNode.parent;
|
|
|
|
// Fix root nodes with no parent nodes
|
|
if (parent === undefined) {
|
|
return true;
|
|
}
|
|
|
|
// Next remove the current node as a child of
|
|
// the parent node
|
|
parent.children = parent.children.filter(function(e, i, a) {
|
|
if (e === currentNode) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
// Finally add the parent as a child
|
|
// to the current node
|
|
if (!currentNode.hasOwnProperty("children")) {
|
|
currentNode.children = new Array;
|
|
}
|
|
currentNode.children.push(parent);
|
|
|
|
// Set the current node the former parent of the
|
|
// former current node
|
|
currentNode = parent;
|
|
}
|
|
|
|
// Now sort the nodes in the tree
|
|
sortChildren(newTree);
|
|
|
|
// Record the host name for the root node
|
|
$scope.rootNodeName = newTree.hostInfo.name;
|
|
$scope.rootNode = newTree;
|
|
|
|
// Assign the new tree
|
|
$scope.hostTree = newTree;
|
|
$scope.focalPoint = newTree;
|
|
};
|
|
|
|
// Toggle a node
|
|
var toggleNode = function(d) {
|
|
|
|
if (d.children) {
|
|
d._children = d.children;
|
|
d.children = null;
|
|
d.collapsed = true;
|
|
}
|
|
else {
|
|
switch($scope.layout) {
|
|
case layouts.CircularMarkup.index:
|
|
updateToggledNodes($scope.hostTree,
|
|
updateDescendantsOnExpand);
|
|
break;
|
|
}
|
|
d.children = d._children;
|
|
d._children = null;
|
|
d.collapsed = false;
|
|
}
|
|
};
|
|
|
|
// Interpolate the arcs in data space.
|
|
var arcTween = function(a) {
|
|
var i = d3.interpolate({x: a.saveArc.x,
|
|
dx: a.saveArc.dx, y: a.saveArc.y,
|
|
dy: a.saveArc.dy}, a);
|
|
return function(t) {
|
|
var b = i(t);
|
|
a.saveArc.x = b.x;
|
|
a.saveArc.dx = b.dx;
|
|
a.saveArc.y = b.y;
|
|
a.saveArc.dy = b.dy;
|
|
return $scope.arc(b);
|
|
};
|
|
}
|
|
|
|
// Interpolate the node labels in data space.
|
|
var labelGroupTween = function(a) {
|
|
var i = d3.interpolate({x: a.saveLabel.x,
|
|
dx: a.saveLabel.dx, y: a.saveLabel.y,
|
|
dy: a.saveLabel.dy}, a);
|
|
return function(t) {
|
|
var b = i(t);
|
|
a.saveLabel.x = b.x;
|
|
a.saveLabel.dx = b.dx;
|
|
a.saveLabel.y = b.y;
|
|
a.saveLabel.dy = b.dy;
|
|
return getPartitionLabelGroupTransform(b);
|
|
};
|
|
}
|
|
|
|
// Get the partition map label group transform
|
|
var getPartitionLabelGroupTransform = function(d) {
|
|
|
|
var radians = d.x + d.dx / 2;
|
|
var rotate = (radians * 180 / Math.PI) - 90;
|
|
var exponent = 1 / layouts.CircularMarkup.radialExponent;
|
|
var radius = d.y + (d.y / (d.depth * 2));
|
|
var translate = Math.pow(radius, exponent) * $scope.zoom.scale();
|
|
var transform = "";
|
|
|
|
if(d.depth == 0) {
|
|
transform = "";
|
|
}
|
|
else {
|
|
transform = "rotate(" + rotate + ")" +
|
|
" translate(" + translate + ")";
|
|
}
|
|
return transform;
|
|
};
|
|
|
|
// Find a host in a sorted array of hosts
|
|
var findElement = function(list, key, accessor) {
|
|
|
|
var start = 0;
|
|
var end = list.length - 1;
|
|
|
|
while (start < end) {
|
|
var midpoint = parseInt(start +
|
|
(end - start + 1) / 2);
|
|
if (accessor(list, midpoint) == key) {
|
|
return midpoint;
|
|
}
|
|
else if (key < accessor(list, midpoint)) {
|
|
end = midpoint - 1;
|
|
}
|
|
else {
|
|
start = midpoint + 1;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Update a node in the host tree
|
|
var updateHostTree = function(node, hosts) {
|
|
|
|
// Sort the hosts array
|
|
hosts.sort();
|
|
|
|
// First remove any children of the node that are not
|
|
// in the list of hosts
|
|
if (node.hasOwnProperty("children") &&
|
|
node.children != null) {
|
|
node.children = node.children.filter(function(e) {
|
|
return findElement(hosts, e.hostInfo.name,
|
|
function(list, index) {
|
|
return list[index];
|
|
}) != null;
|
|
});
|
|
// Sort the remaining children
|
|
node.children.sort(function(a, b) {
|
|
if (a.hostInfo.name == b.hostInfo.name) {
|
|
return 0;
|
|
}
|
|
else if (a.hostInfo.name < b.hostInfo.name) {
|
|
return -1;
|
|
}
|
|
else {
|
|
return 1;
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!node.hasOwnProperty("children") || node.children == null) {
|
|
node.children = new Array;
|
|
}
|
|
|
|
// Next add any hosts in the list as children
|
|
// of the node, if they're not already
|
|
hosts.forEach(function(e) {
|
|
var childIndex = node.children.findIndex(function(s) {
|
|
return s.hostInfo.name === e;
|
|
});
|
|
|
|
if ($scope.hostList[e]) {
|
|
|
|
if (childIndex === -1) {
|
|
|
|
// Create the node object
|
|
var hostNode = new Object;
|
|
|
|
// Point the node's host info to the entry in
|
|
// the host list
|
|
hostNode.hostInfo = $scope.hostList[e];
|
|
|
|
// And vice versa
|
|
if (!$scope.hostList[e].hasOwnProperty("hostNodes")) {
|
|
$scope.hostList[e].hostNodes = new Array;
|
|
}
|
|
if (!$scope.hostList[e].hostNodes.reduce(function(a, b) {
|
|
return a && b === hostNode; }, false)) {
|
|
$scope.hostList[e].hostNodes.push(hostNode);
|
|
}
|
|
|
|
// Set the parent of this node
|
|
hostNode.parent = node;
|
|
|
|
// Initialize layout information for transitions
|
|
hostNode.saveArc = new Object;
|
|
hostNode.saveArc.x = 0;
|
|
hostNode.saveArc.dx = 0;
|
|
hostNode.saveArc.y = 0;
|
|
hostNode.saveArc.dy = 0;
|
|
hostNode.saveLabel = new Object;
|
|
hostNode.saveLabel.x = 0;
|
|
hostNode.saveLabel.dx = 0;
|
|
hostNode.saveLabel.y = 0;
|
|
hostNode.saveLabel.dy = 0;
|
|
|
|
// Add the node to the parent node's children
|
|
node.children.push(hostNode);
|
|
|
|
// Get the index
|
|
childIndex = node.children.length - 1;
|
|
}
|
|
// Recurse to all children of this host
|
|
if ($scope.hostList[e].objectJSON.child_hosts.length > 0) {
|
|
var childHosts = $scope.hostList[e].objectJSON.child_hosts;
|
|
updateHostTree(node.children[childIndex],
|
|
childHosts, hostNode);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
// Create an ID for an img based on a file name
|
|
var imgID = function(image) {
|
|
return "cache-" + image.replace(/\./, "_");
|
|
};
|
|
|
|
// Update the image icon cache
|
|
var updateImageIconCache = function() {
|
|
var cache = d3.select("div#image-cache")
|
|
for (var host in $scope.hostList) {
|
|
var image =
|
|
$scope.hostList[host].objectJSON.icon_image;
|
|
if (image != "") {
|
|
if (!$scope.iconList.hasOwnProperty(imgID(image))) {
|
|
$scope.iconList[imgID(image)] = new Object;
|
|
$scope.iconsLoading++;
|
|
cache.append("img")
|
|
.attr({
|
|
id: function() {
|
|
return imgID(image);
|
|
},
|
|
src: $scope.iconurl + image
|
|
})
|
|
.on("load", function() {
|
|
$scope.iconsLoading--;
|
|
var img = d3.select(d3.event.target);
|
|
var image = img.attr("id");
|
|
$scope.iconList[image].width =
|
|
img.node().naturalWidth;
|
|
$scope.iconList[image].height =
|
|
img.node().naturalHeight;
|
|
})
|
|
.on("error", function() {
|
|
$scope.iconsLoading--;
|
|
});
|
|
}
|
|
$scope.hostList[host].iconInfo =
|
|
$scope.iconList[imgID(image)];
|
|
}
|
|
}
|
|
};
|
|
|
|
// Build the host list and tree from the hosts returned
|
|
// from the JSON CGIs
|
|
var processHostList = function(json) {
|
|
|
|
// First prune any host from the host list that
|
|
// is no longer in the hosts returned from the CGIs
|
|
for (var host in $scope.hostList) {
|
|
if(host != nagiosProcessName &&
|
|
!json.data.hostlist.hasOwnProperty(host)) {
|
|
// Mark the entry as null (deletion is slow)
|
|
$scope.hostList[host] = null;
|
|
}
|
|
}
|
|
|
|
// Next prune any deleted hosts from the host tree
|
|
pruneHostTree($scope.hostTree);
|
|
|
|
// Now update the host list with the data
|
|
// returned from the CGIs
|
|
for (var host in json.data.hostlist) {
|
|
// If we don't know about the host yet, add it to
|
|
// the host list
|
|
if (!$scope.hostList.hasOwnProperty(host) ||
|
|
$scope.hostList[host] == null) {
|
|
$scope.hostList[host] = new Object;
|
|
$scope.hostList[host].name = host;
|
|
$scope.hostList[host].serviceCount = 0;
|
|
}
|
|
// If a hosts' parent is not in the hostlist (user
|
|
// doesn't have permission to view parent) re-parent the
|
|
// host directly under the nagios process
|
|
for (var parent in json.data.hostlist[host].parent_hosts) {
|
|
var prnt = json.data.hostlist[host].parent_hosts[parent];
|
|
if (!json.data.hostlist[prnt]) {
|
|
var p = json.data.hostlist[host].parent_hosts;
|
|
json.data.hostlist[host].parent_hosts.splice(0, 1);
|
|
}
|
|
}
|
|
// Update the information returned
|
|
$scope.hostList[host].objectJSON =
|
|
json.data.hostlist[host];
|
|
}
|
|
|
|
// Now update the host tree
|
|
var rootHosts = new Array;
|
|
for (var host in $scope.hostList) {
|
|
if ($scope.hostList[host] != null &&
|
|
$scope.hostList[host].objectJSON.parent_hosts.length == 0) {
|
|
rootHosts.push(host);
|
|
}
|
|
}
|
|
updateHostTree($scope.hostTree, rootHosts);
|
|
|
|
// Update the icon image cache
|
|
if ($scope.showIcons) {
|
|
updateImageIconCache();
|
|
}
|
|
|
|
// Finish the host list processing
|
|
finishProcessingHostList();
|
|
};
|
|
|
|
var finishProcessingHostList = function() {
|
|
|
|
if ($scope.showIcons && $scope.iconsLoading > 0) {
|
|
setTimeout(function() {
|
|
finishProcessingHostList()
|
|
}, 10);
|
|
return;
|
|
}
|
|
|
|
// If this is the first time the map has
|
|
// been displayed...
|
|
if($scope.fetchingHostlist) {
|
|
// Stop the spinner
|
|
$scope.spinner.stop();
|
|
$scope.fetchingHostlist = false;
|
|
|
|
// Display the map
|
|
displayMap();
|
|
}
|
|
|
|
// Reparent the tree to specified root host
|
|
if ($scope.hostList.hasOwnProperty($scope.root) &&
|
|
($scope.rootNode != $scope.hostTree) &&
|
|
$scope.hostList[$scope.root].hasOwnProperty("hostNodes")) {
|
|
reparentTree($scope.hostList[$scope.root].hostNodes[0]);
|
|
}
|
|
|
|
// Finally update the map
|
|
updateMap($scope.hostTree);
|
|
};
|
|
|
|
// Get list of all hosts
|
|
var getHostList = function() {
|
|
|
|
var parameters = {
|
|
query: "hostlist",
|
|
formatoptions: "enumerate bitmask",
|
|
details: true
|
|
};
|
|
|
|
var getConfig = {
|
|
params: parameters,
|
|
withCredentials: true
|
|
};
|
|
|
|
// Send the JSON query
|
|
$http.get($scope.cgiurl + "objectjson.cgi?", getConfig)
|
|
.error(function(err) {
|
|
// Stop the spinner
|
|
$scope.spinner.stop();
|
|
$scope.fetchingHostlist = false;
|
|
|
|
console.warn(err);
|
|
})
|
|
.success(function(json) {
|
|
// Record the last time Nagios core was started
|
|
$scope.lastNagiosStart =
|
|
json.result.program_start;
|
|
|
|
// Record the time of the last update
|
|
$scope.lastUpdate = json.result.query_time;
|
|
|
|
// Process the host list received
|
|
processHostList(json);
|
|
|
|
// Get the services for each host
|
|
getServiceList();
|
|
|
|
// Get the status of each node
|
|
getAllStatus(0);
|
|
})
|
|
};
|
|
|
|
// Get the node's stroke color
|
|
var getNodeStroke = function(hostStatus, collapsed) {
|
|
|
|
var stroke;
|
|
|
|
if(collapsed) {
|
|
stroke = "blue";
|
|
}
|
|
else {
|
|
switch(hostStatus) {
|
|
case "up":
|
|
case "down":
|
|
case "unreachable":
|
|
stroke = getNodeFill(hostStatus, false);
|
|
break;
|
|
default:
|
|
stroke = "#cccccc";
|
|
break;
|
|
}
|
|
}
|
|
|
|
return stroke;
|
|
};
|
|
|
|
// Get the node's fill color
|
|
var getNodeFill = function(hostStatus, dark) {
|
|
|
|
var fill;
|
|
|
|
switch(hostStatus) {
|
|
case "up":
|
|
fill = dark ? "rgb(0, 105, 0)" : "rgb(0, 210, 0)";
|
|
break;
|
|
case "down":
|
|
fill = dark ? "rgb(128, 0, 0)" : "rgb(255, 0, 0)";
|
|
break;
|
|
case "unreachable":
|
|
fill = dark ? "rgb(64, 0, 0)" : "rgb(128, 0, 0)";
|
|
break;
|
|
default:
|
|
switch($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTree.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
case layouts.CircularBalloon.index:
|
|
case layouts.Force.index:
|
|
fill = "#ffffff";
|
|
break;
|
|
case layouts.CircularMarkup.index:
|
|
fill = "#cccccc";
|
|
break;
|
|
}
|
|
break;
|
|
}
|
|
|
|
return fill;
|
|
};
|
|
|
|
// Get the host status for the current node
|
|
var getHostStatus = function(d) {
|
|
|
|
var hostStatus = "pending";
|
|
|
|
if(d.hasOwnProperty("hostInfo") &&
|
|
d.hostInfo.hasOwnProperty("statusJSON")) {
|
|
hostStatus = d.hostInfo.statusJSON.status;
|
|
}
|
|
|
|
return hostStatus;
|
|
};
|
|
|
|
// Get the service count for the current node
|
|
var getServiceCount = function(d) {
|
|
|
|
var serviceCount = 0;
|
|
|
|
if(d.hasOwnProperty("hostInfo") &&
|
|
d.hostInfo.hasOwnProperty("serviceCount")) {
|
|
serviceCount = d.hostInfo.serviceCount;
|
|
}
|
|
|
|
return serviceCount;
|
|
};
|
|
|
|
// Return the glow filter for an icon
|
|
var getGlowFilter = function(d) {
|
|
if (d.hostInfo.hasOwnProperty("statusJSON")) {
|
|
switch (d.hostInfo.statusJSON.status) {
|
|
case "up":
|
|
return "url(#icon-glow-up)";
|
|
break;
|
|
case "down":
|
|
return "url(#icon-glow-down)";
|
|
break;
|
|
case "unreachable":
|
|
return "url(#icon-glow-unreachable)";
|
|
break;
|
|
default:
|
|
return null;
|
|
break;
|
|
}
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
// Get the text filter
|
|
var getTextFilter = function(d) {
|
|
if ($scope.showIcons &&
|
|
d.hostInfo.hasOwnProperty("iconInfo") &&
|
|
d._children) {
|
|
return "url(#circular-markup-text-collapsed)";
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Get the text stroke color
|
|
var getTextStrokeColor = function(d) {
|
|
if ($scope.showIcons &&
|
|
d.hostInfo.hasOwnProperty("iconInfo") &&
|
|
d._children) {
|
|
return "white";
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Update the node's status
|
|
var updateNode = function(domNode) {
|
|
|
|
var duration = 750;
|
|
|
|
var selection = d3.select(domNode);
|
|
var data = selection.datum();
|
|
var hostStatus = getHostStatus(data);
|
|
var serviceCount = getServiceCount(data);
|
|
|
|
switch($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTree.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
case layouts.CircularBalloon.index:
|
|
case layouts.Force.index:
|
|
selection.select("circle")
|
|
.transition()
|
|
.duration(duration)
|
|
.attr({
|
|
r: function() {
|
|
return $scope.nodeScale(serviceCount) +
|
|
$scope.swellRadius;
|
|
}
|
|
})
|
|
.style({
|
|
stroke: function() {
|
|
return getNodeStroke(hostStatus,
|
|
selection.datum().collapsed);
|
|
},
|
|
fill: function() {
|
|
return getNodeFill(hostStatus, false);
|
|
}
|
|
})
|
|
.transition()
|
|
.duration(duration)
|
|
.attr({
|
|
r: $scope.nodeScale(serviceCount)
|
|
});
|
|
|
|
selection.select("image")
|
|
.style({
|
|
filter: function(d) {
|
|
return getGlowFilter(d);
|
|
}
|
|
});
|
|
|
|
selection.select("text")
|
|
.each(function() {
|
|
setTextAttrs(data, this);
|
|
})
|
|
.style({
|
|
filter: function(d) {
|
|
return getTextFilter(d);
|
|
},
|
|
stroke: function(d) {
|
|
return getTextStrokeColor(d);
|
|
}
|
|
});
|
|
break;
|
|
case layouts.CircularMarkup.index:
|
|
selection
|
|
.transition()
|
|
.duration(duration)
|
|
.style({
|
|
fill: function() {
|
|
return getNodeFill(hostStatus, true);
|
|
},
|
|
"fill-opacity": 1,
|
|
"stroke-opacity": 1
|
|
})
|
|
.attrTween("d", arcTween)
|
|
.transition()
|
|
.duration(duration)
|
|
.style({
|
|
fill: function() {
|
|
return getNodeFill(hostStatus, false);
|
|
}
|
|
});
|
|
break;
|
|
}
|
|
};
|
|
|
|
// What to do when getAllStatus succeeds
|
|
var onGetAllStatusSuccess = function(json, since) {
|
|
|
|
// Record the time of the last update
|
|
$scope.lastUpdate = json.result.query_time;
|
|
|
|
// Check whether Nagios has restarted. If so
|
|
// re-read the host list
|
|
if (json.result.program_start >
|
|
$scope.lastNagiosStart) {
|
|
getHostList();
|
|
}
|
|
else {
|
|
// Iterate over all hosts and update their status
|
|
for (var host in json.data.hostlist) {
|
|
if(!$scope.hostList[host].hasOwnProperty("statusJSON") ||
|
|
($scope.hostList[host].statusJSON.last_check <
|
|
json.data.hostlist[host].last_check)) {
|
|
$scope.hostList[host].statusJSON =
|
|
json.data.hostlist[host];
|
|
if($scope.hostList[host].hasOwnProperty("g")) {
|
|
$scope.hostList[host].g.forEach(function(e, i, a) {
|
|
updateNode(e);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Send the request for service status
|
|
getServiceStatus(since);
|
|
|
|
// Schedule an update
|
|
statusTimeout = setTimeout(function() {
|
|
var newSince = (json.result.last_data_update / 1000) -
|
|
$scope.updateStatusInterval;
|
|
getAllStatus(newSince) },
|
|
$scope.updateStatusInterval);
|
|
}
|
|
};
|
|
|
|
// Get status of all hosts and their services
|
|
var getAllStatus = function(since) {
|
|
|
|
if ($scope.showIcons && $scope.iconsLoading > 0) {
|
|
setTimeout(function() {
|
|
getAllStatus()
|
|
}, 10);
|
|
return;
|
|
}
|
|
|
|
var parameters = {
|
|
query: "hostlist",
|
|
formatoptions: "enumerate bitmask",
|
|
details: true,
|
|
hosttimefield: "lastcheck",
|
|
starttime: since,
|
|
endtime: "-0"
|
|
};
|
|
|
|
var getConfig = {
|
|
params: parameters,
|
|
withCredentials: true
|
|
};
|
|
|
|
// Send the request for host status
|
|
statusTimeout = null;
|
|
$http.get($scope.cgiurl + "statusjson.cgi", getConfig)
|
|
.error(function(err) {
|
|
console.warn(err);
|
|
|
|
// Schedule an update
|
|
statusTimeout = setTimeout(function() { getAllStatus(since) },
|
|
$scope.updateStatusInterval);
|
|
})
|
|
.success(function(json) {
|
|
onGetAllStatusSuccess(json, since);
|
|
})
|
|
};
|
|
|
|
// What to do when the getting the service status is successful
|
|
var onGetServiceStatusSuccess = function(json) {
|
|
var serviceCountUpdated = false;
|
|
|
|
// Record the time of the last update
|
|
$scope.lastUpdate = json.result.query_time;
|
|
|
|
for (var host in json.data.servicelist) {
|
|
var serviceStatUpdated = false;
|
|
if (!$scope.hostList[host].hasOwnProperty("serviceStatusJSON")) {
|
|
$scope.hostList[host].serviceCount =
|
|
Object.keys(json.data.servicelist[host]).length;
|
|
serviceCountUpdated = true;
|
|
$scope.hostList[host].serviceStatusJSON = new Object;
|
|
// Since this is the first time we have a
|
|
// service count if we have the host status,
|
|
// update the node(s).
|
|
if ($scope.hostList[host].hasOwnProperty("statusJSON")) {
|
|
switch ($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTree.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
case layouts.CircularBalloon.index:
|
|
case layouts.Force.index:
|
|
if($scope.hostList[host].hasOwnProperty("g")) {
|
|
$scope.hostList[host].g.forEach(function(e, i, a) {
|
|
updateNode(e);
|
|
});
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
else if (Object.keys($scope.hostList[host].serviceStatusJSON).length
|
|
< Object.keys(json.data.servicelist[host]).length) {
|
|
$scope.hostList[host].serviceCount =
|
|
Object.keys(json.data.servicelist[host]).length;
|
|
serviceCountUpdated = true;
|
|
}
|
|
for (service in json.data.servicelist[host]) {
|
|
if ($scope.hostList[host].serviceStatusJSON[service] != json.data.servicelist[host][service])
|
|
serviceStatUpdated = true;
|
|
$scope.hostList[host].serviceStatusJSON[service] =
|
|
json.data.servicelist[host][service];
|
|
}
|
|
if ($scope.hostList[host].hasOwnProperty("g") && serviceStatUpdated) {
|
|
$scope.hostList[host].g.forEach(function(e, i, a) {
|
|
updateNode(e);
|
|
});
|
|
}
|
|
}
|
|
if (serviceCountUpdated) {
|
|
switch ($scope.layout) {
|
|
case layouts.CircularMarkup.index:
|
|
updateMap($scope.hostTree);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
// Get status of all hosts' services
|
|
var getServiceStatus = function(since) {
|
|
|
|
var parameters = {
|
|
query: "servicelist",
|
|
formatoptions: "enumerate bitmask",
|
|
servicetimefield: "lastcheck",
|
|
starttime: since,
|
|
endtime: "-0"
|
|
};
|
|
|
|
var getConfig = {
|
|
params: parameters,
|
|
withCredentials: true
|
|
};
|
|
|
|
// Send the request for service status
|
|
$http.get($scope.cgiurl + "statusjson.cgi", getConfig)
|
|
.error(function(err) {
|
|
console.warn(err);
|
|
})
|
|
.success(function(json) {
|
|
onGetServiceStatusSuccess(json);
|
|
});
|
|
};
|
|
|
|
// Get an object attribute in a generic way that checks for
|
|
// the existence of all attributes in the hierarchy
|
|
var getObjAttr = function(d, attrs, nilval) {
|
|
|
|
if(d.hasOwnProperty("hostInfo")) {
|
|
var obj = d.hostInfo;
|
|
for(var i = 0; i < attrs.length; i++) {
|
|
if(!obj.hasOwnProperty(attrs[i])) {
|
|
return nilval;
|
|
}
|
|
obj = obj[attrs[i]];
|
|
}
|
|
return obj;
|
|
}
|
|
return nilval;
|
|
};
|
|
|
|
// Determine how long an object has been in it's
|
|
// current state
|
|
var getStateDuration = function(d) {
|
|
var now = new Date;
|
|
var duration;
|
|
var last_state_change = getObjAttr(d,
|
|
["statusJSON", "last_state_change"], null);
|
|
var program_start = getObjAttr(d,
|
|
["statusJSON", "result", "program_start"],
|
|
null);
|
|
if(last_state_change == null) {
|
|
return "unknown";
|
|
}
|
|
else if(last_state_change == 0) {
|
|
duration = now.getTime() - program_start;
|
|
}
|
|
else {
|
|
duration = now.getTime() - last_state_change;
|
|
}
|
|
return duration;
|
|
};
|
|
|
|
// Get the display value for a state time
|
|
var getStateTime = function(time) {
|
|
var when = new Date(time);
|
|
if(when.getTime() == 0) {
|
|
return "unknown";
|
|
}
|
|
else {
|
|
return when;
|
|
}
|
|
};
|
|
|
|
// Get the list of parent hosts
|
|
var getParentHosts = function(d) {
|
|
var parents = getObjAttr(d,
|
|
["objectJSON", "parent_hosts"], null);
|
|
if(parents == null) {
|
|
return "unknown";
|
|
}
|
|
else if(parents.length == 0) {
|
|
return "None (This is a root host)";
|
|
}
|
|
else {
|
|
return parents.join(", ");
|
|
}
|
|
};
|
|
|
|
// Get the number of child hosts
|
|
var getChildHosts = function(d) {
|
|
var children = getObjAttr(d,
|
|
["objectJSON", "child_hosts"], null);
|
|
if(children == null) {
|
|
return "unknown";
|
|
}
|
|
else {
|
|
return children.length;
|
|
}
|
|
};
|
|
|
|
// Get a summary of the host's service states
|
|
var getServiceSummary = function(d) {
|
|
var states = ["ok", "warning", "unknown", "critical",
|
|
"pending"];
|
|
var stateCounts = {};
|
|
if(d.hostInfo.hasOwnProperty("serviceStatusJSON")) {
|
|
for (var service in d.hostInfo.serviceStatusJSON) {
|
|
var state = d.hostInfo.serviceStatusJSON[service];
|
|
if(!stateCounts.hasOwnProperty(state)) {
|
|
stateCounts[state] = 0;
|
|
}
|
|
stateCounts[state]++;
|
|
}
|
|
}
|
|
return stateCounts;
|
|
};
|
|
|
|
// Set the popup contents
|
|
var setPopupContents = function(popup, d) {
|
|
|
|
$scope.popupContents.hostname = getObjAttr(d,
|
|
["objectJSON", "name"], "unknown");
|
|
if($scope.popupContents.hostname == nagiosProcessName) {
|
|
var now = new Date;
|
|
$scope.popupContents.alias = nagiosProcessName;
|
|
$scope.popupContents.address = window.location.host;
|
|
$scope.popupContents.state = "up";
|
|
$scope.popupContents.duration = now.getTime() - $scope.lastNagiosStart;
|
|
$scope.popupContents.lastcheck = $scope.lastUpdate;
|
|
$scope.popupContents.lastchange = $scope.lastNagiosStart;
|
|
$scope.popupContents.parents = "";
|
|
$scope.popupContents.children = "";
|
|
$scope.popupContents.services = null;
|
|
} else {
|
|
$scope.popupContents.alias = getObjAttr(d,
|
|
["objectJSON", "alias"], "unknown");
|
|
$scope.popupContents.address = getObjAttr(d,
|
|
["objectJSON", "address"], "unknown");
|
|
$scope.popupContents.state = getObjAttr(d,
|
|
["statusJSON", "status"], "pending");
|
|
$scope.popupContents.duration = getStateDuration(d);
|
|
$scope.popupContents.lastcheck =
|
|
getStateTime(getObjAttr(d,
|
|
["statusJSON", "last_check"], 0));
|
|
$scope.popupContents.lastchange =
|
|
getStateTime(getObjAttr(d,
|
|
["statusJSON", "last_state_change"], 0));
|
|
$scope.popupContents.parents = getParentHosts(d);
|
|
$scope.popupContents.children = getChildHosts(d);
|
|
$scope.popupContents.services = getServiceSummary(d);
|
|
}
|
|
};
|
|
|
|
// Update the map
|
|
var updateMap = function(source, reparent) {
|
|
|
|
// Update config variables before updating the map
|
|
$scope.showText = $scope.notext == "false";
|
|
$scope.showLinks = $scope.nolinks == "false";
|
|
$scope.showPopups = $scope.nopopups == "false";
|
|
$scope.allowResize = $scope.noresize == "false";
|
|
$scope.showIcons = $scope.noicons == "false";
|
|
|
|
reparent = reparent || false;
|
|
switch($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
updateUserSuppliedMap(source);
|
|
break;
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTree.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
case layouts.CircularBalloon.index:
|
|
$scope.updateDuration = 500;
|
|
updateTreeMap(source);
|
|
break;
|
|
case layouts.CircularMarkup.index:
|
|
$scope.updateDuration = 750;
|
|
updatePartitionMap(source, reparent);
|
|
break;
|
|
case layouts.Force.index:
|
|
updateForceMap(source);
|
|
break;
|
|
}
|
|
};
|
|
|
|
// Update all descendants of a node when collapsing the node
|
|
var updateDescendantsOnCollapse = function(root, x, y,
|
|
member) {
|
|
|
|
// Default member to _children
|
|
member = member || "_children";
|
|
|
|
if(root.hasOwnProperty(member) && root[member] !=
|
|
null) {
|
|
root[member].forEach(function(e, i, a) {
|
|
e.x = x;
|
|
e.dx = 0;
|
|
updateDescendantsOnCollapse(e, x, y,
|
|
"children");
|
|
});
|
|
}
|
|
};
|
|
|
|
// Update all descendants of a node when expanding the node
|
|
var updateDescendantsOnExpand = function(root, x, y,
|
|
member) {
|
|
|
|
// Default member to _children
|
|
member = member || "_children";
|
|
|
|
if(root.hasOwnProperty(member) && root[member] !=
|
|
null) {
|
|
root[member].forEach(function(e, i, a) {
|
|
e.saveArc.x = x;
|
|
e.saveArc.dx = 0;
|
|
e.saveArc.y = y;
|
|
e.saveArc.dy = 0;
|
|
e.saveLabel.x = x;
|
|
e.saveLabel.dx = 0;
|
|
e.saveLabel.y = y;
|
|
e.saveLabel.dy = 0;
|
|
updateDescendantsOnExpand(e, x, y, "children");
|
|
});
|
|
}
|
|
};
|
|
|
|
// Update the layout information for nodes which are/were
|
|
// children of collapsed nodes
|
|
var updateToggledNodes = function(root, updater) {
|
|
|
|
if(root.collapsed) {
|
|
if(root.depth == 0) {
|
|
updater(root, 0, 0);
|
|
}
|
|
else {
|
|
updater(root, root.x + root.dx / 2,
|
|
root.y + root.dy / 2);
|
|
}
|
|
}
|
|
else if(root.hasOwnProperty("children")) {
|
|
root.children.forEach(function(e, i, a) {
|
|
updateToggledNodes(e, updater);
|
|
});
|
|
}
|
|
};
|
|
|
|
// The on-click function for partition maps
|
|
var onClickPartition = function(d) {
|
|
|
|
var evt = d3.event;
|
|
|
|
// If something else (like a pan) is occurring,
|
|
// ignore the click
|
|
if(d3.event.defaultPrevented) return;
|
|
|
|
// Hide the popup
|
|
$scope.displayPopup = false;
|
|
$scope.$apply("displayPopup");
|
|
|
|
if(evt.shiftKey) {
|
|
|
|
// Record the new root
|
|
$scope.root = d.hostInfo.name;
|
|
$scope.$apply('root');
|
|
|
|
// A shift-click indicates a reparenting
|
|
// of the tree
|
|
if(d.collapsed) {
|
|
// If the node click is collapsed,
|
|
// expand it so the tree will have some
|
|
// depth after reparenting
|
|
toggleNode(d);
|
|
}
|
|
// Collapse the root node for good animation
|
|
toggleNode($scope.hostTree);
|
|
updateMap($scope.hostTree, true);
|
|
// Waiting until the updating is done...
|
|
setTimeout(function() {
|
|
// Re-expand the root node so the
|
|
// reparenting will occur correctly
|
|
toggleNode($scope.hostTree);
|
|
// Reparent the tree and redisplay the map
|
|
reparentTree(d);
|
|
updateMap($scope.hostTree, true);
|
|
}, $scope.updateDuration + 50);
|
|
}
|
|
else {
|
|
// A click indicates collapsing or
|
|
// expanding the node
|
|
toggleNode(d);
|
|
updateMap($scope.hostTree);
|
|
}
|
|
};
|
|
|
|
// Recalculate the values of the partition
|
|
var recalculatePartitionValues = function(node) {
|
|
|
|
if(node.hasOwnProperty("children") &&
|
|
node.children != null) {
|
|
node.children.forEach(function(e) {
|
|
recalculatePartitionValues(e);
|
|
});
|
|
node.value = node.children.reduce(function(a, b) {
|
|
return a + b.value;
|
|
}, 0);
|
|
}
|
|
else {
|
|
node.value = getPartitionNodeValue(node);
|
|
}
|
|
};
|
|
|
|
// Recalculate the layout of the partition
|
|
var recalculatePartitionLayout = function(node, index) {
|
|
|
|
index = index || 0;
|
|
|
|
if(node.depth > 0) {
|
|
if(index == 0) {
|
|
node.x = node.parent.x;
|
|
}
|
|
else {
|
|
node.x = node.parent.children[index - 1].x +
|
|
node.parent.children[index - 1].dx;
|
|
}
|
|
node.dx = (node.value / node.parent.value) *
|
|
node.parent.dx
|
|
}
|
|
if(node.hasOwnProperty("children") &&
|
|
node.children != null) {
|
|
node.children.forEach(function(e, i) {
|
|
recalculatePartitionLayout(e, i);
|
|
});
|
|
}
|
|
};
|
|
|
|
// Text filter for labels
|
|
var textFilter = function(d) {
|
|
return d.collapsed ?
|
|
"url(#circular-markup-text-collapsed)" :
|
|
"url(#circular-markup-text)";
|
|
}
|
|
|
|
var addPartitionMapTextGroupContents = function(d, node) {
|
|
var selection = d3.select(node);
|
|
|
|
// Append the label
|
|
if($scope.showText) {
|
|
selection.append("text")
|
|
.each(function(d) {
|
|
setTextAttrs(d, this);
|
|
})
|
|
.style({
|
|
"fill-opacity": 1e-6,
|
|
fill: "white",
|
|
filter: function(d) {
|
|
return textFilter(d);
|
|
}
|
|
})
|
|
.text(function(d) {
|
|
return d.hostInfo.objectJSON.name;
|
|
});
|
|
}
|
|
|
|
// Display the node icon if it has one
|
|
if($scope.showIcons) {
|
|
var image = d.hostInfo.objectJSON.icon_image;
|
|
if (image != "" && image != undefined) {
|
|
var iconInfo = d.hostInfo.iconInfo;
|
|
selection.append("image")
|
|
.attr({
|
|
"xlink:href": $scope.iconurl + image,
|
|
width: iconInfo.width,
|
|
height: iconInfo.height,
|
|
x: -(iconInfo.width / 2),
|
|
y: -((iconInfo.height +
|
|
layouts.CircularMarkup.textPadding +
|
|
$scope.fontSize) / 2),
|
|
transform: function() {
|
|
var rotateAngle = (d.x + d.dx / 2) *
|
|
180 / Math.PI +
|
|
layouts.CircularBalloon.rotation;
|
|
return "rotate(" + -rotateAngle + ")";
|
|
}
|
|
})
|
|
.style({
|
|
filter: function() {
|
|
return getGlowFilter(d);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
// Update the map for partition displays
|
|
var updatePartitionMap = function(source, reparent) {
|
|
|
|
// The svg element that holds it all
|
|
var mapsvg = d3.select("svg#map g#container");
|
|
|
|
// The data for the map
|
|
var mapdata = $scope.partition.nodes(source);
|
|
|
|
if(reparent) {
|
|
if($scope.hostTree.collapsed) {
|
|
// If this is a reparent operation and
|
|
// we're in the collapse phase, shrink
|
|
// the root node to nothing
|
|
$scope.hostTree.x = 0;
|
|
$scope.hostTree.dx = 0;
|
|
$scope.hostTree.y = 0;
|
|
$scope.hostTree.dy = 0;
|
|
}
|
|
else {
|
|
// Calculate the total value of the 1st level
|
|
// children to determine whether we have
|
|
// the bug below
|
|
var value = $scope.hostTree.children.reduce(function(a, b) {
|
|
return a + b.value;
|
|
}, 0);
|
|
if(value == 2 * $scope.hostTree.value) {
|
|
// This appears to be a bug in the
|
|
// d3 library where the sum of the
|
|
// values of the children of the root
|
|
// node is twice what it should be.
|
|
// Work around the bug by manually
|
|
// adjusting the values.
|
|
recalculatePartitionValues($scope.hostTree);
|
|
recalculatePartitionLayout($scope.hostTree);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Update the data for the paths
|
|
var path = mapsvg
|
|
.select("g#paths")
|
|
.selectAll("path")
|
|
.data(mapdata, function(d) {
|
|
return d.id || (d.id = ++$scope.nodeID);
|
|
});
|
|
|
|
// Update the data for the labels
|
|
var labelGroup = mapsvg
|
|
.selectAll("g.label")
|
|
.data(mapdata, function(d) {
|
|
return d.id || (d.id = ++$scope.nodeID);
|
|
});
|
|
|
|
// Traverse the data, artificially setting the layout
|
|
//for collapsed children
|
|
updateToggledNodes($scope.hostTree,
|
|
updateDescendantsOnCollapse);
|
|
|
|
var pathEnter = path.enter()
|
|
.append("path")
|
|
.attr({
|
|
d: function(d) {
|
|
return $scope.arc({x: 0, dx: 0, y: d.y,
|
|
dy: d.dy});
|
|
}
|
|
})
|
|
.style({
|
|
"fill-opacity": 1e-6,
|
|
"stroke-opacity": 1e-6,
|
|
stroke: "#fff",
|
|
fill: function(d) {
|
|
var hostStatus = "pending";
|
|
if(d.hasOwnProperty("hostInfo") &&
|
|
d.hostInfo.hasOwnProperty("statusJSON")) {
|
|
hostStatus = d.hostInfo.statusJSON.status;
|
|
}
|
|
return getNodeFill(hostStatus, false);
|
|
}
|
|
})
|
|
.on("click", function(d) {
|
|
onClickPartition(d);
|
|
})
|
|
.each(function(d) {
|
|
// Traverse each node, saving a pointer
|
|
// to the node in the hostList to
|
|
// facilitate updating later
|
|
if(d.hasOwnProperty("hostInfo")) {
|
|
if(!d.hostInfo.hasOwnProperty("g")) {
|
|
d.hostInfo.g = new Array;
|
|
}
|
|
d.hostInfo.g.push(this);
|
|
}
|
|
});
|
|
|
|
if ($scope.showPopups) {
|
|
pathEnter
|
|
.on("mouseover", function(d, i) {
|
|
if($scope.showPopups &&
|
|
d.hasOwnProperty("hostInfo")) {
|
|
displayPopup(d);
|
|
}
|
|
})
|
|
.on("mouseout", function(d, i) {
|
|
$scope.displayPopup = false;
|
|
$scope.$apply("displayPopup");
|
|
});
|
|
}
|
|
|
|
labelGroup.enter()
|
|
.append("g")
|
|
.attr({
|
|
class: "label",
|
|
transform: function(d) {
|
|
return "translate(" +
|
|
$scope.arc.centroid({x: 0,
|
|
dx: 1e-6, y: d.y, dy: d.dy}) +
|
|
")";
|
|
}
|
|
})
|
|
.each(function(d) {
|
|
addPartitionMapTextGroupContents(d, this);
|
|
});
|
|
|
|
// Update paths on changes
|
|
path.transition()
|
|
.duration($scope.updateDuration)
|
|
.style({
|
|
"fill-opacity": 1,
|
|
"stroke-opacity": 1,
|
|
fill: function(d) {
|
|
var hostStatus = "pending";
|
|
if(d.hasOwnProperty("hostInfo") &&
|
|
d.hostInfo.hasOwnProperty("statusJSON")) {
|
|
hostStatus =
|
|
d.hostInfo.statusJSON.status;
|
|
}
|
|
return getNodeFill(hostStatus, false);
|
|
}
|
|
})
|
|
.attrTween("d", arcTween);
|
|
|
|
// Update label groups on change
|
|
labelGroup
|
|
.transition()
|
|
.duration($scope.updateDuration)
|
|
.attrTween("transform", labelGroupTween);
|
|
|
|
if($scope.showText) {
|
|
labelGroup
|
|
.selectAll("text")
|
|
.style({
|
|
"fill-opacity": 1,
|
|
filter: function(d) {
|
|
return textFilter(d);
|
|
}
|
|
})
|
|
.each(function(d) {
|
|
setTextAttrs(d, this);
|
|
});
|
|
}
|
|
|
|
if($scope.showIcons) {
|
|
labelGroup
|
|
.selectAll("image")
|
|
.attr({
|
|
transform: function(d) {
|
|
var rotateAngle = (d.x + d.dx / 2) * 180 / Math.PI +
|
|
layouts.CircularBalloon.rotation;
|
|
return "rotate(" + -rotateAngle + ")";
|
|
}
|
|
});
|
|
}
|
|
|
|
// Remove paths when necessary
|
|
path.exit()
|
|
.transition()
|
|
.duration($scope.updateDuration)
|
|
.style({
|
|
"fill-opacity": 1e-6,
|
|
"stroke-opacity": 1e-6
|
|
})
|
|
.attrTween("d", arcTween)
|
|
.remove();
|
|
|
|
// Remove labels when necessary
|
|
if($scope.showText) {
|
|
var labelGroupExit = labelGroup.exit();
|
|
|
|
labelGroupExit.each(function(d) {
|
|
var group = d3.select(this);
|
|
|
|
group.select("text")
|
|
.transition()
|
|
.duration($scope.updateDuration / 2)
|
|
.style({
|
|
"fill-opacity": 1e-6
|
|
});
|
|
|
|
group.select("image")
|
|
.transition()
|
|
.duration($scope.updateDuration)
|
|
.style({
|
|
"fill-opacity": 1e-6
|
|
});
|
|
|
|
})
|
|
.transition()
|
|
.duration($scope.updateDuration)
|
|
.attrTween("transform", labelGroupTween)
|
|
.remove();
|
|
}
|
|
};
|
|
|
|
// Traverse the tree, building a list of nodes at each depth
|
|
var updateDepthList = function(node) {
|
|
|
|
if($scope.depthList[node.depth] == null) {
|
|
$scope.depthList[node.depth] = new Array;
|
|
}
|
|
$scope.depthList[node.depth].push(node);
|
|
|
|
if(node.hasOwnProperty("children") &&
|
|
node.children != null) {
|
|
node.children.forEach(function(e) {
|
|
updateDepthList(e);
|
|
});
|
|
}
|
|
};
|
|
|
|
// Calculate the layout for the collapsed tree
|
|
var calculateCollapsedTreeLayout = function(root) {
|
|
|
|
// First get the list of nodes at each depth
|
|
$scope.depthList = new Array;
|
|
updateDepthList(root);
|
|
|
|
// Then determine the widest layer
|
|
var maxWidth = $scope.depthList.reduce(function(a, b) {
|
|
return a > b.length ? a : b.length;
|
|
}, 0);
|
|
|
|
// Determine the spacing of nodes based on the max width
|
|
var treeSize = getTreeSize();
|
|
var spacing = treeSize[0] / maxWidth;
|
|
|
|
// Re-calculate the layout based on the above
|
|
$scope.depthList.forEach(function(layer, depth) {
|
|
layer.forEach(function(node, index) {
|
|
// Calculate the location index: the
|
|
// "index distance" from the center node
|
|
var locationIndex =
|
|
(index - (layer.length - 1) / 2);
|
|
node.x = (treeSize[0] / 2) +
|
|
(locationIndex * spacing);
|
|
});
|
|
});
|
|
};
|
|
|
|
// The on-click function for trees
|
|
var onClickTree = function(d) {
|
|
|
|
var evt = d3.event;
|
|
var updateNode = d;
|
|
|
|
// If something else (like a pan) is occurring,
|
|
// ignore the click
|
|
if(d3.event.defaultPrevented) return;
|
|
|
|
// Hide the popup
|
|
$scope.displayPopup = false;
|
|
$scope.$apply("displayPopup");
|
|
|
|
if(evt.shiftKey) {
|
|
// Record the new root
|
|
$scope.root = d.hostInfo.name;
|
|
$scope.$apply('root');
|
|
|
|
switch($scope.layout) {
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
// Expand the children of the focal point
|
|
$scope.focalPoint.children.forEach(function(e) {
|
|
if(e.collapsed) {
|
|
toggleNode(e);
|
|
}
|
|
});
|
|
// If the focal point is not the root node,
|
|
// restore all children of it's parent
|
|
if(!($scope.focalPoint === $scope.hostTree)) {
|
|
$scope.focalPoint.parent.children =
|
|
$scope.focalPoint.parent._children;
|
|
delete $scope.focalPoint.parent._children;
|
|
$scope.focalPoint.parent.collapsed = false;
|
|
}
|
|
break;
|
|
default:
|
|
if(d.collapsed) {
|
|
// If the node click is collapsed,
|
|
// expand it so the tree will have
|
|
// some depth after reparenting
|
|
toggleNode(d);
|
|
}
|
|
break;
|
|
}
|
|
reparentTree(d);
|
|
}
|
|
else {
|
|
switch($scope.layout) {
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
if((d === $scope.focalPoint) ||
|
|
!(d.hasOwnProperty("children") ||
|
|
d.hasOwnProperty("_children"))) {
|
|
// Nothing to see here, move on
|
|
return;
|
|
}
|
|
// Restore all the children of the current focal
|
|
// point and it's parent (if it is not the root
|
|
// of the tree)
|
|
$scope.focalPoint.children.forEach(function(e) {
|
|
if(e.collapsed) {
|
|
toggleNode(e);
|
|
}
|
|
});
|
|
if(!($scope.focalPoint === $scope.hostTree)) {
|
|
$scope.focalPoint.parent.children =
|
|
$scope.focalPoint.parent._children;
|
|
$scope.focalPoint.parent._children = null;
|
|
$scope.focalPoint.parent.collapsed = false;
|
|
}
|
|
// Set the new focal point
|
|
$scope.focalPoint = d;
|
|
updateNode = (d === $scope.hostTree) ? d :
|
|
d.parent;
|
|
break;
|
|
default:
|
|
toggleNode(d);
|
|
break;
|
|
}
|
|
}
|
|
updateMap(updateNode);
|
|
};
|
|
|
|
// Add a node group to the tree map
|
|
var addTreeMapNodeGroupContents = function(d, node) {
|
|
var selection = d3.select(node);
|
|
|
|
// Display the circle if the node has no icon or
|
|
// icons are suppressed
|
|
if(!$scope.showIcons ||
|
|
d.hostInfo.objectJSON.icon_image == "") {
|
|
selection.append("circle")
|
|
.attr({
|
|
r: 1e-6
|
|
});
|
|
}
|
|
|
|
// Display the node icon if it has one
|
|
if($scope.showIcons) {
|
|
var image = d.hostInfo.objectJSON.icon_image;
|
|
if (image != "" && image != undefined) {
|
|
var iconInfo = d.hostInfo.iconInfo;
|
|
var rotateAngle = null;
|
|
if ($scope.layout == layouts.CircularBalloon.index) {
|
|
rotateAngle = d.x +
|
|
layouts.CircularBalloon.rotation;
|
|
}
|
|
selection.append("image")
|
|
.attr({
|
|
"xlink:href": $scope.iconurl + image,
|
|
width: iconInfo.width,
|
|
height: iconInfo.height,
|
|
x: -(iconInfo.width / 2),
|
|
y: -(iconInfo.height / 2),
|
|
transform: function() {
|
|
return "rotate(" + -rotateAngle + ")";
|
|
}
|
|
})
|
|
.style({
|
|
filter: function() {
|
|
return getGlowFilter(d);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Label the nodes with their host names
|
|
if($scope.showText) {
|
|
selection.append("text")
|
|
.each(function(d) {
|
|
setTextAttrs(d, this);
|
|
})
|
|
.style({
|
|
"fill-opacity": 1e-6
|
|
})
|
|
.text(function(d) {
|
|
return d.hostInfo.objectJSON.name;
|
|
});
|
|
}
|
|
|
|
// Register event handlers for showing the popups
|
|
if($scope.showPopups) {
|
|
selection
|
|
.on("mouseover", function(d, i) {
|
|
if(d.hasOwnProperty("hostInfo")) {
|
|
displayPopup(d);
|
|
}
|
|
})
|
|
.on("mouseout", function(d, i) {
|
|
$scope.displayPopup = false;
|
|
$scope.$apply("displayPopup");
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
// Update the tree map
|
|
var updateTreeMap = function(source) {
|
|
|
|
var textAttrs;
|
|
|
|
// The svg element that holds it all
|
|
var mapsvg = d3.select("svg#map g#container");
|
|
|
|
// Build the nodes from the data
|
|
var nodes;
|
|
switch($scope.layout) {
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
// If this is a depth layer layout, first update the
|
|
// tree based on the current focused node,
|
|
updateDepthLayerTree();
|
|
// then build the nodes from the data
|
|
var root = ($scope.focalPoint === $scope.hostTree) ?
|
|
$scope.hostTree : $scope.focalPoint.parent;
|
|
nodes = $scope.tree.nodes(root).reverse();
|
|
break;
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
// If this is a collapsed tree layout,
|
|
// first build the nodes from the data,
|
|
nodes = $scope.tree.nodes($scope.hostTree).reverse();
|
|
// then re-calculate the positions of the nodes
|
|
calculateCollapsedTreeLayout($scope.hostTree);
|
|
break;
|
|
default:
|
|
nodes = $scope.tree.nodes($scope.hostTree).reverse();
|
|
break;
|
|
}
|
|
|
|
// ...and the links from the nodes
|
|
var links = $scope.tree.links(nodes);
|
|
|
|
// Create the groups to contain the nodes
|
|
var node = mapsvg.selectAll(".node")
|
|
.data(nodes, function(d) {
|
|
return d.id || (d.id = ++$scope.nodeID);
|
|
});
|
|
|
|
if($scope.showLinks) {
|
|
// Create the paths for the links
|
|
var link = mapsvg
|
|
.select("g#links")
|
|
.selectAll(".link")
|
|
.data(links, function(d) { return d.target.id; });
|
|
|
|
// Enter any new links at the parent's
|
|
// previous position.
|
|
link.enter()
|
|
.append("path")
|
|
.attr({
|
|
class: "link",
|
|
d: function(d) {
|
|
var o = {
|
|
x: (source.hasOwnProperty("xOld") ?
|
|
source.xOld : source.x) *
|
|
$scope.zoom.scale(),
|
|
y: (source.hasOwnProperty("yOld") ?
|
|
source.yOld : source.y) *
|
|
$scope.zoom.scale()
|
|
};
|
|
return $scope.diagonal({source: o,
|
|
target: o});
|
|
}
|
|
})
|
|
.transition()
|
|
.duration($scope.updateDuration)
|
|
.attr({
|
|
d: $scope.diagonal
|
|
});
|
|
|
|
// Transition links to their new position.
|
|
link.transition()
|
|
.duration($scope.updateDuration)
|
|
.attr({
|
|
d: $scope.diagonal
|
|
});
|
|
|
|
// Transition exiting nodes to the parent's
|
|
// new position.
|
|
link.exit().transition()
|
|
.duration($scope.updateDuration)
|
|
.attr({
|
|
d: function(d) {
|
|
var o = {
|
|
x: source.x * $scope.zoom.scale(),
|
|
y: source.y * $scope.zoom.scale()
|
|
};
|
|
return $scope.diagonal({source: o,
|
|
target: o});
|
|
}
|
|
})
|
|
.remove();
|
|
}
|
|
|
|
// Enter any new nodes at the parent's
|
|
// previous position.
|
|
var nodeEnter = node.enter()
|
|
.append("g")
|
|
.attr({
|
|
class: "node",
|
|
transform: function(d) {
|
|
return getNodeTransform(source);
|
|
}
|
|
})
|
|
.on("click", function(d) {
|
|
onClickTree(d);
|
|
})
|
|
.each(function(d) {
|
|
// Traverse each node, saving a pointer to
|
|
// the node in the hostList to facilitate
|
|
// updating later
|
|
if(d.hasOwnProperty("hostInfo")) {
|
|
if(!d.hostInfo.hasOwnProperty("g")) {
|
|
d.hostInfo.g = new Array;
|
|
}
|
|
d.hostInfo.g.push(this);
|
|
}
|
|
addTreeMapNodeGroupContents(d, this);
|
|
});
|
|
|
|
// Move the nodes to their final destination
|
|
var nodeUpdate = node.transition()
|
|
.duration($scope.updateDuration)
|
|
.attr({
|
|
transform: function(d) {
|
|
return getNodeTransform(d);
|
|
}
|
|
});
|
|
|
|
// Update the node's circle size
|
|
nodeUpdate.select("circle")
|
|
.attr({
|
|
r: function(d) {
|
|
var serviceCount = 0;
|
|
if(d.hasOwnProperty("hostInfo") &&
|
|
d.hostInfo.hasOwnProperty("serviceCount")) {
|
|
serviceCount = d.hostInfo.serviceCount;
|
|
}
|
|
return $scope.nodeScale(serviceCount);
|
|
}
|
|
})
|
|
.style({
|
|
stroke: function(d) {
|
|
var hostStatus = "pending";
|
|
if(d.hasOwnProperty("hostInfo") &&
|
|
d.hostInfo.hasOwnProperty("statusJSON")) {
|
|
hostStatus =
|
|
d.hostInfo.statusJSON.status;
|
|
}
|
|
return getNodeStroke(hostStatus,
|
|
d.collapsed);
|
|
},
|
|
fill: function(d) {
|
|
var hostStatus = "pending";
|
|
if(d.hasOwnProperty("hostInfo") &&
|
|
d.hostInfo.hasOwnProperty("statusJSON")) {
|
|
hostStatus = d.hostInfo.statusJSON.status;
|
|
}
|
|
return getNodeFill(hostStatus, false);
|
|
},
|
|
});
|
|
|
|
// Update the images' filters
|
|
nodeUpdate.select("image")
|
|
.style({
|
|
filter: function(d) {
|
|
return getGlowFilter(d);
|
|
}
|
|
});
|
|
|
|
// Update the text's opacity
|
|
nodeUpdate.select("text")
|
|
.each(function(d) {
|
|
setTextAttrs(d, this);
|
|
})
|
|
.style({
|
|
"fill-opacity": 1,
|
|
filter: function(d) {
|
|
return getTextFilter(d);
|
|
},
|
|
stroke: function(d) {
|
|
return getTextStrokeColor(d);
|
|
}
|
|
});
|
|
|
|
// Transition exiting nodes to the parent's
|
|
// new position.
|
|
var nodeExit = node.exit().transition()
|
|
.duration($scope.updateDuration)
|
|
.attr({
|
|
transform: function(d) {
|
|
return getNodeTransform(source);
|
|
}
|
|
})
|
|
.remove();
|
|
|
|
nodeExit.select("circle")
|
|
.attr({
|
|
r: 1e-6
|
|
});
|
|
|
|
nodeExit.select("text")
|
|
.style({
|
|
"fill-opacity": 1e-6
|
|
});
|
|
|
|
// Update all nodes associated with the source
|
|
if(source.hasOwnProperty("hostInfo") &&
|
|
source.hostInfo.hasOwnProperty("g")) {
|
|
source.hostInfo.g.forEach(function(e, i, a) {
|
|
updateNode(e);
|
|
});
|
|
}
|
|
|
|
// Save the old positions for the next transition.
|
|
nodes.forEach(function(e) {
|
|
e.xOld = e.x;
|
|
e.yOld = e.y;
|
|
});
|
|
};
|
|
|
|
// Update the tree for the depth layer layout
|
|
var updateDepthLayerTree = function() {
|
|
|
|
// In a depth layer layout, the focal point node is the
|
|
// center of the universe; show only it, it's children
|
|
// and it's parent (if the focal point node is not the
|
|
// root node).
|
|
if(!($scope.focalPoint === $scope.hostTree)) {
|
|
// For all cases except where the focal point is the
|
|
// root node make the focal point the only child of
|
|
// it's parent
|
|
$scope.focalPoint.parent._children =
|
|
$scope.focalPoint.parent.children;
|
|
$scope.focalPoint.parent.children = new Array;
|
|
$scope.focalPoint.parent.children.push($scope.focalPoint);
|
|
$scope.focalPoint.parent.collapsed = true;
|
|
}
|
|
// Collapse all the children of the focal point
|
|
if($scope.focalPoint.hasOwnProperty("children") &&
|
|
$scope.focalPoint.children != null) {
|
|
$scope.focalPoint.children.forEach(function(e) {
|
|
if(!e.collapsed &&
|
|
e.hasOwnProperty("children") &&
|
|
(e.children.length > 0)) {
|
|
toggleNode(e);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
var addUserSuppliedNodeGroupContents = function(d, node) {
|
|
var selection = d3.select(node);
|
|
|
|
// Display the circle if the node has no icon or
|
|
// icons are suppressed
|
|
if(!$scope.showIcons ||
|
|
d.hostInfo.objectJSON.icon_image == "") {
|
|
selection.append("circle")
|
|
.attr({
|
|
r: 1e-6
|
|
});
|
|
}
|
|
|
|
// Display the node icon if it has one
|
|
if($scope.showIcons) {
|
|
var image = d.hostInfo.objectJSON.icon_image;
|
|
if (image != "" && image != undefined) {
|
|
var iconInfo = d.hostInfo.iconInfo
|
|
selection.append("image")
|
|
.attr({
|
|
"xlink:href": $scope.iconurl + image,
|
|
width: iconInfo.width,
|
|
height: iconInfo.height,
|
|
x: -(iconInfo.width / 2),
|
|
y: -(iconInfo.height / 2),
|
|
})
|
|
.style({
|
|
filter: function() {
|
|
return getGlowFilter(d);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Label the nodes with their host names
|
|
if($scope.showText) {
|
|
selection.append("text")
|
|
.each(function(d) {
|
|
setTextAttrs(d, this);
|
|
})
|
|
.text(function(d) {
|
|
return d.hostInfo.objectJSON.name;
|
|
});
|
|
}
|
|
|
|
// Register event handlers for showing the popups
|
|
if($scope.showPopups) {
|
|
selection
|
|
.on("mouseover", function(d, i) {
|
|
if(d.hasOwnProperty("hostInfo")) {
|
|
displayPopup(d);
|
|
}
|
|
})
|
|
.on("mouseout", function(d, i) {
|
|
$scope.displayPopup = false;
|
|
$scope.$apply("displayPopup");
|
|
});
|
|
}
|
|
};
|
|
|
|
// Update the map that uses configuration-specified
|
|
// coordinates
|
|
var updateUserSuppliedMap = function(source) {
|
|
|
|
// Update the scales
|
|
calculateUserSuppliedDimensions();
|
|
userSuppliedLayout.xScale
|
|
.domain([userSuppliedLayout.dimensions.upperLeft.x,
|
|
userSuppliedLayout.dimensions.lowerRight.x]);
|
|
userSuppliedLayout.yScale
|
|
.domain([userSuppliedLayout.dimensions.upperLeft.y,
|
|
userSuppliedLayout.dimensions.lowerRight.y]);
|
|
|
|
// The svg element that holds it all
|
|
var mapsvg = d3.select("svg#map g#container");
|
|
|
|
// Convert the host list into an array
|
|
var mapdata = new Array;
|
|
for(host in $scope.hostList) {
|
|
if(host != null) {
|
|
var tmp = new Object;
|
|
tmp.hostInfo = $scope.hostList[host];
|
|
mapdata.push(tmp);
|
|
}
|
|
}
|
|
|
|
// Update the data for the nodes
|
|
var node = mapsvg
|
|
.selectAll("g.node")
|
|
.data(mapdata);
|
|
|
|
var nodeEnter = node.enter()
|
|
.append("g")
|
|
.attr({
|
|
class: "node",
|
|
transform: function(d) {
|
|
return getNodeTransform(d);
|
|
}
|
|
})
|
|
.each(function(d) {
|
|
// Traverse each node, saving a pointer
|
|
// to the node in the hostList to
|
|
// facilitate updating later
|
|
if(d.hasOwnProperty("hostInfo")) {
|
|
if(!d.hostInfo.hasOwnProperty("g")) {
|
|
d.hostInfo.g = new Array;
|
|
}
|
|
d.hostInfo.g.push(this);
|
|
}
|
|
addUserSuppliedNodeGroupContents(d, this);
|
|
});
|
|
};
|
|
|
|
// Tick function for force layout
|
|
var onForceTick = function(source) {
|
|
|
|
if($scope.showLinks) {
|
|
forceLayout.link
|
|
.attr({
|
|
x1: function(d) {
|
|
return $scope.xZoomScale(d.source.x);
|
|
},
|
|
y1: function(d) {
|
|
return $scope.yZoomScale(d.source.y);
|
|
},
|
|
x2: function(d) {
|
|
return $scope.xZoomScale(d.target.x);
|
|
},
|
|
y2: function(d) {
|
|
return $scope.yZoomScale(d.target.y);
|
|
}
|
|
});
|
|
}
|
|
|
|
forceLayout.node
|
|
.attr({
|
|
transform: function(d) {
|
|
return "translate(" +
|
|
$scope.xZoomScale(d.x) + ", " +
|
|
$scope.yZoomScale(d.y) + ")";
|
|
}
|
|
});
|
|
};
|
|
|
|
// Flatten the map
|
|
var flattenMap = function(root) {
|
|
var nodes = [], i = 0;
|
|
|
|
function recurse(node, depth) {
|
|
if(node.children) node.children.forEach(function(e) {
|
|
recurse(e, depth + 1);
|
|
});
|
|
if(!node.id) node.id = ++i;
|
|
node.depth = depth;
|
|
nodes.push(node);
|
|
}
|
|
|
|
recurse(root, 0);
|
|
return nodes;
|
|
};
|
|
|
|
// Handle a click on a node in the force tree
|
|
var onClickForce = function(d) {
|
|
|
|
// Hide the popup
|
|
$scope.displayPopup = false;
|
|
$scope.$apply("displayPopup");
|
|
|
|
// Note: reparenting the tree is not implemented
|
|
// because the map doesn't appear any different
|
|
// after reparenting. However, reparenting would
|
|
// affect what is collapsed/expanded when an
|
|
// interior node is click, so it eventually may
|
|
// make sense.
|
|
toggleNode(d);
|
|
updateMap(d);
|
|
};
|
|
|
|
// Add the components to the force map node group
|
|
var addForceMapNodeGroupContents = function(d, node) {
|
|
var selection = d3.select(node);
|
|
|
|
if(!$scope.showIcons ||
|
|
d.hostInfo.objectJSON.icon_image == "") {
|
|
selection.append("circle")
|
|
.attr({
|
|
r: $scope.minRadius
|
|
});
|
|
}
|
|
|
|
// Display the node icon if it has one
|
|
if ($scope.showIcons) {
|
|
var image = d.hostInfo.objectJSON.icon_image;
|
|
if (image != "" && image != undefined) {
|
|
var iconInfo = d.hostInfo.iconInfo;
|
|
var rotateAngle = null;
|
|
if ($scope.layout == layouts.CircularBalloon.index) {
|
|
rotateAngle = d.x +
|
|
layouts.CircularBalloon.rotation;
|
|
}
|
|
selection.append("image")
|
|
.attr({
|
|
"xlink:href": $scope.iconurl + image,
|
|
width: iconInfo.width,
|
|
height: iconInfo.height,
|
|
x: -(iconInfo.width / 2),
|
|
y: -(iconInfo.height / 2),
|
|
transform: function() {
|
|
return "rotate(" + -rotateAngle + ")";
|
|
}
|
|
})
|
|
.style({
|
|
filter: function() {
|
|
return getGlowFilter(d);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
if ($scope.showText) {
|
|
selection.append("text")
|
|
.each(function(d) {
|
|
setTextAttrs(d, this);
|
|
})
|
|
.text(function(d) {
|
|
return d.hostInfo.objectJSON.name;
|
|
})
|
|
.style({
|
|
filter: function(d) {
|
|
return getTextFilter(d);
|
|
},
|
|
stroke: function(d) {
|
|
return getTextStrokeColor(d);
|
|
}
|
|
});
|
|
}
|
|
|
|
if ($scope.showPopups) {
|
|
selection
|
|
.on("click", function(d) {
|
|
onClickForce(d);
|
|
})
|
|
.on("mouseover", function(d) {
|
|
if($scope.showPopups) {
|
|
if(d.hasOwnProperty("hostInfo")) {
|
|
displayPopup(d);
|
|
}
|
|
}
|
|
})
|
|
.on("mouseout", function(d) {
|
|
$scope.displayPopup = false;
|
|
$scope.$apply("displayPopup");
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
// Update the force map
|
|
var updateForceMap = function(source) {
|
|
|
|
// How long must we wait
|
|
var duration = 750;
|
|
|
|
// The svg element that holds it all
|
|
var mapsvg = d3.select("svg#map g#container");
|
|
|
|
// Build the nodes from the data
|
|
var nodes = flattenMap($scope.hostTree);
|
|
|
|
// ...and the links from the nodes
|
|
var links = d3.layout.tree().links(nodes);
|
|
|
|
// Calculate the force parameters
|
|
var maxDepth = nodes.reduce(function(a, b) {
|
|
return a > b.depth ? a : b.depth;
|
|
}, 0);
|
|
var diameter = Math.min($scope.svgHeight -
|
|
2 * layouts.Force.outsidePadding,
|
|
$scope.svgWidth -
|
|
2 * layouts.Force.outsidePadding);
|
|
var distance = diameter / (maxDepth * 2);
|
|
var charge = -30 * (Math.pow(distance, 1.2) / 20);
|
|
|
|
// Restart the force layout.
|
|
$scope.force
|
|
.linkDistance(distance)
|
|
.charge(charge)
|
|
.nodes(nodes)
|
|
.links(links)
|
|
.start();
|
|
|
|
if($scope.showLinks) {
|
|
// Create the lines for the links
|
|
forceLayout.link = mapsvg.select("g#links")
|
|
.selectAll(".link")
|
|
.data(links, function(d) { return d.target.id; });
|
|
|
|
// Create new links
|
|
forceLayout.link.enter()
|
|
.append("line")
|
|
.attr({
|
|
class: "link",
|
|
x1: function(d) {
|
|
return $scope.xZoomScale(d.source.x);
|
|
},
|
|
y1: function(d) {
|
|
return $scope.yZoomScale(d.source.y);
|
|
},
|
|
x2: function(d) {
|
|
return $scope.xZoomScale(d.target.x);
|
|
},
|
|
y2: function(d) {
|
|
return $scope.yZoomScale(d.target.y);
|
|
}
|
|
});
|
|
|
|
// Remove any old links.
|
|
forceLayout.link.exit().remove();
|
|
}
|
|
|
|
// Create the nodes from the data
|
|
forceLayout.node = mapsvg.selectAll("g.node")
|
|
.data(nodes, function(d) { return d.id; });
|
|
|
|
// Exit any old nodes.
|
|
forceLayout.node.exit().remove();
|
|
|
|
// Create any new nodes
|
|
var nodeEnter = forceLayout.node.enter()
|
|
.append("g")
|
|
.attr({
|
|
class: "node",
|
|
transform: function(d) {
|
|
return "translate(" +
|
|
$scope.xZoomScale(d.x) + ", " +
|
|
$scope.yZoomScale(d.y) + ")";
|
|
}
|
|
})
|
|
.each(function(d) {
|
|
// Traverse each node, saving a pointer
|
|
// to the node in the hostList to
|
|
// facilitate updating later
|
|
if(d.hasOwnProperty("hostInfo")) {
|
|
if(!d.hostInfo.hasOwnProperty("g")) {
|
|
d.hostInfo.g = new Array;
|
|
}
|
|
d.hostInfo.g.push(this);
|
|
}
|
|
addForceMapNodeGroupContents(d, this);
|
|
})
|
|
.call($scope.force.drag);
|
|
|
|
// Update existing nodes
|
|
forceLayout.node
|
|
.select("circle")
|
|
.transition()
|
|
.duration(duration)
|
|
.attr({
|
|
r: function(d) {
|
|
return $scope.nodeScale(getServiceCount(d));
|
|
}
|
|
})
|
|
.style({
|
|
stroke: function(d) {
|
|
return getNodeStroke(getHostStatus(d),
|
|
d.collapsed);
|
|
},
|
|
fill: function(d) {
|
|
return getNodeFill(getHostStatus(d), false);
|
|
}
|
|
});
|
|
|
|
forceLayout.node
|
|
.select("text")
|
|
.style({
|
|
filter: function(d) {
|
|
return getTextFilter(d);
|
|
},
|
|
stroke: function(d) {
|
|
return getTextStrokeColor(d);
|
|
}
|
|
});
|
|
};
|
|
|
|
// Create the value function
|
|
var getPartitionNodeValue = function(d) {
|
|
|
|
if(d.hasOwnProperty("hostInfo") &&
|
|
d.hostInfo.hasOwnProperty("serviceCount")) {
|
|
return d.hostInfo.serviceCount == 0 ? 1 :
|
|
d.hostInfo.serviceCount;
|
|
}
|
|
else {
|
|
return 1;
|
|
}
|
|
};
|
|
|
|
// Calculate the dimensions for the user supplied layout
|
|
var calculateUserSuppliedDimensions = function() {
|
|
|
|
switch ($scope.dimensions) {
|
|
case "auto":
|
|
// Create a temporary array with pointers
|
|
// to the object JSON data
|
|
ojdata = new Array;
|
|
for(var host in $scope.hostList) {
|
|
if(host != null) {
|
|
ojdata.push($scope.hostList[host].objectJSON);
|
|
}
|
|
}
|
|
// Determine dimensions based on included objects
|
|
userSuppliedLayout.dimensions.upperLeft.x =
|
|
ojdata[0].x_2d;
|
|
userSuppliedLayout.dimensions.upperLeft.x =
|
|
ojdata.reduce(function(a, b) {
|
|
return a < b.x_2d ? a : b.x_2d;
|
|
});
|
|
userSuppliedLayout.dimensions.upperLeft.y =
|
|
ojdata[0].y_2d;
|
|
userSuppliedLayout.dimensions.upperLeft.y =
|
|
ojdata.reduce(function(a, b) {
|
|
return a < b.y_2d ? a : b.y_2d;
|
|
});
|
|
userSuppliedLayout.dimensions.lowerRight.x =
|
|
ojdata[0].x_2d;
|
|
userSuppliedLayout.dimensions.lowerRight.x =
|
|
ojdata.reduce(function(a, b) {
|
|
return a > b.x_2d ? a : b.x_2d;
|
|
});
|
|
userSuppliedLayout.dimensions.lowerRight.y =
|
|
ojdata[0].y_2d;
|
|
userSuppliedLayout.dimensions.lowerRight.y =
|
|
ojdata.reduce(function(a, b) {
|
|
return a > b.y_2d ? a : b.y_2d;
|
|
});
|
|
break;
|
|
case "fixed":
|
|
userSuppliedLayout.dimensions.upperLeft.x = 0;
|
|
userSuppliedLayout.dimensions.upperLeft.y = 0;
|
|
userSuppliedLayout.dimensions.lowerRight.x =
|
|
$scope.svgWidth;
|
|
userSuppliedLayout.dimensions.lowerRight.y =
|
|
$scope.svgHeight;
|
|
break;
|
|
case "user":
|
|
userSuppliedLayout.dimensions.upperLeft.x =
|
|
$scope.ulx;
|
|
userSuppliedLayout.dimensions.upperLeft.y =
|
|
$scope.uly;
|
|
userSuppliedLayout.dimensions.lowerRight.x =
|
|
$scope.lrx;
|
|
userSuppliedLayout.dimensions.lowerRight.y =
|
|
$scope.lry;
|
|
break;
|
|
}
|
|
};
|
|
|
|
// What to do when the resize handle is dragged
|
|
var onResizeDrag = function() {
|
|
|
|
// Get the drag event
|
|
var event = d3.event;
|
|
|
|
// Resize the div
|
|
$scope.svgWidth = event.x;
|
|
$scope.svgHeight = event.y;
|
|
|
|
// Propagate changes to parent scope (so, for example,
|
|
// menu icon is redrown immediately). Note that it
|
|
// doesn't seem to matter what we apply, so the
|
|
// empty string is applied to decouple this directive
|
|
// from it's parent's scope.
|
|
$scope.$parent.$apply("");
|
|
|
|
updateOnResize(this);
|
|
};
|
|
|
|
var updateOnResize = function(resizeHandle) {
|
|
d3.select("div#mapsvg")
|
|
.style({
|
|
height: function() {
|
|
return $scope.svgHeight + "px";
|
|
},
|
|
width: function() {
|
|
return $scope.svgWidth + "px";
|
|
}
|
|
})
|
|
$scope.diameter = Math.min($scope.svgHeight,
|
|
$scope.svgWidth);
|
|
|
|
// Update the scales
|
|
switch($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
switch($scope.dimensions) {
|
|
case "auto":
|
|
userSuppliedLayout.xScale.range([0 +
|
|
layouts.UserSupplied.padding.left,
|
|
$scope.svgWidth -
|
|
layouts.UserSupplied.padding.right]);
|
|
userSuppliedLayout.yScale.range([0 +
|
|
layouts.UserSupplied.padding.top,
|
|
$scope.svgHeight -
|
|
layouts.UserSupplied.padding.bottom]);
|
|
break;
|
|
case "fixed":
|
|
userSuppliedLayout.dimensions.lowerRight.x =
|
|
$scope.svgWidth;
|
|
userSuppliedLayout.dimensions.lowerRight.y =
|
|
$scope.svgHeight;
|
|
// no break;
|
|
case "user":
|
|
userSuppliedLayout.xScale.range([0,
|
|
$scope.svgWidth]);
|
|
userSuppliedLayout.yScale.range([0,
|
|
$scope.svgHeight]);
|
|
break;
|
|
}
|
|
break;
|
|
}
|
|
|
|
// Resize the svg
|
|
d3.select("svg#map")
|
|
.style({
|
|
height: $scope.svgHeight,
|
|
width: $scope.svgWidth
|
|
})
|
|
|
|
// Update the container transform
|
|
d3.select("svg#map g#container")
|
|
.attr({
|
|
transform: function() {
|
|
return getContainerTransform();
|
|
}
|
|
});
|
|
|
|
// Update the appropriate layout
|
|
switch($scope.layout) {
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTree.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
case layouts.CircularBalloon.index:
|
|
// Update the tree size
|
|
$scope.tree.size(getTreeSize())
|
|
break;
|
|
case layouts.CircularMarkup.index:
|
|
// Update the partition size
|
|
var radius = $scope.diameter / 2 -
|
|
layouts.CircularMarkup.padding;
|
|
var exponent = layouts.CircularMarkup.radialExponent;
|
|
$scope.partition.size([2 * Math.PI,
|
|
Math.pow(radius, exponent)]);
|
|
break;
|
|
case layouts.Force.index:
|
|
$scope.force.size([$scope.svgWidth -
|
|
2 * layouts.Force.outsidePadding,
|
|
$scope.svgHeight -
|
|
2 * layouts.Force.outsidePadding]);
|
|
break;
|
|
}
|
|
|
|
// Move the resize handle
|
|
if($scope.allowResize) {
|
|
d3.select(resizeHandle)
|
|
.attr({
|
|
transform: function() {
|
|
x = $scope.svgWidth -
|
|
($scope.handleWidth +
|
|
$scope.handlePadding);
|
|
y = $scope.svgHeight -
|
|
($scope.handleHeight +
|
|
$scope.handlePadding);
|
|
return "translate(" + x + ", " +
|
|
y + ")";
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update the contents
|
|
switch($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
d3.selectAll("g.node circle")
|
|
.attr({
|
|
transform: function(d) {
|
|
return getNodeTransform(d);
|
|
}
|
|
});
|
|
d3.selectAll("g.node text")
|
|
.each(function(d) {
|
|
setTextAttrs(d, this);
|
|
});
|
|
break;
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTree.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
case layouts.CircularBalloon.index:
|
|
$scope.updateDuration = 0;
|
|
updateTreeMap($scope.hostTree);
|
|
break;
|
|
case layouts.CircularMarkup.index:
|
|
$scope.updateDuration = 0;
|
|
updatePartitionMap($scope.hostTree);
|
|
break;
|
|
case layouts.Force.index:
|
|
updateForceMap($scope.hostTree);
|
|
break;
|
|
}
|
|
};
|
|
|
|
// Set up the resize function
|
|
setupResize = function() {
|
|
|
|
// Create the drag behavior
|
|
var drag = d3.behavior.drag()
|
|
.origin(function() {
|
|
return { x: $scope.svgWidth,
|
|
y: $scope.svgHeight };
|
|
})
|
|
.on("dragstart", function() {
|
|
// silence other listeners
|
|
d3.event.sourceEvent.stopPropagation();
|
|
})
|
|
.on("drag", onResizeDrag);
|
|
|
|
// Create the resize handle
|
|
d3.select("svg#map")
|
|
.append("g")
|
|
.attr({
|
|
id: "resize-handle",
|
|
transform: function() {
|
|
x = $scope.svgWidth - ($scope.handleWidth +
|
|
$scope.handlePadding);
|
|
y = $scope.svgHeight -
|
|
($scope.handleHeight +
|
|
$scope.handlePadding);
|
|
return "translate(" + x + ", " + y + ")";
|
|
}
|
|
})
|
|
.call(drag)
|
|
.append("path")
|
|
.attr({
|
|
d: function() {
|
|
return "M 0 " + $scope.handleHeight +
|
|
" L " + $scope.handleWidth + " " +
|
|
$scope.handleHeight + " L " +
|
|
$scope.handleWidth + " " + 0 +
|
|
" L " + 0 + " " +
|
|
$scope.handleHeight;
|
|
},
|
|
stroke: "black",
|
|
fill: "black"
|
|
});
|
|
};
|
|
|
|
// Get the node container transform
|
|
getContainerTransform = function() {
|
|
|
|
switch($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
case layouts.Force.index:
|
|
return null;
|
|
break;
|
|
case layouts.DepthLayers.index:
|
|
return "translate(0, " +
|
|
layouts.DepthLayers.topPadding + ")";
|
|
break;
|
|
case layouts.DepthLayersVertical.index:
|
|
return "translate(" +
|
|
layouts.DepthLayersVertical.leftPadding +
|
|
", 0)";
|
|
break;
|
|
case layouts.CollapsedTree.index:
|
|
return "translate(0, " +
|
|
layouts.CollapsedTree.topPadding +
|
|
")";
|
|
break;
|
|
case layouts.CollapsedTreeVertical.index:
|
|
return "translate(" +
|
|
layouts.CollapsedTreeVertical.leftPadding +
|
|
", 0)";
|
|
break;
|
|
case layouts.BalancedTree.index:
|
|
return "translate(0, " +
|
|
layouts.BalancedTree.topPadding + ")";
|
|
break;
|
|
case layouts.BalancedTreeVertical.index:
|
|
return "translate(" +
|
|
layouts.BalancedTreeVertical.leftPadding +
|
|
", 0)";
|
|
break;
|
|
case layouts.CircularBalloon.index:
|
|
case layouts.CircularMarkup.index:
|
|
var zoomTranslate = $scope.zoom.translate();
|
|
var zoomScale = $scope.zoom.scale();
|
|
var translate = [zoomTranslate[0] +
|
|
($scope.svgWidth / 2) * zoomScale,
|
|
zoomTranslate[1] +
|
|
($scope.svgHeight / 2) * zoomScale];
|
|
return "transform", "translate(" + translate +
|
|
") scale(" + zoomScale + ")";
|
|
break;
|
|
default:
|
|
return null;
|
|
break;
|
|
}
|
|
};
|
|
|
|
// Display the map
|
|
var displayMap = function() {
|
|
|
|
displayMapDone = false;
|
|
|
|
// Update the scales
|
|
switch($scope.layout) {
|
|
case layouts.UserSupplied.index:
|
|
switch($scope.dimensions) {
|
|
case "auto":
|
|
userSuppliedLayout.xScale
|
|
.range([0 +
|
|
layouts.UserSupplied.padding.left,
|
|
$scope.svgWidth -
|
|
layouts.UserSupplied.padding.right]);
|
|
userSuppliedLayout.yScale
|
|
.range([0 +
|
|
layouts.UserSupplied.padding.top,
|
|
$scope.svgHeight -
|
|
layouts.UserSupplied.padding.bottom]);
|
|
break;
|
|
case "fixed":
|
|
case "user":
|
|
userSuppliedLayout.xScale
|
|
.range([0, $scope.svgWidth]);
|
|
userSuppliedLayout.yScale
|
|
.range([0, $scope.svgHeight]);
|
|
break;
|
|
}
|
|
break;
|
|
}
|
|
|
|
// Resize the svg
|
|
d3.select("svg#map")
|
|
.style({
|
|
height: $scope.svgHeight,
|
|
width: $scope.svgWidth
|
|
});
|
|
|
|
var container = d3.select("g#container");
|
|
|
|
// Build the appropriate layout
|
|
switch($scope.layout) {
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTree.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
case layouts.CircularBalloon.index:
|
|
// Append a group for the links
|
|
container.append("g")
|
|
.attr({
|
|
id: "links"
|
|
});
|
|
|
|
// Build the tree
|
|
var treeSize = getTreeSize();
|
|
$scope.tree = d3.layout.tree()
|
|
.size(treeSize)
|
|
.separation(function(a, b) {
|
|
switch($scope.layout) {
|
|
case layouts.DepthLayers.index:
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTree.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
return a.parent == b.parent ? 1 : 2;
|
|
break;
|
|
case layouts.CircularBalloon.index:
|
|
var d = a.depth > 0 ? a.depth : b.depth, sep;
|
|
if (d <= 0)
|
|
d = 1;
|
|
sep = (a.parent == b.parent ? 1 : 2) / d;
|
|
return sep;
|
|
break;
|
|
}
|
|
});
|
|
break;
|
|
case layouts.CircularMarkup.index:
|
|
// Append a group for the links
|
|
container.append("g")
|
|
.attr({
|
|
id: "paths"
|
|
});
|
|
|
|
// Build the partition
|
|
var radius = $scope.diameter / 2 -
|
|
layouts.CircularMarkup.padding;
|
|
var exponent = layouts.CircularMarkup.radialExponent;
|
|
$scope.partition = d3.layout.partition()
|
|
// .sort(cmpHostName)
|
|
.size([2 * Math.PI, Math.pow(radius, exponent)])
|
|
.value(getPartitionNodeValue);
|
|
break;
|
|
case layouts.Force.index:
|
|
// Append a group for the links
|
|
container.append("g")
|
|
.attr({
|
|
id: "links"
|
|
});
|
|
|
|
// Build the layout
|
|
$scope.force = d3.layout.force()
|
|
.size([$scope.svgWidth -
|
|
2 * layouts.Force.outsidePadding,
|
|
$scope.svgHeight -
|
|
2 * layouts.Force.outsidePadding])
|
|
.on("tick", onForceTick);
|
|
break;
|
|
}
|
|
|
|
// Create the diagonal that will be used to
|
|
// connect the nodes
|
|
switch($scope.layout) {
|
|
case layouts.DepthLayers.index:
|
|
case layouts.CollapsedTree.index:
|
|
case layouts.BalancedTree.index:
|
|
$scope.diagonal = d3.svg.diagonal()
|
|
.projection(function(d) {
|
|
return [$scope.xZoomScale(d.x),
|
|
$scope.yZoomScale(d.y)];
|
|
});
|
|
break;
|
|
case layouts.DepthLayersVertical.index:
|
|
case layouts.CollapsedTreeVertical.index:
|
|
case layouts.BalancedTreeVertical.index:
|
|
$scope.diagonal = d3.svg.diagonal()
|
|
.projection(function(d) {
|
|
return [$scope.xZoomScale(d.y),
|
|
$scope.yZoomScale(d.x)];
|
|
});
|
|
break;
|
|
case layouts.CircularBalloon.index:
|
|
$scope.diagonal = d3.svg.diagonal.radial()
|
|
.projection(function(d) {
|
|
var angle = 0;
|
|
if(!isNaN(d.x)) {
|
|
angle = d.x +
|
|
layouts.CircularBalloon.rotation
|
|
+ 90;
|
|
}
|
|
return [d.y * $scope.zoom.scale(),
|
|
((angle / 180) * Math.PI)];
|
|
});
|
|
break;
|
|
}
|
|
|
|
// Create the arc this will be used to display the nodes
|
|
switch($scope.layout) {
|
|
case layouts.CircularMarkup.index:
|
|
$scope.arc = d3.svg.arc()
|
|
.startAngle(function(d) { return d.x; })
|
|
.endAngle(function(d) { return d.x + d.dx; })
|
|
.innerRadius(function(d) {
|
|
return Math.pow(d.y, (1 / exponent));
|
|
})
|
|
.outerRadius(function(d) {
|
|
return Math.pow(d.y + d.dy, (1 / exponent));
|
|
});
|
|
break;
|
|
}
|
|
|
|
// Set the focal point to the root
|
|
$scope.focalPoint = $scope.hostTree;
|
|
|
|
// Signal the fact that displayMap() is done
|
|
displayMapDone = true;
|
|
};
|
|
|
|
// Activities that take place only on
|
|
// directive instantiation
|
|
var onDirectiveInstantiation = function() {
|
|
|
|
// Create the zoom behavior
|
|
$scope.xZoomScale = d3.scale.linear();
|
|
$scope.yZoomScale = d3.scale.linear();
|
|
$scope.zoom = d3.behavior.zoom()
|
|
.scaleExtent([1 / $scope.maxzoom, $scope.maxzoom])
|
|
.x($scope.xZoomScale)
|
|
.y($scope.yZoomScale)
|
|
.on("zoomstart", onZoomStart)
|
|
.on("zoom", onZoom);
|
|
|
|
// Set up the div containing the map and
|
|
// attach the zoom behavior to the it
|
|
d3.select("div#mapsvg")
|
|
.style({
|
|
"z-index": $scope.mapZIndex,
|
|
height: function() {
|
|
return $scope.svgHeight + "px";
|
|
},
|
|
width: function() {
|
|
return $scope.svgWidth + "px";
|
|
}
|
|
})
|
|
.call($scope.zoom);
|
|
|
|
// Set up the resize function
|
|
if($scope.allowResize) {
|
|
setupResize();
|
|
}
|
|
|
|
// Create a container group
|
|
d3.select("svg#map")
|
|
.append("g")
|
|
.attr({
|
|
id: "container",
|
|
transform: function() {
|
|
return getContainerTransform();
|
|
}
|
|
});
|
|
|
|
// Create scale to size nodes based on
|
|
// number of services
|
|
$scope.nodeScale = d3.scale.linear()
|
|
.domain([0, $scope.maxRadiusCount])
|
|
.range([$scope.minRadius, $scope.maxRadius])
|
|
.clamp(true);
|
|
|
|
};
|
|
|
|
onDirectiveInstantiation();
|
|
}
|
|
};
|
|
});
|