energylink/public/app/features/dashlinks/editor.html

<h3 class="dashboard-settings__header">
  <a ng-click="ctrl.backToList()">Dashboard Links</a>
  <span ng-show="ctrl.mode === 'new'">&gt; New</span>
  <span ng-show="ctrl.mode === 'edit'">&gt; Edit</span>
</h3>



<div ng-if="ctrl.mode == 'list'">
  <div ng-if="ctrl.dashboard.links.length === 0">
    <div class="empty-list-cta">
      <div class="empty-list-cta__title">
        There are no dashboard links added yet
      </div>
      <a ng-click="ctrl.addLinkMode()" class="empty-list-cta__button btn btn-xlarge btn-success">
        <i class="gicon gicon-dashboard-new"></i>
        Add Dashboard Link
      </a>
      <div class="grafana-info-box">
        <h5>What are Dashboard Links?</h5>
        <p>
          Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons on all
          graph panels. When you hover over an annotation icon you can get event text &amp; tags for the event. You can add
          annotation events directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be
          stored in Grafana's annotation database.
        </p>
        Checkout the
        <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/annotations/">Annotations documentation</a> for more information.
      </div>
    </div>
  </div>

  <div ng-if="ctrl.dashboard.links.length > 0">
    <div class="page-action-bar">
      <div class="page-action-bar__spacer"></div>
      <a type="button" class="btn btn-success" ng-click="ctrl.addLinkMode()">
        <i class="fa fa-plus"></i> New</a>
    </div>
    <table class="filter-table filter-table--hover">
      <thead>
        <tr>
          <th>Type</th>
          <th>Tags</th>
          <th colspan="3"></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="link in ctrl.dashboard.links">
          <td style="width:90%" class="pointer" ng-click="ctrl.editLinkMode(link)">
            <i class="fa fa-fw fa-external-link"></i>
            {{link.type}}
          </td>
          <td class="pointer">
            {{link.tags}}
          </td>
          <td style="width: 1%">
            <i ng-click="ctrl.moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
          </td>
          <td style="width: 1%">
            <i ng-click="ctrl.moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i>
          </td>
          <td style="width: 1%">
            <a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn">
              <i class="fa fa-remove"></i>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


<div ng-if="ctrl.mode == 'edit' || ctrl.mode == 'new'">
  <div class="gf-form-group gf-form-inline">
    <div class="section">
      <div class="gf-form">
        <span class="gf-form-label width-8">Type</span>
        <div class="gf-form-select-wrapper width-10">
          <select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
        </div>
      </div>

      <div class="gf-form" ng-show="link.type === 'dashboards'">
        <span class="gf-form-label width-8">With tags</span>
        <bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags" style="margin-right: .25rem"></bootstrap-tagsinput>
      </div>

      <gf-form-switch ng-show="link.type === 'dashboards'" class="gf-form" label="As dropdown" checked="link.asDropdown" switch-class="max-width-4"
        label-class="width-8" on-change="updated()"></gf-form-switch>
      <div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
        <span class="gf-form-label width-8">Title</span>
        <input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
      </div>
      <div ng-show="link.type === 'link'">
        <div class="gf-form">
          <li class="gf-form-label width-8">Url</li>
          <input type="text" ng-model="link.url" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
        </div>

        <div class="gf-form">
          <span class="gf-form-label width-8">Title</span>
          <input type="text" ng-model="link.title" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
        </div>

        <div class="gf-form">
          <span class="gf-form-label width-8">Tooltip</span>
          <input type="text" ng-model="link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
        </div>

        <div class="gf-form">
          <span class="gf-form-label width-8">Icon</span>
          <div class="gf-form-select-wrapper width-20">
            <select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
          </div>
        </div>
      </div>
    </div>

    <div class="section gf-form-inline" style="display: flex">
      <div>
        <div class="gf-form">
          <span class="gf-form-label width-6">Include</span>
        </div>
      </div>
      <div>
        <gf-form-switch class="gf-form" label="Time range" checked="link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
        <gf-form-switch class="gf-form" label="Variable values" checked="link.includeVars" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
        <gf-form-switch class="gf-form" label="Open in new tab" checked="link.targetBlank" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
      </div>
    </div>
  </div>
  <button class="btn btn-success" ng-if="ctrl.mode == 'new'" ng-click="ctrl.addLink(link.type, link.tags, link.url, link.title)">
    <i class="fa fa-plus"></i> Add</button>
  <button class="btn btn-success" ng-if="ctrl.mode == 'edit'" ng-click="ctrl.editLink()">
    <i class="fa fa-plus"></i> Edit</button>
</div>