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

<div class="gf-form-group">
	<h3 class="page-heading">HTTP</h3>
  <div class="gf-form-group">
    <div class="gf-form-inline">
      <div class="gf-form max-width-30">
        <span class="gf-form-label width-10">URL</span>
        <input class="gf-form-input" type="text"
              ng-model='current.url' placeholder="{{suggestUrl}}"
              bs-typeahead="getSuggestUrls"  min-length="0"
              ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
        <info-popover mode="right-absolute">
          <p>Specify a complete HTTP URL (for example http://your_server:8080)</p>
          <span ng-show="current.access === 'direct'">
            Your access method is <em>Browser</em>, this means the URL
            needs to be accessible from the browser.
          </span>
          <span ng-show="current.access === 'proxy'">
            Your access method is <em>Server</em>, this means the URL
            needs to be accessible from the grafana backend/server.
          </span>
        </info-popover>
      </div>
		</div>

		<div class="gf-form-inline" ng-if="showAccessOption">
			<div class="gf-form max-width-30">
				<span class="gf-form-label width-10">Access</span>
				<div class="gf-form-select-wrapper max-width-24">
					<select class="gf-form-input" ng-model="current.access" ng-options="f.key as f.value for f in [{key: 'proxy', value: 'Server (Default)'}, { key: 'direct', value: 'Browser'}]"></select>
				</div>
			</div>
			<div class="gf-form">
				<label class="gf-form-label query-keyword pointer" ng-click="toggleAccessHelp()">
					Help&nbsp;
					<i class="fa fa-caret-down" ng-show="showAccessHelp"></i>
					<i class="fa fa-caret-right" ng-hide="showAccessHelp">&nbsp;</i>
				</label>
			</div>
		</div>

		<div class="grafana-info-box m-t-2" ng-show="showAccessHelp">
			<p>
			Access mode controls how requests to the data source will be handled.
			<strong><i>Server</i></strong> should be the preferred way if nothing else stated.
			</p>
			<div class="alert-title">Server access mode (Default):</div>
			<p>
			All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to the data source
			and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements.
			The URL needs to be accessible from the grafana backend/server if you select this access mode.
			</p>
			<div class="alert-title">Browser access mode:</div>
			<p>
			All requests will be made from the browser directly to the data source and may be subject to
			Cross-Origin Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this
			access mode.
		</div>

		<div class="gf-form-inline" ng-if="current.access=='proxy'">
			<div class="gf-form">
				<span class="gf-form-label width-10">Whitelisted Cookies</span>
				<bootstrap-tagsinput ng-model="current.jsonData.keepCookies" width-class="width-20" tagclass="label label-tag" placeholder="Add Name">
				</bootstrap-tagsinput>
				<info-popover mode="right-absolute">
					Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.
				</info-popover>
			</div>
		</div>
	</div>

	<h3 class="page-heading">Auth</h3>
	<div class="gf-form-group">
		<div class="gf-form-inline">
			<gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-10" switch-class="max-width-6"></gf-form-switch>
			<gf-form-switch class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
		</div>
		<div class="gf-form-inline">
			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-10" checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-switch>
			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
		</div>
		<div class="gf-form-inline">
			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-10" checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-switch>
		</div>
	</div>

	<div class="gf-form-group" ng-if="current.basicAuth">
		<h6>Basic Auth Details</h6>
		<div class="gf-form" ng-if="current.basicAuth">
			<span class="gf-form-label width-10">User</span>
			<input class="gf-form-input max-width-21" type="text"  ng-model='current.basicAuthUser' placeholder="user" required></input>
		</div>
		<div class="gf-form">
			<span class="gf-form-label width-10">Password</span>
			<input class="gf-form-input max-width-21" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
		</div>
	</div>

	<div class="gf-form-group" ng-if="(current.jsonData.tlsAuth || current.jsonData.tlsAuthWithCACert) && current.access=='proxy'">
		<div class="gf-form">
			<h6>TLS Auth Details</h6>
			<info-popover mode="header">TLS Certs are encrypted and stored in the Grafana database.</info-popover>
		</div>
		<div ng-if="current.jsonData.tlsAuthWithCACert">
			<div class="gf-form-inline">
				<div class="gf-form gf-form--v-stretch">
					<label class="gf-form-label width-7">CA Cert</label>
				</div>
				<div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsCACert">
					<textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsCACert" placeholder="Begins with -----BEGIN CERTIFICATE-----"></textarea>
				</div>

				<div class="gf-form" ng-if="current.secureJsonFields.tlsCACert">
					<input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
					<a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsCACert = false">reset</a>
				</div>
			</div>
		</div>

		<div ng-if="current.jsonData.tlsAuth">
		<div class="gf-form-inline">
			<div class="gf-form gf-form--v-stretch">
				<label class="gf-form-label width-7">Client Cert</label>
			</div>
			<div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientCert">
				<textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsClientCert" placeholder="Begins with -----BEGIN CERTIFICATE-----" required></textarea>
			</div>
			<div class="gf-form" ng-if="current.secureJsonFields.tlsClientCert">
				<input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
				<a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientCert = false">reset</a>
			</div>
		</div>

		<div class="gf-form-inline">
			<div class="gf-form gf-form--v-stretch">
				<label class="gf-form-label width-7">Client Key</label>
			</div>
			<div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientKey">
				<textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsClientKey" placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----" required></textarea>
			</div>
			<div class="gf-form" ng-if="current.secureJsonFields.tlsClientKey">
				<input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
				<a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientKey = false">reset</a>
			</div>
		</div>
	</div>
</div>