5006d3e1-e7ba-492f-81f9-2e1d3f8e0bf8

Committed 19 Mar 2024 02:29PM UTC coverage: 96.544% (+0.3%) from 96.198%

Build # 5006d3e1-e7ba-492f-81f9-2e1d3f8e0bf8

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #317 from Rise-Vision/feature/embed-dashboard

Embed dashboard

Run Details

1140 of 1209 branches covered (94.29%)

Branch coverage included in aggregate %.

78 of 79 new or added lines in 1 file covered. (98.73%)

1 existing line in 1 file now uncovered.

11795 of 12189 relevant lines covered (96.77%)

1.82 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

96.22

/src/rise-powerbi/rise-powerbi.js

/* eslint-disable class-methods-use-this, no-console */
/* globals powerbi */

import { html, css } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
// import * as pbi from 'powerbi-client'; // this import causes error in unit tests
import { RiseElement } from '../common/rise-element.js';
import { version } from '../version.js';

const MY_WORKSPACE_ID = 'my-workspace';

export default class RisePowerBi extends RiseElement {
  render() {
    return html`${this._template()}`;
  }

  static get properties() {
    return {
      groupId: { type: String },
      contentId: { type: String },
      account: { type: String },
      signature: { type: String },
      refresh: { type: Number },
      environment: { type: String },
    };
  }

  static get styles() {
    return css`
      :host {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
        background: transparent;
      }

      #embedContainer {
        width: 100%;
        height: 100%;
      }

      #blocker {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .show-blocker {
        display: block;
        visibility: visible;
      }
      .hide-blocker {
        display: none;
        visibility: hidden;
      }
    `;
  }

  constructor() {
    super();

    this.version = version;

    this.groupId = '';
    this.contentId = '';
    this.account = null;
    this.signature = null;
    this.refresh = 0;
    this.environment = 'prod';

    this._initialStart = true;
    this._type = 'dashboard';
    this._pageView = 'fitToWidth';
    this._tokenType = 'models.TokenType.Aad';
    this._accessToken = null;
  }

  disconnectedCallback() {
    super.disconnectedCallback();
  }

  _template() {
    const blockerClasses = {
      'show-blocker': RisePlayerConfiguration.Helpers.isEditorPreview(),
      'hide-blocker': !RisePlayerConfiguration.Helpers.isEditorPreview(),
    };

    return html`
      <div id="embedContainer"></div>
      <div id="blocker" class=${classMap(blockerClasses)}></div>
    `;
  }

  updated(changedProperties) {
    if (
      changedProperties.has('groupId') ||
      changedProperties.has('contentId') ||
      changedProperties.has('account') ||
      changedProperties.has('signature')
    ) {
      this._restart();
    }

    if (changedProperties.has('refresh')) {
      this._refreshChanged();
    }
  }

  _handleRisePresentationPlay() {
    super._handleRisePresentationPlay();

    this._play();
  }

  // _handleStart(event) {
  //   super._handleStart(event);

  //   if (this._initialStart) {
  //     this._initialStart = false;
  //   }
  // }

  _play() {
    if (!powerbi) {
      // TODO: log error
      return;
    }

    if (!this.account || !this.signature || !this.groupId || !this.contentId) {
      return;
    }

    this._getAccessToken()
      .then(token => {
        if (token) {
          this._accessToken = token;
          this._embed(token);
        }
      })
      .catch(err => {
        console.log('error getting token', err);
        // TODO: log error
      });
  }

  _restart() {
    if (this.isPlaying()) {
      this._accessToken = null;
      this._clearContainer();
      this._play();
    }
  }

  _refreshChanged() {
    console.log('refresh changed');
    // TODO: restart refresh timer
  }

  _clearContainer() {
    const container = this.renderRoot.querySelector('#embedContainer');

    // IMPORTANT: Setting container.innerHTML to empty string will cause error in powerbi.embed().
    // Clear container by calling powerbi.reset().
    powerbi.reset(container);
  }

  _getTokenEndpointUrl(environment) {
    const productionUrl = 'https://services.risevision.com/data';
    const testingUrl = 'https://services-stage.risevision.com/data';
    const serverUrl = environment === 'test' ? testingUrl : productionUrl;

    return `${serverUrl}/token`;
  }

  _getTokenEndpointOptions(account, signature) {
    return {
      method: 'POST',
      headers: {
        'X-Requested-With': 'rise-powerbi',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        account,
        signature,
        provider: 'ms-pbi',
      }),
    };
  }

  async _getAccessToken() {
    if (!this.account || !this.signature) {
      return Promise.resolve(null);
    }

    if (this._accessToken) {
      return Promise.resolve(this._accessToken);
    }

    const endpoint = this._getTokenEndpointUrl(this.environment);
    const options = this._getTokenEndpointOptions(this.account, this.signature);

    try {
      const response = await fetch(endpoint, options);

      if (!response.ok) {
        throw new Error(
          `rise-powerbi failed to get access token, status: ${response.status}, statusText: ${response.statusText}`
        );
      }

      return response.json().then(data => data.access_token);
    } catch (error) {
      // if we start using powerbi.embed() automatic refresh, the we will need to return null
      // https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/refresh-token#considerations-and-limitations
      return Promise.reject(error);
      // TODO: should we retry?
    }
  }

  _getEmbedUrl() {
    let res = `https://app.powerbi.com/dashboardEmbed?dashboardId=${this.contentId}`;
    if (this.groupId && this.groupId !== MY_WORKSPACE_ID) {
      res += `&groupId=${this.groupId}`;
    }
    return res;
  }

  _embed(token) {
    console.log('_embed()', this.contentId, this.groupId, this._accessToken);

    // TODO: clear container only if group/dashboard ID change. Otherwise just refresh (if possible).
    this._clearContainer();

    if (!this.contentId || !this.groupId || !token) {
      return;
    }

    const embedUrl = this._getEmbedUrl();

    // https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/embed-dashboard
    // https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/configure-report-settings
    const config = {
      type: 'dashboard',
      id: this.contentId,
      embedUrl,
      accessToken: token,
      tokenType: 0, // pbi.models.TokenType.Aad
    };

    // Note, powerbi throws error if try to configure access token auto refresh for dashboards.
    // config.eventHooks = {
    //   accessTokenProvider: this._getAccessToken,
    // };

    const container = this.renderRoot.querySelector('#embedContainer');

    // add a small timeout between getting an access token and calling embed()
    // without timeout the embed() logs 401 Unauthorized error and does not render anything
    setTimeout(() => {
      this.pbiContent = powerbi.embed(container, config);
    }, 100);
  }
}

customElements.define('rise-powerbi', RisePowerBi);

1	/* eslint-disable class-methods-use-this, no-console */	1✔
2	/* globals powerbi */	1✔
3		1✔
4	import { html, css } from 'lit';	1✔
5	import { classMap } from 'lit/directives/class-map.js';	1✔
6	// import * as pbi from 'powerbi-client'; // this import causes error in unit tests	1✔
7	import { RiseElement } from '../common/rise-element.js';	1✔
8	import { version } from '../version.js';	1✔
9		1✔
10	const MY_WORKSPACE_ID = 'my-workspace';	1✔
11		1✔
12	export default class RisePowerBi extends RiseElement {	1✔
13	render() {	1✔
14	return html`${this._template()}`;	1✔
15	}	1✔
16		1✔
17	static get properties() {	1✔
18	return {	1✔
19	groupId: { type: String },	1✔
20	contentId: { type: String },	1✔
21	account: { type: String },	1✔
22	signature: { type: String },	1✔
23	refresh: { type: Number },	1✔
24	environment: { type: String },	1✔
25	};	1✔
26	}	1✔
27		1✔
28	static get styles() {	1✔
29	return css`	1✔
30	:host {	1✔
31	overflow: hidden;	1✔
32	position: relative;	1✔
33	width: 100%;	1✔
34	height: 100%;	1✔
35	background: transparent;	1✔
36	}	1✔
37		1✔
38	#embedContainer {	1✔
39	width: 100%;	1✔
40	height: 100%;	1✔
41	}	1✔
42		1✔
43	#blocker {	1✔
44	position: absolute;	1✔
45	top: 0;	1✔
46	left: 0;	1✔
47	width: 100%;	1✔
48	height: 100%;	1✔
49	}	1✔
50	.show-blocker {	1✔
51	display: block;	1✔
52	visibility: visible;	1✔
53	}	1✔
54	.hide-blocker {	1✔
55	display: none;	1✔
56	visibility: hidden;	1✔
57	}	1✔
58	`;	1✔
59	}	1✔
60		1✔
61	constructor() {	1✔
62	super();	1✔
63		1✔
64	this.version = version;	1✔
65		1✔
66	this.groupId = '';	1✔
67	this.contentId = '';	1✔
68	this.account = null;	1✔
69	this.signature = null;	1✔
70	this.refresh = 0;	1✔
71	this.environment = 'prod';	1✔
72		1✔
73	this._initialStart = true;	1✔
74	this._type = 'dashboard';	1✔
75	this._pageView = 'fitToWidth';	1✔
76	this._tokenType = 'models.TokenType.Aad';	1✔
77	this._accessToken = null;	1✔
78	}	1✔
79		1✔
80	disconnectedCallback() {	1✔
81	super.disconnectedCallback();	1✔
82	}	1✔
83		1✔
84	_template() {	1✔
85	const blockerClasses = {	1✔
86	'show-blocker': RisePlayerConfiguration.Helpers.isEditorPreview(),	1✔
87	'hide-blocker': !RisePlayerConfiguration.Helpers.isEditorPreview(),	1✔
88	};	1✔
89		1✔
90	return html`	1✔
91	<div id="embedContainer"></div>	1✔
92	<div id="blocker" class=${classMap(blockerClasses)}></div>	1✔
93	`;	1✔
94	}	1✔
95		1✔
96	updated(changedProperties) {	1✔
97	if (	1✔
98	changedProperties.has('groupId') \|\|	1✔
99	changedProperties.has('contentId') \|\|	1✔
100	changedProperties.has('account') \|\|	1!
101	changedProperties.has('signature')	×
102	) {	1✔
103	this._restart();	1✔
104	}	1✔
105		1✔
106	if (changedProperties.has('refresh')) {	1✔
107	this._refreshChanged();	1✔
108	}	1✔
109	}	1✔
110		1✔
111	_handleRisePresentationPlay() {	1✔
112	super._handleRisePresentationPlay();	1✔
113		1✔
114	this._play();	1✔
115	}	1✔
116		1✔
117	// _handleStart(event) {	1✔
118	// super._handleStart(event);	1✔
119		1✔
120	// if (this._initialStart) {	1✔
121	// this._initialStart = false;	1✔
122	// }	1✔
123	// }	1✔
124		1✔
125	_play() {	1✔
126	if (!powerbi) {	1!
127	// TODO: log error	×
128	return;	×
129	}	×
130		1✔
131	if (!this.account \|\| !this.signature \|\| !this.groupId \|\| !this.contentId) {	1✔
132	return;	1✔
133	}	1✔
134		1✔
135	this._getAccessToken()	1✔
136	.then(token => {	1✔
137	if (token) {	1✔
138	this._accessToken = token;	1✔
139	this._embed(token);	1✔
140	}	1✔
141	})	1✔
142	.catch(err => {	1✔
143	console.log('error getting token', err);	×
144	// TODO: log error	×
145	});	1✔
146	}	1✔
147		1✔
148	_restart() {	1✔
149	if (this.isPlaying()) {	1✔
150	this._accessToken = null;	1✔
151	this._clearContainer();	1✔
152	this._play();	1✔
153	}	1✔
154	}	1✔
155		1✔
156	_refreshChanged() {	1✔
157	console.log('refresh changed');	1✔
158	// TODO: restart refresh timer	1✔
159	}	1✔
160		1✔
161	_clearContainer() {	1✔
162	const container = this.renderRoot.querySelector('#embedContainer');	1✔
163		1✔
164	// IMPORTANT: Setting container.innerHTML to empty string will cause error in powerbi.embed().	1✔
165	// Clear container by calling powerbi.reset().	1✔
166	powerbi.reset(container);	1✔
167	}	1✔
168		1✔
169	_getTokenEndpointUrl(environment) {	1✔
170	const productionUrl = 'https://services.risevision.com/data';	1✔
171	const testingUrl = 'https://services-stage.risevision.com/data';	1✔
172	const serverUrl = environment === 'test' ? testingUrl : productionUrl;	1✔
173		1✔
174	return `${serverUrl}/token`;	1✔
175	}	1✔
176		1✔
177	_getTokenEndpointOptions(account, signature) {	1✔
178	return {	1✔
179	method: 'POST',	1✔
180	headers: {	1✔
181	'X-Requested-With': 'rise-powerbi',	1✔
182	'Content-Type': 'application/json',	1✔
183	},	1✔
184	body: JSON.stringify({	1✔
185	account,	1✔
186	signature,	1✔
187	provider: 'ms-pbi',	1✔
188	}),	1✔
189	};	1✔
190	}	1✔
191		1✔
192	async _getAccessToken() {	1✔
193	if (!this.account \|\| !this.signature) {	1✔
194	return Promise.resolve(null);	1✔
195	}	1✔
196		1✔
197	if (this._accessToken) {	1!
NEW 198	return Promise.resolve(this._accessToken);	×
UNCOV 199	}	×
200		1✔
201	const endpoint = this._getTokenEndpointUrl(this.environment);	1✔
202	const options = this._getTokenEndpointOptions(this.account, this.signature);	1✔
203		1✔
204	try {	1✔
205	const response = await fetch(endpoint, options);	1✔
206		1✔
207	if (!response.ok) {	1✔
208	throw new Error(	1✔
209	`rise-powerbi failed to get access token, status: ${response.status}, statusText: ${response.statusText}`	1✔
210	);	1✔
211	}	1✔
212		1✔
213	return response.json().then(data => data.access_token);	1✔
214	} catch (error) {	1✔
215	// if we start using powerbi.embed() automatic refresh, the we will need to return null	1✔
216	// https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/refresh-token#considerations-and-limitations	1✔
217	return Promise.reject(error);	1✔
218	// TODO: should we retry?	1✔
219	}	1✔
220	}	1✔
221		1✔
222	_getEmbedUrl() {	1✔
223	let res = `https://app.powerbi.com/dashboardEmbed?dashboardId=${this.contentId}`;	1✔
224	if (this.groupId && this.groupId !== MY_WORKSPACE_ID) {	1✔
225	res += `&groupId=${this.groupId}`;	1✔
226	}	1✔
227	return res;	1✔
228	}	1✔
229		1✔
230	_embed(token) {	1✔
231	console.log('_embed()', this.contentId, this.groupId, this._accessToken);	1✔
232		1✔
233	// TODO: clear container only if group/dashboard ID change. Otherwise just refresh (if possible).	1✔
234	this._clearContainer();	1✔
235		1✔
236	if (!this.contentId \|\| !this.groupId \|\| !token) {	1✔
237	return;	1✔
238	}	1✔
239		1✔
240	const embedUrl = this._getEmbedUrl();	1✔
241		1✔
242	// https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/embed-dashboard	1✔
243	// https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/configure-report-settings	1✔
244	const config = {	1✔
245	type: 'dashboard',	1✔
246	id: this.contentId,	1✔
247	embedUrl,	1✔
248	accessToken: token,	1✔
249	tokenType: 0, // pbi.models.TokenType.Aad	1✔
250	};	1✔
251		1✔
252	// Note, powerbi throws error if try to configure access token auto refresh for dashboards.	1✔
253	// config.eventHooks = {	1✔
254	// accessTokenProvider: this._getAccessToken,	1✔
255	// };	1✔
256		1✔
257	const container = this.renderRoot.querySelector('#embedContainer');	1✔
258		1✔
259	// add a small timeout between getting an access token and calling embed()	1✔
260	// without timeout the embed() logs 401 Unauthorized error and does not render anything	1✔
261	setTimeout(() => {	1✔
262	this.pbiContent = powerbi.embed(container, config);	1✔
263	}, 100);	1✔
264	}	1✔
265	}	1✔
266		1✔
267	customElements.define('rise-powerbi', RisePowerBi);	1✔

Rise-Vision / rise-lit-components / 5006d3e1-e7ba-492f-81f9-2e1d3f8e0bf8

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous