siso/webui/templates/base.html

{{/* Copyright 2024 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. */}}

{{define "base"}}
{{$outdirRevBaseURL:=.outdirRevBaseURL}}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siso Web UI</title>
  <script src="https://unpkg.com/htmx.org@2.0.0" integrity="sha512-Cpedvic0/Mgc3uRJ5apQ/ZYroPCZpatYEXGJayRaRNjKLaFualFxfxn97LJymznV+nC7y0/Hp/apHNwGpMimuw==" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/htmx-ext-sse@2.2.2/sse.js" integrity="sha384-fw+eTlCc7suMV/1w/7fr2/PmwElUIt5i82bi+qTiLXvjRXZ2/FkiTNA/w0MhXnGI" crossorigin="anonymous"></script>
  <script type="module" src="https://unpkg.com/@github/clipboard-copy-element@1.3.0/dist/bundle.js" integrity="sha512-CA8FL6M22IbBkRz2ISw1hUCXYP2BcJl/Blepvhc0DgBD9iftu4K0mqrTxdzRf346jmxqKKQvsE1NHUIjT/S7lw==" crossorigin="anonymous"></script>
  <script type="module" src="https://unpkg.com/@github/relative-time-element@4.4.2/dist/bundle.js" integrity="sha512-ifMrdUvZ6TAfn25Mphz2etXTxuuZYjy+1BDcEO6u2XVM2GBrdnsCexdIfn1FOQVmO7lQYQeotN0xU3WGSuT14A==" crossorigin="anonymous"></script>
  <script type="module" src="/third_party/@material/web/all.js"></script>
  <script type="module">
    import '/static/htmx-errors.js';
    import {toggleDarkMode, openInPerfetto} from '/static/main.js';
    window.toggleDarkMode = toggleDarkMode;
    window.openInPerfetto = openInPerfetto;
  </script>
  {{/* Styles. */}}
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
  <link rel="stylesheet" href="{{.combinedCSSPath}}">
</head>
<body class="light"
  hx-ext="ext-md-filter-chip-as-checkbox"
  {{/* Use HTMX's boost so even normal links and forms are intercepted and feel like AJAX requests. */}}
  hx-boost="true"
  {{/* Tell HTMX by default to use this element as a progress indicator. (It will attach the class "htmx-request" when active.) */}}
  hx-indicator="#progress-indicator"
  {{/* Always swap the #page-view section by default, i.e. don't swap the header and navbar by default. */}}
  hx-select="#page-view" hx-target="#page-view"
  {{/* The #page-view section is underneath the header but don't scroll away the header on page navigations. */}}
  hx-swap="show:unset">
  <md-linear-progress id="progress-indicator" indeterminate></md-linear-progress>
  <div id="page">
    <header class="header">
      <div class="header-title">
        <h1>sisoweb</h1>
        <p class="subtitle">{{.versionID}}</p>
        <div class="breadcrumbs" id="breadcrumbs" hx-swap-oob="true">
          <div class="breadcrumb">
            <button type="button" id="invocation-series-menu-button" class="menu-popover-button breadcrumb-menu-button"
                popovertarget="invocation-series-menu">
              <span class="breadcrumb-label">
                {{.seriesTitle}}
              </span>
              <md-icon></md-icon>
              <md-ripple></md-ripple>
            </button>
            <div popover class="menu-popover" id="invocation-series-menu">
              <div class="menu-popover-content">
                <div>
                    Current
                </div>
                <p>
                    {{.seriesTitle}}
                    <md-icon-button href="{{.outdirBaseURL}}/reload">
                      <md-icon>refresh</md-icon>
                    </md-icon-button>
                </p>
                <md-divider role="separator"></md-divider>
                <div>
                    Outdirs
                </div>
                {{range $knownOutdir := .knownOutdirs}}
                <md-menu-item href="/{{outdirEscape $knownOutdir}}/">
                <div slot="headline">{{$knownOutdir}}</div>
                </md-menu-item>
                {{end}}
                <md-elevation></md-elevation>
              </div>
            </div>
          </div>

          {{/* Invocation selector for invocation-related pages */}}
          {{/* TODO: Introduce a "what type of page am I on" or "is this an invocation page" variable, this is really hacky. */}}
          {{if and .currentRev (not .isSeriesList) (urlPathHasPrefix .currentURL (printf "%s/builds/" .outdirBaseURL))}}
          {{$currentRev := .currentRev}}
          <div class="breadcrumb">
            <button type="button" id="invocation-menu-button" class="menu-popover-button breadcrumb-menu-button"
                popovertarget="invocation-menu">
              <span class="breadcrumb-label">
                  Invocation {{$currentRev}}
              </span>
              {{if .revs}}
                <md-icon></md-icon>
              {{end}}
              <md-ripple></md-ripple>
            </button>
            {{if .revs}}
            <div popover class="menu-popover" id="invocation-menu">
              <div class="menu-popover-content">
                {{/* Really hacky method of allowing switching between invocations
                     but keeping the active subtab. */}}
                {{/* TODO: Introduce a route generator, this logic is really unpleasant. */}}
                {{$activeTab := "steps"}}
                {{if urlPathHasPrefix .currentURL (printf "%s/builds/%s/details/" .outdirBaseURL .currentRev)}}
                  {{$activeTab = "details"}}
                {{else if urlPathHasPrefix .currentURL (printf "%s/builds/%s/aggregates/" .outdirBaseURL .currentRev)}}
                  {{$activeTab = "aggregates"}}
                {{else if urlPathHasPrefix .currentURL (printf "%s/builds/%s/logs/" .outdirBaseURL .currentRev)}}
                  {{$activeTab = "logs"}}
                {{end}}
                <div>
                    Invocations
                </div>
                <md-menu-item href="{{$.outdirBaseURL}}/builds/">
                  <div slot="headline">All Invocations...</div>
                </md-menu-item>
                <md-divider role="separator"></md-divider>
                {{range $r := .revs}}
                <md-menu-item href="{{$.outdirBaseURL}}/builds/{{$r.Rev}}/{{$activeTab}}/">
                  <div slot="headline">Invocation {{$r.Rev}}</div>
                </md-menu-item>
                {{end}}
                <md-elevation></md-elevation>
              </div>
            </div>
            {{end}}
          </div>
          {{end}}

          {{/* Sub-breadcrumbs defined by the individual page templates */}}
          {{block "breadcrumbs" .}}{{end}}
        </div>
      </div>
      <div class="header-controls">
        <md-icon-button class="toggle-dark-mode" onclick="toggleDarkMode()">
          <md-icon></md-icon>
        </md-icon-button>
      </div>
    </header>
    <nav id="page-navrail" hx-push-url="true" hx-swap-oob="true">
      {{/* TODO: maybe we need some sort of "route generator" functions, because this is brittle. */}}
      <a href="{{.outdirBaseURL}}/runbuild/" class="page-tab {{if urlPathHasPrefix .currentURL (printf "%s/runbuild/" .outdirBaseURL)}}selected{{end}}">
        <md-icon>play_arrow</md-icon><md-ripple></md-ripple>
        <span>Run Build</span>
      </a>
      <a href="{{.outdirBaseURL}}/builds/" class="page-tab {{if urlPathHasPrefix .currentURL (printf "%s/builds/" .outdirBaseURL)}}selected{{end}}">
        <md-icon>build</md-icon><md-ripple></md-ripple>
        <span>Invocations</span>
      </a>
      <a href="{{.outdirBaseURL}}/targets/" class="page-tab {{if urlPathHasPrefix .currentURL (printf "%s/targets/" .outdirBaseURL)}}selected{{end}}">
        <md-icon>target</md-icon><md-ripple></md-ripple>
        <span>Targets</span>
      </a>
    </nav>
    <nav id="page-tabs" hx-push-url="true" hx-swap-oob="true">
      {{block "tabs" .}}{{end}}
    </nav>
    <div id="page-view">
      <div id="page-content">{{template "content" .}}</div>
      {{block "sidebar" .}}{{end}}
    </div>
  </div>
</body>
</html>
{{end}}