| /** |
| * @license |
| * Copyright 2020 Google LLC |
| * SPDX-License-Identifier: Apache-2.0 |
| */ |
| import '../shared/gr-icon/gr-icon'; |
| import {classMap} from 'lit/directives/class-map.js'; |
| import './gr-hovercard-run'; |
| import {css, html, LitElement, nothing, PropertyValues} from 'lit'; |
| import {customElement, property, query, state} from 'lit/decorators.js'; |
| import './gr-checks-attempt'; |
| import {Action, Link, RunStatus} from '../../api/checks'; |
| import {sharedStyles} from '../../styles/shared-styles'; |
| import { |
| ALL_ATTEMPTS, |
| AttemptChoice, |
| attemptChoiceLabel, |
| LATEST_ATTEMPT, |
| AttemptDetail, |
| compareByWorstCategory, |
| headerForStatus, |
| iconFor, |
| iconForRun, |
| PRIMARY_STATUS_ACTIONS, |
| primaryRunAction, |
| } from '../../models/checks/checks-util'; |
| import { |
| CheckRun, |
| ChecksPatchset, |
| ErrorMessages, |
| } from '../../models/checks/checks-model'; |
| import { |
| clearAllFakeRuns, |
| fakeActions, |
| fakeLinks, |
| fakeRun0, |
| fakeRun1, |
| fakeRun2, |
| fakeRun3, |
| fakeRun4Att, |
| fakeRun5, |
| setAllFakeRuns, |
| } from '../../models/checks/checks-fakes'; |
| import {assertIsDefined} from '../../utils/common-util'; |
| import {modifierPressed, whenVisible} from '../../utils/dom-util'; |
| import {fireRunSelected, RunSelectedEvent} from './gr-checks-util'; |
| import {ChecksTabState} from '../../types/events'; |
| import {charsOnly} from '../../utils/string-util'; |
| import {getAppContext} from '../../services/app-context'; |
| import {KnownExperimentId} from '../../services/flags/flags'; |
| import {subscribe} from '../lit/subscription-controller'; |
| import {fontStyles} from '../../styles/gr-font-styles'; |
| import {durationString} from '../../utils/date-util'; |
| import {resolve} from '../../models/dependency'; |
| import {checksModelToken} from '../../models/checks/checks-model'; |
| import {Interaction} from '../../constants/reporting'; |
| import {Deduping} from '../../api/reporting'; |
| import {when} from 'lit/directives/when.js'; |
| import {changeViewModelToken} from '../../models/views/change'; |
| import {formStyles} from '../../styles/form-styles'; |
| |
| @customElement('gr-checks-run') |
| export class GrChecksRun extends LitElement { |
| static override get styles() { |
| return [ |
| formStyles, |
| sharedStyles, |
| css` |
| :host { |
| display: block; |
| --thick-border: 6px; |
| } |
| :host([condensed]) .eta, |
| :host([condensed]) .middle, |
| :host([condensed]) .right { |
| display: none; |
| } |
| :host([condensed]) * { |
| pointer-events: none; |
| } |
| .chip { |
| display: flex; |
| justify-content: space-between; |
| border: 1px solid var(--border-color); |
| border-radius: var(--border-radius); |
| padding: var(--spacing-s) var(--spacing-m); |
| margin-top: var(--spacing-s); |
| cursor: pointer; |
| } |
| .left { |
| overflow: hidden; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| flex-shrink: 1; |
| } |
| .middle { |
| /* extra space must go between middle and right */ |
| flex-grow: 1; |
| white-space: nowrap; |
| } |
| .middle gr-checks-attempt { |
| margin-left: var(--spacing-s); |
| } |
| .name { |
| font-weight: var(--font-weight-bold); |
| } |
| .eta { |
| color: var(--deemphasized-text-color); |
| padding-left: var(--spacing-s); |
| } |
| .chip.error { |
| border-left: var(--thick-border) solid var(--error-foreground); |
| } |
| .chip.warning { |
| border-left: var(--thick-border) solid var(--warning-foreground); |
| } |
| .chip.info { |
| border-left: var(--thick-border) solid var(--info-foreground); |
| } |
| .chip.check_circle { |
| border-left: var(--thick-border) solid var(--success-foreground); |
| } |
| .chip.timelapse, |
| .chip.pending_actions { |
| border-left: var(--thick-border) solid var(--border-color); |
| } |
| .chip.placeholder { |
| border-left: var(--thick-border) solid var(--border-color); |
| } |
| .chip.placeholder gr-icon { |
| display: none; |
| } |
| gr-icon.error { |
| color: var(--error-foreground); |
| } |
| gr-icon.warning { |
| color: var(--warning-foreground); |
| } |
| gr-icon.info { |
| color: var(--info-foreground); |
| } |
| gr-icon.check_circle { |
| color: var(--success-foreground); |
| } |
| :host(:not([condensed])) div.chip:hover { |
| background-color: var(--hover-background-color); |
| } |
| div.chip:focus-within { |
| background-color: var(--selection-background-color); |
| } |
| /* Additional 'div' for increased specificity. */ |
| div.chip.selected { |
| border: 1px solid var(--selected-background); |
| background-color: var(--selected-background); |
| padding-left: calc(var(--spacing-m) + var(--thick-border) - 1px); |
| } |
| div.chip.selected .name, |
| div.chip.selected gr-icon.filter { |
| color: var(--selected-foreground); |
| } |
| gr-checks-action { |
| /* The button should fit into the 20px line-height. The negative |
| margin provides the extra space needed for the vertical padding. |
| Alternatively we could have set the vertical padding to 0, but |
| that would not have been a nice click target. */ |
| margin: calc(0px - var(--spacing-s)); |
| margin-left: var(--spacing-s); |
| } |
| .attemptDetails { |
| padding-bottom: var(--spacing-s); |
| } |
| .attemptDetail { |
| /* This is thick-border (6) + spacing-m (8) + icon (20) + padding. */ |
| padding-left: 39px; |
| padding-top: var(--spacing-s); |
| } |
| .attemptDetail input { |
| width: 14px; |
| height: 14px; |
| /* The next 3 are for placing in the middle of 20px line-height. */ |
| vertical-align: top; |
| position: relative; |
| top: 3px; |
| margin-right: var(--spacing-s); |
| } |
| .statusLinkIcon { |
| color: var(--link-color); |
| margin-left: var(--spacing-s); |
| } |
| `, |
| ]; |
| } |
| |
| @query('.chip') |
| chipElement?: HTMLElement; |
| |
| @property({attribute: false}) |
| run!: CheckRun; |
| |
| @property({attribute: false}) |
| selected = false; |
| |
| @state() |
| selectedAttempt: AttemptChoice = LATEST_ATTEMPT; |
| |
| @property({attribute: false}) |
| deselected = false; |
| |
| @property({type: Boolean}) |
| condensed = false; |
| |
| @state() |
| shouldRender = false; |
| |
| private readonly reporting = getAppContext().reportingService; |
| |
| private getChecksModel = resolve(this, checksModelToken); |
| |
| constructor() { |
| super(); |
| subscribe( |
| this, |
| () => this.getChecksModel().checksSelectedAttemptNumber$, |
| x => (this.selectedAttempt = x) |
| ); |
| } |
| |
| override firstUpdated() { |
| assertIsDefined(this.chipElement, 'chip element'); |
| whenVisible(this.chipElement, () => (this.shouldRender = true), 200); |
| } |
| |
| override render() { |
| if (!this.shouldRender) return html`<div class="chip">Loading ...</div>`; |
| |
| const icon = iconForRun(this.run); |
| const classes = { |
| chip: true, |
| [icon.name]: true, |
| selected: this.selected, |
| deselected: this.deselected, |
| }; |
| const action = primaryRunAction(this.run); |
| |
| return html` |
| <div |
| @click=${this.handleChipClick} |
| @keydown=${this.handleChipKey} |
| class=${classMap(classes)} |
| tabindex="0" |
| > |
| <div class="left" tabindex="0"> |
| <gr-hovercard-run .run=${this.run}></gr-hovercard-run> |
| ${this.renderFilterIcon()} |
| <gr-icon |
| class=${icon.name} |
| icon=${icon.name} |
| ?filled=${icon.filled} |
| ></gr-icon> |
| ${this.renderAdditionalIcon()} |
| <span class="name">${this.run.checkName}</span> |
| ${this.renderETA()} |
| </div> |
| <div class="middle"> |
| <gr-checks-attempt .run=${this.run}></gr-checks-attempt> |
| ${this.renderStatusLink()} |
| </div> |
| <div class="right"> |
| ${action |
| ? html`<gr-checks-action |
| context="runs" |
| .action=${action} |
| ></gr-checks-action>` |
| : ''} |
| </div> |
| </div> |
| <div |
| class="attemptDetails" |
| ?hidden=${this.run.isSingleAttempt || !this.selected} |
| > |
| ${this.renderAttempt({attempt: LATEST_ATTEMPT})} |
| ${this.renderAttempt({attempt: ALL_ATTEMPTS})} |
| ${this.run.attemptDetails.map(a => this.renderAttempt(a))} |
| </div> |
| `; |
| } |
| |
| renderAttempt(detail: AttemptDetail) { |
| const attempt = detail.attempt ?? 0; |
| const checkNameId = charsOnly(this.run.checkName).toLowerCase(); |
| const id = `attempt-${detail.attempt}`; |
| const icon = detail.icon ?? {name: ''}; |
| const wasNotRun = |
| icon?.name === iconFor(RunStatus.RUNNABLE)?.name && |
| attempt !== LATEST_ATTEMPT && |
| attempt !== ALL_ATTEMPTS; |
| const selected = this.selectedAttempt === attempt; |
| return html`<div class="attemptDetail"> |
| <input |
| type="radio" |
| id=${id} |
| name=${`${checkNameId}-attempt-choice`} |
| .checked=${selected} |
| ?disabled=${!selected && wasNotRun} |
| @change=${() => this.handleAttemptChange(attempt)} |
| /> |
| <gr-icon |
| icon=${icon.name} |
| class=${icon.name} |
| ?filled=${icon.filled} |
| ></gr-icon> |
| <label for=${id}> |
| ${attemptChoiceLabel(attempt)}${wasNotRun ? ' (not run)' : ''} |
| </label> |
| </div>`; |
| } |
| |
| handleAttemptChange(attempt: AttemptChoice) { |
| this.getChecksModel().updateStateSetAttempt(attempt); |
| } |
| |
| renderETA() { |
| if (this.run.status !== RunStatus.RUNNING) return; |
| if (!this.run.finishedTimestamp) return; |
| const now = new Date(); |
| if (this.run.finishedTimestamp.getTime() < now.getTime()) return; |
| const eta = durationString(new Date(), this.run.finishedTimestamp, true); |
| return html`<span class="eta">ETA: ${eta}</span>`; |
| } |
| |
| renderStatusLink() { |
| const link = this.run.statusLink; |
| if (!link) return; |
| return html` |
| <a |
| href=${link} |
| target="_blank" |
| rel="noopener noreferrer" |
| @click=${this.onLinkClick} |
| ><gr-icon |
| icon="open_in_new" |
| class="statusLinkIcon" |
| aria-label="external link to run status details" |
| ></gr-icon> |
| <paper-tooltip offset="5">Link to run status details</paper-tooltip> |
| </a> |
| `; |
| } |
| |
| private onLinkClick(e: MouseEvent) { |
| // Prevents handleChipClick() from reacting to <a> link clicks. |
| e.stopPropagation(); |
| this.reporting.reportInteraction(Interaction.CHECKS_RUN_LINK_CLICKED, { |
| checkName: this.run.checkName, |
| status: this.run.status, |
| }); |
| } |
| |
| renderFilterIcon() { |
| if (!this.selected) return; |
| return html`<gr-icon icon="filter_alt" filled class="filter"></gr-icon>`; |
| } |
| |
| /** |
| * For RUNNING we also want to render an icon representing the worst result |
| * that has been reported until now - if there are any results already. |
| */ |
| renderAdditionalIcon() { |
| if (this.run.status !== RunStatus.RUNNING) return nothing; |
| const category = this.run.worstCategory; |
| if (!category) return nothing; |
| const icon = iconFor(category); |
| return html` |
| <gr-icon |
| icon=${icon.name} |
| class=${icon.name} |
| ?filled=${icon.filled} |
| ></gr-icon> |
| `; |
| } |
| |
| private handleChipClick(e: MouseEvent) { |
| e.stopPropagation(); |
| e.preventDefault(); |
| fireRunSelected(this, this.run.checkName); |
| } |
| |
| private handleChipKey(e: KeyboardEvent) { |
| if (modifierPressed(e)) return; |
| // Only react to `return` and `space`. |
| if (e.key !== 'Enter' && e.key !== ' ') return; |
| e.preventDefault(); |
| e.stopPropagation(); |
| fireRunSelected(this, this.run.checkName); |
| } |
| } |
| |
| @customElement('gr-checks-runs') |
| export class GrChecksRuns extends LitElement { |
| @query('#filterInput') |
| filterInput?: HTMLInputElement; |
| |
| @state() |
| filterRegExp = ''; |
| |
| @property({attribute: false}) |
| runs: CheckRun[] = []; |
| |
| @property({type: Boolean, reflect: true}) |
| collapsed = false; |
| |
| @state() |
| selectedRuns: Set<string> = new Set(); |
| |
| @state() |
| selectedAttempt: AttemptChoice = LATEST_ATTEMPT; |
| |
| @property({attribute: false}) |
| tabState?: ChecksTabState; |
| |
| @state() |
| errorMessages: ErrorMessages = {}; |
| |
| @state() |
| loginCallback?: () => void; |
| |
| private isSectionExpanded = new Map<RunStatus, boolean>(); |
| |
| private flagService = getAppContext().flagsService; |
| |
| private getChecksModel = resolve(this, checksModelToken); |
| |
| private readonly getViewModel = resolve(this, changeViewModelToken); |
| |
| private readonly reporting = getAppContext().reportingService; |
| |
| constructor() { |
| super(); |
| subscribe( |
| this, |
| () => this.getChecksModel().allRunsSelectedPatchset$, |
| x => (this.runs = x) |
| ); |
| subscribe( |
| this, |
| () => this.getChecksModel().errorMessagesLatest$, |
| x => (this.errorMessages = x) |
| ); |
| subscribe( |
| this, |
| () => this.getChecksModel().loginCallbackLatest$, |
| x => (this.loginCallback = x) |
| ); |
| subscribe( |
| this, |
| () => this.getChecksModel().checksSelectedAttemptNumber$, |
| x => (this.selectedAttempt = x) |
| ); |
| subscribe( |
| this, |
| () => this.getChecksModel().runFilterRegexp$, |
| x => (this.filterRegExp = x) |
| ); |
| subscribe( |
| this, |
| () => this.getViewModel().checksRunsSelected$, |
| x => (this.selectedRuns = x) |
| ); |
| this.addEventListener('click', () => { |
| if (this.collapsed) this.toggleCollapsed(); |
| }); |
| } |
| |
| static override get styles() { |
| return [ |
| sharedStyles, |
| fontStyles, |
| css` |
| :host { |
| display: block; |
| } |
| :host(:not([collapsed])) { |
| width: 20%; |
| padding: var(--spacing-l) var(--spacing-xl) var(--spacing-xl) |
| var(--spacing-xl); |
| } |
| :host([collapsed]) { |
| width: 90px; |
| padding: var(--spacing-l) var(--spacing-l) var(--spacing-xl) |
| var(--spacing-l); |
| max-height: 600px; |
| overflow: hidden; |
| } |
| :host([collapsed]) * { |
| pointer-events: none; |
| } |
| :host([collapsed]:hover) { |
| cursor: pointer; |
| } |
| .title { |
| display: flex; |
| } |
| .title .flex-space { |
| flex-grow: 1; |
| } |
| .title gr-button { |
| --gr-button-padding: var(--spacing-s) var(--spacing-m); |
| white-space: nowrap; |
| } |
| .title gr-button.expandButton { |
| --gr-button-padding: var(--spacing-xs) var(--spacing-s); |
| } |
| :host .expandButton { |
| margin-right: calc(0px - var(--spacing-m)); |
| } |
| :host([collapsed]:hover) .expandButton { |
| background: var(--gray-background-hover); |
| border-radius: var(--border-radius); |
| } |
| .sectionHeader { |
| padding-top: var(--spacing-l); |
| text-transform: capitalize; |
| cursor: default; |
| } |
| :host([collapsed]) .sectionHeader { |
| cursor: pointer; |
| } |
| .sectionHeader h3 { |
| display: inline-block; |
| } |
| :host(:not([collapsed])) .collapsed .sectionRuns { |
| display: none; |
| } |
| :host(:not([collapsed])) .collapsed { |
| border-bottom: 1px solid var(--border-color); |
| padding-bottom: var(--spacing-m); |
| } |
| input#filterInput { |
| margin-top: var(--spacing-m); |
| padding: var(--spacing-s) var(--spacing-m); |
| width: 100%; |
| } |
| .testing { |
| margin-top: var(--spacing-xxl); |
| color: var(--deemphasized-text-color); |
| } |
| .testing gr-button { |
| min-width: 25px; |
| } |
| .testing * { |
| visibility: hidden; |
| } |
| .testing:hover * { |
| visibility: visible; |
| } |
| .zero { |
| padding: var(--spacing-m) 0; |
| color: var(--primary-text-color); |
| margin-top: var(--spacing-m); |
| } |
| .login, |
| .error { |
| padding: var(--spacing-m); |
| color: var(--primary-text-color); |
| margin-top: var(--spacing-m); |
| max-width: 400px; |
| } |
| .error { |
| display: flex; |
| background-color: var(--error-background); |
| } |
| .error gr-icon { |
| color: var(--error-foreground); |
| margin-right: var(--spacing-m); |
| } |
| .login { |
| background: var(--info-background); |
| } |
| .login gr-icon { |
| color: var(--info-foreground); |
| } |
| .login .buttonRow { |
| text-align: right; |
| margin-top: var(--spacing-xl); |
| } |
| .login gr-button { |
| margin: 0 var(--spacing-s); |
| } |
| `, |
| ]; |
| } |
| |
| protected override updated(changedProperties: PropertyValues) { |
| super.updated(changedProperties); |
| if (changedProperties.has('tabState') && this.tabState) { |
| const {statusOrCategory} = this.tabState; |
| if ( |
| statusOrCategory === RunStatus.RUNNING || |
| statusOrCategory === RunStatus.RUNNABLE |
| ) { |
| this.updateComplete.then(() => { |
| const s = statusOrCategory.toString().toLowerCase(); |
| const el = this.shadowRoot?.querySelector(`.${s} .sectionHeader`); |
| el?.scrollIntoView({block: 'center'}); |
| }); |
| } |
| } |
| } |
| |
| override render() { |
| return html` |
| <h2 class="title"> |
| <div class="heading-2">Runs</div> |
| <div class="flex-space"></div> |
| ${this.renderTitleButtons()} ${this.renderCollapseButton()} |
| </h2> |
| ${this.renderErrors()} ${this.renderSignIn()} ${this.renderZeroState()} |
| <input |
| id="filterInput" |
| type="text" |
| placeholder="Filter runs by regular expression" |
| ?hidden=${!this.showFilter()} |
| .value=${this.filterRegExp} |
| @input=${this.onInput} |
| /> |
| ${this.renderSection(RunStatus.RUNNING)} |
| ${this.renderSection(RunStatus.COMPLETED)} |
| ${this.renderSection(RunStatus.RUNNABLE)} ${this.renderFakeControls()} |
| `; |
| } |
| |
| private renderZeroState() { |
| if (this.collapsed) return; |
| if (this.runs.length > 0) return; |
| return html`<div class="zero">No Check Run to show</div>`; |
| } |
| |
| private renderErrors() { |
| return Object.entries(this.errorMessages).map(([plugin, message]) => { |
| const msg = this.collapsed |
| ? 'Error' |
| : html`Error while fetching results for ${plugin}:<br />${message}`; |
| return html` |
| <div class="error"> |
| <div class="left"> |
| <gr-icon icon="error" filled></gr-icon> |
| </div> |
| <div class="right"> |
| <div class="message">${msg}</div> |
| </div> |
| </div> |
| `; |
| }); |
| } |
| |
| private renderSignIn() { |
| if (!this.loginCallback) return; |
| const message = this.collapsed |
| ? 'Sign in' |
| : 'Sign in to Checks Plugin to see runs and results'; |
| return html` |
| <div class="login"> |
| <div> |
| <gr-icon icon="info"></gr-icon> |
| ${message} |
| </div> |
| <div class="buttonRow"> |
| <gr-button @click=${this.loginCallback} link>Sign in</gr-button> |
| </div> |
| </div> |
| `; |
| } |
| |
| private renderTitleButtons() { |
| if (this.collapsed) return; |
| if (this.selectedRuns.size < 2) return; |
| const actions = [...this.selectedRuns].map(selected => { |
| const run = this.runs.find( |
| run => run.isLatestAttempt && run.checkName === selected |
| ); |
| return primaryRunAction(run); |
| }); |
| const runButtonDisabled = !actions.every( |
| action => |
| action?.name === PRIMARY_STATUS_ACTIONS.RUN || |
| action?.name === PRIMARY_STATUS_ACTIONS.RERUN |
| ); |
| return html` |
| <gr-button |
| class="font-normal" |
| link |
| @click=${() => |
| this.getViewModel().updateState({checksRunsSelected: undefined})} |
| >Unselect All</gr-button |
| > |
| <gr-tooltip-content |
| title=${runButtonDisabled |
| ? 'Disabled. Unselect checks without a "Run" action to enable the button.' |
| : ''} |
| ?has-tooltip=${runButtonDisabled} |
| > |
| <gr-button |
| class="font-normal" |
| link |
| ?disabled=${runButtonDisabled} |
| @click=${() => { |
| actions.forEach(action => { |
| if (!action) return; |
| this.getChecksModel().triggerAction( |
| action, |
| undefined, |
| 'run-selected' |
| ); |
| }); |
| this.reporting.reportInteraction( |
| Interaction.CHECKS_RUNS_SELECTED_TRIGGERED |
| ); |
| }} |
| >Run Selected</gr-button |
| > |
| </gr-tooltip-content> |
| `; |
| } |
| |
| private renderCollapseButton() { |
| return html` |
| <gr-tooltip-content |
| has-tooltip |
| title=${this.collapsed ? 'Expand runs panel' : 'Collapse runs panel'} |
| > |
| <gr-button |
| link |
| class="expandButton font-normal" |
| role="switch" |
| aria-checked=${this.collapsed ? 'true' : 'false'} |
| aria-label=${this.collapsed |
| ? 'Expand runs panel' |
| : 'Collapse runs panel'} |
| @click=${this.toggleCollapsed} |
| > |
| <div> |
| <gr-icon |
| icon=${this.collapsed ? 'chevron_right' : 'chevron_left'} |
| class="expandIcon" |
| > |
| </gr-icon> |
| </div> |
| </gr-button> |
| </gr-tooltip-content> |
| `; |
| } |
| |
| private toggleCollapsed(event?: Event) { |
| if (event) event.stopPropagation(); |
| this.collapsed = !this.collapsed; |
| this.reporting.reportInteraction(Interaction.CHECKS_RUNS_PANEL_TOGGLE, { |
| collapsed: this.collapsed, |
| }); |
| } |
| |
| onInput() { |
| assertIsDefined(this.filterInput, 'filter <input> element'); |
| this.reporting.reportInteraction( |
| Interaction.CHECKS_RUN_FILTER_CHANGED, |
| {}, |
| {deduping: Deduping.EVENT_ONCE_PER_CHANGE} |
| ); |
| const value = this.filterInput.value; |
| this.getChecksModel().updateStateSetRunFilter(value ?? ''); |
| } |
| |
| toggle( |
| plugin: string, |
| runs: CheckRun[], |
| actions: Action[] = [], |
| links: Link[] = [], |
| summaryMessage: string | undefined = undefined |
| ) { |
| const newRuns = this.runs.includes(runs[0]) ? [] : runs; |
| this.getChecksModel().updateStateSetResults( |
| plugin, |
| newRuns, |
| actions, |
| links, |
| summaryMessage, |
| ChecksPatchset.LATEST |
| ); |
| } |
| |
| renderSection(status: RunStatus) { |
| const regExp = new RegExp(this.filterRegExp, 'i'); |
| const runs = this.runs |
| .filter(r => r.isLatestAttempt) |
| .filter( |
| r => |
| r.status === status || |
| (status === RunStatus.RUNNING && r.status === RunStatus.SCHEDULED) |
| ) |
| .filter(r => regExp.test(r.checkName)) |
| .sort(compareByWorstCategory); |
| if (runs.length === 0) return; |
| const expanded = this.isSectionExpanded.get(status) ?? true; |
| const expandedClass = expanded ? 'expanded' : 'collapsed'; |
| const icon = expanded ? 'expand_less' : 'expand_more'; |
| let header = headerForStatus(status); |
| if (runs.some(r => r.status === RunStatus.SCHEDULED)) { |
| header = `${header} / ${headerForStatus(RunStatus.SCHEDULED)}`; |
| } |
| const count = when(!this.collapsed, () => html` (${runs.length})`); |
| const grIcon = when( |
| !this.collapsed, |
| () => html`<gr-icon icon=${icon} class="expandIcon"></gr-icon>` |
| ); |
| return html` |
| <div class="${status.toLowerCase()} ${expandedClass}"> |
| <div class="sectionHeader" @click=${() => this.toggleExpanded(status)}> |
| ${grIcon} |
| <h3 class="heading-3">${header}${count}</h3> |
| </div> |
| <div class="sectionRuns">${runs.map(run => this.renderRun(run))}</div> |
| </div> |
| `; |
| } |
| |
| toggleExpanded(status: RunStatus) { |
| if (this.collapsed) return; |
| const expanded = this.isSectionExpanded.get(status) ?? true; |
| this.isSectionExpanded.set(status, !expanded); |
| this.reporting.reportInteraction(Interaction.CHECKS_RUN_SECTION_TOGGLE, { |
| status, |
| expanded: !expanded, |
| }); |
| this.requestUpdate(); |
| } |
| |
| renderRun(run: CheckRun) { |
| const selectedRun = this.selectedRuns.has(run.checkName); |
| const deselected = !selectedRun && this.selectedRuns.size > 0; |
| return html`<gr-checks-run |
| .run=${run} |
| ?condensed=${this.collapsed} |
| .selected=${selectedRun} |
| .deselected=${deselected} |
| @run-selected=${this.handleRunSelected} |
| ></gr-checks-run>`; |
| } |
| |
| handleRunSelected(e: RunSelectedEvent) { |
| if (e.detail.checkName) { |
| this.getViewModel().toggleSelectedCheckRun(e.detail.checkName); |
| } |
| } |
| |
| showFilter(): boolean { |
| if (this.collapsed) return false; |
| return this.runs.length > 10 || !!this.filterRegExp; |
| } |
| |
| renderFakeControls() { |
| if (!this.flagService.isEnabled(KnownExperimentId.CHECKS_DEVELOPER)) return; |
| if (this.collapsed) return; |
| return html` |
| <div class="testing"> |
| <div>Toggle fake runs by clicking buttons:</div> |
| <gr-button link @click=${() => clearAllFakeRuns(this.getChecksModel())} |
| >none</gr-button |
| > |
| <gr-button |
| link |
| @click=${() => |
| this.toggle('f0', [fakeRun0], fakeActions, fakeLinks, 'ETA: 1 min')} |
| >0</gr-button |
| > |
| <gr-button link @click=${() => this.toggle('f1', [fakeRun1])} |
| >1</gr-button |
| > |
| <gr-button link @click=${() => this.toggle('f2', [fakeRun2])} |
| >2</gr-button |
| > |
| <gr-button link @click=${() => this.toggle('f3', [fakeRun3])} |
| >3</gr-button |
| > |
| <gr-button link @click="${() => this.toggle('f4', fakeRun4Att)}}" |
| >4</gr-button |
| > |
| <gr-button link @click=${() => this.toggle('f5', [fakeRun5])} |
| >5</gr-button |
| > |
| <gr-button link @click=${() => setAllFakeRuns(this.getChecksModel())} |
| >all</gr-button |
| > |
| </div> |
| `; |
| } |
| } |
| |
| declare global { |
| interface HTMLElementTagNameMap { |
| 'gr-checks-run': GrChecksRun; |
| 'gr-checks-runs': GrChecksRuns; |
| } |
| } |
