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

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,

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;
+}

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()
   }
 }

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({

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>
+</div>

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()
+  }
 }

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({

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>
 

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',
@@ -14,10 +16,15 @@ export class ServerLogsPage {
 
   constructor(
     private readonly embassyApi: ApiService,
+    private readonly toastCtrl: ToastController,
   ) { }
 
   fetchFetchLogs() {
-    return async (params: { before_flag?: boolean, limit?: number, cursor?: string }) => {
+    return async (params: {
+      before_flag?: boolean
+      limit?: number
+      cursor?: string
+    }) => {
       return this.embassyApi.getServerLogs({
         before_flag: params.before_flag,
         cursor: params.cursor,

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({