energylink/src/app/partials/graphite/editor.html

<div class="editor-row">

	<div  ng-repeat="target in panel.targets"
        class="grafana-target"
        ng-class="{'grafana-target-hidden': target.hide}"
        ng-controller="GraphiteTargetCtrl"
        ng-init="init()">

    <div class="grafana-target-inner">
      <ul class="grafana-target-controls">
        <li ng-show="parserError">
          <a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
            <i class="icon icon-warning-sign"></i>
          </a>
        </li>
        <li>
          <a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor">
            <i class="icon icon-pencil"></i>
          </a>
        </li>
        <li class="dropdown">
          <a  class="pointer dropdown-toggle"
              data-toggle="dropdown"
              tabindex="1">
            <i class="icon icon-cog"></i>
          </a>
          <ul class="dropdown-menu pull-right" role="menu">
            <li role="menuitem">
              <a  tabindex="1"
                  ng-click="duplicate()">
                Duplicate
              </a>
          </ul>
        </li>
        <li>
          <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
            <i class="icon icon-remove"></i>
          </a>
        </li>
      </ul>

      <ul class="grafana-segment-list">
				<li class="grafana-target-segment" style="min-width: 15px; text-align: center">
					{{targetLetters[$index]}}
        </li>
        <li>
          <a  class="grafana-target-segment"
              ng-click="target.hide = !target.hide; get_data();"
              role="menuitem">
            <i class="icon-eye-open"></i>
          </a>
        </li>
      </ul>

      <input  type="text"
              class="grafana-target-text-input span10"
              ng-model="target.target"
              focus-me="showTextEditor"
              spellcheck='false'
              ng-model-onblur ng-change="targetTextChanged()"
              ng-show="showTextEditor" />

      <ul class="grafana-segment-list" role="menu" ng-hide="showTextEditor">
        <li ng-repeat="segment in segments" role="menuitem" graphite-segment></li>
				<li ng-repeat="func in functions">
          <span graphite-func-editor class="grafana-target-segment grafana-target-function">
          </span>
        </li>
        <li class="dropdown" graphite-add-func>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
  </div>

</div>

<section class="grafana-metric-options">
		<div class="grafana-target-inner">
			<ul class="grafana-segment-list">
				<li class="grafana-target-segment grafana-target-segment-icon">
					<i class="icon-wrench"></i>
				</li>
				<li class="grafana-target-segment">
					cacheTimeout
				</li>
				<li>
					<input type="text"
					class="input-mini grafana-target-segment-input"
					ng-model="panel.cacheTimeout"
					bs-tooltip="'Graphite parameter to overwride memcache default timeout (unit is seconds)'"
					data-placement="right"
					spellcheck='false'
					placeholder="60">
				</li>
			</ul>
			<div class="clearfix"></div>
		</div>
		<div class="grafana-target-inner">
			<ul class="grafana-segment-list">
				<li class="grafana-target-segment grafana-target-segment-icon">
					<i class="icon-info-sign"></i>
				</li>
				<li class="grafana-target-segment">
					<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
						shorter legend names
					</a>
				</li>
				<li class="grafana-target-segment">
					<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
						series as parameters
					</a>
				</li>
				<li class="grafana-target-segment">
					<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
						stacking
					</a>
				</li>
				<li class="grafana-target-segment">
					<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
						templating
					</a>
				</li>
			</ul>
			<div class="clearfix"></div>
		</div>
	</div>
</section>

<div class="editor-row">
	<div class="pull-left" style="margin-top: 30px;">

		<div class="grafana-info-box span8" ng-if="editorHelpIndex === 1">
			<h5>Shorter legend names</h5>
			<ul>
				<li>alias() function to specify a custom series name</li>
				<li>aliasByNode(2) to alias by a specific part of your metric path</li>
				<li>aliasByNode(2, -1) you can add multiple segment paths, and use negative index</li>
				<li>groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by</li>
			</ul>
		</div>

		<div class="grafana-info-box span8" ng-if="editorHelpIndex === 2">
			<h5>Series as parameter</h5>
			<ul>
				<li>Some graphite functions allow you to have many series arguments</li>
				<li>Use #[A-Z] to use a graphite query as parameter to a function</li>
				<li>
					Examples:
					<ul>
						<li>asPercent(#A, #B)</li>
						<li>prod.srv-01.counters.count - asPercent(#A) : percentage of count in comparison with A query</li>
						<li>prod.srv-01.counters.count - sumSeries(#A) : sum count and series A </li>
						<li>divideSeries(#A, #B)</li>
					</ul>
				</li>
				<li>If a query is added only to be used as a parameter, hide it from the graph with the eye icon</li>
			</ul>
		</div>

		<div class="grafana-info-box span6" ng-if="editorHelpIndex === 3">
			<h5>Stacking</h5>
			<ul>
				<li>You find the stacking option under Display Styles tab</li>
				<li>When stacking is enabled make sure null point mode is set to 'null as zero'</li>
			</ul>
		</div>

		<div class="grafana-info-box span6" ng-if="editorHelpIndex === 4">
			<h5>Templating</h5>
			<ul>
				<li>You can use a template variable in place of metric names</li>
				<li>You can use a template variable in place of function parameters</li>
				<li>You enable the templating feature in Dashboard settings / Feature toggles </li>
			</ul>
		</div>

	</div>
</div>