cosmetics plus a slew of little frontend rendering bugs

2026-03-31 04:23:40 +00:00 · 2021-08-13 16:16:24 -06:00
parent c223894943
commit 6ea04dbeb8
44 changed files with 518 additions and 618 deletions
--- a/ui/src/app/pages/apps-routes/app-actions/app-actions-item.component.html
+++ b/ui/src/app/pages/apps-routes/app-actions/app-actions-item.component.html
@@ -1,7 +1,7 @@
 <ion-item button>
-  <ion-icon slot="start" [name]="action.icon"></ion-icon>
-  <ion-label class="ion-text-wrap">
+  <ion-icon slot="start" [name]="action.icon" size="large"></ion-icon>
+  <ion-label>
    <h1>{{ action.name }}</h1>
-    <h2>{{ action.description }}</h2>
+    <p>{{ action.description }}</p>
  </ion-label>
 </ion-item>
--- a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
+++ b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
@@ -110,15 +110,13 @@ export class AppActionsPage {
        pkgId: this.pkgId,
      },
      component: AppRestoreComponent,
-      backdropDismiss: false,
    })

    modal.onWillDismiss().then(res => {
-      const data = res.data
-      if (data.error) this.errToast.present(data.error)
+      if (res.role === 'success') this.navCtrl.back()
    })

-    return await modal.present()
+    await modal.present()
  }

  async uninstall (manifest: Manifest) {
--- a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces-item.component.html
+++ b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces-item.component.html
@@ -1,14 +1,14 @@
 <ion-item>
-  <ion-icon slot="start" [name]="interface.def.ui ? 'desktop-outline' : 'terminal-outline'"></ion-icon>
-  <ion-label class="ion-text-wrap">
+  <ion-icon slot="start" size="large" [name]="interface.def.ui ? 'desktop-outline' : 'terminal-outline'"></ion-icon>
+  <ion-label>
    <h1>{{ interface.def.name }}</h1>
    <h2>{{ interface.def.description }}</h2>
  </ion-label>
 </ion-item>
-<div style="padding-left: 54px;">
+<div style="padding-left: 64px;">
  <!-- has tor -->
  <ion-item *ngIf="interface.addresses['tor-address'] as tor">
-    <ion-label class="ion-text-wrap">
+    <ion-label>
      <h2>Tor Address</h2>
      <p>{{ tor }}</p>
    </ion-label>
@@ -23,7 +23,7 @@
  </ion-item>
  <!-- no tor -->
  <ion-item *ngIf="!interface.addresses['tor-address']">
-    <ion-label class="ion-text-wrap">
+    <ion-label>
      <h2>Tor Address</h2>
      <p>Service does not use a Tor Address</p>
    </ion-label>
@@ -31,7 +31,7 @@

  <!-- lan -->
  <ion-item *ngIf="interface.addresses['lan-address'] as lan">
-    <ion-label class="ion-text-wrap">
+    <ion-label>
      <h2>LAN Address</h2>
      <p>{{ lan }}</p>
    </ion-label>
@@ -46,7 +46,7 @@
  </ion-item>
  <!-- no lan -->
  <ion-item *ngIf="!interface.addresses['lan-address']">
-    <ion-label class="ion-text-wrap">
+    <ion-label>
      <h2>LAN Address</h2>
      <p>Service does not use a LAN Address</p>
    </ion-label>
--- a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.scss
+++ b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.scss
@@ -1,4 +0,0 @@
-.vertical-align {
-  display: inline-block;
-  vertical-align: middle;
-}
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.html
+++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.html
@@ -24,8 +24,8 @@
      <ion-row>
        <ion-col *ngFor="let pkg of pkgs | keyvalue : asIsOrder" sizeXs="4" sizeSm="3" sizeLg="3" sizeXl="2">
          <ion-card class="installed-card" [routerLink]="['/services', pkg.value.entry.manifest.id]">
-            <div class="launch-container" *ngIf="pkg.value.entry | hasUi">
-              <div class="launch-button-triangle"  (click)="launchUi(pkg.value.entry, $event)" [class.launch-disabled]="!(pkg.value.entry | isLaunchable)">
+            <div class="launch-container" *ngIf="pkg.value.entry.manifest.interfaces | hasUi">
+              <div class="launch-button-triangle"  (click)="launchUi(pkg.value.entry, $event)" [class.launch-disabled]="!(pkg.value.entry.state | isLaunchable : pkg.value.entry.installed.status.main.status : pkg.value.entry.manifest.interfaces)">
                <ion-icon name="open-outline"></ion-icon>
              </div>
            </div>
--- a/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
+++ b/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
@@ -6,7 +6,8 @@
    <ion-title>Properties</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="refresh()">
-        <ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
+        <ion-icon slot="start" name="refresh-outline"></ion-icon>
+        Refresh
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
@@ -18,14 +19,14 @@
  <ng-template #loaded>
    <!-- not running -->
    <ion-item *ngIf="!running" class="ion-margin-bottom">
-      <ion-label class="ion-text-wrap">
+      <ion-label>
        <p><ion-text color="warning">Service not running. Information on this page could be inaccurate.</ion-text></p>
      </ion-label>
    </ion-item>

    <!-- no properties -->
    <ion-item *ngIf="properties | empty">
-      <ion-label class="ion-text-wrap">
+      <ion-label>
        <p>No properties.</p>
      </ion-label>
    </ion-item>
@@ -38,7 +39,7 @@
          <ion-button *ngIf="prop.value.description" fill="clear" slot="start" (click)="presentDescription(prop, $event)">
            <ion-icon slot="icon-only" name="help-circle-outline"></ion-icon>
          </ion-button>
-          <ion-label class="ion-text-wrap">
+          <ion-label>
            <h2>{{ prop.key }}</h2>
          </ion-label>
        </ion-item>
@@ -47,7 +48,7 @@
          <ion-button *ngIf="prop.value.description" fill="clear" slot="start" (click)="presentDescription(prop, $event)">
            <ion-icon slot="icon-only" name="help-circle-outline"></ion-icon>
          </ion-button>
-          <ion-label class="ion-text-wrap">
+          <ion-label>
            <h2>{{ prop.key }}</h2>
            <p>{{ prop.value.masked && !unmasked[prop.key] ? (prop.value.value | mask ) : (prop.value.value | truncateEnd : 100) }}</p>
          </ion-label>
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
@@ -18,35 +18,35 @@
 </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()">
-          <ion-icon slot="start" name="open-outline"></ion-icon>
-          Open UI
-        </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">
+  <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.manifest.interfaces | hasUi)" [disabled]="!(pkg.state | isLaunchable : pkg.installed.status.main.status : pkg.manifest.interfaces)" (click)="launchUiTab()">
+        <ion-icon slot="start" name="open-outline"></ion-icon>
+        Open UI
+      </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  && !restoring/backing-up ** -->
+    <ng-container *ngIf="pkg.state === PackageState.Installed">
+      <!-- ** iff !restoring/backing-up ** -->
+      <ng-container *ngIf="!([PackageMainStatus.BackingUp, PackageMainStatus.Restoring] | includes : mainStatus.status); else maintenance">
        <!-- ** iff health checks ** -->
        <ng-container *ngIf="!(mainStatus.health | empty)">
          <ion-item-divider>Health Checks</ion-item-divider>
@@ -78,7 +78,7 @@
            <ion-thumbnail slot="start">
              <img [src]="pkg.installed['dependency-info'][dep.key].icon" />
            </ion-thumbnail>
-            <ion-label class="ion-text-wrap">
+            <ion-label>
              <h2 style="font-family: 'Montserrat'">{{ pkg.installed['dependency-info'][dep.key].manifest.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>
@@ -112,27 +112,30 @@
          </ion-item>
        </ng-container>  
      </ng-container>
-    </ion-item-group>
+      <ng-template #maintenance>
+        App is undergoing maintenance.
+      </ng-template>
+    </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>
+  <!-- ** installing 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>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>
+    <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>
 </ion-content>
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
@@ -8,7 +8,7 @@ import { wizardModal } from 'src/app/components/install-wizard/install-wizard.co
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { ConfigService } from 'src/app/services/config.service'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
-import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, MainStatus, PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
+import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, MainStatus, PackageDataEntry, PackageMainStatus, PackageState } from 'src/app/services/patch-db/data-model'
 import { FEStatus, PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
 import { ConnectionService } from 'src/app/services/connection.service'
 import { ErrorToastService } from 'src/app/services/error-toast.service'
@@ -31,6 +31,7 @@ export class AppShowPage {
  rendering: PkgStatusRendering
  Math = Math
  mainStatus: MainStatus
+  PackageMainStatus = PackageMainStatus

  @ViewChild(IonContent) content: IonContent
  subs: Subscription[] = []