milo/frontend/resultui/src/pages/build_page/steps_tab.ts

// 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 { css, customElement, html } from 'lit-element';
import { computed, observable } from 'mobx';

import '../../components/build_step_list';
import '../../components/hotkey';
import { BuildStepEntryElement } from '../../components/build_step_list/build_step_entry';
import { MiloBaseElement } from '../../components/milo_base';
import { AppState, consumeAppState } from '../../context/app_state';
import { consumeConfigsStore, UserConfigsStore } from '../../context/user_configs';
import { GA_ACTIONS, GA_CATEGORIES, trackEvent } from '../../libs/analytics_utils';
import { consumer } from '../../libs/context';
import { errorHandler, forwardWithoutMsg, reportRenderError } from '../../libs/error_handler';
import commonStyle from '../../styles/common_style.css';

@customElement('milo-steps-tab')
@errorHandler(forwardWithoutMsg)
@consumer
export class StepsTabElement extends MiloBaseElement {
  @observable.ref
  @consumeAppState()
  appState!: AppState;

  @observable.ref
  @consumeConfigsStore()
  configsStore!: UserConfigsStore;

  connectedCallback() {
    super.connectedCallback();
    this.appState.selectedTabId = 'steps';
    trackEvent(GA_CATEGORIES.STEPS_TAB, GA_ACTIONS.TAB_VISITED, window.location.href);
  }

  @computed private get stepsConfig() {
    return this.configsStore.userConfigs.steps;
  }

  private allStepsWereExpanded = false;
  private toggleAllSteps(expand: boolean) {
    this.allStepsWereExpanded = expand;
    this.shadowRoot!.querySelector<BuildStepEntryElement>('milo-build-step-list')!.toggleAllSteps(expand);
  }
  private readonly toggleAllStepsByHotkey = () => this.toggleAllSteps(!this.allStepsWereExpanded);

  protected render = reportRenderError.bind(this)(() => {
    return html`
      <div id="header">
        <div class="config-section">
          Show:
          <div class="config">
            <input
              id="succeeded"
              type="checkbox"
              ?checked=${this.stepsConfig.showSucceededSteps}
              @change=${(e: MouseEvent) => {
                this.stepsConfig.showSucceededSteps = (e.target as HTMLInputElement).checked;
              }}
            />
            <label for="succeeded" style="color: var(--success-color);">Succeeded Steps</label>
          </div>
          <div class="config">
            <input
              id="debug-logs"
              type="checkbox"
              ?checked=${this.stepsConfig.showDebugLogs}
              @change=${(e: MouseEvent) => {
                this.stepsConfig.showDebugLogs = (e.target as HTMLInputElement).checked;
              }}
            />
            <label for="debug-logs">Debug Logs</label>
          </div>
        </div>
        <div class="config-section-delimiter"></div>
        <div class="config-section">
          <div class="config">
            <input
              id="expand-by-default"
              type="checkbox"
              ?checked=${this.stepsConfig.expandByDefault}
              @change=${(e: MouseEvent) => {
                this.stepsConfig.expandByDefault = (e.target as HTMLInputElement).checked;
              }}
            />
            <label for="expand-by-default">Expand by default</label>
          </div>
        </div>
        <span></span>
        <milo-hotkey key="x" .handler=${this.toggleAllStepsByHotkey} title="press x to expand/collapse all entries">
          <mwc-button class="action-button" dense unelevated @click=${() => this.toggleAllSteps(true)}>
            Expand All
          </mwc-button>
          <mwc-button class="action-button" dense unelevated @click=${() => this.toggleAllSteps(false)}>
            Collapse All
          </mwc-button>
        </milo-hotkey>
      </div>
      <milo-build-step-list id="main" tabindex="0"></milo-build-step-list>
    `;
  });

  static styles = [
    commonStyle,
    css`
      #header {
        display: grid;
        grid-template-columns: auto auto auto 1fr auto;
        grid-gap: 5px;
        height: 30px;
        padding: 5px 10px 3px 10px;
        position: sticky;
        top: 0px;
        background: white;
        border-bottom: 1px solid var(--divider-color);
      }

      mwc-button {
        margin-top: 1px;
        width: 145px;
      }

      .config-section {
        display: inline-block;
        padding: 4px 5px 0;
      }
      .config {
        display: inline-block;
        margin: 0 5px;
      }
      .config:last-child {
        margin-right: 0px;
      }
      .config-section-delimiter {
        border-left: 1px solid var(--divider-color);
        width: 0px;
        height: 100%;
      }

      milo-build-step-list {
        padding-top: 5px;
        padding-left: 10px;
        outline: none;
      }
    `,
  ];
}