You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.6 KiB
119 lines
3.6 KiB
/*
|
|
* The PMLeafNodeView creates the visual display of leaf nodes in the tree
|
|
*/
|
|
|
|
define(["pm/contrib/d3/d3.amd",
|
|
'/static/app/DA-ITSI-CP-vmware-dashboards/libs/backbone.js',
|
|
'/static/app/DA-ITSI-CP-vmware-dashboards/libs/underscore.js'],
|
|
function (d3, Backbone, _) {
|
|
var LeafNode = Backbone.View.extend({
|
|
tagName: "g",
|
|
className: "proactive-monitoring-leaf-node",
|
|
options: {
|
|
leaf_node_r: 8.5,
|
|
colors: {
|
|
critical: "#C44545",
|
|
warning: "#DE9400",
|
|
normal: "#57A116",
|
|
unknown: "#808080"
|
|
},
|
|
color_scale: d3.scale.ordinal().domain(d3.range(4)).range(["#C44545", "#DE9400", "#57A116", "#808080"]),
|
|
node_labels: {
|
|
HostSystem: "HS",
|
|
ClusterComputeResource: "CL",
|
|
RootFolder: "VC",
|
|
VirtualMachine: "VM"
|
|
},
|
|
unselected_stroke_width: 1,
|
|
selected_stroke_width: 2,
|
|
unselected_stroke: "#D4D3D4",
|
|
selected_stroke: "#FFFFFF"
|
|
},
|
|
first_render: true,
|
|
initialize: function() {
|
|
Backbone.View.prototype.initialize.apply(this, arguments);
|
|
//Custom event binding to the dispatcher goes here
|
|
},
|
|
/*
|
|
* idempotently render the content of the parent node
|
|
*/
|
|
render: function(data) {
|
|
var d3g = d3.select(this.$el.get(0));
|
|
var that = this;
|
|
var name_label;
|
|
|
|
//Create elements on first render only
|
|
if (this.first_render) {
|
|
//TODO: needs to make this work with nodes being selected/unselected
|
|
//Make Node Circle
|
|
d3g.append("circle")
|
|
.attr("class", "pm-leaf-node-emphasis-highlight")
|
|
.attr("r", this.options.leaf_node_r + 1)
|
|
.attr("fill", this.options.colors.unknown)
|
|
.attr("stroke", "#000000")
|
|
.attr("stroke-width", 2)
|
|
.attr("opacity", 1e-6);
|
|
d3g.append("circle")
|
|
.attr("class", "pm-leaf-node-marker")
|
|
.attr("r", this.options.leaf_node_r)
|
|
.attr("fill", this.options.colors.unknown)
|
|
.attr("stroke", this.options.unselected_stroke)
|
|
.attr("stroke-width", this.options.unselected_stroke_width);
|
|
|
|
//Make Type Label
|
|
d3g.append("text")
|
|
.attr("class", "node-label")
|
|
.attr("dy", "4px")
|
|
.text(this.options.node_labels[data.type]);
|
|
|
|
//Make Name Label
|
|
name_label = d3g.append("text")
|
|
.attr("class", "name-label")
|
|
.attr("x", this.options.leaf_node_r + this.options.selected_stroke_width + 4)
|
|
.attr("dy", "3px")
|
|
.text(function(data) {
|
|
if (data.name.length > 24) {
|
|
//Display only upto 16 chars of the name label
|
|
var short_name = data.name.substr(0, 20);
|
|
return short_name.concat('...');
|
|
} else {
|
|
return data.name;
|
|
}
|
|
});
|
|
|
|
this.first_render = false;
|
|
}
|
|
|
|
//Handle the value based rendering
|
|
var value_index;
|
|
if (data.value[0] > 0) {
|
|
value_index = 0;
|
|
}
|
|
else if (data.value[1] > 0) {
|
|
value_index = 1;
|
|
}
|
|
else if (data.value[2] > 0) {
|
|
value_index = 2;
|
|
}
|
|
else {
|
|
value_index = 3;
|
|
}
|
|
|
|
//Update the circle fill
|
|
d3g.select("circle.pm-leaf-node-marker").attr("fill", this.options.color_scale(value_index));
|
|
},
|
|
highlightNode: function() {
|
|
var d3g = d3.select(this.$el.get(0));
|
|
d3g.select("circle.pm-leaf-node-marker").attr("stroke", this.options.selected_stroke);
|
|
d3g.select("circle.pm-leaf-node-emphasis-highlight").attr("opacity", 1);
|
|
},
|
|
unhighlightNode: function() {
|
|
var d3g = d3.select(this.$el.get(0));
|
|
d3g.select("circle.pm-leaf-node-marker").attr("stroke", this.options.unselected_stroke);
|
|
d3g.select("circle.pm-leaf-node-emphasis-highlight").attr("opacity", 1e-6);
|
|
}
|
|
});
|
|
|
|
return LeafNode;
|
|
});
|