closes #773

ui/package-lock.json

@@ -18,6 +18,7 @@
         "@ionic/storage-angular": "^3.0.6",
         "@start9labs/emver": "0.1.5",
         "ajv": "^6.12.6",
+        "ansi-to-html": "^0.7.2",
         "core-js": "^3.17.2",
         "fast-json-patch": "^3.1.0",
         "fuse.js": "^6.4.6",
@@ -3626,6 +3627,28 @@
         "node": ">=4"
       }
     },
+    "node_modules/ansi-to-html": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
+      "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
+      "dependencies": {
+        "entities": "^2.2.0"
+      },
+      "bin": {
+        "ansi-to-html": "bin/ansi-to-html"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/ansi-to-html/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -19379,6 +19402,21 @@
         "color-convert": "^1.9.0"
       }
     },
+    "ansi-to-html": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
+      "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
+      "requires": {
+        "entities": "^2.2.0"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+          "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+        }
+      }
+    },
     "anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",

ui/package.json

@@ -23,6 +23,7 @@
     "@ionic/storage-angular": "^3.0.6",
     "@start9labs/emver": "0.1.5",
     "ajv": "^6.12.6",
+    "ansi-to-html": "^0.7.2",
     "core-js": "^3.17.2",
     "fast-json-patch": "^3.1.0",
     "fuse.js": "^6.4.6",

ui/src/app/components/logs/logs.page.html

@@ -2,7 +2,6 @@
   [scrollEvents]="true"
   (ionScroll)="scrollEvent()"
   style="height: 100%;"
-  id="ion-content"
   class="ion-padding"
 >
   <ion-infinite-scroll id="scroller" *ngIf="!loading && needInfinite" position="top" threshold="0" (ionInfinite)="loadData($event)">

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

@@ -2,6 +2,10 @@ import { Component, Input, ViewChild } from '@angular/core'
 import { IonContent } from '@ionic/angular'
 import { ErrorToastService } from 'src/app/services/error-toast.service'
 import { RR } from 'src/app/services/api/api.types'
+var Convert = require('ansi-to-html')
+var convert = new Convert({
+  bg: 'transparent',
+})
 
 @Component({
   selector: 'logs',
@@ -62,7 +66,7 @@ export class LogsPage {
       const container = document.getElementById('container')
       const beforeContainerHeight = container.scrollHeight
       const newLogs = document.getElementById('template').cloneNode(true) as HTMLElement
-      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${l.message}`).join('\n\n') + (logs.length ? '\n\n' : '')
+      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${convert.toHtml(l.message)}`).join('\n\n') + (logs.length ? '\n\n' : '')
       container.prepend(newLogs)
       const afterContainerHeight = container.scrollHeight
 

ui/src/app/pages/apps-routes/app-properties/app-properties.page.html

@@ -50,7 +50,7 @@
           </ion-button>
           <ion-label>
             <h2>{{ prop.key }}</h2>
-            <p>{{ prop.value.masked && !unmasked[prop.key] ? (prop.value.value | mask ) : (prop.value.value | truncateEnd : 100) }}</p>
+            <p>{{ prop.value.masked && !unmasked[prop.key] ? (prop.value.value | mask ) : prop.value.value }}</p>
           </ion-label>
           <div slot="end" *ngIf="prop.value.copyable || prop.value.qr">
             <ion-button *ngIf="prop.value.masked" fill="clear" (click)="toggleMask(prop.key)">

ui/src/app/pages/server-routes/server-metrics/server-metrics.page.ts

@@ -1,5 +1,4 @@
-import { Component, ViewChild } from '@angular/core'
-import { IonContent } from '@ionic/angular'
+import { Component } from '@angular/core'
 import { Metrics } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ErrorToastService } from 'src/app/services/error-toast.service'

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

@@ -895,7 +895,7 @@ export module Mock {
     },
     {
       timestamp: '2019-12-26T14:21:30.872Z',
-      message: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
+      message: '2021/11/09 22:55:04 \u001b[0;32;49mPOST \u001b[0;32;49m200\u001b[0m photoview.embassy/api/graphql \u001b[0;36;49m1.169406ms\u001b[0m unauthenticated',
     },
     {
       timestamp: '2019-12-26T14:22:30.872Z',

ui/src/global.scss

@@ -25,6 +25,16 @@
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
 
+// * {
+//   -webkit-touch-callout: none; /* iOS Safari */
+//   -webkit-user-select: none; /* Safari */
+//   -khtml-user-select: none; /* Konqueror HTML */
+//   -moz-user-select: none; /* Old versions of Firefox */
+//   -ms-user-select: none; /* Internet Explorer/Edge */
+//   user-select: none; /* Non-prefixed version, currently
+//                       supported by Chrome, Edge, Opera and Firefox */
+// }
+
 $subheader-height: 48px;
 
 .subheader-padding {