energylink/public/app/features/dashboard/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.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-success">
        <i class="gicon gicon-add-link"></i>
        Add Dashboard Link
      </a>
      <div class="grafana-info-box">
        <h5>What are Dashboard Links?</h5>
        <p>
					Dashboard Links allow you to place links to other dashboards and web sites directly in below the dashboard header.
        </p>
      </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.setupNew()">
        <i class="fa fa-plus"></i> New</a>
    </div>
    <table class="filter-table filter-table--hover">
      <thead>
        <tr>
          <th>Type</th>
          <th>Info</th>
          <th colspan="3"></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="link in ctrl.dashboard.links">
          <td class="pointer" ng-click="ctrl.editLink(link)">
            <i class="fa fa-fw fa-external-link"></i>
            {{link.type}}
          </td>
          <td>
            <div ng-if="link.title">
              {{link.title}}
            </div>
            <div ng-if="!link.title && link.url">
              {{link.url}}
            </div>
            <span ng-if="!link.title && link.tags" ng-repeat="tag in link.tags" tag-color-from-name="tag" class="label label-tag" style="margin-right: 6px">
              {{tag}}
            </span>
          </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">
    <div class="gf-form-group">
      <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="ctrl.link.type" ng-options="f for f in ['dashboards','link']"></select>
        </div>
      </div>

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

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

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

        <div class="gf-form">
          <span class="gf-form-label width-8">Tooltip</span>
          <input type="text" ng-model="ctrl.link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur>
        </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="ctrl.link.icon" ng-options="k as k for (k, v) in ctrl.iconMap"></select>
          </div>
        </div>
      </div>
    </div>

    <div class="gf-form-group">
      <h5 class="section-heading">Include</h5>
      <div>
        <gf-form-switch class="gf-form" label="Time range" checked="ctrl.link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
        <gf-form-switch class="gf-form" label="Variable values" checked="ctrl.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="ctrl.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()">
    Add
  </button>
  <button class="btn btn-success" ng-if="ctrl.mode == 'edit'" ng-click="ctrl.saveLink()">
    Update
  </button>
</div>