Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add history and zoom to graph #123

Closed
wants to merge 4 commits into from

3 participants

@spellik

Allow user view history graphs and zoom graphs. Like cacti

@spellik spellik closed this
@spellik spellik reopened this
@SEJeff
Collaborator

Unfortunately, the javascript file you include is GPL licensed and graphite is Apache licensed. This would effectively change the license of graphite to GPL and I don't think that is going to pass muster.

@spellik
@nleskiw
Collaborator
@spellik
@nleskiw
Collaborator
@spellik

Removed.

@SEJeff SEJeff referenced this pull request from a commit in SEJeff/graphite-web
@SEJeff SEJeff Move the history button into Graph Operations in the dash
This is cleaning up fallout from #123
d323ee0
@SEJeff SEJeff closed this
@cbowman0 cbowman0 referenced this pull request from a commit in cbowman0/graphite-web
@SEJeff SEJeff Move the history button into Graph Operations in the dash
This is cleaning up fallout from #123

Conflicts:

	webapp/content/js/dashboard.js
349ef61
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 18, 2012
  1. @spellik
  2. @spellik
  3. @spellik

    Add zoom to graphs

    spellik authored
Commits on Jan 29, 2013
  1. @spellik

    - Remove cacti Zoom

    spellik authored
This page is out of date. Refresh to see the latest.
View
145 webapp/content/js/dashboard.js
@@ -349,7 +349,7 @@ function initDashboard () {
'<tpl for=".">',
'<div class="graph-container">',
'<div class="graph-overlay">',
- '<img class="graph-img" src="{url}" width="{width}" height="{height}">',
+ '<img class="graph-img" src="{url}" width="{width}" height="{height}" id="graph{index}">',
'<div class="overlay-close-button" onclick="javascript: graphStore.removeAt(\'{index}\'); updateGraphRecords(); justClosedGraph = true;">X</div>',
'</div>',
'</div>',
@@ -1695,11 +1695,11 @@ function graphClicked(graphView, graphIndex, element, evt) {
}
});
- var buttonWidth = 150;
+ var buttonWidth = 110;
var rowHeight = 21;
var maxRows = 6;
var frameHeight = 5;
- var gridWidth = (buttonWidth * 3) + 2;
+ var gridWidth = (buttonWidth * 4) + 2;
var gridHeight = (rowHeight * Math.min(targets.length, maxRows)) + frameHeight;
targetGrid = new Ext.grid.EditorGridPanel({
@@ -1825,6 +1825,15 @@ function graphClicked(graphView, graphIndex, element, evt) {
}]
});
+ var additionalActionsMenu = new Ext.menu.Menu({
+ allowOtherMenus: true,
+ items: [{
+ xtype: 'button',
+ text: 'History',
+ width: 100,
+ handler: function () { menu.destroy(); historyGraph(record);}
+ },]
+ });
var buttons = [functionsButton];
buttons.push({
@@ -1857,6 +1866,21 @@ function graphClicked(graphView, graphIndex, element, evt) {
}
});
+ buttons.push({
+ xtype: 'button',
+ text: "Cacti",
+ width: buttonWidth,
+ handler: function (thisButton) {
+ if (additionalActionsMenu.isVisible()){
+ additionalActionsMenu.doHide(); // private method... yuck (no other way to hide w/out trigging hide event handler)
+ } else {
+ operationsMenu.hide();
+ functionsMenu.hide();
+ additionalActionsMenu.show(thisButton.getEl());
+ }
+ }
+ });
+
menuItems.push({
xtype: 'panel',
layout: 'hbox',
@@ -1885,6 +1909,7 @@ function graphClicked(graphView, graphIndex, element, evt) {
optionsMenu.destroy();
operationsMenu.destroy();
functionsMenu.destroy();
+ additionalActionsMenu.destroy();
}
);
}
@@ -2068,6 +2093,120 @@ function cloneGraphRecord(record) {
return new GraphRecord(props);
}
+function historyGraph(record){
+
+ var graphHistoryStore = new Ext.data.ArrayStore({
+ fields: GraphRecord,
+ listeners: {
+ add: graphStoreUpdated,
+ remove: graphStoreUpdated,
+ update: graphStoreUpdated
+ }
+ });
+
+ function getProps(record){
+ var props = {
+ url: record.data.url,
+ target: record.data.target,
+ params: Ext.apply({}, record.data.params)
+ };
+ props.params.target = Ext.urlDecode(props.target).target;
+ if (typeof props.params.target == "string") {
+ props.params.target = [props.params.target];
+ }
+
+ props.params.width = '750';
+ props.params.height = '300';
+ props.params.until = '-';
+
+ return props;
+ }
+
+ var props = getProps(record);
+ var title = '';
+ title = props.params.title;
+
+ props = getProps(record);
+ props.params.title = title + ' 1 hour';
+ props.params.from = '-1hour';
+ graphHistoryStore.insert(0,new GraphRecord(props));
+
+ props = getProps(record);
+ props.params.title = title + ' 1 day';
+ props.params.from = '-1day';
+ graphHistoryStore.insert(1,new GraphRecord(props));
+
+ props = getProps(record);
+ props.params.title = title + ' 7 day';
+ props.params.from = '-7day';
+ graphHistoryStore.insert(2,new GraphRecord(props));
+
+ props = getProps(record);
+ props.params.title = title + ' 30 day';
+ props.params.from = '-30day';
+ graphHistoryStore.insert(3,new GraphRecord(props));
+
+ var graphTemplate = new Ext.XTemplate(
+ '<tpl for=".">',
+ '<div class="graph-container">',
+ '<div class="graph-overlay">',
+ '<img class="graph-img" src="{url}" width="{width}" height="{height}" id="graph{index}">',
+ '<div class="overlay-close-button" onclick="javascript: graphStore.removeAt(\'{index}\'); updateGraphRecords(); justClosedGraph = true;">X</div>',
+ '</div>',
+ '</div>',
+ '</tpl>',
+ '<div class="x-clear"></div>'
+ );
+
+ updateDataHistory();
+
+ function updateDataHistory(){
+ graphHistoryStore.each(function (item, index) {
+ var params = {};
+ Ext.apply(params, defaultGraphParams);
+ Ext.apply(params, item.data.params);
+ //Ext.apply(params, GraphSize);
+ params._uniq = Math.random();
+ if (params.title === undefined && params.target.length == 1) {
+ params.title = params.target[0];
+ }
+
+ console.log(params.title);
+
+ if (!params.uniq === undefined) {
+ delete params["uniq"];
+ }
+ item.set('url', '/render?' + Ext.urlEncode(params));
+ item.set('width', item.data.params.width);
+ item.set('height', item.data.params.height);
+ item.set('index', index);
+ });
+ }
+
+ graphHistoryView = new Ext.DataView({
+ store: graphHistoryStore,
+ tpl: graphTemplate,
+ overClass: 'graph-over',
+ itemSelector: 'div.graph-container',
+ emptyText: "Configure your context above, and then select some metrics.",
+ autoScroll: true,
+ listeners: {
+ }
+ });
+
+ win = new Ext.Window({
+ title: "Graph History",
+ width: 800,
+ height: 800,
+ resizable: true,
+ modal: true,
+ layout: 'fit',
+ items: graphHistoryView
+ });
+ console.log(record);
+ win.show();
+
+}
function removeAllGraphs() {
if (CONFIRM_REMOVE_ALL) {
/*
View
2  webapp/graphite/templates/dashboard.html
@@ -64,6 +64,8 @@
</head>
<body>
+
+
<div id='merge'>Drop To Merge</div>
</body>
</html>
Something went wrong with that request. Please try again.