src/partials/config.html
<div class="gf-form-group">
<div class="grafana-info-box">
<h4>BigQuery Authentication</h4>
<p>There are two ways to authenticate the BigQuery plugin - either by uploading a Service Account key file, or by
automatically retrieving credentials from the Google metadata server. The latter option is only available
when running Grafana on a GCE virtual machine.</p>
<h5>Uploading a Service Account Key File</h5>
<p>
First you need to create a Google Cloud Platform (GCP) Service Account for
the Project you want to show data for. A Grafana datasource integrates with one GCP Project. If you want to
visualize data from multiple GCP Projects then you need to create one datasource per GCP Project.
</p>
<p>
The <strong>BigQuery Data Viewer</strong> role and the <strong>Job User</strong> role provides all the permissions that Grafana needs. The following API
needs to be enabled on GCP for the datasource to work: <a class="external-link" target="_blank" href="https://console.cloud.google.com/apis/library/bigquery.googleapis.com">BigQuery
API</a>
</p>
<h5>GCE Default Service Account</h5>
<p>
If Grafana is running on a Google Compute Engine (GCE) virtual machine, it is possible for Grafana to
automatically retrieve the default project id and authentication token from the metadata server. In order for this to
work, you need to make sure that you have a service account that is setup as the default account for the virtual
machine and that the service account has been given read access to the BigQuery API.
</p>
<!-- TDOD docs -->
<p>Detailed instructions on how to create a Service Account can be found <a class="external-link" target="_blank"
href="https://doitintl.github.io/bigquery-grafana/">in
the documentation.</a>
</p>
</div>
</div>
<div class="gf-form-group">
<div class="gf-form">
<h3>Authentication</h3>
<info-popover mode="header">Upload your Service Account key file or paste in the contents of the file. The file
contents will be encrypted and saved in the Grafana database.</info-popover>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-30">
<span class="gf-form-label width-13">Authentication Type</span>
<div class="gf-form-select-wrapper max-width-24">
<select class="gf-form-input" ng-model="ctrl.current.jsonData.authenticationType" ng-options="f.key as f.value for f in ctrl.authenticationTypes"></select>
</div>
</div>
</div>
<div ng-if="ctrl.current.jsonData.authenticationType === ctrl.defaultAuthenticationType && !ctrl.current.jsonData.clientEmail && !ctrl.inputDataValid">
<div class="gf-form-group" ng-if="!ctrl.inputDataValid">
<div class="gf-form">
<form>
<dash-upload on-upload="ctrl.onUpload(dash)" btn-text="Upload Service Account key file"></dash-upload>
</form>
</div>
</div>
<div class="gf-form-group">
<h5 class="section-heading" ng-if="!ctrl.inputDataValid">Or paste Service Account key JSON</h5>
<div class="gf-form" ng-if="!ctrl.inputDataValid">
<textarea rows="10" data-share-panel-url="" class="gf-form-input" ng-model="ctrl.jsonText" ng-paste="ctrl.onPasteJwt($event)"></textarea>
</div>
<div ng-repeat="valError in ctrl.validationErrors" class="text-error p-l-1">
<i class="fa fa-warning"></i>
{{valError}}
</div>
</div>
</div>
</div>
<div class="gf-form-group" ng-if="ctrl.current.jsonData.authenticationType === ctrl.defaultAuthenticationType && (ctrl.inputDataValid || ctrl.current.jsonData.clientEmail)">
<h6>Uploaded Key Details</h6>
<div class="gf-form">
<span class="gf-form-label width-13">Project</span>
<input class="gf-form-input width-40" disabled type="text" ng-model="ctrl.current.jsonData.defaultProject" />
</div>
<div class="gf-form">
<span class="gf-form-label width-13">Client Email</span>
<input class="gf-form-input width-40" disabled type="text" ng-model="ctrl.current.jsonData.clientEmail" />
</div>
<div class="gf-form">
<span class="gf-form-label width-13">Token URI</span>
<input class="gf-form-input width-40" disabled type="text" ng-model='ctrl.current.jsonData.tokenUri' />
</div>
<div class="gf-form" ng-if="ctrl.current.secureJsonFields.privateKey">
<span class="gf-form-label width-13">Private Key</span>
<input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
</div>
<div class="gf-form width-18">
<a class="btn btn-secondary gf-form-btn" href="#" ng-click="ctrl.resetValidationMessages()">Reset Service
Account Key </a>
<info-popover mode="right-normal">
Reset to clear the uploaded key and upload a new file.
</info-popover>
</div>
</div>
<p class="gf-form-label" ng-hide="ctrl.current.secureJsonFields.privateKey || ctrl.current.jsonData.authenticationType !== ctrl.defaultAuthenticationType"><i
class="fa fa-save"></i> Do not forget to save your changes after uploading a file.</p>
<div class="gf-form max-width-30">
<span class="gf-form-label width-13">Flat Rate Project</span>
<input type="text" class="gf-form-input" ng-model='ctrl.current.jsonData.flatRateProject'></input>
<info-popover mode="right-absolute">
The project that the Queries will be run in if you are using a flat-rate pricing model.
</info-popover>
</div>
<div class="gf-form">
<label class="gf-form-label width-13">Processing Location</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.processingLocation"
ng-options="f.value as f.text for f in ctrl.locations"
ng-change="ctrl.refresh()"></select>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-13">Query Priority</span>
<div class="gf-form-select-wrapper">
<select class="gf-form-select-wrapper gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.queryPriority"
ng-options="f.value as f.text for f in ctrl.queryPriority"
ng-change="ctrl.refresh()"></select>
</div>
</div>
<p class="gf-form-label" ng-show="ctrl.current.jsonData.authenticationType !== ctrl.defaultAuthenticationType"><i class="fa fa-save"></i>
Verify GCE default service account by clicking Save & Test</p>