Files
pinpoint/web/src/main/webapp/features/serverMap/jquery.ServerMap2.js
T
2015-05-26 13:49:39 +09:00

1329 lines
53 KiB
JavaScript

(function (window, go, $, _) {
"use strict";
/**
* ServerMap
*
* @class ServerMap
* @version 1.0.0
* @since Sep, 2013
* @author Denny Lim<hello@iamdenny.com, iamdenny@nhn.com>
* @license MIT License
* @copyright 2014 NAVER Corp.
*/
window.ServerMap = $.Class({
/**
* constructor
*
* @constructor
* @method ServerMap#$init
* @param {object}
*/
$init: function (htOption, $location) {
this._query = "";
this.option({
"sContainerId": '',
"sOverviewId": '',
"sBigFont": "11pt avn85,NanumGothic,ng,dotum,AppleGothic,sans-serif",
"sSmallFont": "10pt avn55,NanumGothic,ng,dotum,AppleGothic,sans-serif",
"sImageDir": './images/',
"sBoldKey": null,
"htIcons": {
'APACHE': 'APACHE.png',
'APACHE_GROUP': 'APACHE.png',
'ARCUS': 'ARCUS.png',
'ARCUS_GROUP': 'ARCUS.png',
'BACKEND': 'BACKEND.png',
'BACKEND_GROUP': 'BACKEND.png',
'BLOC': 'BLOC.png',
'BLOC_GROUP': 'BLOC.png',
'CASSANDRA': 'CASSANDRA.png',
'CASSANDRA_GROUP': 'CASSANDRA.png',
'CUBRID': 'CUBRID.png',
'CUBRID_GROUP': 'CUBRID.png',
'JAVA': 'JAVA.png',
'JAVA_GROUP': 'JAVA.png',
'MEMCACHED': 'MEMCACHED.png',
'MEMCACHED_GROUP': 'MEMCACHED.png',
'MONGODB': 'MONGODB.png',
'MONGODB_GROUP': 'MONGODB.png',
'MSSQLSERVER': 'MSSQLSERVER.png',
'MSSQLSERVER_GROUP': 'MSSQLSERVER.png',
'MYSQL': 'MYSQL.png',
'MYSQL_GROUP': 'MYSQL.png',
'NBASE': 'NBASE.png',
'NBASE_GROUP': 'NBASE.png',
'NGINX': 'NGINX.png',
'NGINX_GROUP': 'NGINX.png',
'ORACLE': 'ORACLE.png',
'ORACLE_GROUP': 'ORACLE.png',
'QUEUE': 'QUEUE.png',
'QUEUE_GROUP': 'QUEUE.png',
'STAND_ALONE': 'STAND_ALONE.png',
'STAND_ALONE_GROUP': 'STAND_ALONE.png',
'TOMCAT': 'TOMCAT.png',
'TOMCAT_GROUP': 'TOMCAT.png',
'UNDEFINED': 'UNDEFINED.png',
'UNDEFINED_GROUP': 'UNDEFINED.png',
'UNKNOWN': 'UNKNOWN.png',
'UNKNOWN_GROUP': 'UNKNOWN_GROUP.png',
'REDIS': 'REDIS.png',
'REDIS_GROUP': 'REDIS.png',
'NBASE_ARC': 'NBASE_ARC.png',
'NBASE_ARC_GROUP': 'NBASE_ARC.png',
'USER': 'USER.png',
'USER_GROUP': 'USER.png'
},
"htNodeTheme": {
"default": {
"backgroundColor": "#ffffff",
"borderColor": "#C5C5C5",
"borderWidth": 1,
"fontColor": "#000000"
},
"bold": {
"backgroundColor": "#f2f2f2",
"borderColor": "#666975",
"borderWidth": 2,
"fontColor": "#000000"
}
},
"htLinkType": {
"sRouting": "AvoidsNodes", // Normal, Orthogonal, AvoidNodes
"sCurve": "JumpGap" // Bezier, JumpOver, JumpGap
},
"htLinkTheme": {
"default": {
"backgroundColor": "#ffffff",
"borderColor": "#c5c5c5",
"fontFamily": "11pt avn55,NanumGothic,ng,dotum,AppleGothic,sans-serif",
"fontColor": "#000000",
"fontAlign": "center",
"margin": 1,
"strokeWidth": 1
},
"bad": {
"backgroundColor": "#ffc9c9",
"borderColor": "#7d7d7d",
"fontFamily": "11pt avn55,NanumGothic,ng,dotum,AppleGothic,sans-serif",
"fontColor": "#FF1300",
"fontAlign": "center",
"margin": 1,
"strokeWidth": 1
}
},
"htHighlightNode": {
//"borderColor": "#25AFF4",
"borderColor": "#53069B",
"backgroundColor": "#289E1D",
//"fontColor": "#5cb85c"
"fontColor": "#53069B"
},
"htHighlightLink": {
"fontFamily": "bold 12pt avn55,NanumGothic,ng,dotum,AppleGothic,sans-serif",
//"borderColor": "#25AFF4",
"borderColor": "#53069B",
"strokeWidth": 2
},
"htPadding": {
"top": 10,
"right": 10,
"bottom": 10,
"left": 10
},
"unknownGroupName" : "UNKNOWN_GROUP",
"fOnNodeSubGroupClicked": function(eMouseEvent, nodeKey ) {
},
"fOnNodeClicked": function (eMouseEvent, htData) {
},
"fOnNodeDoubleClicked": function (eMouseEvent, node, htData) {
},
"fOnNodeContextClicked": function (eMouseEvent, htData) {
},
"fOnLinkClicked": function (eMouseEvent, htData) {
},
"fOnLinkContextClicked": function (eMouseEvent, htData) {
},
"fOnBackgroundClicked": function (eMouseEvent, htData) {
},
"fOnBackgroundDoubleClicked": function (eMouseEvent, htData) {
},
"fOnBackgroundContextClicked": function (eMouseEvent, htData) {
}
});
this.option(htOption);
this._initVariables();
this._initNodeTemplates();
this._initLinkTemplates();
this._initDiagramEnvironment();
this._initOverview( $location );
},
/**
* initialize variables
*
* @method ServerMap#_initVariables
*/
_initVariables: function () {
this.$ = go.GraphObject.make;
this.nodeClickEventOnce = false;
this._oDiagram = this.$(
go.Diagram,
this.option('sContainerId'),
{
initialContentAlignment: go.Spot.Center,
maxSelectionCount: 1,
allowDelete: false
}
);
},
/**
* initialize node templates
*
* @method ServerMap#_initNodeTemplates
*/
_initNodeTemplates: function () {
var self = this,
sImageDir = this.option('sImageDir'),
htIcons = this.option('htIcons');
var infoTableTemplate = self.$(
go.Panel,
go.Panel.TableRow,
{
},
self.$(
go.TextBlock,
{
margin: new go.Margin(0, 2),
column: 1,
stroke: "#848484",
font: self.option('sSmallFont')
},
new go.Binding('text', 'k')
),
self.$(
go.TextBlock,
{
margin: new go.Margin(0, 2),
column: 2,
stroke: "#848484",
font: self.option('sSmallFont')
},
new go.Binding('text', 'v')
)
);
var getNodeTemplate = function (sImageName) {
return self.$(
go.Node,
new go.Binding("category", "serviceType"),
go.Panel.Auto,
{
selectionAdorned: false,
cursor: "pointer",
name: "NODE",
click: function (e, obj) {
self._onNodeClicked(e, obj);
},
doubleClick: function(e, obj) {
self._onNodeDoubleClicked(e, obj);
},
contextClick: self._onNodeContextClicked.bind(self)
},
self.$(
go.Shape,
{
alignment: go.Spot.TopLeft,
alignmentFocus: go.Spot.TopLeft,
figure: "RoundedRectangle",
strokeWidth: 1,
// margin: new go.Margin(10, 10, 10, 10),
margin: 0,
isPanelMain: true,
// maxSize: new go.Size(150, NaN),
minSize: new go.Size(120, NaN),
name: "NODE_SHAPE",
portId: ""
},
new go.Binding("strokeWidth", "key", function (key) {
var type = 'default';
if (self.option('sBoldKey') && self.option('sBoldKey') === key) {
type = 'bold';
}
return self.option('htNodeTheme')[type].borderWidth;
}),
new go.Binding("stroke", "key", function (key) {
var type = 'default';
if (self.option('sBoldKey') && self.option('sBoldKey') === key) {
type = 'bold';
}
return self.option('htNodeTheme')[type].borderColor;
}),
new go.Binding("fill", "key", function (key) {
var type = 'default';
if (self.option('sBoldKey') && self.option('sBoldKey') === key) {
type = 'bold';
}
return self.option('htNodeTheme')[type].backgroundColor;
}),
new go.Binding("key", "key")
),
self.$(
go.Panel,
go.Panel.Spot,
{
name: "NODE_PANEL",
alignment: go.Spot.TopLeft,
alignmentFocus: go.Spot.TopLeft
},
self.$(
go.Panel,
go.Panel.Vertical,
{
alignment: go.Spot.TopLeft,
alignmentFocus: go.Spot.TopLeft,
minSize: new go.Size(120, NaN)
},
self.$(
go.Picture,
{
source: sImageDir + sImageName,
margin: new go.Margin(18, 0, 5, 0),
desiredSize: new go.Size(80, 40),
imageStretch: go.GraphObject.Uniform
}
),
self.$(
go.TextBlock,
new go.Binding("text", "applicationName").makeTwoWay(),
{
alignment: go.Spot.Center,
name: "NODE_TEXT",
margin: 6,
font: self.option('sBigFont'),
// wrap: go.TextBlock.WrapFit,
// width: 130,
editable: false
}
),
// http://www.gojs.net/latest/samples/entityRelationship.html
// http://www.gojs.net/latest/samples/records.html
self.$(
go.Panel,
go.Panel.Table,
{
padding: 2,
minSize: new go.Size(100, 10),
defaultStretch: go.GraphObject.Horizontal,
itemTemplate: infoTableTemplate
},
new go.Binding("itemArray", "infoTable")
)
),
self.$(
go.Panel,
go.Panel.Horizontal,
{
alignment: go.Spot.TopLeft,
alignmentFocus: go.Spot.TopLeft,
margin: 0
},
self.$(
go.Picture,
{
source: sImageDir + 'ERROR.png',
desiredSize: new go.Size(20, 20),
// visible: false,
imageStretch: go.GraphObject.Uniform,
margin: new go.Margin(1, 5, 0, 1)
},
new go.Binding("visible", "hasAlert")
),
self.$(
go.Picture,
{
source: sImageDir + 'FILTER.png',
desiredSize: new go.Size(17, 17),
visible: false,
imageStretch: go.GraphObject.Uniform
},
new go.Binding("visible", "isFiltered")
)
),
self.$(
go.Panel,
go.Panel.Auto,
{
alignment: go.Spot.TopRight,
alignmentFocus: go.Spot.TopRight,
visible: false
},
new go.Binding("visible", "instanceCount", function (v) {
return v > 1 ? true : false;
}),
self.$(
go.Shape,
{
figure: "RoundedRectangle",
fill: "#848484",
strokeWidth: 1,
stroke: "#848484"
}
),
self.$(
go.Panel,
go.Panel.Auto,
{
margin: new go.Margin(0, 3, 0, 3)
},
self.$(
go.TextBlock,
new go.Binding("text", "instanceCount"),
{
stroke: "#FFFFFF",
textAlign: "center",
height: 16,
font: self.option('sSmallFont'),
editable: false
}
)
)
)
)
);
};
var unknownTableTemplate = self.$(
go.Panel,
go.Panel.TableRow,
self.$(
go.Picture, {
source: sImageDir + 'ERROR.png',
margin: new go.Margin(1, 2),
desiredSize: new go.Size(10, 10),
visible: false,
column: 1,
imageStretch: go.GraphObject.Uniform
},
new go.Binding("visible", "hasAlert")
),
self.$(
go.TextBlock, {
name:"NODE_INDEX",
visible: false,
text : "0"
},
new go.Binding("text", "idx")
),
self.$(
go.TextBlock, {
name: "NODE_APPLICATION_NAME",
margin: new go.Margin(1, 2),
column: 2,
font: self.option('sSmallFont'),
alignment: go.Spot.Left,
click : function(e, obj ) {
e.bubbles = false;
if ( obj.part.data.isCollapse ) {
self._onNodeClicked(e, obj, obj.part.data.unknownNodeGroup[e.targetObject.row].key);
} else {
var groupData = obj.part.data.subGroup[parseInt( e.targetObject.panel.findObject("NODE_INDEX").text )];
self._onNodeSubGroupClicked(e, obj, groupData["groups"][e.targetObject.row].key, groupData.applicationName);
}
return false;
}
},
new go.Binding('text', 'applicationName')
),
self.$(
go.TextBlock, {
margin: new go.Margin(1, 2),
column: 3,
alignment: go.Spot.Right,
font: self.option('sSmallFont')
},
new go.Binding('text', 'totalCount', function (val) {
return Number(val, 10).toLocaleString();
})
)
);
var subGroupTemplate = self.$(
go.Panel,
go.Panel.Vertical,
self.$(
go.TextBlock, {
name: "NODE_SUB_APPLICATION_NAME",
margin: new go.Margin(2, 2),
font: "bold 16px avn55,NanumGothic,ng,dotum,AppleGothic,sans-serif"
},
new go.Binding('text', 'applicationName')
),
self.$(
go.Panel,
go.Panel.Table, {
padding: 4,
minSize: new go.Size(100, 10),
defaultStretch: go.GraphObject.Horizontal,
itemTemplate: unknownTableTemplate,
name: "NODE_SUB_TABLE"
},
new go.Binding( "itemArray", "groups" )
),
self.$(
go.Shape, {
figure: "RoundedRectangle",
margin: new go.Margin(6, 2, 6, 2),
height: 1,
width: 200,
strokeWidth: 1,
stroke: "#F5A623",
fill: "#F5A623",
visible: true
},
new go.Binding("visible", "isLast", function(v) {
return !v;
})
)
);
var getUnknownGroupTemplate = function (sImageName) {
return self.$(
go.Node,
go.Panel.Auto, {
selectionAdorned: false,
cursor: "pointer",
name: "NODE",
click: function (e, obj) {
if (e.bubbles) {
self._onNodeClicked(e, obj);
}
},
doubleClick: function(e, obj) {
self._onNodeDoubleClicked(e, obj);
},
contextClick: self._onNodeContextClicked.bind(self)
},
self.$(
go.Shape, {
figure: "RoundedRectangle",
isPanelMain: true,
minSize: new go.Size(100, 100),
name: "NODE_SHAPE",
portId: "",
strokeWidth: self.option('htNodeTheme')["default"].borderWidth,
stroke: self.option('htNodeTheme')["default"].borderColor,
fill: self.option('htNodeTheme')["default"].backgroundColor
},
new go.Binding("key", "key")
),
self.$( "Button", {
alignment: go.Spot.TopLeft,
width: 20,
height: 20,
margin: 2,
visible : false,
click: function(e, o) {
$at($at.MAIN, $at.TG_NODE_VIEW);
e.bubbles = false;
var isCollapse = o.part.data.isCollapse;
self._oDiagram.model.setDataProperty( o.part.data, "isCollapse", !isCollapse );
o.part.findObject("GROUP_BUTTON").text = isCollapse ? " - " : " + ";
}},
new go.Binding( "visible", "isMultiGroup" ),
self.$(
go.TextBlock, {
name: "GROUP_BUTTON",
text: " + ",
textAlign: "center",
font: "bold 14px serif"
}
)
),
self.$(
go.Panel,
go.Panel.Spot,
self.$(
go.Panel,
go.Panel.Vertical, {
alignment: go.Spot.TopLeft,
alignmentFocus: go.Spot.TopLeft,
minSize: new go.Size(130, NaN)
},
self.$(
go.Picture, {
source: sImageDir + sImageName,
margin: new go.Margin(0, 0, 5, 0),
desiredSize: new go.Size(100, 40),
imageStretch: go.GraphObject.Uniform
}
),
self.$(
go.Panel,
go.Panel.Table, {
padding: 2,
minSize: new go.Size(100, 10),
defaultStretch: go.GraphObject.Horizontal,
itemTemplate: unknownTableTemplate,
name: "NODE_TEXT",
visible: true
},
new go.Binding("itemArray", "unknownNodeGroup"),
new go.Binding("visible", "isCollapse")
),
self.$(
go.Panel,
go.Panel.Vertical, {
padding: 2,
minSize: new go.Size(100, 10),
defaultStretch: go.GraphObject.Horizontal,
itemTemplate: subGroupTemplate,
name: "NODE_SUB_TEXT",
visible: true
},
new go.Binding("itemArray", "subGroup"),
new go.Binding("visible", "isCollapse", function(v) {
return !v;
})
)
)
),
self.$(
go.Panel,
go.Panel.Auto, {
alignment: go.Spot.TopRight,
alignmentFocus: go.Spot.TopRight,
visible: false
},
new go.Binding("visible", "instanceCount", function (v) {
return v > 1 ? true : false;
}),
self.$(
go.Shape, {
figure: "RoundedRectangle",
fill: "#848484",
strokeWidth: 1,
stroke: "#848484"
}
),
self.$(
go.Panel,
go.Panel.Auto, {
margin: new go.Margin(0, 3, 0, 3)
},
self.$(
go.TextBlock,
new go.Binding("text", "instanceCount"), {
stroke: "#FFFFFF",
textAlign: "center",
height: 16,
font: self.option('sSmallFont'),
editable: false
}
)
)
)
);
};
_.each(htIcons, function (sVal, sKey) {
if ( sKey.indexOf( "_GROUP" ) != -1 ) {
this._oDiagram.nodeTemplateMap.add(sKey, getUnknownGroupTemplate(sVal));
} else {
this._oDiagram.nodeTemplateMap.add(sKey, getNodeTemplate(sVal));
}
}, this);
},
/**
* initialize link templates
*
* @method ServerMap#_initLinkTemplates
*/
_initLinkTemplates: function () {
var self = this,
htLinkType = this.option('htLinkType'),
option = {
selectionAdorned: false,
// selectionAdornmentTemplate: this._oDefaultAdornmentForLink,
// click: this._onLinkClicked.bind(this),
contextClick: this._onLinkContextClicked.bind(this),
layerName: "Foreground",
reshapable: false, // to disable reshape on links
// fromSpot: go.Spot.RightSide,
// toSpot: go.Spot.LeftSide,
// routing: go.Link[htLinkType.sRouting],
// routing : go.Link.Normal,
// routing: go.Link.Orthogonal,
// routing: go.Link.AvoidsNodes,
corner: 10,
cursor: "pointer"
// curve: go.Link[htLinkType.sCurve],
// curve: go.Link.JumpOver
// curve: go.Link.JumpGap
// curve: go.Link.Bezier
},
htLinkTheme = this.option("htLinkTheme"),
sImageDir = this.option('sImageDir'),
htDefault = htLinkTheme["default"],
bad = htLinkTheme.bad;
var getLinkTemplate = function (htOption) {
return self.$(
go.Link, // the whole link panel
// { routing: go.Link.Normal, curve: go.Link.Bezier, toShortLength: 2 },
option,
new go.Binding("routing", "routing", function (val) {
return go.Link[val];
}),
new go.Binding("curve", "curve", function (val) {
return go.Link[val];
}),
new go.Binding("curviness", "curviness"),
self.$(
go.Shape, // the link shape
{
name: "LINK",
isPanelMain: true,
stroke: htOption.borderColor,
strokeWidth: 1.5
}
),
self.$(
go.Shape, // the arrowhead
{
name: "ARROW",
toArrow: "standard", // toArrow : kite, standard, OpenTriangle
fill: htOption.borderColor,
stroke: null,
scale: 1.5
}
),
self.$(
go.Panel,
go.Panel.Auto,
self.$(
go.Shape, // the link shape
"RoundedRectangle",
{
name: "LINK2",
fill: "#ffffff",
stroke: "#ffffff",
portId: "",
fromLinkable: true,
toLinkable: true
}
),
self.$(
go.Panel,
go.Panel.Horizontal,
{
margin: 4
},
self.$(
go.Picture,
{
source: sImageDir + 'FILTER.png',
width: 14,
height: 14,
margin: 1,
visible: false,
imageStretch: go.GraphObject.Uniform
},
new go.Binding("visible", "isFiltered")
),
self.$(
go.TextBlock, // the label
{
name: "LINK_TEXT",
textAlign: htOption.fontAlign,
font: htOption.fontFamily,
margin: htOption.margin
},
// new go.Binding("text", "count", function (val) {
new go.Binding("text", "totalCount", function (val) {
return Number(val, 10).toLocaleString();
}) ,
new go.Binding("stroke", "hasAlert", function (hasAlert) {
return (hasAlert) ? bad.fontColor : htDefault.fontColor;
})
)
)
)
);
};
this._oDiagram.linkTemplate = getLinkTemplate(htDefault);
_.each(htLinkTheme, function (sVal, sKey) {
if (sKey === "default") {
return;
}
this._oDiagram.linkTemplateMap.add(sKey, getLinkTemplate(sVal));
}, this);
},
/**
* initialize diagrams
*
* @method ServerMap#_initDiagramEnvironment
*/
_initDiagramEnvironment: function () {
var htPadding = this.option('htPadding');
// have mouse wheel events zoom in and out instead of scroll up and
// down
this._oDiagram.toolManager.mouseWheelBehavior = go.ToolManager.WheelZoom;
this._oDiagram.allowDrop = false;
// read in the JSON-format data from the "mySavedModel" element
this._oDiagram.initialAutoScale = go.Diagram.Uniform; // None,
// Uniform,
// UniformToFill
// this._oDiagram.toolManager.linkingTool.direction =
// go.LinkingTool.ForwardsOnly;
this._oDiagram.toolManager.draggingTool.doCancel();
this._oDiagram.toolManager.draggingTool.doDeactivate();
this._oDiagram.toolManager.dragSelectingTool.isEnabled = false;
this._oDiagram.initialContentAlignment = go.Spot.Center;
this._oDiagram.padding = new go.Margin(htPadding.top, htPadding.right, htPadding.bottom, htPadding.left);
this._oDiagram.layout = this.$(
go.LayeredDigraphLayout,
{ // rdirection: 90,
isOngoing: false,
layerSpacing: 100,
columnSpacing: 30,
setsPortSpots: false
// packOption : 7 // sum of 1(PackExpand), 2(PackStraighten), 4(PackMedian)
// direction : 0,
// cycleRemoveOption : go.LayeredDigraphLayout.CycleDepthFirst,
// layeringOption : go.LayeredDigraphLayout.LayerOptimalLinkLength,
// initializeOption : go.LayeredDigraphLayout.InitDepthFirstOut,
// aggressiveOption : go.LayeredDigraphLayout.AggressiveLess,
// packOption : 7,
// setsPortSpots : true
}
);
var self = this;
// whenever selection changes, run updateHighlights
this._oDiagram.addDiagramListener("ChangedSelection", function (e) {
var selection = self._oDiagram.selection.first();
if (selection) {
if (selection instanceof go.Node) {
if (!self.nodeClickEventOnce) {
self._onNodeClicked(e, selection);
self.nodeClickEventOnce = true;
}
} else if (selection instanceof go.Link) {
self._onLinkClicked(e, selection);
}
}
self._updateHightlights();
});
this._oDiagram.addDiagramListener("BackgroundSingleClicked", function (e) {
var fOnBackgroundClicked = self.option('fOnBackgroundClicked');
if (_.isFunction(fOnBackgroundClicked)) {
fOnBackgroundClicked.call(self, e);
}
});
this._oDiagram.addDiagramListener("BackgroundDoubleClicked", function (e) {
var fOnBackgroundDoubleClicked = self.option('fOnBackgroundDoubleClicked');
if (_.isFunction(fOnBackgroundDoubleClicked)) {
fOnBackgroundDoubleClicked.call(self, e);
}
});
this._oDiagram.addDiagramListener("BackgroundContextClicked", function (e) {
var fOnBackgroundContextClicked = self.option('fOnBackgroundContextClicked');
if (_.isFunction(fOnBackgroundContextClicked)) {
fOnBackgroundContextClicked.call(self, e);
}
});
},
/**
* initialize Overview
*
* @method ServerMap#_initOverview
*/
_initOverview: function ( $location ) {
if ( /^\/main/.test( $location.path() ) ) {
this._oOverview = this.$( go.Overview,
this.option('sOverviewId'),
{ observed: this._oDiagram }
);
this._oOverview.box.elt(0).figure = "RoundedRectangle";
this._oOverview.box.elt(0).stroke = "#53069B";
this._oOverview.box.elt(0).strokeWidth = 4;
} else {
$( "#" + this.option('sOverviewId') ).hide();
}
},
/**
* load
*
* @method ServerMap#load
* @param {object}
*/
load: function (str) {
this.nodeClickEventOnce = false;
this._sLastModelData = str;
this._oDiagram.model = go.Model.fromJson(str);
this._oDiagram.undoManager.isEnabled = true;
},
/**
* clear diagram
*
* @method ServerMap#clear
*/
clear: function () {
this._oDiagram.model = go.Model.fromJson({});
},
/**
* reset highlights
*
* @method ServerMap#_resetHighlights
*/
_resetHighlights: function () {
var allNodes = this._oDiagram.nodes;
var allLinks = this._oDiagram.links;
while (allNodes.next()) {
allNodes.value.highlight = false;
}
while (allLinks.next()) {
allLinks.value.highlight = false;
}
},
/**
* update highlights
*
* @method ServerMap#_updateHighlights
* @param {go.Node} selection
*/
_updateHightlights: function (selection) {
selection = selection || this._oDiagram.selection.first();
if (selection === null) {
return;
}
this._resetHighlights();
selection.highlight = 'self';
if (selection instanceof go.Node) {
this._linksTo(selection, 'from');
this._linksFrom(selection, 'to');
} else if (selection instanceof go.Link) {
this._nodesTo(selection, 'from');
this._nodesFrom(selection, 'to');
}
// iterators containing all nodes and links in the diagram
var allNodes = this._oDiagram.nodes,
allLinks = this._oDiagram.links;
// nodes, including groups
while (allNodes.next()) {
this._highlightNode(allNodes.value.findObject("NODE_SHAPE"), allNodes.value.findObject("NODE_TEXT"), allNodes.value.highlight);
}
// links
while (allLinks.next()) {
this._highlightLink(allLinks.value.findObject("LINK"), allLinks.value.highlight);
// this._highlightLink(allLinks.value.findObject("LINK2"), allLinks.value.highlight);
this._highlightLink(allLinks.value.findObject("ARROW"), allLinks.value.highlight, true);
this._highlightLinkText(allLinks.value.findObject("LINK_TEXT"), allLinks.value.highlight);
}
},
/**
* highlight node by node key
*
* @method ServerMap#highlightNodeByKey
* @param {String} sKey node key
*/
highlightNodeByKey: function (sKey) {
var node = this._oDiagram.findNodeForKey(sKey);
if (node) {
var part = this._oDiagram.findPartForKey(sKey);
this._oDiagram.select(part);
this._updateHightlights(node);
}
},
/**
* highlight link by from, to objects
*
* @method ServerMap#highlightLinkByFromTo
* @param {String} from
* @param {String} to
*/
highlightLinkByFromTo: function (from, to) {
var htLink = this._getLinkObjectByFromTo(from, to);
if (htLink) {
this._oDiagram.select(this._oDiagram.findPartForData(htLink));
this._updateHightlights(this._oDiagram.findLinkForData(htLink));
}
},
/**
* get link by from, to objects
*
* @method ServerMap#_getLinkObjectByFromTo
* @param {String} from
* @param {String} to
*/
_getLinkObjectByFromTo: function (from, to) {
var aLink = this._oDiagram.model.linkDataArray;
for (var i = 0, len = aLink.length; i < len; i += 1) {
var htLink = aLink[i];
if (htLink.from === from && htLink.to === to) {
return htLink;
}
}
return false;
},
/**
* highlight node
* ServerMap#_highlightNode
* @param nodeShape
* @param nodeText
* @param theme
* @private
*/
_highlightNode: function (shapeNode, textNode, theme) {
if (shapeNode === null || textNode === null) {
return;
}
if (theme) {
shapeNode.stroke = this.option('htHighlightNode').borderColor;
shapeNode.strokeWidth = 2;
shapeNode.part.isShadowed = true;
var reg = new RegExp( this._query, "i" );
var highlightFont = this.option('htHighlightNode').fontColor;
var defaultFont = this.option('htNodeTheme')["default"].fontColor;
if ( this._query != "" ) {
if ( angular.isDefined( textNode.rowCount ) ) {
for( var i = 0 ; i < textNode.rowCount ; i++ ) {
var innerTextNode = textNode.elt(i).elt(2);
innerTextNode.stroke = reg.test( innerTextNode.text ) ? highlightFont : defaultFont;
}
var nodeSubTextNode = textNode.panel.findObject("NODE_SUB_TEXT");
var length = nodeSubTextNode.elements.count;
for( var i = 0 ; i < length ; i++ ) {
var innerTableNode = nodeSubTextNode.elt(i).elt(1);
for( var j = 0 ; j < innerTableNode.elements.count ; j++ ) {
var innerSubTextNode = innerTableNode.elt(j).elt(2);
innerSubTextNode.stroke = reg.test( innerSubTextNode.text ) ? highlightFont : defaultFont;
}
}
} else {
textNode.stroke = reg.test( textNode.text ) ? highlightFont : defaultFont;
}
}
} else {
var type = (shapeNode.key === this.option('sBoldKey')) ? 'bold' : 'default';
shapeNode.stroke = this.option('htNodeTheme')[type].borderColor;
shapeNode.strokeWidth = 1;
shapeNode.part.isShadowed = false;
if ( angular.isDefined( textNode.rowCount ) ) {
for( var i = 0 ; i < textNode.rowCount ; i++ ) {
textNode.elt(i).elt(2).stroke = this.option('htNodeTheme')[type].fontColor;
}
} else {
textNode.stroke = this.option('htNodeTheme')[type].fontColor;
}
}
},
/**
* highlight link
* @method ServerMap#_highlightLink
* @param shape
* @param theme
* @private
*/
_highlightLink: function (shape, theme, toFill) {
if (shape === null) {
return;
}
var color;
if (theme) {
color = this.option('htHighlightLink').borderColor;
shape.strokeWidth = this.option('htHighlightLink').strokeWidth;
} else {
color = this.option('htLinkTheme')["default"].borderColor;
shape.strokeWidth = this.option('htLinkTheme')["default"].strokeWidth;
}
if (toFill) {
shape.fill = color;
} else {
shape.stroke = color;
}
},
_highlightLinkText: function( nodeText, highlight ) {
if ( highlight ) {
nodeText.font = this.option('htHighlightLink').fontFamily;
} else {
nodeText.font = this.option('htLinkTheme')["default"].fontFamily;
}
},
/**
* if the link connects to this node, highlight it
*
* @method ServerMap#_linksTo
* @param {go.Node} x
* @param {Number} i
*/
_linksTo: function (x, i) {
if (x instanceof go.Node) {
var links = x.findLinksInto();
while (links.next()) {
links.value.highlight = i;
}
}
},
/**
* if the link comes from this node, highlight it
*
* @method ServerMap#_linksFrom
* @param {go.Node} x
* @param {Number} i
*/
_linksFrom: function (x, i) {
if (x instanceof go.Node) {
var links = x.findLinksOutOf();
while (links.next()) {
links.value.highlight = i;
}
}
},
/**
* if selected object is a link, highlight its fromNode, otherwise,
* highlight the fromNode of each link coming into the selected node
*
* @method ServerMap#_nodesTo
* @param {go.Node} x
* @param {Number} i
* @return a List of the keys of the nodes
*/
_nodesTo: function (x, i) {
var nodesToList = new go.List("string");
if (x instanceof go.Link) {
x.fromNode.highlight = i;
nodesToList.add(x.data.from);
} else {
var nodes = x.findNodesInto();
while (nodes.next()) {
nodes.value.highlight = i;
nodesToList.add(nodes.value.data.key);
}
}
return nodesToList;
},
/**
* same as nodesTo, but from instead of to
*
* @method ServerMap#_nodesFrom
* @param {go.Node} x
* @param {Number} i
*/
_nodesFrom: function (x, i) {
var nodesFromList = new go.List("string");
if (x instanceof go.Link) {
x.toNode.highlight = i;
nodesFromList.add(x.data.to);
} else {
var nodes = x.findNodesOutOf();
while (nodes.next()) {
nodes.value.highlight = i;
nodesFromList.add(nodes.value.data.key);
}
}
return nodesFromList;
},
/**
* event of merge group node click
*
* @method ServerMap#_onNodeSubGroupClicked
* @param {Event} e
* @param {ojb} ojb
* @param {String} unknownKey
* @param {String} fromName
*/
_onNodeSubGroupClicked: function(e, obj, unknownKey, fromName) {
var node = obj.part,
fOnNodeSubGroupClicked = this.option('fOnNodeSubGroupClicked');
if (_.isFunction(fOnNodeSubGroupClicked)) {
$at($at.MAIN, $at.CLK_NODE);
fOnNodeSubGroupClicked.call(this, e, node, unknownKey, fromName);
}
},
/**
* event of node click
*
* @method ServerMap#_onNodeClicked
* @param {Event} e
* @param {ojb} ojb
* @param {String} unknownKey
*/
_onNodeClicked: function (e, obj, unknownKey, query) {
var node = obj.part,
htData = node.data,
fOnNodeClicked = this.option('fOnNodeClicked');
if (_.isFunction(fOnNodeClicked)) {
$at($at.MAIN, $at.CLK_NODE);
fOnNodeClicked.call(this, e, htData, unknownKey, query);
}
},
/**
* event of node doubleclick
*
* @method ServerMap#_onNodeDoubleClicked
* @param {Event} e
* @param {ojb} ojb
*/
_onNodeDoubleClicked: function(e, obj) {
var node = obj.part,
htData = node.data,
fOnNodeDoubleClicked = this.option('fOnNodeDoubleClicked');
if (_.isFunction(fOnNodeDoubleClicked)) {
fOnNodeDoubleClicked.call(this, e, node, htData);
}
},
/**
* event of node context click
*
* @method ServerMap#_onNodeContextClick
* @param {Event} e
* @param {ojb} ojb
*/
_onNodeContextClicked: function (e, obj) {
var node = obj.part,
htData = node.data,
fOnNodeContextClicked = this.option('fOnNodeContextClicked');
if (_.isFunction(fOnNodeContextClicked)) {
fOnNodeContextClicked.call(this, e, htData);
}
},
/**
* event of link click
*
* @method ServerMap#_onLinkClicked
* @param {Event} e
* @param {ojb} ojb
*/
_onLinkClicked: function (e, obj) {
var link = obj.part,
htData = link.data,
fOnLinkClicked = this.option('fOnLinkClicked');
if (_.isFunction(fOnLinkClicked)) {
$at($at.MAIN, $at.CLK_LINK);
htData.fromNode = obj.fromNode.part.data;
htData.toNode = obj.toNode.part.data;
fOnLinkClicked.call(this, e, htData);
}
},
/**
* event of link context click
*
* @method ServerMap#_onLinkContextClicked
* @param {Event} e
* @param {ojb} ojb
*/
_onLinkContextClicked: function (e, obj) {
var link = obj.part,
htData = link.data,
fOnLinkContextClicked = this.option('fOnLinkContextClicked');
if (_.isFunction(fOnLinkContextClicked)) {
htData.fromNode = obj.fromNode.part.data;
htData.toNode = obj.toNode.part.data;
fOnLinkContextClicked.call(this, e, htData);
}
},
refresh: function () {
// while (this._oDiagram.undoManager.canUndo()) {
// this._oDiagram.undoManager.undo();
// }
// this._oDiagram.zoomToFit();
this.load(this._sLastModelData);
},
zoomToFit: function () {
this._oDiagram.zoomToFit();
this._oDiagram.contentAlignment = go.Spot.Center;
this._oDiagram.contentAlignment = go.Spot.None;
},
clearQuery: function() {
this._query = "";
},
searchNode: function( query, nodeServiceType ) {
this._query = query;
var allNodes = this._oDiagram.nodes,
selectedNode = null,
selectedIndex = 0,
similarNodeList = [],
returnNodeDataList = [],
reg = new RegExp( query, "i" );
while (allNodes.next()) {
var node = allNodes.value;
if ( node.data.unknownNodeGroup ) {
var unknownNodeGroup = node.data.unknownNodeGroup;
for( var i = 0; i < unknownNodeGroup.length ; i++ ) {
if ( reg.test( unknownNodeGroup[i].applicationName ) ) {
this._addNodeToTemporaryList( similarNodeList, returnNodeDataList, node, unknownNodeGroup[i], this.option("unknownGroupName") );
}
}
} else {
if ( !angular.isUndefined( node.data.applicationName ) ) {
if ( reg.test( node.data.applicationName ) ) {
this._addNodeToTemporaryList( similarNodeList, returnNodeDataList, node, node.data );
}
}
}
}
this._selectAndHighlight( similarNodeList[selectedIndex] );
if ( angular.isUndefined ( nodeServiceType ) ) {
return returnNodeDataList;
}
},
_addNodeToTemporaryList : function( similarNodeList, returnNodeDataList, node, nodeData, serviceType ) {
similarNodeList.push( node );
returnNodeDataList.push({
applicationName: nodeData.applicationName,
serviceType: serviceType || nodeData.serviceType
});
},
_selectAndHighlight : function( selectedNode ) {
this._oDiagram.clearSelection();
this._oDiagram.select( selectedNode );
this._oDiagram.centerRect( selectedNode.actualBounds );
this._onNodeClicked(null, selectedNode, null, this._query );
}
});
})(window, go, jQuery, _);