display logs in local time while retaining iso format

frontend/projects/diagnostic-ui/src/app/pages/logs/logs.page.ts

@@ -1,6 +1,7 @@
 import { Component, ViewChild } from '@angular/core'
 import { IonContent } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/api.service'
+import { toLocalIsoString } from '@start9labs/shared'
 var Convert = require('ansi-to-html')
 var convert = new Convert({
   bg: 'transparent',
@@ -42,7 +43,12 @@ export class LogsPage {
 
       newLogs.innerHTML =
         logs
-          .map(l => `${l.timestamp} ${convert.toHtml(l.message)}`)
+          .map(
+            l =>
+              `<b>${toLocalIsoString(
+                new Date(l.timestamp),
+              )}</b> ${convert.toHtml(l.message)}`,
+          )
           .join('\n') + (logs.length ? '\n' : '')
       container?.prepend(newLogs)
 
@@ -100,7 +106,12 @@ export class LogsPage {
 
       newLogs.innerHTML =
         logs
-          .map(l => `${l.timestamp} ${convert.toHtml(l.message)}`)
+          .map(
+            l =>
+              `<b>${toLocalIsoString(
+                new Date(l.timestamp),
+              )}</b> ${convert.toHtml(l.message)}`,
+          )
           .join('\n') + (logs.length ? '\n' : '')
       container?.append(newLogs)
       this.loadingMore = false

frontend/projects/shared/src/public-api.ts

@@ -36,4 +36,5 @@ export * from './types/workspace-config'
 
 export * from './util/get-pkg-id'
 export * from './util/misc.util'
+export * from './util/to-local-iso-string'
 export * from './util/unused'

frontend/projects/shared/src/util/to-local-iso-string.ts

@@ -0,0 +1,26 @@
+export function toLocalIsoString(date: Date) {
+  const tzo = -date.getTimezoneOffset()
+  const dif = tzo >= 0 ? '+' : '-'
+
+  function pad(num: number) {
+    return (num < 10 ? '0' : '') + num
+  }
+
+  return (
+    date.getFullYear() +
+    '-' +
+    pad(date.getMonth() + 1) +
+    '-' +
+    pad(date.getDate()) +
+    'T' +
+    pad(date.getHours()) +
+    ':' +
+    pad(date.getMinutes()) +
+    ':' +
+    pad(date.getSeconds()) +
+    dif +
+    pad(Math.floor(Math.abs(tzo) / 60)) +
+    ':' +
+    pad(Math.abs(tzo) % 60)
+  )
+}

frontend/projects/ui/src/app/components/logs/logs.page.ts

@@ -1,6 +1,7 @@
+import { formatDate } from '@angular/common'
 import { Component, Input, ViewChild } from '@angular/core'
 import { IonContent } from '@ionic/angular'
-import { ErrorToastService } from '@start9labs/shared'
+import { ErrorToastService, toLocalIsoString } from '@start9labs/shared'
 import { RR } from 'src/app/services/api/api.types'
 var Convert = require('ansi-to-html')
 var convert = new Convert({
@@ -53,8 +54,14 @@ export class LogsPage {
     if (!(newLogs instanceof HTMLElement)) return
 
     newLogs.innerHTML =
-      logs.map(l => `${l.timestamp} ${convert.toHtml(l.message)}`).join('\n') +
-      (logs.length ? '\n' : '')
+      logs
+        .map(
+          l =>
+            `<b>${toLocalIsoString(new Date(l.timestamp))}</b> ${convert.toHtml(
+              l.message,
+            )}`,
+        )
+        .join('\n') + (logs.length ? '\n' : '')
     container?.append(newLogs)
     this.loadingNext = false
     this.scrollEvent()
@@ -87,8 +94,14 @@ export class LogsPage {
     if (!(newLogs instanceof HTMLElement)) return
 
     newLogs.innerHTML =
-      logs.map(l => `${l.timestamp} ${convert.toHtml(l.message)}`).join('\n') +
-      (logs.length ? '\n' : '')
+      logs
+        .map(
+          l =>
+            `<b>${toLocalIsoString(new Date(l.timestamp))}</b> ${convert.toHtml(
+              l.message,
+            )}`,
+        )
+        .join('\n') + (logs.length ? '\n' : '')
     container?.prepend(newLogs)
     const afterContainerHeight = container?.scrollHeight || 0
 

frontend/projects/ui/src/app/pages/notifications/notifications.page.html

@@ -84,7 +84,8 @@
             <h2>
               <b>
                 <span *ngIf="not['package-id'] as pkgId">
-                  {{ packageData[pkgId]?.manifest?.title || pkgId }} -
+                  <!-- @TODO remove $any when Angular gets smart enough -->
+                  {{ $any(packageData[pkgId])?.manifest?.title || pkgId }} -
                 </span>
                 <ion-text [color]="getColor(not)"> {{ not.title }} </ion-text>
               </b>

frontend/projects/ui/src/app/services/api/api.fixures.ts

@@ -949,13 +949,13 @@ export module Mock {
 
   export const ServerLogs: Log[] = [
     {
-      timestamp: '2019-12-26T14:20:30.872Z',
+      timestamp: '2022-07-28T03:52:54.808769Z',
       message: '****** START *****',
     },
     {
       timestamp: '2019-12-26T14:21:30.872Z',
       message:
-        '2021/11/09 22:55:04 \u001b[34mPOST \u001b[0;32;49m200\u001b[0m photoview.embassy/api/graphql \u001b[0;36;49m1.169406ms\u001b[0m unauthenticated<p>TEST PARAGRAPH</p>',
+        '\u001b[34mPOST \u001b[0;32;49m200\u001b[0m photoview.embassy/api/graphql \u001b[0;36;49m1.169406ms\u001b[0m unauthenticated<p>TEST PARAGRAPH</p>',
     },
     {
       timestamp: '2019-12-26T14:22:30.872Z',
@@ -965,7 +965,7 @@ export module Mock {
 
   export const PackageLogs: Log[] = [
     {
-      timestamp: '2019-12-26T14:20:30.872Z',
+      timestamp: '2022-07-28T03:52:54.808769Z',
       message: '****** START *****',
     },
     {