energylink/public/app/plugins/datasource/mysql/partials/config.html

<h3 class="page-heading">MySQL Connection</h3>

<div class="gf-form-group">
	<div class="gf-form max-width-30">
		<span class="gf-form-label width-7">Host</span>
		<input type="text" class="gf-form-input" ng-model='ctrl.current.url' placeholder="localhost:3306" bs-typeahead="{{['localhost:3306', 'localhost:3307']}}" required></input>
	</div>

	<div class="gf-form max-width-30">
		<span class="gf-form-label width-7">Database</span>
		<input type="text" class="gf-form-input" ng-model='ctrl.current.database' placeholder="database name" required></input>
	</div>

	<div class="gf-form-inline">
		<div class="gf-form max-width-15">
			<span class="gf-form-label width-7">User</span>
			<input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="user"></input>
		</div>
		<div class="gf-form max-width-15">
			<span class="gf-form-label width-7">Password</span>
			<input type="password" class="gf-form-input" ng-model='ctrl.current.password' placeholder="password"></input>
		</div>
	</div>

	<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>
		</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>
		</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>

<b>Connection limits</b>

<div class="gf-form-group">
	<div class="gf-form max-width-15">
		<span class="gf-form-label width-7">Max open</span>
		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.maxOpenConns" placeholder="unlimited"></input>
		<info-popover mode="right-absolute">
			The maximum number of open connections to the database. If <i>Max idle connections</i> is greater than 0 and the
			<i>Max open connections</i> is less than <i>Max idle connections</i>, then <i>Max idle connections</i> will be
			reduced to match the <i>Max open connections</i> limit. If set to 0, there is no limit on the number of open
			connections.
		</info-popover>
	</div>
	<div class="gf-form max-width-15">
		<span class="gf-form-label width-7">Max idle</span>
		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.maxIdleConns" placeholder="2"></input>
		<info-popover mode="right-absolute">
			The maximum number of connections in the idle connection pool. If <i>Max open connections</i> is greater than 0 but
			less than the <i>Max idle connections</i>, then the <i>Max idle connections</i> will be reduced to match the
			<i>Max open connections</i> limit. If set to 0, no idle connections are retained.
		</info-popover>
	</div>
	<div class="gf-form max-width-15">
		<span class="gf-form-label width-7">Max lifetime</span>
		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.connMaxLifetime" placeholder="14400"></input>
		<info-popover mode="right-absolute">
			The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever.<br/><br/>
			This should always be lower than configured <a href="https://dev.mysql.com/doc/refman/8.0/en/server-system-variables.html#sysvar_wait_timeout" target="_blank">wait_timeout</a> in MySQL.
		</info-popover>
	</div>
</div>

<h3 class="page-heading">MySQL details</h3>

<div class="gf-form-group">
	<div class="gf-form-inline">
		<div class="gf-form">
			<span class="gf-form-label width-9">Min time interval</span>
			<input type="text" class="gf-form-input width-6" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="1m"></input>
			<info-popover mode="right-absolute">
				A lower limit for the auto group by time interval. Recommended to be set to write frequency,
				for example <code>1m</code> if your data is written every minute.
			</info-popover>
		</div>
	</div>
</div>

<div class="gf-form-group">
	<div class="grafana-info-box">
		<h5>User Permission</h5>
		<p>
			The database user should only be granted SELECT permissions on the specified database &amp; tables you want to query.
			Grafana does not validate that queries are safe so queries can contain any SQL statement. For example, statements
			like <code>USE otherdb;</code> and <code>DROP TABLE user;</code> would be executed. To protect against this we
			<strong>Highly</strong> recommmend you create a specific MySQL user with restricted permissions.

			Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/features/datasources/mysql/">MySQL Data Source Docs</a> for more information.
		</p>
	</div>
</div>