From 241fac91eb53970b4479e0df7a4ad7f1d81ba732 Mon Sep 17 00:00:00 2001
From: Lucy C <12953208+elvece@users.noreply.github.com>
Date: Thu, 9 Jun 2022 10:21:39 -0600
Subject: [PATCH] Feature/copy logs (#1491)

* make text selectable on mobile

* make logs copyable and adjust copy format

* fix linting

* fix linting further

* linting

* add formatting to copied logs

* fix copy abstraction and add formatting for server log copy
---
 .../src/app/pages/success/success.page.ts     |  4 ++-
 frontend/projects/shared/styles/shared.scss   | 27 +++++++++------
 .../action-success/action-success.page.ts     | 15 +++++----
 .../app-interfaces/app-interfaces.page.ts     |  4 ++-
 .../apps-routes/app-logs/app-logs.page.html   |  5 ++-
 .../apps-routes/app-logs/app-logs.page.ts     | 21 ++++++++++++
 .../app-properties/app-properties.page.ts     |  4 ++-
 .../server-logs/server-logs.page.html         |  3 ++
 .../server-logs/server-logs.page.ts           | 33 ++++++++++++++++---
 .../server-specs/server-specs.page.ts         |  4 ++-
 10 files changed, 95 insertions(+), 25 deletions(-)

diff --git a/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts b/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts
index 5af128478..5a7ed133a 100644
--- a/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts
+++ b/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts
@@ -37,7 +37,9 @@ export class SuccessPage {
 
   async copy(address: string): Promise<void> {
     const success = await this.copyToClipboard(address)
-    const message = success ? 'copied to clipboard!' : 'failed to copy'
+    const message = success
+      ? 'Copied to clipboard!'
+      : 'Failed to copy to clipboard.'
 
     const toast = await this.toastCtrl.create({
       header: message,
diff --git a/frontend/projects/shared/styles/shared.scss b/frontend/projects/shared/styles/shared.scss
index 65c3c1f6c..136e4c843 100644
--- a/frontend/projects/shared/styles/shared.scss
+++ b/frontend/projects/shared/styles/shared.scss
@@ -1,5 +1,12 @@
 $wide-modal: 900px;
 
+body {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
 ion-input {
   caret-color: gray;
 }
@@ -73,17 +80,17 @@ ion-modal::part(content) {
   }
 
   /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+  /* IE and Edge */
+  -ms-overflow-style: none;
+  /* Firefox */
+  scrollbar-width: none;
 }
 
 .divider {
-  background: linear-gradient(
-    90deg,
-    var(--ion-color-light) 0,
-    var(--ion-color-dark) 50%,
-    var(--ion-color-light) 100%
-  );
+  background: linear-gradient(90deg,
+      var(--ion-color-light) 0,
+      var(--ion-color-dark) 50%,
+      var(--ion-color-light) 100%);
   height: 1px;
 }
 
@@ -98,5 +105,5 @@ ion-modal::part(content) {
 }
 
 .montserrat {
-  font-family: 'Montserrat', sans-serif!important;
-}
+  font-family: 'Montserrat', sans-serif !important;
+}
\ No newline at end of file
diff --git a/frontend/projects/ui/src/app/modals/action-success/action-success.page.ts b/frontend/projects/ui/src/app/modals/action-success/action-success.page.ts
index 429f1d459..56af3af86 100644
--- a/frontend/projects/ui/src/app/modals/action-success/action-success.page.ts
+++ b/frontend/projects/ui/src/app/modals/action-success/action-success.page.ts
@@ -11,15 +11,18 @@ import { copyToClipboard } from 'src/app/util/web.util'
 export class ActionSuccessPage {
   @Input() actionRes: ActionResponse
 
-  constructor (
+  constructor(
     private readonly modalCtrl: ModalController,
     private readonly toastCtrl: ToastController,
-  ) { }
+  ) {}
 
-  async copy (address: string) {
+  async copy(address: string) {
     let message = ''
-    await copyToClipboard(address || '')
-      .then(success => { message = success ? 'copied to clipboard!' : 'failed to copy'})
+    await copyToClipboard(address || '').then(success => {
+      message = success
+        ? 'Copied to clipboard!'
+        : 'Failed to copy to clipboard.'
+    })
 
     const toast = await this.toastCtrl.create({
       header: message,
@@ -29,7 +32,7 @@ export class ActionSuccessPage {
     await toast.present()
   }
 
-  async dismiss () {
+  async dismiss() {
     return this.modalCtrl.dismiss()
   }
 }
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
index 0ebe2a175..776f5ee3b 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
@@ -99,7 +99,9 @@ export class AppInterfacesItemComponent {
   async copy(address: string): Promise<void> {
     let message = ''
     await copyToClipboard(address || '').then(success => {
-      message = success ? 'copied to clipboard!' : 'failed to copy'
+      message = success
+        ? 'Copied to clipboard!'
+        : 'Failed to copy to clipboard.'
     })
 
     const toast = await this.toastCtrl.create({
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html b/frontend/projects/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html
index cbec4d05c..b85851450 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html
@@ -4,9 +4,12 @@
       <ion-back-button [defaultHref]="'/services/' + pkgId"></ion-back-button>
     </ion-buttons>
     <ion-title>Logs</ion-title>
+    <ion-button slot="end" fill="clear" size="small" (click)="copy()">
+      <ion-icon slot="icon-only" name="copy-outline"></ion-icon>
+    </ion-button>
   </ion-toolbar>
 </ion-header>
 
 <div style="height: 100%">
   <logs [fetchLogs]="fetchFetchLogs()"></logs>
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-logs/app-logs.page.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-logs/app-logs.page.ts
index 06fb4e0ec..2014d80ea 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-logs/app-logs.page.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-logs/app-logs.page.ts
@@ -1,7 +1,9 @@
 import { Component } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { getPkgId } from '@start9labs/shared'
+import { ToastController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { copyToClipboard } from 'src/app/util/web.util'
 
 @Component({
   selector: 'app-logs',
@@ -17,6 +19,7 @@ export class AppLogsPage {
   constructor(
     private readonly route: ActivatedRoute,
     private readonly embassyApi: ApiService,
+    private readonly toastCtrl: ToastController,
   ) {}
 
   fetchFetchLogs() {
@@ -33,4 +36,22 @@ export class AppLogsPage {
       })
     }
   }
+
+  async copy(): Promise<void> {
+    const logs = document
+      .getElementById('template')
+      ?.cloneNode(true) as HTMLElement
+    const formatted = '```' + logs.innerHTML + '```'
+    const success = await copyToClipboard(formatted)
+    const message = success
+      ? 'Copied to clipboard!'
+      : 'Failed to copy to clipboard.'
+
+    const toast = await this.toastCtrl.create({
+      header: message,
+      position: 'bottom',
+      duration: 1000,
+    })
+    await toast.present()
+  }
 }
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
index 40ae74044..8555c831c 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
@@ -114,7 +114,9 @@ export class AppPropertiesPage {
   async copy(text: string): Promise<void> {
     let message = ''
     await copyToClipboard(text).then(success => {
-      message = success ? 'copied to clipboard!' : 'failed to copy'
+      message = success
+        ? 'Copied to clipboard!'
+        : 'Failed to copy to clipboard.'
     })
 
     const toast = await this.toastCtrl.create({
diff --git a/frontend/projects/ui/src/app/pages/server-routes/server-logs/server-logs.page.html b/frontend/projects/ui/src/app/pages/server-routes/server-logs/server-logs.page.html
index 5940ae11d..e91cc3971 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/server-logs/server-logs.page.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-logs/server-logs.page.html
@@ -4,6 +4,9 @@
       <ion-back-button defaultHref="embassy"></ion-back-button>
     </ion-buttons>
     <ion-title>OS Logs</ion-title>
+    <ion-button slot="end" fill="clear" size="small" (click)="copy()">
+      <ion-icon slot="icon-only" name="copy-outline"></ion-icon>
+    </ion-button>
   </ion-toolbar>
 </ion-header>
 
diff --git a/frontend/projects/ui/src/app/pages/server-routes/server-logs/server-logs.page.ts b/frontend/projects/ui/src/app/pages/server-routes/server-logs/server-logs.page.ts
index ec0865164..102cc4c72 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/server-logs/server-logs.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-logs/server-logs.page.ts
@@ -1,5 +1,7 @@
 import { Component } from '@angular/core'
+import { ToastController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { copyToClipboard } from 'src/app/util/web.util'
 
 @Component({
   selector: 'server-logs',
@@ -12,12 +14,17 @@ export class ServerLogsPage {
   needInfinite = true
   before: string
 
-  constructor (
+  constructor(
     private readonly embassyApi: ApiService,
-  ) { }
+    private readonly toastCtrl: ToastController,
+  ) {}
 
-  fetchFetchLogs () {
-    return async (params: { before_flag?: boolean, limit?: number, cursor?: string }) => {
+  fetchFetchLogs() {
+    return async (params: {
+      before_flag?: boolean
+      limit?: number
+      cursor?: string
+    }) => {
       return this.embassyApi.getServerLogs({
         before_flag: params.before_flag,
         cursor: params.cursor,
@@ -25,4 +32,22 @@ export class ServerLogsPage {
       })
     }
   }
+
+  async copy(): Promise<void> {
+    const logs = document
+      .getElementById('template')
+      .cloneNode(true) as HTMLElement
+    const formatted = '```' + logs.innerHTML + '```'
+    const success = await copyToClipboard(formatted)
+    const message = success
+      ? 'Copied to clipboard!'
+      : 'Failed to copy to clipboard.'
+
+    const toast = await this.toastCtrl.create({
+      header: message,
+      position: 'bottom',
+      duration: 1000,
+    })
+    await toast.present()
+  }
 }
diff --git a/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts b/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
index 31dc327fc..9bfc5496c 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
@@ -27,7 +27,9 @@ export class ServerSpecsPage {
   async copy(address: string) {
     let message = ''
     await copyToClipboard(address || '').then(success => {
-      message = success ? 'copied to clipboard!' : 'failed to copy'
+      message = success
+        ? 'Copied to clipboard!'
+        : 'Failed to copy to clipboard.'
     })
 
     const toast = await this.toastCtrl.create({