Dashboard becomes unusable when UI configured for Tree (left navbar) after it was previously configured for Completer (top navbar)

Asked by Nate Campbell on 2013-01-05

I have spent about 12 hours over the past two workdays building a graphite system based on CentOS 5.7. It took a long time because most of the default system packages had to be replaced for compatibility reasons, but that is understandable given the array of functionality involved.

I finally was very happy with how I had it set up and I started poking around in the UI to take a look at the options. One of them was a Dashboard dropdown with a "Configure UI" option. When I toggled the "Navigation Bar" setting behind that option, my whole graphite install became unusable. When I log into the dashboard the page displays only the text

"Drop To Merge"

and nothing else. I can't undo the change because the page that stopped working was the page where I could make the change.

I also had just told the intended users of the system that it was finally ready to go, so this is pretty frustrating.

Also, I found someone else's random graphite dashboard online. I haven't tried changing the setting on that to see if this is really a reproducible bug, but if it is then this might qualify as a security issue since it would allow arbitrary internet users to break anyone's graphite system. Please feel free to downgrade this to "Not a security vulnerability" if I am wrong.

Here is the list of sources I used to perform my install:
apr-1.4.6
apr-util-1.5.1
cairo-1.10.2
carbon-0.9.10
db-5.3.21
Django-1.4.3
django-tagging-0.3.1
graphite-web-0.9.10
httpd-2.2.23
libevent-2.0.21-stable
memcached-1.4.15
mod_wsgi-3.4
mysql-5.5.29
MySQL-python-1.2.4b4
openldap-2.4.33
pip-1.2.1
pixman-0.22.2
py2cairo-1.10.0
Python-2.7
python-ldap-2.4.10
python-memcached-1.48
python-txamqp-0.3
setuptools-0.6c11
Twisted-12.3.0
unixODBC-2.3.1
whisper-0.9.10
zope.interface-3.6.7

The page source of the "Drop To Merge" dashboard is:

<html>
  <head>
    <title>Graphite Dashboard</title>
    <link rel="stylesheet" type="text/css" href="/content/js/ext/resources/css/ext-all.css"/>
    <link rel="stylesheet" type="text/css" href="/content/css/dashboard.css"/>

    <script type="text/javascript">
    var schemes = [{"pattern": "<category>", "name": "Everything", "fields": [{"name": "category", "label": "Category"}]}];
    var UI_CONFIG = {"default_graph_height": 250, "automatic_variants": true, "theme": "default", "default_graph_width": 400, "merge_hover_delay": 750, "keyboard_shortcuts": {"toggle_toolbar": "ctrl-z", "completer_add_metrics": "alt-enter", "erase_all_graphs": "alt-x", "toggle_metrics_panel": "ctrl-space", "completer_del_metrics": "alt-backspace", "save_dashboard": "alt-s", "give_completer_focus": "shift-space"}, "autocomplete_delay": 375, "refresh_interval": 60};
    var CONTEXT_FIELD_WIDTH = 220;
    var AUTOCOMPLETE_DELAY = UI_CONFIG.autocomplete_delay;
    var FINDER_QUERY_DELAY = 100;
    var NEW_DASHBOARD_REMOVE_GRAPHS = false;

    var RESIZE_ICON = '/content/js/ext/examples/shared/icons/fam/cog_edit.png';
    var REMOVE_ICON = '/content/js/ext/examples/shared/icons/fam/cross.gif';
    var REFRESH_ICON = '/content/js/ext/examples/shared/icons/fam/table_refresh.png';
    var SHARE_ICON = '/content/js/ext/examples/shared/icons/fam/application_go.png';
    var CALENDAR_ICON = '/content/js/ext/resources/images/default/shared/calendar.gif';
    var CLOCK_ICON = '/content/img/clock_16.png';
    var HELP_ICON = '/content/js/ext/examples/shared/icons/fam/information.png';

    var initialState = null;

    var initialError = null;

    var queryString = {};

    </script>

    <!-- Theme overrides -->
    <link rel="stylesheet" type="text/css" href="/content/css/dashboard-default.css"/>

    <script type="text/javascript" src="/content/js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/content/js/ext/ext-all.js"></script>
    <script type="text/javascript" src="/content/js/ext/ux/DataViewTransition.js"></script>
    <script type="text/javascript" src="/content/js/composer_widgets.js"></script>
    <script type="text/javascript" src="/content/js/dashboard.js"></script>

    <script type="text/javascript">
    Ext.BLANK_IMAGE_URL = '/content/js/ext/resources/images/default/s.gif';
    Ext.QuickTips.init();
    Ext.onReady(initDashboard);
    </script>

  </head>
  <body>
    <div id='merge'>Drop To Merge</div>
  </body>
</html>

Question information

Language:
English Edit question
Status:
Answered
For:
Graphite Edit question
Assignee:
No assignee Edit question
Last query:
2013-01-05
Last reply:
2013-01-07
Nate Campbell (nate-campbell) said : #1

Should graphite work correctly at all if Apache is never configured to allow access to the graphite webapp content directory?

rowan (rowanu) said : #2

Can you explain in more detail what you mean by "whole graphite install became
unusable"? There could be a problem with the web app, but the carbon-cache
process(es) run separately, so you should still be receiving data, even if you
can't view it - is that the case?

I'm not an expert on Django apps, so hopefully someone else can chime-in on the
UI / Navigation Bar problem.

On Mon, Jan 07, 2013 at 11:55 AM, Nate Campbell <email address hidden> wrote:

> from: Nate Campbell <email address hidden>
> date: Mon, Jan 07 04:55 PM +00:00 2013
> to: <email address hidden>
> reply-to: <email address hidden>
> subject: [Graphite-dev] [Question #218547]: Dashboard becomes unusable when UI configured for Tree (left navbar) after it was previously configured for Completer (top navbar)
>
> New question #218547 on Graphite:
> https://answers.launchpad.net/graphite/+question/218547
>
> I have spent about 12 hours over the past two workdays building a graphite system based on CentOS 5.7. It took a long time because most of the default system packages had to be replaced for compatibility reasons, but that is understandable given the array of functionality involved.
>
> I finally was very happy with how I had it set up and I started poking around in the UI to take a look at the options. One of them was a Dashboard dropdown with a "Configure UI" option. When I toggled the "Navigation Bar" setting behind that option, my whole graphite install became unusable. When I log into the dashboard the page displays only the text
>
> "Drop To Merge"
>
> and nothing else. I can't undo the change because the page that stopped working was the page where I could make the change.
>
> I also had just told the intended users of the system that it was finally ready to go, so this is pretty frustrating.
>
> Also, I found someone else's random graphite dashboard online. I haven't tried changing the setting on that to see if this is really a reproducible bug, but if it is then this might qualify as a security issue since it would allow arbitrary internet users to break anyone's graphite system. Please feel free to downgrade this to "Not a security vulnerability" if I am wrong.
>
> Here is the list of sources I used to perform my install:
> apr-1.4.6
> apr-util-1.5.1
> cairo-1.10.2
> carbon-0.9.10
> db-5.3.21
> Django-1.4.3
> django-tagging-0.3.1
> graphite-web-0.9.10
> httpd-2.2.23
> libevent-2.0.21-stable
> memcached-1.4.15
> mod_wsgi-3.4
> mysql-5.5.29
> MySQL-python-1.2.4b4
> openldap-2.4.33
> pip-1.2.1
> pixman-0.22.2
> py2cairo-1.10.0
> Python-2.7
> python-ldap-2.4.10
> python-memcached-1.48
> python-txamqp-0.3
> setuptools-0.6c11
> Twisted-12.3.0
> unixODBC-2.3.1
> whisper-0.9.10
> zope.interface-3.6.7
>
>
>
> The page source of the "Drop To Merge" dashboard is:
>
> <html>
> <head>
> <title>Graphite Dashboard</title>
> <link rel="stylesheet" type="text/css" href="/content/js/ext/resources/css/ext-all.css"/>
> <link rel="stylesheet" type="text/css" href="/content/css/dashboard.css"/>
>
> <script type="text/javascript">
> var schemes = [{"pattern": "<category>", "name": "Everything", "fields": [{"name": "category", "label": "Category"}]}];
> var UI_CONFIG = {"default_graph_height": 250, "automatic_variants": true, "theme": "default", "default_graph_width": 400, "merge_hover_delay": 750, "keyboard_shortcuts": {"toggle_toolbar": "ctrl-z", "completer_add_metrics": "alt-enter", "erase_all_graphs": "alt-x", "toggle_metrics_panel": "ctrl-space", "completer_del_metrics": "alt-backspace", "save_dashboard": "alt-s", "give_completer_focus": "shift-space"}, "autocomplete_delay": 375, "refresh_interval": 60};
> var CONTEXT_FIELD_WIDTH = 220;
> var AUTOCOMPLETE_DELAY = UI_CONFIG.autocomplete_delay;
> var FINDER_QUERY_DELAY = 100;
> var NEW_DASHBOARD_REMOVE_GRAPHS = false;
>
> var RESIZE_ICON = '/content/js/ext/examples/shared/icons/fam/cog_edit.png';
> var REMOVE_ICON = '/content/js/ext/examples/shared/icons/fam/cross.gif';
> var REFRESH_ICON = '/content/js/ext/examples/shared/icons/fam/table_refresh.png';
> var SHARE_ICON = '/content/js/ext/examples/shared/icons/fam/application_go.png';
> var CALENDAR_ICON = '/content/js/ext/resources/images/default/shared/calendar.gif';
> var CLOCK_ICON = '/content/img/clock_16.png';
> var HELP_ICON = '/content/js/ext/examples/shared/icons/fam/information.png';
>
>
> var initialState = null;
>
>
>
> var initialError = null;
>
>
>
> var queryString = {};
>
> </script>
>
> <!-- Theme overrides -->
> <link rel="stylesheet" type="text/css" href="/content/css/dashboard-default.css"/>
>
>
> <script type="text/javascript" src="/content/js/ext/adapter/ext/ext-base.js"></script>
> <script type="text/javascript" src="/content/js/ext/ext-all.js"></script>
> <script type="text/javascript" src="/content/js/ext/ux/DataViewTransition.js"></script>
> <script type="text/javascript" src="/content/js/composer_widgets.js"></script>
> <script type="text/javascript" src="/content/js/dashboard.js"></script>
>
>
> <script type="text/javascript">
> Ext.BLANK_IMAGE_URL = '/content/js/ext/resources/images/default/s.gif';
> Ext.QuickTips.init();
> Ext.onReady(initDashboard);
> </script>
>
> </head>
> <body>
> <div id='merge'>Drop To Merge</div>
> </body>
> </html>
>
> --
> You received this question notification because you are a member of
> graphite-dev, which is an answer contact for Graphite.
>
> _______________________________________________
> Mailing list: https://launchpad.net/~graphite-dev
> Post to : <email address hidden>
> Unsubscribe : https://launchpad.net/~graphite-dev
> More help : https://help.launchpad.net/ListHelp

Rowan

Nate Campbell (nate-campbell) said : #3

You are correct - the carbon-cache process was still functioning correctly. Now that I have worked around the problem I understand it a little bit better. Basically, my apache configuration never had a Directory directive allowing access to /opt/graphite/webapp/content. My webapp error.log file contained a lot of lines like:

[Mon Jan 07 11:40:57 2013] [error] [client 10.1.72.33] client denied by server configuration: /opt/graphite/webapp/content/js/ext/resources/css/ext-all.css, referer: http://ndmnvc-ops002:8010/composer/?
[Mon Jan 07 11:40:57 2013] [error] [client 10.1.72.33] client denied by server configuration: /opt/graphite/webapp/content/js/ext/adapter/ext/ext-base.js, referer: http://ndmnvc-ops002:8010/composer/?
[Mon Jan 07 11:40:57 2013] [error] [client 10.1.72.33] client denied by server configuration: /opt/graphite/webapp/content/js/ext/ext-all.js, referer: http://ndmnvc-ops002:8010/composer/?
[Mon Jan 07 11:40:57 2013] [error] [client 10.1.72.33] client denied by server configuration: /opt/graphite/webapp/content/js/composer_widgets.js, referer: http://ndmnvc-ops002:8010/composer/?
[Mon Jan 07 11:41:57 2013] [error] [client 10.1.72.33] client denied by server configuration: /opt/graphite/webapp/content/js/ext/resources/css/ext-all.css, referer: http://ndmnvc-ops002:8010/composer/?
[Mon Jan 07 11:41:57 2013] [error] [client 10.1.72.33] client denied by server configuration: /opt/graphite/webapp/content/js/ext/adapter/ext/ext-base.js, referer: http://ndmnvc-ops002:8010/composer/?
[Mon Jan 07 11:41:57 2013] [error] [client 10.1.72.33] client denied by server configuration: /opt/graphite/webapp/content/js/ext/ext-all.js, referer: http://ndmnvc-ops002:8010/composer/?
[Mon Jan 07 11:41:57 2013] [error] [client 10.1.72.33] client denied by server configuration: /opt/graphite/webapp/content/js/composer_widgets.js, referer: http://ndmnvc-ops002:8010/composer/?

The strange thing is that the UI functionality that seems to rely on those javascript files was working correctly when I first finished the graphite install, even though Apache wasn't allowing access to the content at that time either. The UI only became unusable after I invoked the "configureUI" function for the first time using the navbar buttons. Adding this directive to my Apache config and restarting apache fixed the issue:

        <Directory> /opt/graphite/webapp/content/>
                Order deny,allow
                Allow from all
        </Directory>

So, I am no longer having a problem with this and honestly it seems like I was doing it wrong the whole time. My remaining confusion simply stems from the fact that the UI worked in the first place when I didn't have Apache configured correctly, and then I was somehow able to trigger a break in functionality via navbar buttons.

I no longer need an answer on this but I am happy to work with you further if you are interested in reproducing it.

Can you help with this problem?

Provide an answer of your own, or ask Nate Campbell for more information if necessary.

To post a message you must log in.