blob: 6d11fbee16156a6b7d42e0135692b466c22b17b0 [file] [log] [blame]
// Copyright 2020 The LUCI Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import '@material/mwc-button';
import '@material/mwc-dialog';
import '@material/mwc-icon';
import { BeforeEnterObserver, PreventAndRedirectCommands, Router, RouterLocation } from '@vaadin/router';
import { css, customElement, html } from 'lit-element';
import merge from 'lodash-es/merge';
import { autorun, computed, observable, reaction, when } from 'mobx';
import '../../components/test_count_indicator';
import '../../components/status_bar';
import '../../components/tab_bar';
import { MiloBaseElement } from '../../components/milo_base';
import { TabDef } from '../../components/tab_bar';
import { AppState, consumeAppState } from '../../context/app_state';
import { BuildState, provideBuildState } from '../../context/build_state';
import { InvocationState, provideInvocationState, QueryInvocationError } from '../../context/invocation_state';
import { consumeConfigsStore, DEFAULT_USER_CONFIGS, UserConfigs, UserConfigsStore } from '../../context/user_configs';
import { GA_ACTIONS, GA_CATEGORIES, trackEvent } from '../../libs/analytics_utils';
import { getLegacyURLPathForBuild, getURLPathForBuilder, getURLPathForProject } from '../../libs/build_utils';
import { BUILD_STATUS_CLASS_MAP, BUILD_STATUS_COLOR_MAP, BUILD_STATUS_DISPLAY_MAP } from '../../libs/constants';
import { consumer, provider } from '../../libs/context';
import { errorHandler, forwardWithoutMsg, reportRenderError } from '../../libs/error_handler';
import { displayDuration, LONG_TIME_FORMAT } from '../../libs/time_utils';
import { LoadTestVariantsError } from '../../models/test_loader';
import { NOT_FOUND_URL, router } from '../../routes';
import { BuilderID, BuildStatus, TEST_PRESENTATION_KEY } from '../../services/buildbucket';
import colorClasses from '../../styles/color_classes.css';
import commonStyle from '../../styles/common_style.css';
const STATUS_FAVICON_MAP = Object.freeze({
[BuildStatus.Scheduled]: 'gray',
[BuildStatus.Started]: 'yellow',
[BuildStatus.Success]: 'green',
[BuildStatus.Failure]: 'red',
[BuildStatus.InfraFailure]: 'purple',
[BuildStatus.Canceled]: 'teal',
});
// An array of [buildTabName, buildTabLabel] tuples.
// Use an array of tuples instead of an Object to ensure order.
const TAB_NAME_LABEL_TUPLES = Object.freeze([
Object.freeze(['build-overview', 'Overview']),
Object.freeze(['build-test-results', 'Test Results']),
Object.freeze(['build-steps', 'Steps & Logs']),
Object.freeze(['build-related-builds', 'Related Builds']),
Object.freeze(['build-timeline', 'Timeline']),
Object.freeze(['build-blamelist', 'Blamelist']),
]);
function retryWithoutComputedInvId(err: ErrorEvent, ele: BuildPageElement) {
if (err.error instanceof LoadTestVariantsError) {
// Ignore request using the old invocation ID.
if (!err.error.req.invocations.includes(`invocations/${ele.buildState.invocationId}`)) {
err.stopPropagation();
return false;
}
// Old builds don't support computed invocation ID.
// Disable it and try again.
if (ele.buildState.useComputedInvId && !err.error.req.pageToken) {
ele.buildState.useComputedInvId = false;
err.stopPropagation();
return false;
}
} else if (err.error instanceof QueryInvocationError) {
// Ignore request using the old invocation ID.
if (err.error.invId !== ele.buildState.invocationId) {
err.stopPropagation();
return false;
}
// Old builds don't support computed invocation ID.
// Disable it and try again.
if (ele.buildState.useComputedInvId) {
ele.buildState.useComputedInvId = false;
err.stopPropagation();
return false;
}
}
return forwardWithoutMsg(err, ele);
}
/**
* Main build page.
* Reads project, bucket, builder and build from URL params.
* If any of the parameters are not provided, redirects to '/not-found'.
* If build is not a number, shows an error.
*/
@customElement('milo-build-page')
@errorHandler(retryWithoutComputedInvId)
@provider
@consumer
export class BuildPageElement extends MiloBaseElement implements BeforeEnterObserver {
@observable.ref
@consumeAppState()
appState!: AppState;
@observable.ref
@consumeConfigsStore()
configsStore!: UserConfigsStore;
@observable.ref
@provideBuildState({ global: true })
buildState!: BuildState;
@observable.ref
@provideInvocationState({ global: true })
invocationState!: InvocationState;
// Set to true when testing.
// Otherwise this.render() will throw due to missing initialization steps in
// this.onBeforeEnter.
@observable.ref prerender = false;
@observable private readonly uncommittedConfigs: UserConfigs = merge({}, DEFAULT_USER_CONFIGS);
// The page is visited via a short link.
// The page will be redirected to the long link after the build is fetched.
private isShortLink = false;
private urlSuffix = '';
// builderParam is only set when the page visited via a full link.
@observable.ref private builderIdParam?: BuilderID;
@observable.ref private buildNumOrIdParam = '';
@computed private get buildNumOrId() {
return this.buildState.build?.buildNumOrId || this.buildNumOrIdParam;
}
@computed private get legacyUrl() {
return getLegacyURLPathForBuild(this.builderIdParam!, this.buildNumOrId);
}
onBeforeEnter(location: RouterLocation, cmd: PreventAndRedirectCommands) {
const buildId = location.params['build_id'];
const path = location.params['path'];
if (typeof buildId === 'string' && path instanceof Array) {
this.isShortLink = true;
this.buildNumOrIdParam = ('b' + buildId) as string;
this.urlSuffix = '/' + path.join('/') + location.search + location.hash;
return;
}
this.isShortLink = false;
const project = location.params['project'];
const bucket = location.params['bucket'];
const builder = location.params['builder'];
const buildNumOrId = location.params['build_num_or_id'];
if ([project, bucket, builder, buildNumOrId].some((param) => typeof param !== 'string')) {
return cmd.redirect(NOT_FOUND_URL);
}
this.builderIdParam = {
project: project as string,
bucket: bucket as string,
builder: builder as string,
};
this.buildNumOrIdParam = buildNumOrId as string;
return;
}
@computed private get faviconUrl() {
if (this.buildState.build) {
return `/static/common/favicon/${STATUS_FAVICON_MAP[this.buildState.build.status]}-32.png`;
}
return '/static/common/favicon/milo-32.png';
}
@computed private get documentTitle() {
const status = this.buildState.build?.status;
const statusDisplay = status ? BUILD_STATUS_DISPLAY_MAP[status] : 'loading';
return `${statusDisplay} - ${this.builderIdParam?.builder || ''} ${this.buildNumOrId}`;
}
connectedCallback() {
super.connectedCallback();
if (!this.isShortLink) {
trackEvent(GA_CATEGORIES.NEW_BUILD_PAGE, GA_ACTIONS.PAGE_VISITED, window.location.href);
}
this.appState.hasSettingsDialog++;
this.addDisposer(
reaction(
() => [this.appState],
() => {
this.buildState?.dispose();
this.buildState = new BuildState(this.appState);
this.buildState.builderIdParam = this.builderIdParam;
this.buildState.buildNumOrIdParam = this.buildNumOrIdParam;
// Emulate @property() update.
this.updated(new Map([['buildState', this.buildState]]));
},
{ fireImmediately: true }
)
);
this.addDisposer(() => this.buildState.dispose());
this.addDisposer(
reaction(
() => this.appState,
(appState) => {
this.invocationState?.dispose();
this.invocationState = new InvocationState(appState);
// Emulate @property() update.
this.updated(new Map([['invocationState', this.invocationState]]));
},
{ fireImmediately: true }
)
);
this.addDisposer(() => this.invocationState.dispose());
this.addDisposer(
autorun(() => {
this.invocationState.invocationId = this.buildState.invocationId;
this.invocationState.isComputedInvId = this.buildState.useComputedInvId;
this.invocationState.presentationConfig =
this.buildState.build?.output?.properties?.[TEST_PRESENTATION_KEY] ||
this.buildState.build?.input?.properties?.[TEST_PRESENTATION_KEY] ||
{};
this.invocationState.warning = this.buildState.build?.buildOrStepInfraFailed
? 'Test results displayed here are likely incomplete because some steps have infra failed.'
: '';
})
);
if (this.isShortLink) {
// Redirect to the long link after the build is fetched.
this.addDisposer(
when(
() => this.buildState.build !== null,
() => {
const build = this.buildState.build!;
if (build.number !== undefined) {
this.appState.setBuildId(build.builder, build.number, build.id);
}
const buildUrl = router.urlForName('build', {
project: build.builder.project,
bucket: build.builder.bucket,
builder: build.builder.builder,
build_num_or_id: build.buildNumOrId,
});
Router.go(buildUrl + this.urlSuffix);
}
)
);
// Skip rendering-related reactions.
return;
}
this.addDisposer(
reaction(
() => this.faviconUrl,
(faviconUrl) => document.getElementById('favicon')?.setAttribute('href', faviconUrl),
{ fireImmediately: true }
)
);
this.addDisposer(
reaction(
() => this.documentTitle,
(title) => (document.title = title),
{ fireImmediately: true }
)
);
// Sync uncommitted configs with committed configs.
this.addDisposer(
reaction(
() => merge({}, this.configsStore.userConfigs),
(committedConfig) => merge(this.uncommittedConfigs, committedConfig),
{ fireImmediately: true }
)
);
}
disconnectedCallback() {
this.appState.hasSettingsDialog--;
super.disconnectedCallback();
}
@computed get tabDefs(): TabDef[] {
const params = {
project: this.builderIdParam!.project,
bucket: this.builderIdParam!.bucket,
builder: this.builderIdParam!.builder,
build_num_or_id: this.buildNumOrIdParam,
};
return [
{
id: 'overview',
label: 'Overview',
href: router.urlForName('build-overview', params),
},
// TODO(crbug/1128097): display test-results tab unconditionally once
// Foundation team is ready for ResultDB integration with other LUCI
// projects.
...(!this.invocationState.hasInvocation
? []
: [
{
id: 'test-results',
label: 'Test Results',
href: router.urlForName('build-test-results', params),
slotName: 'test-count-indicator',
},
]),
{
id: 'steps',
label: 'Steps & Logs',
href: router.urlForName('build-steps', params),
},
{
id: 'related-builds',
label: 'Related Builds',
href: router.urlForName('build-related-builds', params),
},
{
id: 'timeline',
label: 'Timeline',
href: router.urlForName('build-timeline', params),
},
{
id: 'blamelist',
label: 'Blamelist',
href: router.urlForName('build-blamelist', params),
},
];
}
@computed private get statusBarColor() {
const build = this.buildState.build;
return build ? BUILD_STATUS_COLOR_MAP[build.status] : 'var(--active-color)';
}
private renderBuildStatus() {
const build = this.buildState.build;
if (!build) {
return html``;
}
return html`
<i class="status ${BUILD_STATUS_CLASS_MAP[build.status]}">
${BUILD_STATUS_DISPLAY_MAP[build.status] || 'unknown status'}
</i>
${(() => {
switch (build.status) {
case BuildStatus.Scheduled:
return `since ${build.createTime.toFormat(LONG_TIME_FORMAT)}`;
case BuildStatus.Started:
return `since ${build.startTime!.toFormat(LONG_TIME_FORMAT)}`;
case BuildStatus.Canceled:
return `after ${displayDuration(build.endTime!.diff(build.createTime))} by ${
build.canceledBy || 'unknown'
}`;
case BuildStatus.Failure:
case BuildStatus.InfraFailure:
case BuildStatus.Success:
return `after ${displayDuration(build.endTime!.diff(build.startTime || build.createTime))}`;
default:
return '';
}
})()}
`;
}
protected render = reportRenderError.bind(this)(() => {
if (this.prerender || this.isShortLink) {
return html``;
}
return html`
<mwc-dialog
id="settings-dialog"
heading="Settings"
?open=${this.appState.showSettingsDialog}
@closed=${(event: CustomEvent<{ action: string }>) => {
if (event.detail.action === 'save') {
merge(this.configsStore.userConfigs, this.uncommittedConfigs);
}
// Reset uncommitted configs.
merge(this.uncommittedConfigs, this.configsStore.userConfigs);
this.appState.showSettingsDialog = false;
}}
>
<table>
<tr>
<td>Default tab:</td>
<td>
<select
id="default-tab-selector"
@change=${(e: InputEvent) =>
(this.uncommittedConfigs.defaultBuildPageTabName = (e.target as HTMLOptionElement).value)}
>
${TAB_NAME_LABEL_TUPLES.map(
([tabName, label]) => html`
<option value=${tabName} ?selected=${tabName === this.uncommittedConfigs.defaultBuildPageTabName}>
${label}
</option>
`
)}
</select>
</td>
</tr>
<mwc-button slot="primaryAction" dialogAction="save" dense unelevated>Save</mwc-button>
<mwc-button slot="secondaryAction" dialogAction="dismiss">Cancel</mwc-button>
</table>
</mwc-dialog>
<div id="build-summary">
<div id="build-id">
<span id="build-id-label">Build </span>
<a href=${getURLPathForProject(this.builderIdParam!.project)}>${this.builderIdParam!.project}</a>
<span>&nbsp;/&nbsp;</span>
<span>${this.builderIdParam!.bucket}</span>
<span>&nbsp;/&nbsp;</span>
<a href=${getURLPathForBuilder(this.builderIdParam!)}>${this.builderIdParam!.builder}</a>
<span>&nbsp;/&nbsp;</span>
<span>${this.buildNumOrId}</span>
</div>
${this.buildState.customBugLink === null
? html``
: html`
<div class="delimiter"></div>
<a href=${this.buildState.customBugLink} target="_blank">File a bug</a>
`}
${this.appState.redirectSw === null
? html``
: html`
<div class="delimiter"></div>
<a
@click=${(e: MouseEvent) => {
const switchVerTemporarily = e.metaKey || e.shiftKey || e.ctrlKey || e.altKey;
trackEvent(
GA_CATEGORIES.LEGACY_BUILD_PAGE,
switchVerTemporarily ? GA_ACTIONS.SWITCH_VERSION_TEMP : GA_ACTIONS.SWITCH_VERSION,
window.location.href
);
if (switchVerTemporarily) {
return;
}
const expires = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toUTCString();
document.cookie = `showNewBuildPage=false; expires=${expires}; path=/`;
this.appState.redirectSw?.unregister();
}}
href=${this.legacyUrl}
>
Switch to the legacy build page
</a>
`}
<div id="build-status">${this.renderBuildStatus()}</div>
</div>
<milo-status-bar
.components=${[{ color: this.statusBarColor, weight: 1 }]}
.loading=${!this.buildState.build}
></milo-status-bar>
<milo-tab-bar .tabs=${this.tabDefs} .selectedTabId=${this.appState.selectedTabId}>
<milo-test-count-indicator slot="test-count-indicator"></milo-test-count-indicator>
</milo-tab-bar>
<slot></slot>
`;
});
static styles = [
commonStyle,
colorClasses,
css`
#build-summary {
background-color: var(--block-background-color);
padding: 6px 16px;
font-family: 'Google Sans', 'Helvetica Neue', sans-serif;
font-size: 14px;
display: flex;
}
#build-id {
flex: 0 auto;
font-size: 0px;
}
#build-id > * {
font-size: 14px;
}
#build-id-label {
color: var(--light-text-color);
}
#build-status {
margin-left: auto;
flex: 0 auto;
}
.delimiter {
border-left: 1px solid var(--divider-color);
width: 1px;
margin-left: 10px;
margin-right: 10px;
}
#status {
font-weight: 500;
}
milo-tab-bar {
margin: 0 10px;
padding-top: 10px;
}
milo-test-count-indicator {
margin-right: -13px;
}
#settings-dialog {
--mdc-dialog-min-width: 600px;
}
#default-tab-selector {
display: inline-block;
margin-left: 10px;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
background-clip: padding-box;
border: 1px solid var(--divider-color);
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
`,
];
}