detail.html

{% extends "base.html" %}

{% load humanize %}
{% load static %}

{% block extra_meta %}
<meta property="og:title" content="{{ job_request.requested_actions|length }} Action{{ job_request.requested_actions|pluralize }} Requested" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ request.build_absolute_uri }}" />
<meta property="og:description" content="Workspace: {{ job_request.workspace.name }}" />
{% endblock extra_meta %}

{% block metatitle %}Job request: {{ job_request.pk }} - {{ job_request.workspace.name }} | OpenSAFELY Jobs{% endblock metatitle %}

{% block extra_styles %}
<link rel="stylesheet" href="{% static 'highlighting.css' %}">
{% endblock extra_styles %}

{% block breadcrumbs %}
  {% #breadcrumbs %}
    {% url 'home' as home_url %}
    {% breadcrumb title="Home" url=home_url %}
    {% breadcrumb location="Project" title=job_request.workspace.project.name url=job_request.workspace.project.get_absolute_url %}
    {% breadcrumb location="Workspace" title=job_request.workspace.name url=job_request.workspace.get_absolute_url %}
    {% breadcrumb location="Job request" title=job_request.id active=True %}
  {% /breadcrumbs %}
{% endblock breadcrumbs %}

{% block content %}
  {% if is_missing_updates %}
    {% #alert variant="warning" title="Attention needed" class="mb-4" %}
      Jobs in this request have not been updated for over 30 minutes, some of the data on this page could be stale.
    {% /alert %}
  {% endif %}

  {% if job_request.cancelled_actions and not job_request.is_completed %}
    {% #alert variant="info" title="Cancellation requested" class="mb-4" %}
      A User has requested this job is cancelled.
    {% /alert %}
  {% endif %}

  <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
    <div class="flex flex-col text-center items-center gap-y-2 lg:text-left lg:items-start lg:col-span-full">
      <div class="flex flex-col items-center gap-y-2 w-full lg:flex-row lg:justify-between lg:items-start">
        <div class="order-2 w-full lg:mr-auto lg:order-1">
          <h1 class="text-3xl tracking-tight break-words font-bold text-slate-900 sm:text-4xl !leading-snug">
            Job request: {{ job_request.pk }}
          </h1>
          <dl class="flex flex-col gap-2 text-sm text-slate-600 items-center sm:flex-row sm:gap-x-6 sm:justify-center lg:justify-start mt-1">
            <dt class="sr-only">Organisation:</dt>
            <dd class="flex flex-row items-start overflow-hidden">
              {% icon_building_library_outline class="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400" %}
              <span class="truncate">{{ job_request.workspace.project.org.name }}</span>
            </dd>
            <dt class="sr-only">Workspace:</dt>
            <dd class="flex flex-row items-start overflow-hidden">
              {% icon_folder_open_outline class="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400" %}
              <span class="truncate">{{ job_request.workspace.name }}</span>
            </dd>
            <dt class="sr-only">ID:</dt>
            <dd class="flex flex-row items-start overflow-hidden relative">
              {% icon_code_bracket_outline class="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400" %}
              <span class="truncate">{{ job_request.identifier }}</span>
            </dd>
          </dl>
        </div>
        {% if user_can_view_staff_area %}
          <div class="order-1 lg:order-2 flex-shrink-0">
            {% #button href=job_request.get_staff_url type="link" variant="danger" class="flex-shrink-0" %}
              View in Staff Area
              {% icon_lifebuoy_outline class="h-4 w-4 ml-2 -mr-2" %}
            {% /button %}
          </div>
        {% endif %}
      </div>

      <div class="flex flex-col mt-2 sm:flex-row gap-2 lg:items-start">
        {% #button href=job_request.get_repo_url type="link" variant="primary" %}
          {% icon_github_outline class="h-4 w-4 mr-2" %}
          View repo
        {% /button %}

        {% #button href=project_yaml.url type="link" variant="secondary" %}
          View project.yaml
        {% /button %}

        {% if user_can_cancel_jobs %}
          <form class="d-inline-block" method="POST" action="{{ job_request.get_cancel_url }}">
            {% csrf_token %}
            {% if job_request.is_completed or job_request.cancelled_actions %}
              {% #button type="submit" disabled=True tooltip="This job request can no longer be cancelled" %}
                Cancel this job
              {% /button %}
            {% else %}
              {% #button type="submit" variant="danger" %}
                Cancel this job
              {% /button %}
            {% endif %}
          </form>
        {% endif %}
      </div>
    </div>

    <div class="space-y-6 md:space-y-6 lg:col-span-2">
      {% #card container=True %}
        <div class="flex flex-col gap-y-4 text-slate-700">
          <p>
            This page shows the technical details of what happened when
            authorised researcher
            <strong>{{ job_request.created_by.name }}</strong>
            requested one or more actions to be run against real patient data
            in the
            {% spaceless %}
              {% link text="project" href=job_request.workspace.project.get_absolute_url %}
            {% endspaceless %}, within a secure environment.
          </p>
          <p>
            By cross-referencing the indicated Requested Actions with the
            Pipeline section below, you can infer what
            {% link text="security level" href="https://docs.opensafely.org/security-levels/" %}
            various outputs were written to. Outputs marked as
            {% #code %}highly_sensitive{% /code %}
            can never be viewed directly by a researcher; they can only
            request that code runs against them. Outputs marked as
            {% #code %}moderately_sensitive{% /code %}
            can be viewed by an approved researcher by logging into a highly
            secure environment. Only outputs marked as
            {% #code %}moderately_sensitive{% /code %}
            can be requested for release to the public, via a controlled
            output review service.
          </p>
        </div>
      {% /card %}

      {% if not is_invalid %}
        {% #card title="Jobs" %}
          <ul class="divide-y divide-slate-200 border-t border-t-slate-200">
            {% for job in jobs %}
              <li class="relative transition-colors hover:bg-oxford-50 group">
                <dl class="flex flex-col gap-2 px-4 py-4 sm:px-6">
                  <div class="flex gap-x-2">
                    <dt class="sr-only">Action:</dt>
                    <dd class="
                      text-base font-semibold text-oxford-600 transition-colors truncate
                      group-hover:text-oxford-900
                      group-focus:text-oxford-900
                    ">
                      <a
                        class="
                          focus:bg-oxford-50 focus:outline-none focus:ring-2 focus:ring-inset
                          before:absolute before:top-0 before:bottom-0 before:right-0 before:left-0 before:h-full before:w-full"
                        href="{{ job.get_absolute_url }}"
                      >
                        {{ job.action }}
                      </a>
                    </dd>
                    <dt class="sr-only">Status:</dt>
                    <dd class="ml-auto flex-shrink-0">
                      {% if job.status == "pending" %}
                        {% pill sr_only="Status:" variant="warning" text=job.status|capfirst %}
                      {% elif job.status == "running" %}
                        {% pill sr_only="Status:" variant="primary" text=job.status|capfirst %}
                      {% elif job.status == "failed" %}
                        {% pill sr_only="Status:" variant="danger" text=job.status|capfirst %}
                      {% elif job.status == "succeeded" %}
                        {% pill sr_only="Status:" variant="success" text=job.status|capfirst %}
                      {% endif %}
                    </dd>
                  </div>
                  <dt class="sr-only">Job identifier:</dt>
                  <dd class="inline-flex flex-row items-start mr-auto overflow-hidden max-w-full relative z-40">
                    {% icon_code_bracket_outline class="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400" %}
                    <code class="font-mono font-semibold text-sm text-slate-600 tracking-widest truncate">
                      {{ job.identifier }}
                    </code>
                  </dd>
                </dl>
              </li>
            {% endfor %}
          </ul>
        {% /card %}
      {% endif %}

      {% if not project_yaml.is_empty %}
        {% #card title="Pipeline" container=True %}
          <details
            class="
              group bg-oxford-50 border border-l-4 border-oxford-700/95 overflow-hidden rounded
              open:bg-white
            "
          >
            <summary class="cursor-pointer list-none p-4 py-2 transition-colors hover:bg-oxford-100 hover:text-oxford-900">
              <span class="text-lg font-semibold text-oxford">
                <span class="group-open:hidden inline-flex">Show</span>
                <span class="group-open:inline-flex hidden">Hide</span>
                project.yaml
              </span>
            </summary>

            <div class="p-4 bg-[#f8f8f8] overflow-scroll">
              {% if project_yaml.is_too_large %}
                This file is too large to render, try {% link href=project_yaml.url text="viewing it on GitHub" %}.
              {% else %}
                {{ project_yaml.definition }}
              {% endif %}
            </div>
          </details>
        {% /card %}
      {% endif %}
    </div>

    <div class="gap-6 place-content-start lg:col-span-1 flex flex-col">
      {% #card title="Timeline" container=True %}
        <ul class="flow-root">
          {% #timeline_item background="blue" title="Created:" time=job_request.created_at %}
            {% icon_pencil_outline class="h-5 w-5" %}
          {% /timeline_item %}

          {% if job_request.started_at %}
            {% #timeline_item background="purple" title="Started:" time=job_request.started_at %}
              {% icon_folder_open_outline class="h-5 w-5" %}
            {% /timeline_item %}
          {% endif %}

          {% if job_request.completed_at %}
          {% #timeline_item background="green" title="Finished:" time=job_request.completed_at %}
            {% icon_check_outline class="h-5 w-5" %}
          {% /timeline_item %}
          {% endif %}

          {% #timeline_item background="stone" title="Runtime:" content=job_request.runtime no_padding_bottom=True last=True %}
            {% icon_clock_outline class="h-5 w-5" %}
          {% /timeline_item %}
        </ul>
        {% #card_footer %}
          <p class="text-sm font-medium text-slate-600">
            These timestamps are generated and stored using the UTC timezone on the {{ job_request.backend|upper }} backend.
          </p>
        {% /card_footer %}
      {% /card %}

      {% #card title="Job information" %}
        <dl class="border-t border-slate-200 sm:divide-y sm:divide-slate-200">
          {% #description_item title="Status" stacked=True %}
            <div class="flex flex-col gap-y-2">
              <span
                class="
                  inline-flex self-start items-center rounded -mt-0.5 px-2 py-0.5 font-semibold
                  {% if job_request.status == "pending" %}
                    bg-bn-flamenco-200 text-bn-flamenco-900
                  {% elif job_request.status == "running" %}
                    bg-blue-200 text-blue-900
                  {% elif job_request.status == "failed" %}
                    bg-red-200 text-red-900
                  {% elif job_request.status == "succeeded" %}
                    bg-green-200 text-green-900
                  {% endif %}
                ">
                {{ job_request.status|capfirst }}
              </span>
              {% if is_invalid %}
                <pre class="break-words whitespace-pre-wrap">{{ job_request.jobs.first.status_message }}</pre>
              {% endif %}
            </div>
          {% /description_item %}
          {% #description_item title="Backend" stacked=True %}
            {{ job_request.backend|upper }}
          {% /description_item %}
          {% #description_item title="Workspace" stacked=True %}
            {% link href=job_request.workspace.get_absolute_url text=job_request.workspace.name %}
          {% /description_item %}
          {% #description_item title="Requested by" stacked=True %}
            {{ job_request.created_by.name }}
            {% /description_item %}
          {% #description_item title="Branch" stacked=True %}
            {{ job_request.workspace.branch }}
          {% /description_item %}
          {% #description_item title="Force run dependencies" stacked=True %}
            {{ job_request.force_run_dependencies|yesno|capfirst }}
          {% /description_item %}
          {% #description_item title="Git commit hash" stacked=True %}
            {% link href=job_request.get_repo_url text=job_request.sha|slice:7|default:"-" %}
          {% /description_item %}
          {% #description_item title="Requested actions" stacked=True %}
            <ul
              class="
                text-sm list-disc flex flex-col gap-y-1 ml-4 py-2
                md:ml-3 md:py-0
              "
            >
              {% for action in job_request.requested_actions %}
                <li class="break-words">
                  {% #code class="text-xs" %}{{ action }}{% /code %}
                </li>
              {% endfor %}
            </ul>
          {% /description_item %}
        </dl>
      {% /card %}

      {% #card title="Code comparison" subtitle="Compare the code used in this Job Request" %}
        {% #list_group small=True %}
          {% if code_compare_url %}
            {% #list_group_item href=code_compare_url %}
              Compare to the previous Job Request
            {% /list_group_item %}
          {% else %}
            {% #list_group_item disabled=True small=True %}
              No previous job requests available for comparison
            {% /list_group_item %}
          {% endif %}
        {% /list_group %}
      {% /card %}

      {% if honeycomb_can_view_links %}
        {% #card title="Monitoring" subtitle="Honeycomb login required" %}
          {% #list_group small=True %}
            {% for name, link in honeycomb_links.items %}
              {% #list_group_item href=link %}
                {{ name }}
              {% /list_group_item %}
            {% endfor %}
          {% /list_group %}
        {% /card %}
      {% endif %}
    </div>
  </div>
{% endblock content %}