| /** |
| * @module module/diff-page-sk |
| * @description <h2><code>diff-page-sk</code></h2> |
| * |
| * Page to view a specific diff between two digests. This does not include trace data. |
| */ |
| import { define } from 'elements-sk/define'; |
| import { html } from 'lit-html'; |
| import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'; |
| import { stateReflector } from 'common-sk/modules/stateReflector'; |
| import { ElementSk } from '../../../infra-sk/modules/ElementSk'; |
| |
| import '../digest-details-sk'; |
| import { sendBeginTask, sendEndTask, sendFetchError } from '../common'; |
| |
| const template = (ele) => { |
| if (!ele._didInitialLoad) { |
| return html`<h1>Loading...</h1>`; |
| } |
| return html` |
| <digest-details-sk .details=${ele._leftDetails} .right=${ele._rightDetails} |
| .changeListID=${ele._changeListID} .crs=${ele._crs}> |
| </digest-details-sk>`; |
| }; |
| |
| define('diff-page-sk', class extends ElementSk { |
| constructor() { |
| super(template); |
| |
| this._grouping = ''; |
| this._leftDigest = ''; |
| this._rightDigest = ''; |
| this._crs = ''; |
| this._changeListID = ''; |
| this._leftDetails = {}; |
| this._rightDetails = {}; |
| this._useSQL = false; |
| this._didInitialLoad = false; |
| |
| this._stateChanged = stateReflector( |
| /* getState */() => ({ |
| // provide empty values |
| test: this._grouping, // TODO(kjlubick) rename test -> grouping |
| left: this._leftDigest, |
| right: this._rightDigest, |
| use_sql: this._useSQL, |
| changelist_id: this._changeListID, |
| crs: this._crs, |
| }), /* setState */(newState) => { |
| if (!this._connected) { |
| return; |
| } |
| // default values if not specified. |
| this._grouping = newState.test || ''; |
| this._leftDigest = newState.left || ''; |
| this._rightDigest = newState.right || ''; |
| this._changeListID = newState.changelist_id || ''; |
| this._crs = newState.crs || ''; |
| this._useSQL = newState.use_sql || false; |
| this._fetch(); |
| this._render(); |
| }, |
| ); |
| |
| // Allows us to abort fetches if we fetch again. |
| this._fetchController = null; |
| } |
| |
| connectedCallback() { |
| super.connectedCallback(); |
| this._render(); |
| } |
| |
| _fetch() { |
| if (this._fetchController) { |
| // Kill any outstanding requests |
| this._fetchController.abort(); |
| } |
| |
| // Make a fresh abort controller for each set of fetches. |
| // They cannot be re-used once aborted. |
| this._fetchController = new AbortController(); |
| const extra = { |
| signal: this._fetchController.signal, |
| }; |
| sendBeginTask(this); |
| |
| let url = `/json/v1/diff?test=${encodeURIComponent(this._grouping)}` |
| + `&left=${encodeURIComponent(this._leftDigest)}` |
| + `&right=${encodeURIComponent(this._rightDigest)}` |
| + `&changelist_id=${this._changeListID}&crs=${this._crs}`; |
| if (this._useSQL) { |
| url += '&use_sql=true'; |
| } |
| |
| fetch(url, extra) |
| .then(jsonOrThrow) |
| .then((obj) => { |
| this._leftDetails = obj.left || {}; |
| this._rightDetails = obj.right || {}; |
| this._didInitialLoad = true; |
| this._render(); |
| sendEndTask(this); |
| }) |
| .catch((e) => { |
| this._leftDetails = {}; |
| this._rightDetails = {}; |
| this._didInitialLoad = false; |
| this._render(); |
| sendFetchError(this, e, 'diff-details'); |
| }); |
| } |
| }); |