fix: keep uptime width constant and service table DOM cached (#3078)

* fix: keep uptime width constant and service table DOM cached

* show error status and fix columns spacing

* revert const

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

web/projects/ui/src/app/routes/portal/components/form/controls/select.component.ts

@@ -48,7 +48,7 @@ import { HintPipe } from '../pipes/hint.pipe'
       }
       @if (!mobile) {
         <tui-data-list *tuiTextfieldDropdown>
-          @for (item of items; track $index) {
+          @for (item of items; track item) {
             <button
               tuiOption
               new

web/projects/ui/src/app/routes/portal/components/interfaces/private-domains.component.ts

@@ -50,7 +50,7 @@ import { InterfaceComponent } from './interface.component'
         {{ 'Add' | i18n }}
       </button>
     </header>
-    @for (domain of privateDomains(); track $index) {
+    @for (domain of privateDomains(); track domain) {
       <div tuiCell="s">
         <span tuiTitle>{{ domain }}</span>
         <button

web/projects/ui/src/app/routes/portal/components/interfaces/tor-domains.component.ts

@@ -54,7 +54,7 @@ type OnionForm = {
         {{ 'Add' | i18n }}
       </button>
     </header>
-    @for (domain of torDomains(); track $index) {
+    @for (domain of torDomains(); track domain) {
       <div tuiCell="s">
         <span tuiTitle>{{ domain }}</span>
         <button

web/projects/ui/src/app/routes/portal/routes/services/components/status.component.ts

@@ -5,9 +5,7 @@ import {
   input,
 } from '@angular/core'
 import { i18nPipe } from '@start9labs/shared'
-import { TuiLoader } from '@taiga-ui/core'
 import { ServiceUptimeComponent } from 'src/app/routes/portal/routes/services/components/uptime.component'
-import { getProgressText } from 'src/app/routes/portal/routes/services/pipes/install-progress.pipe'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import {
   getInstalledPrimaryStatus,
@@ -19,29 +17,20 @@ import {
   template: `
     <header>{{ 'Status' | i18n }}</header>
     <div>
-      @if (info()) {
-        <h3>
-          <tui-loader size="s" [inheritColor]="true" />
-          {{ 'Installing' | i18n }}
+      <h3 [class]="class()">
+        {{ text() || 'Unknown' | i18n }}
+        @if (text() === 'Task Required') {
+          <small>{{ 'See below' | i18n }}</small>
+        }
+
+        @if (rendering().showDots) {
           <span class="loading-dots"></span>
-          {{ info() | i18n }}
-        </h3>
-      } @else {
-        <h3 [class]="class()">
-          {{ text() || 'Unknown' | i18n }}
-          @if (text() === 'Task Required') {
-            <small>{{ 'See below' | i18n }}</small>
-          }
+        }
 
-          @if (rendering().showDots) {
-            <span class="loading-dots"></span>
-          }
-
-          @if (pkg().statusInfo.started; as started) {
-            <service-uptime [started]="started" />
-          }
-        </h3>
-      }
+        @if (pkg().statusInfo.started; as started) {
+          <service-uptime [started]="started" />
+        }
+      </h3>
       <ng-content />
     </div>
   `,
@@ -112,7 +101,7 @@ import {
   `,
   host: { class: 'g-card' },
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiLoader, i18nPipe, ServiceUptimeComponent],
+  imports: [i18nPipe, ServiceUptimeComponent],
 })
 export class ServiceStatusComponent {
   readonly pkg = input.required<PackageDataEntry>()
@@ -143,9 +132,4 @@ export class ServiceStatusComponent {
         return null
     }
   })
-
-  protected readonly info = computed(
-    (progress = this.pkg().stateInfo.installingInfo?.progress.overall) =>
-      progress ? getProgressText(progress) : '',
-  )
 }

web/projects/ui/src/app/routes/portal/routes/services/dashboard/service.component.ts

@@ -24,7 +24,7 @@ import { StatusComponent } from './status.component'
     <td class="title">
       <a [routerLink]="routerLink">{{ manifest.title }}</a>
     </td>
-    <td [style.grid-area]="'3 / 2'">
+    <td class="status" [style.grid-area]="'3 / 2'">
       <app-status [pkg]="pkg" [hasDepErrors]="hasError(depErrors)" />
     </td>
     <td class="version">{{ manifest.version }}</td>
@@ -69,6 +69,22 @@ import { StatusComponent } from './status.component'
       display: none;
     }
 
+    .title {
+      width: 21rem;
+    }
+
+    .status {
+      width: 21rem;
+    }
+
+    .uptime {
+      width: 13rem;
+    }
+
+    .version {
+      width: 21rem;
+    }
+
     :host-context(tui-root._mobile) {
       position: relative;
       display: grid;

web/projects/ui/src/app/routes/portal/routes/services/dashboard/table.component.ts

@@ -57,7 +57,7 @@ import { RouterLink } from '@angular/router'
         [appTable]="[null, 'Name', 'Status', 'Version', 'Uptime']"
         [appTableSorters]="[null, name, status]"
       >
-        @for (service of services() | tuiTableSort; track service) {
+        @for (service of services() | tuiTableSort; track $index) {
           <tr
             appService
             [pkg]="service"

web/projects/ui/src/app/services/pkg-status-rendering.service.ts

@@ -22,6 +22,10 @@ export function renderPkgStatus(pkg: PackageDataEntry): PackageStatus {
 }
 
 export function getInstalledBaseStatus(statusInfo: T.StatusInfo): BaseStatus {
+  if (statusInfo.error) {
+    return 'error'
+  }
+
   if (
     statusInfo.desired.main === 'running' &&
     (!statusInfo.started ||