energylink/public/app/features/annotations/partials/editor.html

<div ng-controller="AnnotationsEditorCtrl">
  <div class="page-action-bar">
    <h3 class="dashboard-settings__header">
      <a ng-click="ctrl.backToList()">Annotations</a>
      <span ng-show="ctrl.mode === 'new'">&gt; New</span>
      <span ng-show="ctrl.mode === 'edit'">&gt; Edit</span>
    </h3>

    <div class="page-action-bar__spacer"></div>

    <a
      type="button"
      class="btn btn-primary"
      ng-click="ctrl.setupNew();"
      ng-if="ctrl.annotations.length > 1"
      ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'"
    >
      New
    </a>
  </div>

  <div ng-if="ctrl.mode === 'list'">
    <table class="filter-table filter-table--hover">
      <thead>
        <tr>
          <th>Query name</th>
          <th>Data source</th>
          <th colspan="3"></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="annotation in ctrl.annotations track by annotation.name">
          <td style="width:90%" ng-hide="annotation.builtIn" class="pointer" ng-click="ctrl.edit(annotation)">
            <i class="fa fa-comment" style="color:{{ annotation.iconColor }}"></i> &nbsp;
            {{ annotation.name }}
          </td>
          <td style="width:90%" ng-show="annotation.builtIn" class="pointer" ng-click="ctrl.edit(annotation)">
            <i class="gicon gicon-annotation"></i> &nbsp;
            <em class="muted">{{ annotation.name }} (Built-in)</em>
          </td>
          <td class="pointer" ng-click="ctrl.edit(annotation)">
            {{ annotation.datasource || 'Default' }}
          </td>
          <td style="width: 1%">
            <i ng-click="ctrl.move($index,-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
          </td>
          <td style="width: 1%">
            <i ng-click="ctrl.move($index,1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i>
          </td>
          <td style="width: 1%">
            <a
              ng-click="ctrl.removeAnnotation(annotation)"
              class="btn btn-danger btn-small"
              ng-hide="annotation.builtIn"
            >
              <i class="fa fa-remove"></i>
            </a>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- empty list cta, there is always one built in query -->
    <div ng-if="ctrl.annotations.length === 1" class="p-t-2">
      <empty-list-cta title="ctrl.emptyListCta.title" buttonIcon="ctrl.emptyListCta.buttonIcon" buttonTitle="ctrl.emptyListCta.buttonTitle" infoBox="ctrl.emptyListCta.infoBox" infoBoxTitle="ctrl.emptyListCta.infoBoxTitle" on-click="ctrl.setupNew"/>
    </div>
  </div>

  <div class="annotations-basic-settings" ng-if="ctrl.mode === 'edit' || ctrl.mode === 'new'">
    <div class="gf-form-group">
      <h5 class="section-heading">General</h5>
      <div class="gf-form-inline">
        <div class="gf-form">
          <span class="gf-form-label width-7">Name</span>
          <input type="text" class="gf-form-input width-20" ng-model="ctrl.currentAnnotation.name" placeholder="name" />
        </div>
        <div class="gf-form">
          <span class="gf-form-label width-7">Data source</span>
          <div class="gf-form-select-wrapper">
            <select
              class="gf-form-input"
              ng-model="ctrl.currentAnnotation.datasource"
              ng-options="f.name as f.name for f in ctrl.datasources"
              ng-change="ctrl.datasourceChanged()"
            ></select>
          </div>
        </div>
      </div>
    </div>

    <div class="gf-form-group">
      <div class="gf-form-inline">
        <gf-form-switch class="gf-form" label="Enabled" checked="ctrl.currentAnnotation.enable" label-class="width-7">
        </gf-form-switch>
        <gf-form-switch
          class="gf-form"
          label="Hidden"
          tooltip="Hides the annotation query toggle from showing at the top of the dashboard"
          checked="ctrl.currentAnnotation.hide"
          label-class="width-7"
        >
        </gf-form-switch>
        <div class="gf-form">
          <label class="gf-form-label width-9">Color</label>
          <span class="gf-form-label">
            <color-picker color="ctrl.currentAnnotation.iconColor" onChange="ctrl.onColorChange"></color-picker>
          </span>
        </div>
      </div>
    </div>

    <h5 class="section-heading">Query</h5>
    <rebuild-on-change property="ctrl.currentDatasource">
      <plugin-component type="annotations-query-ctrl"> </plugin-component>
    </rebuild-on-change>

    <div class="gf-form">
      <div class="gf-form-button-row p-y-0">
        <button
          ng-show="ctrl.mode === 'new'"
          type="button"
          class="btn gf-form-button btn-primary"
          ng-click="ctrl.add()"
        >
          Add
        </button>
        <button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-primary pull-left" ng-click="ctrl.update()">
          Update
        </button>
      </div>
    </div>
  </div>
</div>