drew updates

2026-03-26 10:21:52 +00:00 · 2021-06-23 11:34:54 -06:00
parent 97b5f17f4a
commit 56f9bd4b89
21 changed files with 257 additions and 33 deletions
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -59,7 +59,9 @@
    <ion-icon name="aperture-outline"></ion-icon>
    <ion-icon name="arrow-back"></ion-icon>
    <ion-icon name="arrow-up"></ion-icon>
+    <ion-icon name="briefcase-outline"></ion-icon>
    <ion-icon name="bookmark-outline"></ion-icon>
+    <ion-icon name="checkmark-outline"></ion-icon>
    <ion-icon name="chevron-down"></ion-icon>
    <ion-icon name="chevron-up"></ion-icon>
    <ion-icon name="chevron-forward"></ion-icon> <!-- needed for detail="true" on ion-item button -->
@@ -71,31 +73,40 @@
    <ion-icon name="construct-outline"></ion-icon>
    <ion-icon name="copy-outline"></ion-icon>
    <ion-icon name="cube-outline"></ion-icon>
+    <ion-icon name="desktop-outline"></ion-icon>
    <ion-icon name="download-outline"></ion-icon>
    <ion-icon name="ellipse"></ion-icon>
    <ion-icon name="eye-off-outline"></ion-icon>
    <ion-icon name="eye-outline"></ion-icon>
    <ion-icon name="file-tray-stacked-outline"></ion-icon>
+    <ion-icon name="finger-print-outline"></ion-icon>
    <ion-icon name="flash-outline"></ion-icon>
    <ion-icon name="grid-outline"></ion-icon>
    <ion-icon name="help-circle-outline"></ion-icon>
    <ion-icon name="home-outline"></ion-icon>
    <ion-icon name="information-circle-outline"></ion-icon>
    <ion-icon name="list-outline"></ion-icon>
+    <ion-icon name="logo-bitcoin"></ion-icon>
+    <ion-icon name="medkit-outline"></ion-icon>
    <ion-icon name="newspaper-outline"></ion-icon>
    <ion-icon name="notifications-outline"></ion-icon>
    <ion-icon name="rocket-outline"></ion-icon>
    <ion-icon name="power"></ion-icon>
    <ion-icon name="pulse"></ion-icon>
    <ion-icon name="qr-code-outline"></ion-icon>
-    <ion-icon name="reload-outline"></ion-icon>
+    <ion-icon name="receipt-outline"></ion-icon>
    <ion-icon name="refresh-outline"></ion-icon>
+    <ion-icon name="reload-outline"></ion-icon>
+    <ion-icon name="remove-outline"></ion-icon>
    <ion-icon name="save-outline"></ion-icon>
+    <ion-icon name="sync-circle-outline"></ion-icon>
    <ion-icon name="storefront-outline"></ion-icon>
    <ion-icon name="terminal-outline"></ion-icon>
+    <ion-icon name="timer-outline"></ion-icon>
    <ion-icon name="trash-outline"></ion-icon>
    <ion-icon name="warning-outline"></ion-icon>
    <ion-icon name="wifi"></ion-icon>
+    
    <!-- Ionic components -->
    <ion-action-sheet></ion-action-sheet>
    <ion-alert></ion-alert>
@@ -149,3 +160,4 @@
  </section>
 </ion-app>

+
--- a/ui/src/app/components/install-wizard/alert/alert.component.html
+++ b/ui/src/app/components/install-wizard/alert/alert.component.html
@@ -0,0 +1,10 @@
+<div class="slide-content">
+  <div style="margin-top: 25px;">
+    <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
+      <ion-label [color]="params.titleColor" style="font-size: xx-large; font-weight: bold;">
+        {{ params.title }}
+      </ion-label>
+    </div>
+    <div class="long-message" [innerHTML]="params.notes | markdown"></div>
+  </div>
+</div>
--- a/ui/src/app/components/install-wizard/alert/alert.component.module.ts
+++ b/ui/src/app/components/install-wizard/alert/alert.component.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { AlertComponent } from './alert.component'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule } from '@angular/router'
+import { SharingModule } from 'src/app/modules/sharing.module'
+
+@NgModule({
+  declarations: [
+    AlertComponent,
+  ],
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild([]),
+    SharingModule,
+  ],
+  exports: [AlertComponent],
+})
+export class AlertComponentModule { }
--- a/ui/src/app/components/install-wizard/alert/alert.component.ts
+++ b/ui/src/app/components/install-wizard/alert/alert.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { BehaviorSubject, Subject } from 'rxjs'
+import { Loadable } from '../loadable'
+
+@Component({
+  selector: 'alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['../install-wizard.component.scss'],
+})
+export class AlertComponent implements OnInit, Loadable {
+  @Input() params: {
+    alert: string
+    title: string
+    titleColor: string
+  }
+
+  loading$ = new BehaviorSubject(false)
+  cancel$ = new Subject<void>()
+
+  load () { }
+
+  constructor () { }
+  ngOnInit () { }
+}
--- a/ui/src/app/components/install-wizard/install-wizard.component.module.ts
+++ b/ui/src/app/components/install-wizard/install-wizard.component.module.ts
@@ -7,6 +7,7 @@ import { SharingModule } from 'src/app/modules/sharing.module'
 import { DependentsComponentModule } from './dependents/dependents.component.module'
 import { CompleteComponentModule } from './complete/complete.component.module'
 import { NotesComponentModule } from './notes/notes.component.module'
+import { AlertComponentModule } from './alert/alert.component.module'

@NgModule({
  declarations: [
@@ -20,6 +21,7 @@ import { NotesComponentModule } from './notes/notes.component.module'
    DependentsComponentModule,
    CompleteComponentModule,
    NotesComponentModule,
+    AlertComponentModule,
  ],
  exports: [InstallWizardComponent],
 })
--- a/ui/src/app/components/install-wizard/install-wizard.component.ts
+++ b/ui/src/app/components/install-wizard/install-wizard.component.ts
@@ -4,6 +4,7 @@ import { BehaviorSubject } from 'rxjs'
 import { capitalizeFirstLetter, pauseFor } from 'src/app/util/misc.util'
 import { CompleteComponent } from './complete/complete.component'
 import { DependentsComponent } from './dependents/dependents.component'
+import { AlertComponent } from './alert/alert.component'
 import { NotesComponent } from './notes/notes.component'
 import { Loadable } from './loadable'
 import { WizardAction } from './wizard-types'
@@ -92,6 +93,7 @@ export interface SlideDefinition {
  slide:
    { selector: 'dependents', params: DependentsComponent['params'] } |
    { selector: 'complete', params: CompleteComponent['params'] } |
+    { selector: 'alert', params: AlertComponent['params'] } |
    { selector: 'notes', params: NotesComponent['params'] }
  bottomBar: {
    cancel: {
--- a/ui/src/app/components/install-wizard/notes/notes.component.html
+++ b/ui/src/app/components/install-wizard/notes/notes.component.html
@@ -2,9 +2,12 @@
  <div style="margin-top: 25px;">
    <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
      <ion-label [color]="params.titleColor" style="font-size: xx-large; font-weight: bold;">
-        {{params.title}}
+        {{ params.title }}
      </ion-label>
    </div>
-    <div class="long-message" [innerHTML]="params.notes | markdown"></div>
+    <div *ngFor="let note of params.notes | keyvalue : asIsOrder">
+      <h2>{{ note.key }}</h2>
+      <div class="long-message" [innerHTML]="note.value | markdown"></div>
+    </div>
  </div>
 </div>
--- a/ui/src/app/components/install-wizard/notes/notes.component.ts
+++ b/ui/src/app/components/install-wizard/notes/notes.component.ts
@@ -9,7 +9,7 @@ import { Loadable } from '../loadable'
 })
 export class NotesComponent implements OnInit, Loadable {
  @Input() params: {
-    notes: string
+    notes: { [version: string]: string }
    title: string
    titleColor: string
  }
@@ -21,4 +21,8 @@ export class NotesComponent implements OnInit, Loadable {

  constructor () { }
  ngOnInit () { }
+
+  asIsOrder () {
+    return 0
+  }
 }
--- a/ui/src/app/components/install-wizard/prebaked-wizards.ts
+++ b/ui/src/app/components/install-wizard/prebaked-wizards.ts
@@ -27,9 +27,9 @@ export class WizardBaker {
    const slideDefinitions: SlideDefinition[] = [
      installAlert ? {
        slide: {
-          selector: 'notes',
+          selector: 'alert',
          params: {
-            notes: installAlert,
+            alert: installAlert,
            title: 'Warning',
            titleColor: 'warning',
          },
@@ -72,9 +72,9 @@ export class WizardBaker {
    const slideDefinitions: SlideDefinition[] = [
      installAlert ? {
        slide: {
-          selector: 'notes',
+          selector: 'alert',
          params: {
-            notes: installAlert,
+            alert: installAlert,
            title: 'Warning',
            titleColor: 'warning',
          },
@@ -120,7 +120,7 @@ export class WizardBaker {
  }

  updateOS (values: {
-    version: string, releaseNotes: string
+    version: string, releaseNotes: { [version: string]: string }
  }): InstallWizardComponent['params'] {
    const { version, releaseNotes } = values

@@ -176,9 +176,9 @@ export class WizardBaker {
    const slideDefinitions: SlideDefinition[] = [
      installAlert ? {
        slide: {
-          selector: 'notes',
+          selector: 'alert',
          params: {
-            notes: installAlert,
+            alert: installAlert,
            title: 'Warning',
            titleColor: 'warning',
          },
@@ -232,9 +232,9 @@ export class WizardBaker {
    const slideDefinitions: SlideDefinition[] = [
      {
        slide: {
-          selector: 'notes',
+          selector: 'alert',
          params: {
-            notes: uninstallAlert || defaultUninstallationWarning(title),
+            alert: uninstallAlert || defaultUninstallationWarning(title),
            title: 'Warning',
            titleColor: 'warning',
          },
--- a/ui/src/app/models/patch-db/data-model.ts
+++ b/ui/src/app/models/patch-db/data-model.ts
@@ -255,18 +255,19 @@ export enum PackageMainStatus {
  Restoring = 'restoring',
 }

-export type HealthCheckResult = HealthCheckResultWarmingUp | HealthCheckResultDisabled | HealthCheckResultSuccess | HealthCheckResultFailure
+export type HealthCheckResult = HealthCheckResultStarting | HealthCheckResultLoading | HealthCheckResultDisabled | HealthCheckResultSuccess | HealthCheckResultFailure

 export enum HealthResult {
-  WarmingUp = 'warming-up',
+  Starting = 'starting',
+  Loading = 'loading',
  Disabled = 'disabled',
  Success = 'success',
  Failure = 'failure',
 }

-export interface HealthCheckResultWarmingUp {
+export interface HealthCheckResultStarting {
  time: string // UTC date string
-  result: HealthResult.WarmingUp
+  result: HealthResult.Starting
 }

 export interface HealthCheckResultDisabled {
@@ -279,6 +280,12 @@ export interface HealthCheckResultSuccess {
  result: HealthResult.Success
 }

+export interface HealthCheckResultLoading {
+  time: string // UTC date string
+  result: HealthResult.Loading
+  message: string
+}
+
 export interface HealthCheckResultFailure {
  time: string // UTC date string
  result: HealthResult.Failure
--- a/ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.ts
+++ b/ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.ts
@@ -73,7 +73,7 @@ export class AppAvailableListPage {
      this.modalCtrl,
      this.wizardBaker.updateOS({
        version: this.eos.version,
-        releaseNotes: this.eos.notes,
+        releaseNotes: this.eos['release-notes'],
      }),
    )
  }
--- a/ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.html
+++ b/ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.html
@@ -97,10 +97,16 @@

    <ion-item-group>
      <!-- release notes -->
-      <ion-item-divider style="color: var(--ion-color-dark); font-weight: bold;">New in {{ pkg.manifest.version | displayEmver }}</ion-item-divider>
+      <ion-item-divider style="color: var(--ion-color-dark); font-weight: bold;">
+        New in {{ pkg.manifest.version | displayEmver }}
+        <ion-button [routerLink]="['notes']" style="position: absolute; right: 10px;" fill="clear" color="primary" >
+          Version History
+          <ion-icon slot="end" name="arrow-forward-outline"></ion-icon>
+        </ion-button>
+      </ion-item-divider>
      <ion-item lines="none">
        <ion-label style="display: flex; align-items: center; justify-content: space-between;" class="ion-text-wrap" >
-          <div id='release-notes' color="dark" [innerHTML]="pkg.manifest['release-notes'] | markdown"></div>
+          <div id='release-notes' [innerHTML]="pkg.manifest['release-notes'] | markdown"></div>
        </ion-label>
      </ion-item>
      <!-- description -->
--- a/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.html
+++ b/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.html
@@ -23,7 +23,8 @@
        <ion-label>
          <div *ngFor="let health of pkg.installed.status.main.health | keyvalue : asIsOrder" class="align" style="margin-left: 12px;">
            <ion-icon *ngIf="health.value.result === 'success'" name="checkmark-outline" color="success"></ion-icon>
-            <ion-icon *ngIf="health.value.result === 'warming-up'" name="timer-outline" color="warning"></ion-icon>
+            <ion-icon *ngIf="health.value.result === 'starting'" name="timer-outline" color="warning"></ion-icon>
+            <ion-icon *ngIf="health.value.result === 'loading'" name="sync-circle-outline" color="warning"></ion-icon>
            <ion-icon *ngIf="health.value.result === 'failure'" name="close-outline" color="danger"></ion-icon>
            <ion-icon *ngIf="health.value.result === 'disabled'" name="remove-outline" color="medium"></ion-icon>
            <h2>{{ health.key }}</h2>
--- a/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.module.ts
+++ b/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { Routes, RouterModule } from '@angular/router'
+import { IonicModule } from '@ionic/angular'
+import { AppReleaseNotesList } from './app-release-notes-list.page'
+import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
+import { SharingModule } from 'src/app/modules/sharing.module'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AppReleaseNotesList,
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    PwaBackComponentModule,
+    SharingModule,
+  ],
+  declarations: [AppReleaseNotesList],
+})
+export class AppReleaseNotesListModule { }
--- a/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.html
+++ b/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.html
@@ -0,0 +1,12 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <pwa-back-button></pwa-back-button>
+    </ion-buttons>
+    <ion-title>Version History</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content *ngIf="pkg">
+  hello
+</ion-content>
--- a/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.scss
+++ b/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.scss
@@ -0,0 +1,3 @@
+.metric-note {
+  font-size: 16px;
+}
--- a/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.ts
+++ b/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.ts
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
+import { AvailableShow } from 'src/app/services/api/api-types'
+import { ApiService } from 'src/app/services/api/api.service'
+
+@Component({
+  selector: 'app-release-notes-list',
+  templateUrl: './app-release-notes-list.page.html',
+  styleUrls: ['./app-release-notes-list.page.scss'],
+})
+export class AppReleaseNotesList {
+  loading = true
+  pkgId: string
+  pkg: AvailableShow
+
+  constructor (
+    private readonly route: ActivatedRoute,
+    private readonly apiService: ApiService,
+
+  ) { }
+
+  ngOnInit () {
+    this.pkgId = this.route.snapshot.paramMap.get('pkgId')
+  }
+
+  async getPkg (version?: string): Promise<void> {
+    this.loading = true
+    try {
+      this.pkg = await this.apiService.getAvailableShow({ id: this.pkgId, version })
+    } catch (e) {
+      console.error(e)
+      this.error = e.message
+    } finally {
+      this.loading = false
+    }
+  }
+
+  asIsOrder (a: any, b: any) {
+    return 0
+  }
+}
--- a/ui/src/app/pages/apps-routes/apps-routing.module.ts
+++ b/ui/src/app/pages/apps-routes/apps-routing.module.ts
@@ -63,6 +63,10 @@ const routes: Routes = [
    path: 'marketplace/:pkgId',
    loadChildren: () => import('./app-available-show/app-available-show.module').then(m => m.AppAvailableShowPageModule),
  },
+  {
+    path: 'marketplace/:pkgId/notes',
+    loadChildren: () => import('./app-release-notes-list/app-release-notes-list.module').then(m => m.AppReleaseNotesListModule),
+  },
 ]

@NgModule({
--- a/ui/src/app/services/api/api-types.ts
+++ b/ui/src/app/services/api/api-types.ts
@@ -174,7 +174,7 @@ export interface MarketplaceData {
 export interface MarketplaceEOS {
  version: string
  headline: string
-  notes: string
+  'release-notes': { [version: string]: string }
 }

 export interface AvailablePreview {
@@ -195,7 +195,8 @@ export interface AvailableShow {
      title: string
      icon: URL
    }
-  }
+  },
+  'release-notes': { [version: string]: string }
 }

 export interface Breakages {
--- a/ui/src/app/services/api/mock-app-fixures.ts
+++ b/ui/src/app/services/api/mock-app-fixures.ts
@@ -7,7 +7,7 @@ export module Mock {
  export const MarketplaceEos: RR.GetMarketplaceEOSRes = {
    version: '1.0.0',
    headline: 'Our biggest release ever.',
-    notes: markdown,
+    'release-notes': { '1.0.0': markdown },
  }

  export const AvailableList: RR.GetAvailableListRes = [
@@ -400,45 +400,66 @@ export module Mock {
    }
  } = {
    'bitcoind': {
-      '0.19.0': {
+      '0.19.2': {
        icon: 'assets/img/service-icons/bitcoind.png',
        manifest: {
          ...Mock.MockManifestBitcoind,
          version: '0.19.0',
-          'release-notes': 'release notes for Bitcoin 0.19.0',
        },
        categories: ['bitcoin', 'cryptocurrency'],
        versions: ['0.19.0', '0.20.0', '0.21.0'],
        'dependency-metadata': { },
+        'release-notes': {
+          '0.19.0': 'release notes for Bitcoin 0.19.0',
+          '0.19.1': 'release notes for Bitcoin 0.19.1',
+          '0.19.2': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
+        },
      },
      '0.20.0': {
        icon: 'assets/img/service-icons/bitcoind.png',
        manifest: {
          ...Mock.MockManifestBitcoind,
          version: '0.20.0',
-          'release-notes': 'release notes for Bitcoin 0.20.0',
        },
        categories: ['bitcoin', 'cryptocurrency'],
        versions: ['0.19.0', '0.20.0', '0.21.0'],
        'dependency-metadata': { },
+        'release-notes': {
+          '0.19.0': 'release notes for Bitcoin 0.19.0',
+          '0.19.1': 'release notes for Bitcoin 0.19.1',
+          '0.19.2': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
+        },
      },
      '0.21.0': {
        icon: 'assets/img/service-icons/bitcoind.png',
        manifest: {
          ...Mock.MockManifestBitcoind,
          version: '0.21.0',
-          'release-notes': 'release notes for Bitcoin 0.20.0',
+          'release-notes': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
        },
        categories: ['bitcoin', 'cryptocurrency'],
        versions: ['0.19.0', '0.20.0', '0.21.0'],
        'dependency-metadata': { },
+        'release-notes': {
+          '0.19.0': 'release notes for Bitcoin 0.19.0',
+          '0.19.1': 'release notes for Bitcoin 0.19.1',
+          '0.19.2': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
+        },
      },
      'latest': {
        icon: 'assets/img/service-icons/bitcoind.png',
-        manifest: Mock.MockManifestBitcoind,
+        manifest: {
+          ...Mock.MockManifestBitcoind,
+          'release-notes': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
+        },
        categories: ['bitcoin', 'cryptocurrency'],
        versions: ['0.19.0', '0.20.0', '0.21.0'],
        'dependency-metadata': { },
+        'release-notes': {
+          '0.19.2': 'release notes for Bitcoin 0.19.2',
+          '0.20.0': 'release notes for Bitcoin 0.20.0',
+          '0.21.0': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
+        },
      },
    },
    'lnd': {
@@ -461,6 +482,11 @@ export module Mock {
            icon: 'assets/img/service-icons/bitcoin-proxy.png',
          },
        },
+        'release-notes': {
+          '0.19.0': 'release notes for LND 0.19.0',
+          '0.19.1': 'release notes for LND 0.19.1',
+          '0.19.2': 'release notes for LND 0.19.2',
+        },
      },
      '0.11.1': {
        icon: 'assets/img/service-icons/lnd.png',
@@ -481,6 +507,11 @@ export module Mock {
            icon: 'assets/img/service-icons/bitcoin-proxy.png',
          },
        },
+        'release-notes': {
+          '0.19.0': 'release notes for LND 0.19.0',
+          '0.19.1': 'release notes for LND 0.19.1',
+          '0.19.2': 'release notes for LND 0.19.2',
+        },
      },
      'latest': {
        icon: 'assets/img/service-icons/lnd.png',
@@ -497,6 +528,11 @@ export module Mock {
            icon: 'assets/img/service-icons/bitcoin-proxy.png',
          },
        },
+        'release-notes': {
+          '0.19.0': 'release notes for LND 0.19.0',
+          '0.19.1': 'release notes for LND 0.19.1',
+          '0.19.2': 'release notes for LND 0.19.2',
+        },
      },
    },
    'bitcoin-proxy': {
@@ -511,6 +547,11 @@ export module Mock {
            icon: 'assets/img/service-icons/bitcoind.png',
          },
        },
+        'release-notes': {
+          '0.19.0': 'release notes for btc proxy 0.19.0',
+          '0.19.1': 'release notes for btc proxy 0.19.1',
+          '0.19.2': 'release notes for btc proxy 0.19.2',
+        },
      },
    },
  }
--- a/ui/src/app/services/pkg-status-rendering.service.ts
+++ b/ui/src/app/services/pkg-status-rendering.service.ts
@@ -1,4 +1,4 @@
-import { HealthCheckResultWarmingUp, MainStatus, MainStatusRunning, PackageDataEntry, PackageMainStatus, PackageState, Status } from '../models/patch-db/data-model'
+import { HealthCheckResultLoading, MainStatusRunning, PackageDataEntry, PackageMainStatus, PackageState, Status } from '../models/patch-db/data-model'
 import { ConnectionState } from './connection.service'

 export function renderPkgStatus (pkg: PackageDataEntry, connection: ConnectionState): PkgStatusRendering {
@@ -35,8 +35,11 @@ function handleInstalledState (status: Status): PkgStatusRendering {
 function handleRunningState (status: MainStatusRunning): PkgStatusRendering {
  if (Object.values(status.health).some(h => h.result === 'failure')) {
    return { display: 'Needs Attention', color: 'danger', showDots: false, feStatus: FEStatus.NeedsAttention }
-  } else if (Object.values(status.health).some(h => h.result === 'warming-up')) {
-    return { display: 'Starting Up', color: 'warning', showDots: true, feStatus: FEStatus.StartingUp }
+  } else if (Object.values(status.health).some(h => h.result === 'starting')) {
+    return { display: 'Starting Up', color: 'warning', showDots: true, feStatus: FEStatus.Starting }
+  } else if (Object.values(status.health).some(h => h.result === 'loading')) {
+    const firstLoading = Object.values(status.health).find(h => h.result === 'loading') as HealthCheckResultLoading
+    return { display: firstLoading.message, color: 'warning', showDots: true, feStatus: FEStatus.Loading }
  } else {
    return { display: 'Running', color: 'success', showDots: false, feStatus: FEStatus.Running }
  }
@@ -63,8 +66,9 @@ export enum FEStatus {
  Restoring = 'restoring',
  // FE
  NeedsAttention = 'needs-attention',
-  StartingUp = 'starting-up',
+  Starting = 'starting',
  Connecting = 'connecting',
  DependencyIssue = 'dependency-issue',
  NeedsConfig = 'needs-config',
+  Loading = 'loading',
 }