From b8231b2903947d9a0a2b7adddbb86c3b9548228d Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 12 Sep 2018 13:08:30 +0200 Subject: [PATCH] stackdriver: ux for config page, docs updated --- .../features/datasources/stackdriver.md | 9 +- .../datasource/stackdriver/config_ctrl.ts | 50 +------ .../stackdriver/partials/config.html | 133 +++++++++++------- 3 files changed, 89 insertions(+), 103 deletions(-) diff --git a/docs/sources/features/datasources/stackdriver.md b/docs/sources/features/datasources/stackdriver.md index c48b7df9f44..33c0ecc8959 100644 --- a/docs/sources/features/datasources/stackdriver.md +++ b/docs/sources/features/datasources/stackdriver.md @@ -12,7 +12,7 @@ weight = 11 # Using Google Stackdriver in Grafana -Grafana ships with built in support for Google Stackdriver. You just have to add it as a datasource and you will be ready to build dashboards for your Stackdriver metrics. +Grafana ships with built-in support for Google Stackdriver. You just have to add it as a datasource and you will be ready to build dashboards for your Stackdriver metrics. ## Adding the data source to Grafana @@ -56,11 +56,14 @@ Click on the links above and click the `Enable` button: 3. On the `Create service account key` page, choose key type `JSON`. Then in the `Service Account` dropdown, choose the `New service account` option: ![Create service account key](/img/docs/v54/stackdriver_create_service_account_key.png) -4. Some new fields will appear. Fill in a name for the service account in the `Service account name` field and then choose the Monitoring Viewer role from the `Role` dropdown: +4. Some new fields will appear. Fill in a name for the service account in the `Service account name` field and then choose the `Monitoring Viewer` role from the `Role` dropdown: ![Choose role](/img/docs/v54/stackdriver_service_account_choose_role.png) 5. Click the Create button. A Json Web Token (JWT) file will be created and downloaded to your computer. Store this file in a secure place as it allows access to your Stackdriver data. -6. Upload it to Grafana on the datasource Configuration page. +6. Upload it to Grafana on the datasource Configuration page. You can either upload the file or paste in the contents of the file. + ![Choose role](/img/docs/v54/stackdriver_grafana_upload_key.png) +7. The file contents will be encrypted and saved in the Grafana database. Don't forget to save after uploading the file! + ![Choose role](/img/docs/v54/stackdriver_grafana_key_uploaded.png) ## Metric Query Editor diff --git a/public/app/plugins/datasource/stackdriver/config_ctrl.ts b/public/app/plugins/datasource/stackdriver/config_ctrl.ts index ccedeb0f74f..d3847562156 100644 --- a/public/app/plugins/datasource/stackdriver/config_ctrl.ts +++ b/public/app/plugins/datasource/stackdriver/config_ctrl.ts @@ -5,25 +5,20 @@ export class StackdriverConfigCtrl { jsonText: string; validationErrors: string[] = []; inputDataValid: boolean; - defaultProject: string; - projectsError: string; - projects: any[]; - loadingProjects: boolean; /** @ngInject */ - constructor(private $scope, datasourceSrv) { + constructor(datasourceSrv) { this.datasourceSrv = datasourceSrv; this.current.jsonData = this.current.jsonData || {}; this.current.secureJsonData = this.current.secureJsonData || {}; this.current.secureJsonFields = this.current.secureJsonFields || {}; - this.defaultProject = this.current.jsonData.defaultProject; - this.projects = []; } save(jwt) { this.current.secureJsonData.privateKey = jwt.private_key; this.current.jsonData.tokenUri = jwt.token_uri; this.current.jsonData.clientEmail = jwt.client_email; + this.current.jsonData.defaultProject = jwt.project_id; } validateJwt(jwt) { @@ -43,16 +38,15 @@ export class StackdriverConfigCtrl { if (this.validationErrors.length === 0) { this.inputDataValid = true; return true; - } else { - return false; } + + return false; } onUpload(json) { this.jsonText = ''; if (this.validateJwt(json)) { this.save(json); - this.displayProjects(); } } @@ -61,7 +55,6 @@ export class StackdriverConfigCtrl { const json = JSON.parse(e.originalEvent.clipboardData.getData('text/plain') || this.jsonText); if (this.validateJwt(json)) { this.save(json); - this.displayProjects(); } } catch (error) { this.resetValidationMessages(); @@ -73,44 +66,9 @@ export class StackdriverConfigCtrl { this.validationErrors = []; this.inputDataValid = false; this.jsonText = ''; - this.loadingProjects = false; - this.projectsError = ''; this.current.jsonData = {}; this.current.secureJsonData = {}; this.current.secureJsonFields = {}; } - - async displayProjects() { - if (this.projects.length === 0) { - try { - this.loadingProjects = true; - const ds = await this.datasourceSrv.loadDatasource(this.current.name); - this.projects = await ds.getProjects(); - this.$scope.$apply(() => { - if (this.projects.length > 0) { - this.current.jsonData.defaultProject = this.current.jsonData.defaultProject || this.projects[0].id; - } - }); - } catch (error) { - let message = 'Projects cannot be fetched: '; - message += error.statusText ? error.statusText + ': ' : ''; - if (error && error.data && error.data.error && error.data.error.message) { - if (error.data.error.code === 403) { - message += ` - A list of projects could not be fetched from the Google Cloud Resource Manager API. - You might need to enable it first: - https://console.developers.google.com/apis/library/cloudresourcemanager.googleapis.com`; - } else { - message += error.data.error.code + '. ' + error.data.error.message; - } - } else { - message += 'Cannot connect to Stackdriver API'; - } - this.$scope.$apply(() => (this.projectsError = message)); - } finally { - this.$scope.$apply(() => (this.loadingProjects = false)); - } - } - } } diff --git a/public/app/plugins/datasource/stackdriver/partials/config.html b/public/app/plugins/datasource/stackdriver/partials/config.html index 2abdf14f631..d8029abc39f 100644 --- a/public/app/plugins/datasource/stackdriver/partials/config.html +++ b/public/app/plugins/datasource/stackdriver/partials/config.html @@ -1,59 +1,84 @@ -
-
-
-
- -
-
-
-
-
Or paste JSON
-
- -
-
- - {{valError}} -
-
+
+
+
GCP Service Account
+

+ To authenticate with the Stackdriver API, 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. +

+

+ The Monitoring Viewer role provides all the permissions that Grafana needs. +

+

+ The following APIs need to be enabled on GCP for the datasource to work: +

+

+

Detailed instructions on how to create a Service Account can be found in + the documentation.

+
+
+ +
+
+

Service Account Authentication

+ 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. +
+ +
+
+
+
+ +
+
+
+
+
Or paste Service Account key JSON
+
+ +
+
+ + {{valError}} +
+
+
-
-
- Token URI - -
-
-
-
- Client Email - -
-
-
- Private Key - -
+
Uploaded Key Details
+
+ Project + +
+
+ Client Email + +
+
+ Token URI + +
+
+ Private Key + +
-
- Reset form -
-
-
- Default Project -
- -
-
- - Fetching projects...… -
-
-
- - {{ctrl.projectsError}} -
-
\ No newline at end of file +
+ Reset Service + Account Key + + Reset to clear the uploaded key and upload a new file. + +
+
+ +

Do not forget to save your changes after uploading a file.