Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add history and zoom to graph #123

Closed
wants to merge 4 commits into from

3 participants

spellik Jeff Schroeder Nicholas Leskiw
spellik

Allow user view history graphs and zoom graphs. Like cacti

spellik spellik closed this
spellik spellik reopened this
Jeff Schroeder
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
Nicholas Leskiw
Collaborator
spellik
Nicholas Leskiw
Collaborator
spellik

Removed.

Jeff Schroeder SEJeff referenced this pull request from a commit in SEJeff/graphite-web
Jeff Schroeder SEJeff Move the history button into Graph Operations in the dash
This is cleaning up fallout from #123
d323ee0
Jeff Schroeder SEJeff closed this
Christopher Bowman cbowman0 referenced this pull request from a commit in cbowman0/graphite-web
Jeff Schroeder 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.
145 webapp/content/js/dashboard.js
View
@@ -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) {
/*
2  webapp/graphite/templates/dashboard.html
View
@@ -64,6 +64,8 @@
</head>
<body>
+
+
<div id='merge'>Drop To Merge</div>
</body>
</html>
Something went wrong with that request. Please try again.