start-os/ui/src/app/pages/apps-routes/app-show/app-show.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <pwa-back-button></pwa-back-button>
    </ion-buttons>
    <ion-item lines="none">
      <ion-avatar slot="start">
        <img [src]="pkg['static-files'].icon" />
      </ion-avatar>
      <ion-label style="text-overflow: ellipsis;">
        <h1 style="font-family: 'Montserrat';" [class.less-large]="pkg.manifest.title.length > 20">
          {{ pkg.manifest.title }}
        </h1>
        <h2>{{ pkg.manifest.version | displayEmver }}</h2>
      </ion-label>
    </ion-item>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ng-container *ngIf="pkg">
    <ion-item-group>
      <!-- ** always ** -->
      <ion-item-divider>Status</ion-item-divider>
      <ion-item>
        <ion-label style="overflow: visible;">
          <status size="x-large" weight="500" [rendering]="rendering"></status>
        </ion-label>
        <ion-button slot="end" class="action-button" *ngIf="pkg.state === PackageState.Installed && (pkg | hasUi)" [disabled]="!(pkg | isLaunchable)" (click)="launchUiTab()">
          Web
          <ion-icon slot="end" name="rocket-outline"></ion-icon>
        </ion-button>
        <ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.NeedsConfig" [routerLink]="['config']">
          Configure
        </ion-button>
        <ion-button slot="end" class="action-button" *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : rendering.feStatus" color="danger" (click)="stop()">
          Stop
        </ion-button>
        <ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.DependencyIssue" (click)="scrollToRequirements()">
          Fix
        </ion-button>
        <ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.Stopped" color="success" (click)="tryStart()">
          Start
        </ion-button>
      </ion-item>

      <!-- ** iff installed ** -->
      <ng-container *ngIf="pkg.state === PackageState.Installed">

        <!-- ** iff health checks ** -->
        <ng-container *ngIf="!(mainStatus.health | empty)">
          <ion-item-divider>Health Checks</ion-item-divider>
          <ion-item *ngFor="let health of mainStatus.health | keyvalue : asIsOrder">
            <ion-spinner class="icon-spinner" color="warning" slot="start" *ngIf="['starting', 'loading'] | includes : health.value.result"></ion-spinner>
            <ion-icon slot="start" *ngIf="health.value.result === 'success'" name="checkmark-outline" color="success"></ion-icon>
            <ion-icon slot="start" *ngIf="health.value.result === 'failure'" name="close-outline" color="danger"></ion-icon>
            <ion-icon slot="start" *ngIf="health.value.result === 'disabled'" name="remove-outline" color="dark"></ion-icon>
            <ion-label>
              <p>{{ health.key }}</p>
              <h2>{{ health.value.result }}</h2>
              <p *ngIf="health.value.result === 'failure'"><ion-text color="danger">{{ health.value.error }}</ion-text></p>
            </ion-label>
          </ion-item>
        </ng-container>

        <!-- ** always ** -->
        <ion-item-divider>Menu</ion-item-divider>
        <ion-item button detail *ngFor="let button of buttons" (click)="button.action()">
          <ion-icon slot="start" [name]="button.icon"></ion-icon>
          <ion-label>{{ button.title }}</ion-label>
        </ion-item>

        <!-- ** iff dependencies ** -->
        <ng-container *ngIf="!(pkg.installed['current-dependencies'] | empty)">
          <ion-item-divider id="dependencies">Dependencies</ion-item-divider>
          <!-- A current-dependency is a subset of the pkg.manifest.dependencies that is currently required as determined by the service config. -->
          <ion-item *ngFor="let dep of pkg.installed['current-dependencies'] | keyvalue">
            <ion-thumbnail slot="start">
              <img [src]="patch.data['package-data'][dep.key] ? patch.data['package-data'][dep.key]['static-files'].icon : pkg.installed.status['dependency-errors'][dep.key]?.icon" />
            </ion-thumbnail>
            <ion-label class="ion-text-wrap">
              <h2 style="font-family: 'Montserrat'">{{ patch.data['package-data'][dep.key] ? patch.data['package-data'][dep.key].manifest.title : pkg.installed.status['dependency-errors'][dep.key]?.title }}</h2>
              <p>{{ pkg.manifest.dependencies[dep.key].version | displayEmver }}</p>
              <p><ion-text [color]="pkg.installed.status['dependency-errors'][dep.key] ? 'warning' : 'success'">{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}</ion-text></p>
            </ion-label>

            <ion-button *ngIf="!pkg.installed.status['dependency-errors'][dep.key] || (pkg.installed.status['dependency-errors'][dep.key] && [DependencyErrorType.InterfaceHealthChecksFailed, DependencyErrorType.HealthChecksFailed] | includes : pkg.installed.status['dependency-errors'][dep.key].type)" slot="end" size="small" [routerLink]="['/services', dep.key]">
              View
            </ion-button>

            <ng-container *ngIf="pkg.installed.status['dependency-errors'][dep.key]">
              <ion-button *ngIf="!patch.data['package-data'][dep.key]" slot="end" size="small" (click)="fixDep('install', dep.key)">
                Install
              </ion-button>

              <ng-container *ngIf="patch.data['package-data'][dep.key] && patch.data['package-data'][dep.key].state === PackageState.Installed">
                <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.NotRunning" slot="end" size="small" [routerLink]="['/services', dep.key]">
                  Start
                </ion-button>
                <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.IncorrectVersion" slot="end" size="small" (click)="fixDep('update', dep.key)">
                  Update
                </ion-button>
                <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.ConfigUnsatisfied" slot="end" size="small" (click)="fixDep('configure', dep.key)">
                  Configure
                </ion-button>
              </ng-container>

              <div *ngIf="patch.data['package-data'][dep.key] && patch.data['package-data'][dep.key].state !== PackageState.Installed" slot="end">
                <ion-spinner [color]="patch.data['package-data'][dep.key].state === PackageState.Removing ? 'danger' : 'primary'" style="height: 3vh; width: 3vh" name="dots"></ion-spinner>
              </div>
            </ng-container>     
          </ion-item>
        </ng-container>  
      </ng-container>
    </ion-item-group>

    <!-- ** installed or updating ** -->
    <div *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.state" style="padding: 16px;">
      <p>Downloading: {{ (pkg['install-progress'] | installState).downloadProgress }}%</p>
      <ion-progress-bar 
        [color]="pkg['install-progress']['download-complete'] ? 'success' : 'secondary'" 
        [value]="(pkg['install-progress'] | installState).downloadProgress / 100"
      ></ion-progress-bar>

      <p>Validating: {{ (pkg['install-progress'] | installState).validateProgress }}%</p>
      <ion-progress-bar
        [color]="pkg['install-progress']['validation-complete'] ? 'success' : 'secondary'" 
        [value]="(pkg['install-progress'] | installState).validateProgress / 100"
      ></ion-progress-bar>

      <p>Installing: {{ (pkg['install-progress'] | installState).unpackProgress }}%</p>
      <ion-progress-bar 
        [color]="pkg['install-progress']['unpack-complete'] ? 'success' : 'secondary'" 
        [value]="(pkg['install-progress'] | installState).unpackProgress / 100"
      ></ion-progress-bar>
    </div>
  </ng-container>
</ion-content>