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

<navbar title="Data Sources" title-url="datasources" icon="icon-gf icon-gf-datasources">
</navbar>

<div class="page-container">

  <div class="page-header">
		<h1 ng-show="isNew">Add data source</h1>
		<h1 ng-show="!isNew">Edit data source</h1>

		<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="editForm">
      <div class="gf-form-group">
        <div class="gf-form">
          <span class="gf-form-label width-7">Name</span>
          <input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required>
          <info-popover offset="0px -95px">
            The name is used when you select the data source in panels.
            The <code>Default</code> data source is preselected in new
            panels.
          </info-popover>

          <editor-checkbox text="Default" model="ctrl.current.isDefault"></editor-checkbox>
        </div>

        <div class="gf-form">
          <span class="gf-form-label width-7">Type</span>
          <div class="gf-form-select-wrapper">
            <select class="gf-form-input gf-size-auto" 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>

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

      <div ng-if="testing" style="margin-top: 25px">
        <h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
        <h5 ng-show="testing.done">Test results</h5>
        <div class="alert-{{testing.status}} alert">
          <div class="alert-title">{{testing.title}}</div>
          <div ng-bind='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</button>
        <button type="submit" class="btn btn-secondary" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges(true)">
          Test Connection
        </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>