config.html 4.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <div class="gf-form-group">
  2. <div class="grafana-info-box">
  3. <h5>GCP Service Account</h5>
  4. <p>
  5. To authenticate with the Stackdriver API, you need to create a Google Cloud Platform (GCP) Service Account for
  6. the Project you want to show data for. A Grafana datasource integrates with one GCP Project. If you want to
  7. visualize data from multiple GCP Projects then you need to create one datasource per GCP Project.
  8. </p>
  9. <p>
  10. The <strong>Monitoring Viewer</strong> role provides all the permissions that Grafana needs.
  11. </p>
  12. <p>
  13. The following APIs need to be enabled on GCP for the datasource to work:
  14. <ul>
  15. <li><a class="external-link" target="_blank" href="https://console.cloud.google.com/apis/library/monitoring.googleapis.com">Monitoring
  16. API</a></li>
  17. <li><a class="external-link" target="_blank" href="https://console.cloud.google.com/apis/library/cloudresourcemanager.googleapis.com">Resource
  18. Manager API</a></li>
  19. </ul>
  20. </p>
  21. <p>Detailed instructions on how to create a Service Account can be found <a class="external-link" target="_blank"
  22. href="http://docs.grafana.org/datasources/stackdriver/">in
  23. the documentation.</a></p>
  24. </div>
  25. </div>
  26. <div class="gf-form-group">
  27. <div class="gf-form">
  28. <h3>Service Account Authentication</h3>
  29. <info-popover mode="header">Upload your Service Account key file or paste in the contents of the file. The file
  30. contents will be encrypted and saved in the Grafana database.</info-popover>
  31. </div>
  32. <div class="gf-form-inline">
  33. <div class="gf-form max-width-30">
  34. <span class="gf-form-label width-10">Authentication Type</span>
  35. <div class="gf-form-select-wrapper max-width-24">
  36. <select class="gf-form-input" ng-model="ctrl.current.jsonData.authenticationType" ng-options="f.key as f.value for f in ctrl.authenticationTypes"></select>
  37. </div>
  38. </div>
  39. </div>
  40. <div ng-if="ctrl.current.jsonData.authenticationType === ctrl.defaultAuthenticationType && !ctrl.current.jsonData.clientEmail && !ctrl.inputDataValid">
  41. <div class="gf-form-group" ng-if="!ctrl.inputDataValid">
  42. <div class="gf-form">
  43. <form>
  44. <dash-upload on-upload="ctrl.onUpload(dash)" btn-text="Upload Service Account key file"></dash-upload>
  45. </form>
  46. </div>
  47. </div>
  48. <div class="gf-form-group">
  49. <h5 class="section-heading" ng-if="!ctrl.inputDataValid">Or paste Service Account key JSON</h5>
  50. <div class="gf-form" ng-if="!ctrl.inputDataValid">
  51. <textarea rows="10" data-share-panel-url="" class="gf-form-input" ng-model="ctrl.jsonText" ng-paste="ctrl.onPasteJwt($event)"></textarea>
  52. </div>
  53. <div ng-repeat="valError in ctrl.validationErrors" class="text-error p-l-1">
  54. <i class="fa fa-warning"></i>
  55. {{valError}}
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="gf-form-group" ng-if="ctrl.current.jsonData.authenticationType === ctrl.defaultAuthenticationType && (ctrl.inputDataValid || ctrl.current.jsonData.clientEmail)">
  61. <h6>Uploaded Key Details</h6>
  62. <div class="gf-form">
  63. <span class="gf-form-label width-10">Project</span>
  64. <input class="gf-form-input width-40" disabled type="text" ng-model="ctrl.current.jsonData.defaultProject" />
  65. </div>
  66. <div class="gf-form">
  67. <span class="gf-form-label width-10">Client Email</span>
  68. <input class="gf-form-input width-40" disabled type="text" ng-model="ctrl.current.jsonData.clientEmail" />
  69. </div>
  70. <div class="gf-form">
  71. <span class="gf-form-label width-10">Token URI</span>
  72. <input class="gf-form-input width-40" disabled type="text" ng-model='ctrl.current.jsonData.tokenUri' />
  73. </div>
  74. <div class="gf-form" ng-if="ctrl.current.secureJsonFields.privateKey">
  75. <span class="gf-form-label width-10">Private Key</span>
  76. <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
  77. </div>
  78. <div class="gf-form width-18">
  79. <a class="btn btn-secondary gf-form-btn" href="#" ng-click="ctrl.resetValidationMessages()">Reset Service
  80. Account Key </a>
  81. <info-popover mode="right-normal">
  82. Reset to clear the uploaded key and upload a new file.
  83. </info-popover>
  84. </div>
  85. </div>
  86. <p class="gf-form-label" ng-hide="ctrl.current.secureJsonFields.privateKey || ctrl.current.jsonData.authenticationType !== ctrl.defaultAuthenticationType"><i
  87. class="fa fa-save"></i> Do not forget to save your changes after uploading a file.</p>
  88. <p class="gf-form-label" ng-show="ctrl.current.jsonData.authenticationType !== ctrl.defaultAuthenticationType"><i class="fa fa-save"></i>
  89. Verify GCE automatic authentication by clicking Save & Test</p>