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-title>Service Details</ion-title>
    <ion-buttons slot="end">
      <badge-menu-button></badge-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-top">

  <ion-item *ngIf="error" style="margin-bottom: 16px;">
    <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
  </ion-item>

  <ng-container *ngIf="pkg">
    <!-- top plate -->
    <div class="top-plate">
      <ion-item lines="none">
        <ion-thumbnail slot="start">
          <img [src]="pkg['static-files'].icon" />
        </ion-thumbnail>
        <ion-label class="ion-text-wrap">
          <h1 style="font-family: 'Montserrat';" [class.less-large]="manifest.title.length > 20">
            {{ manifest.title }}
          </h1>
          <h5>{{ manifest.version | displayEmver }}</h5>
        </ion-label>
      </ion-item>
  
      <div class="status-readout">
        <status *ngIf="connected" size="large" weight="500" [pkg]="pkg"></status>
        <ion-button *ngIf="(pkg | status) === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
          Configure
        </ion-button>
        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : (pkg | status)" expand="block" color="danger" (click)="stop()">
          Stop
        </ion-button>
        <ion-button *ngIf="(pkg | status) === FeStatus.DependencyIssue" expand="block" (click)="scrollToRequirements()">
          Fix
        </ion-button>
        <ion-button *ngIf="(pkg | status) === FeStatus.Stopped" expand="block" color="success" (click)="tryStart()">
          Start
        </ion-button>
      </div>
  
      <ion-button size="small" *ngIf="pkg | hasUi" [disabled]="!(pkg | isLaunchable)" class="launch-button" expand="block" (click)="launchUiTab()">
        Launch Web Interface
        <ion-icon slot="end" name="rocket-outline"></ion-icon>
      </ion-button>
    </div>

    <ng-container *ngIf="!([FeStatus.Installing, FeStatus.Updating, FeStatus.Removing] | includes : pkg.status)">
      <ion-grid class="ion-text-center" style="margin: 0 6px;">
        <ion-row>
          <ion-col *ngFor="let button of buttons" sizeMd="4" sizeSm="6" sizeXs="6">
              <ion-button style="width: 100%; min-height: 120px;" color="light" [disabled]="button.disabled | includes : pkg.status" (click)="button.action()">
                <div>
                  <ion-icon size="large" [name]="button.icon"></ion-icon>
                  <br/><br/>
                  {{ button.title }}
                </div>
              </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>

      <ion-item-group class="ion-padding-bottom">      
        <!-- 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 manifest.dependencies that is currently required as determined by the service config. -->
          <ion-grid>
            <ion-row>
              <ion-col *ngFor="let dep of pkg.installed['current-dependencies'] | keyvalue" sizeSm="12" sizeMd="6">
                <ion-item *ngrxLet="patch.watch$('package-data', dep.key) as localDep">
                  <ion-thumbnail slot="start">
                    <img [src]="localDep ? localDep['static-files'].icon : pkg.installed.status['dependency-errors'][dep.key]?.icon" />
                  </ion-thumbnail>
                  <ion-label class="ion-text-wrap">
                    <h2 style="font-family: 'Montserrat'">{{ localDep ? (localDep | manifest).title : pkg.installed.status['dependency-errors'][dep.key]?.title }}</h2>
                    <p>{{ 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="!localDep" slot="end" size="small" (click)="fixDep('install', dep.key)">
                      Install
                    </ion-button>

                    <ng-container *ngIf="localDep && localDep.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="localDep && localDep.state !== PackageState.Installed" slot="end" class="spinner">
                      <ion-spinner [color]="localDep.state === PackageState.Removing ? 'danger' : 'primary'" style="height: 3vh; width: 3vh" name="dots"></ion-spinner>
                    </div>
                  </ng-container>     
                </ion-item>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ng-container>  
      </ion-item-group>
    </ng-container>
  </ng-container>
</ion-content>