diff --git a/public/app/features/all.ts b/public/app/features/all.ts
index 83146596ea0..d5e684e4a4e 100644
--- a/public/app/features/all.ts
+++ b/public/app/features/all.ts
@@ -12,3 +12,4 @@ import './manage-dashboards';
 import './teams/CreateTeamCtrl';
 import './profile/all';
 import './datasources/settings/HttpSettingsCtrl';
+import './datasources/settings/TlsAuthSettingsCtrl';
diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html
index 521e2d3cdc6..b6f2c4fc0dd 100644
--- a/public/app/features/datasources/partials/http_settings.html
+++ b/public/app/features/datasources/partials/http_settings.html
@@ -101,53 +101,5 @@
 		</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>
-
+<datasource-tls-auth-settings current="current" ng-if="(current.jsonData.tlsAuth || current.jsonData.tlsAuthWithCACert) && current.access=='proxy'">
+</datasource-tls-auth-settings>
\ No newline at end of file
diff --git a/public/app/features/datasources/partials/tls_auth_settings.html b/public/app/features/datasources/partials/tls_auth_settings.html
new file mode 100644
index 00000000000..c852e8ec70c
--- /dev/null
+++ b/public/app/features/datasources/partials/tls_auth_settings.html
@@ -0,0 +1,62 @@
+<div class="gf-form-group">
+  <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>
diff --git a/public/app/features/datasources/settings/TlsAuthSettingsCtrl.ts b/public/app/features/datasources/settings/TlsAuthSettingsCtrl.ts
new file mode 100644
index 00000000000..7c21fab404c
--- /dev/null
+++ b/public/app/features/datasources/settings/TlsAuthSettingsCtrl.ts
@@ -0,0 +1,10 @@
+import { coreModule } from 'app/core/core';
+
+coreModule.directive('datasourceTlsAuthSettings', () => {
+  return {
+    scope: {
+      current: '=',
+    },
+    templateUrl: 'public/app/features/datasources/partials/tls_auth_settings.html',
+  };
+});
diff --git a/public/app/plugins/datasource/mysql/partials/config.html b/public/app/plugins/datasource/mysql/partials/config.html
index 5f3ba5c1286..8221a06e1ee 100644
--- a/public/app/plugins/datasource/mysql/partials/config.html
+++ b/public/app/plugins/datasource/mysql/partials/config.html
@@ -24,70 +24,20 @@
 
 	<div class="gf-form-group">
 		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" label="TLS Client Auth" label-class="width-10" checked="ctrl.current.jsonData.tlsAuth"
-				switch-class="max-width-6"></gf-form-switch>
-			<gf-form-switch class="gf-form" label="With CA Cert" tooltip="Needed for verifing self-signed TLS Certs" checked="ctrl.current.jsonData.tlsAuthWithCACert"
-				label-class="width-11" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-checkbox class="gf-form" label="TLS Client Auth" label-class="width-10"
+				checked="ctrl.current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-checkbox>
+			<gf-form-checkbox class="gf-form" label="With CA Cert" tooltip="Needed for
+				verifing self-signed TLS Certs" checked="ctrl.current.jsonData.tlsAuthWithCACert" label-class="width-11"
+				switch-class="max-width-6"></gf-form-checkbox>
 		</div>
 		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" label="Skip TLS Verify" label-class="width-10" checked="ctrl.current.jsonData.tlsSkipVerify"
-				switch-class="max-width-6"></gf-form-switch>
+			<gf-form-checkbox class="gf-form" label="Skip TLS Verify" label-class="width-10"
+				checked="ctrl.current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-checkbox>
 		</div>
 	</div>
 
-	<div class="gf-form-group" ng-if="(ctrl.current.jsonData.tlsAuth || ctrl.current.jsonData.tlsAuthWithCACert)">
-		<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="ctrl.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="!ctrl.current.secureJsonFields.tlsCACert">
-					<textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="ctrl.current.secureJsonData.tlsCACert"
-						placeholder="Begins with -----BEGIN CERTIFICATE-----"></textarea>
-				</div>
-
-				<div class="gf-form" ng-if="ctrl.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="ctrl.current.secureJsonFields.tlsCACert = false">reset</a>
-				</div>
-			</div>
-		</div>
-
-		<div ng-if="ctrl.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="!ctrl.current.secureJsonFields.tlsClientCert">
-					<textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="ctrl.current.secureJsonData.tlsClientCert"
-						placeholder="Begins with -----BEGIN CERTIFICATE-----" required></textarea>
-				</div>
-				<div class="gf-form" ng-if="ctrl.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="ctrl.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="!ctrl.current.secureJsonFields.tlsClientKey">
-					<textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="ctrl.current.secureJsonData.tlsClientKey"
-						placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----" required></textarea>
-				</div>
-				<div class="gf-form" ng-if="ctrl.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="ctrl.current.secureJsonFields.tlsClientKey = false">reset</a>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
+<datasource-tls-auth-settings current="ctrl.current" ng-if="(ctrl.current.jsonData.tlsAuth || ctrl.current.jsonData.tlsAuthWithCACert)">
+</datasource-tls-auth-settings>
 
 <b>Connection limits</b>