energylink/public/app/features/plugins/partials/ds_edit.html

<navbar model="ctrl.navModel"></navbar>

<div class="page-container">
  <div class="page-header">
    <h1>
      <i class="icon-gf icon-gf-datasources"></i>
      <span ng-show="ctrl.isNew">New data source</span>
			<span ng-hide="ctrl.isNew">{{ctrl.current.name}}</span>
    </h1>

    <a class="page-header__cta btn btn-success" href="datasources/new" ng-show="ctrl.isNew">
      <i class="fa fa-plus"></i>
      Add data source
    </a>

    <div class="page-header-tabs" ng-show="ctrl.hasDashboards">
      <ul class="gf-tabs">
        <li class="gf-tabs-item">
          <a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
            Config
          </a>
        </li>
        <li class="gf-tabs-item">
          <a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
            Dashboards
          </a>
        </li>
      </ul>
    </div>
  </div>


  <div ng-if="ctrl.tabIndex === 0" class="tab-content">

    <form name="ctrl.editForm" ng-if="ctrl.current">
      <div class="gf-form-group">
        <div class="gf-form-inline">
          <div class="gf-form max-width-30">
            <span class="gf-form-label width-7">Name</span>
            <input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
            <info-popover offset="0px -135px" mode="right-absolute">
              The name is used when you select the data source in panels.
              The <em>Default</em> data source is preselected in new
              panels.
            </info-popover>
          </div>
          <gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
        </div>

        <div class="gf-form">
          <span class="gf-form-label width-7">Type</span>
          <div class="gf-form-select-wrapper max-width-23">
            <select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
          </div>
        </div>
      </div>

      <div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
        This plugin is marked as being in alpha state, which means it is in early development phase and
        updates will include breaking changes.
      </div>

      <rebuild-on-change property="ctrl.datasourceMeta.id">
        <plugin-component type="datasource-config-ctrl">
        </plugin-component>
      </rebuild-on-change>

      <div ng-if="ctrl.testing" class="gf-form-group">
        <h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
        <div class="alert-{{ctrl.testing.status}} alert">
          <div class="alert-title">{{ctrl.testing.title}}</div>
          <div ng-bind='ctrl.testing.message'></div>
        </div>
      </div>

      <div class="gf-form-button-row">
        <button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
        <button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save &amp; Test</button>
        <button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
          Delete
        </button>
        <a class="btn btn-link" href="datasources">Cancel</a>
      </div>

    </form>
  </div>

  <div ng-if="ctrl.tabIndex === 1" class="tab-content">
    <dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
  </div>

</div>