node-info.component.html

<div class="root-element bg-white node-info" [class.invisible-node-info]="!visible">
  <div class="top-box op-border-bottom pb-3">
    <div class="bg-primary-light summary-box">
      <div class="d-flex flex-row-reverse">
        <button mat-icon-button class="close-button" aria-label="close icon" (click)="onCloseClick()">
          <mat-icon>close</mat-icon>
        </button>
      </div>
      <div class="d-flex flex-column">
      <app-status
              *ngIf="status"
              class="font-roboto-bold font-size-large line-height-large"
              [ngClass]="statusClass"
              [phase]="status">
      </app-status>
      <app-clock *ngIf="startedAt"
                 class="font-size-large font-roboto font-black"
                 [startedAt]="startedAt"
                 [finishedAt]="finishedAt">
      </app-clock>
      <div *ngIf="startedAt" class="font-size-small font-medium-gray font-roboto-bold mt-2">
        Started <app-date [dateTime]="startedAt"></app-date>
      </div>
      <div *ngIf="finishedAt" class="font-size-small font-medium-gray font-roboto-bold mt-2 finished-at">
        Finished <app-date [dateTime]="finishedAt"></app-date>
      </div>
      <div>
        <hr class="divider border-top border-primary-lighter"/>
        <button mat-button color="primary" class="w-50 font-size-regular" (click)="openYaml()" >YAML</button>
        <button *ngIf="logsAvailable" mat-button color="primary" class="w-50 font-size-regular" (click)="openLogs()">LOGS</button>
      </div>
    </div>
    </div>
    <table class="w-100 mt-3 font-roboto additional-info-block">
      <thead>
      <tr class="text-left">
        <th>Name</th>
        <th>Type</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td *ngIf="node" class="w-50">{{node.id}}</td>
        <td *ngIf="node" class="w-50">{{node.type}}</td>
      </tr>
      </tbody>
    </table>
    <table *ngIf="node && node.message" class="w-100 mt-3 font-roboto additional-info-block">
      <thead>
      <tr class="text-left">
        <th>Message</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td class="w-100 word-break-all">{{node.message}}</td>
      </tr>
      </tbody>
    </table>
  </div>
  <div *ngIf="visible" class="additional-info-block font-roboto">
    <mat-expansion-panel class="op-expansion-panel parameters" hideToggle="true" (expandedChange)="onParametersExpandChange($event)">
      <mat-expansion-panel-header [expandedHeight]="'48px'">
        <mat-panel-title class="font-size-larger font-primary justify-content-between align-items-center">
          Inputs
          <div class="expansion-icon" *ngIf="!parametersExpanded">&#43;</div>
          <div class="expansion-icon" *ngIf="parametersExpanded">&#8722;</div>
        </mat-panel-title>
      </mat-expansion-panel-header>

      <div *ngIf="inputParameters?.length">
        <div class="font-roboto-bold font-size-regular font-medium-gray font-weight-bold mt-2">PARAMETERS</div>
        <app-parameter
                *ngFor="let parameter of inputParameters"
                [parameter]="parameter"
                class="d-block mt-2 ml-1">
        </app-parameter>
      </div>

      <div *ngIf="inputArtifacts?.length">
        <div class="font-roboto-bold font-size-regular font-medium-gray font-weight-bold mt-5">ARTIFACTS</div>
        <app-artifact-parameter
                *ngFor="let parameter of inputArtifacts"
                [parameter]="parameter"
                class="d-block mt-2 ml-1">
        </app-artifact-parameter>
      </div>

      <div *ngIf="!inputParameters?.length && !inputArtifacts?.length" class="font-roboto-bold font-size-regular font-medium-gray font-weight-bold">
        No inputs
      </div>

    </mat-expansion-panel>

    <mat-expansion-panel class="op-expansion-panel" hideToggle="true" *ngIf="node.type === 'Pod'" (expandedChange)="onContainersExpandChange($event)">
      <mat-expansion-panel-header [expandedHeight]="'48px'">
        <mat-panel-title class="font-size-larger font-primary justify-content-between align-items-center">
          Containers
          <div class="expansion-icon" *ngIf="!containersExpanded">&#43;</div>
          <div class="expansion-icon" *ngIf="containersExpanded">&#8722;</div>
        </mat-panel-title>
      </mat-expansion-panel-header>

      <div *ngIf="template">
        <div>
          <span class="font-weight-bold">Name: </span>
          <span>{{template.name}}</span>
        </div>
        <div class="mt-2" *ngIf="template.container?.image || template.script?.image">
          <span class="font-weight-bold w-50">Image: </span>
          <span>{{template.container?.image}}{{template.script?.image}}</span>
        </div>
        <div class="mt-2" *ngIf="template.container?.command || template.script?.command">
          <div class="font-weight-bold w-50">Command:</div>
          <pre class="source-code">{{template.container?.command?.join(" ")}}{{template.script?.command?.join(" ")}}</pre>
        </div>
        <div class="mt-2" *ngIf="template.container?.args || template.script?.args">
          <div class="font-weight-bold w-50">Args:</div>
          <pre class="source-code">{{template.container?.args?.join(" ")}}{{template.script?.args?.join(" ")}}</pre>
        </div>
        <div class="mt-2" *ngIf="template.script?.source">
          <div class="font-weight-bold w-50">Source:</div>
          <pre class="source-code">{{template.script?.source}}</pre>
        </div>
        <div class="mt-2" *ngIf="template.resource?.action">
          <span class="font-weight-bold w-50">Action: </span>
          <span class="source-code">{{template.resource?.action}}</span>
        </div>
        <div class="mt-2" *ngIf="template.resource?.successCondition">
          <span class="font-weight-bold w-50">Success condition: </span>
          <span class="source-code">{{template.resource?.successCondition}}</span>
        </div>
        <div class="mt-2" *ngIf="template.resource?.failureCondition">
          <span class="font-weight-bold w-50">Failure condition: </span>
          <span class="source-code">{{template.resource?.failureCondition}}</span>
        </div>
        <div class="mt-2" *ngIf="template.resource?.manifest">
          <div class="font-weight-bold w-50">Manifest:</div>
          <pre class="source-code">{{template.resource?.manifest}}</pre>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel class="op-expansion-panel" hideToggle="true" *ngIf="node.type === 'Pod'" (expandedChange)="onArtifactsExpandChange($event)">
      <mat-expansion-panel-header [expandedHeight]="'48px'">
        <mat-panel-title class="font-size-larger font-primary justify-content-between align-items-center">
          Outputs
          <div class="expansion-icon" *ngIf="!artifactsExpanded">&#43;</div>
          <div class="expansion-icon" *ngIf="artifactsExpanded">&#8722;</div>
        </mat-panel-title>
      </mat-expansion-panel-header>

      <div *ngIf="sidecars.length">
        <div class="font-roboto-bold font-size-regular font-medium-gray font-weight-bold mt-2">SIDECARS</div>
        <div class="d-inline-flex w-100 mt-5">
          <button *ngFor="let sidecar of sidecars" mat-stroked-button color="primary"
                  [disabled]="node.phase !== 'Running'"
                  class="op-rounded op-button op-button-disableable ml-1"
                  (click)="this.openSidecar(sidecar.url)">
              <span class="ml-1">OPEN {{sidecar.name}}</span>
          </button>
        </div>
      </div>

      <app-metrics *ngIf="metrics.length" [metrics]="metrics">
      </app-metrics>

      <div *ngIf="outputParameters?.length">
        <div class="font-roboto-bold font-size-regular font-medium-gray font-weight-bold mt-5">PARAMETERS</div>
        <app-parameter
                *ngFor="let parameter of outputParameters"
                [parameter]="parameter"
                class="d-block mt-2 ml-1">
        </app-parameter>
      </div>

      <div *ngIf="hasFiles" class="mt-4">
        <div class="font-roboto-bold font-size-regular font-medium-gray font-weight-bold">ARTIFACTS</div>
          <app-file-browser *ngFor="let fileNavigator of fileNavigators"
                            class="d-block mt-3"
                            [displayedColumns]="['icon', 'name', 'size', 'actions']"
                            [rootName]="fileNavigator.displayRootPath"
                            [fileNavigator]="fileNavigator"
                            [namespace]="this.namespace"
                            [name]="fileNavigator.name">
          </app-file-browser>
      </div>

      <div *ngIf="!outputParameters?.length && !metrics.length && !sidecars.length && !hasFiles" class="font-roboto-bold font-size-regular font-medium-gray font-weight-bold">
        No outputs
      </div>

    </mat-expansion-panel>
  </div>
</div>