Feature/diagnostic repair disk (#1358)

* add disk repair actions to diagnostic ui and server menu

* only display repair disk button when activated

* fix typo

* add repairDrive fn with restart to diagnostic ui

* fix copy

* add alert before repairing disk in diagnostic ui

* fix repair disk message spacing and hidden display

* fix version comparisons and enable dismissable refresh modal

* eager load medkit and fix storefront to outline icon

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html

@@ -24,73 +24,83 @@
   <ng-template #data>
     <ion-item-group>
       <div *ngFor="let cat of settings | keyvalue : asIsOrder">
-        <ion-item-divider
-          ><ion-text color="dark">{{ cat.key }}</ion-text></ion-item-divider
-        >
-        <ion-item
-          button
-          *ngFor="let button of cat.value"
-          [detail]="button.detail"
-          [disabled]="button.disabled | async"
-          (click)="button.action()"
-        >
-          <ion-icon slot="start" [name]="button.icon"></ion-icon>
-          <ion-label>
-            <h2>{{ button.title }}</h2>
-            <p *ngIf="button.description">{{ button.description }}</p>
+        <ion-item-divider>
+          <ion-text color="dark" *ngIf="cat.key !== 'Power'"
+            >{{ cat.key }}</ion-text
+          >
+          <ion-text
+            color="dark"
+            *ngIf="cat.key === 'Power'"
+            (click)="addClick()"
+            >{{ cat.key }}</ion-text
+          >
+        </ion-item-divider>
+        <ng-container *ngFor="let button of cat.value">
+          <ion-item
+            button
+            [style.display]="(button.title === 'Repair Disk' && !(localStorageService.showDiskRepair$ | async)) ? 'none' : 'block'"
+            [detail]="button.detail"
+            [disabled]="button.disabled | async"
+            (click)="button.action()"
+          >
+            <ion-icon slot="start" [name]="button.icon"></ion-icon>
+            <ion-label>
+              <h2>{{ button.title }}</h2>
+              <p *ngIf="button.description">{{ button.description }}</p>
 
-            <!-- "Create Backup" button only -->
-            <p *ngIf="button.title === 'Create Backup'">
-              <ng-container
-                *ngIf="patch.data['server-info']['status-info'] as statusInfo"
-              >
-                <ion-text
-                  color="warning"
-                  *ngIf="!statusInfo['backing-up'] && !statusInfo['update-progress']"
-                >
-                  Last Backup: {{ patch.data['server-info']['last-backup'] ?
-                  (patch.data['server-info']['last-backup'] | date: 'short') :
-                  'never' }}
-                </ion-text>
-                <span *ngIf="!!statusInfo['backing-up']" class="inline">
-                  <ion-spinner
-                    color="success"
-                    style="height: 12px; width: 12px; margin-right: 6px"
-                  ></ion-spinner>
-                  <ion-text color="success"> Backing up </ion-text>
-                </span>
-              </ng-container>
-            </p>
-            <!-- "Software Update" button only -->
-            <p *ngIf="button.title === 'Software Update'">
-              <ng-container *ngIf="button.disabled | async; else enabled">
-                <ion-text
-                  *ngIf="patch.data['server-info']['status-info'].updated"
-                  class="inline"
-                  color="warning"
-                >
-                  Update Complete, Restart to apply changes
-                </ion-text>
-              </ng-container>
-              <ng-template #enabled>
+              <!-- "Create Backup" button only -->
+              <p *ngIf="button.title === 'Create Backup'">
                 <ng-container
-                  *ngIf="eosService.updateAvailable$ | async; else check"
+                  *ngIf="patch.data['server-info']['status-info'] as statusInfo"
                 >
-                  <ion-text class="inline" color="success">
-                    <ion-icon name="rocket-outline"></ion-icon>
-                    Update Available
+                  <ion-text
+                    color="warning"
+                    *ngIf="!statusInfo['backing-up'] && !statusInfo['update-progress']"
+                  >
+                    Last Backup: {{ patch.data['server-info']['last-backup'] ?
+                    (patch.data['server-info']['last-backup'] | date: 'short') :
+                    'never' }}
+                  </ion-text>
+                  <span *ngIf="!!statusInfo['backing-up']" class="inline">
+                    <ion-spinner
+                      color="success"
+                      style="height: 12px; width: 12px; margin-right: 6px"
+                    ></ion-spinner>
+                    <ion-text color="success"> Backing up </ion-text>
+                  </span>
+                </ng-container>
+              </p>
+              <!-- "Software Update" button only -->
+              <p *ngIf="button.title === 'Software Update'">
+                <ng-container *ngIf="button.disabled | async; else enabled">
+                  <ion-text
+                    *ngIf="patch.data['server-info']['status-info'].updated"
+                    class="inline"
+                    color="warning"
+                  >
+                    Update Complete, Restart to apply changes
                   </ion-text>
                 </ng-container>
-                <ng-template #check>
-                  <ion-text class="inline" color="dark">
-                    <ion-icon name="refresh"></ion-icon>
-                    Check for updates
-                  </ion-text>
+                <ng-template #enabled>
+                  <ng-container
+                    *ngIf="eosService.updateAvailable$ | async; else check"
+                  >
+                    <ion-text class="inline" color="success">
+                      <ion-icon name="rocket-outline"></ion-icon>
+                      Update Available
+                    </ion-text>
+                  </ng-container>
+                  <ng-template #check>
+                    <ion-text class="inline" color="dark">
+                      <ion-icon name="refresh"></ion-icon>
+                      Check for updates
+                    </ion-text>
+                  </ng-template>
                 </ng-template>
-              </ng-template>
-            </p>
-          </ion-label>
-        </ion-item>
+              </p>
+            </ion-label>
+          </ion-item>
+        </ng-container>
       </div>
     </ion-item-group>
   </ng-template>

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts

@@ -16,6 +16,7 @@ import { wizardModal } from 'src/app/components/install-wizard/install-wizard.co
 import { exists, isEmptyObject, ErrorToastService } from '@start9labs/shared'
 import { EOSService } from 'src/app/services/eos.service'
 import { ServerStatus } from 'src/app/services/patch-db/data-model'
+import { LocalStorageService } from 'src/app/services/local-storage.service'
 
 @Component({
   selector: 'server-show',
@@ -25,6 +26,7 @@ import { ServerStatus } from 'src/app/services/patch-db/data-model'
 export class ServerShowPage {
   ServerStatus = ServerStatus
   hasRecoveredPackage: boolean
+  clicks = 0
 
   constructor(
     private readonly alertCtrl: AlertController,
@@ -37,6 +39,7 @@ export class ServerShowPage {
     private readonly route: ActivatedRoute,
     public readonly eosService: EOSService,
     public readonly patch: PatchDbService,
+    public readonly localStorageService: LocalStorageService,
   ) {}
 
   ngOnInit() {
@@ -143,6 +146,35 @@ export class ServerShowPage {
     await alert.present()
   }
 
+  async presentAlertRepairDisk() {
+    const alert = await this.alertCtrl.create({
+      header: 'Repair Disk',
+      message: new IonicSafeString(
+        `<ion-text color="warning">Warning:</ion-text> <p>This action will attempt to preform a disk repair operation and system reboot. No data will be deleted. This action should only be executed if directed by a Start9 support specialist. We recommend backing up your device before preforming this action.</p><p>If anything happens to the device during the reboot (between the bep and chime), such as loosing power, a power surge, unplugging the drive, or unplugging the Embassy, the filesystem *will* be in an unrecoverable state. Please proceed with caution.</p>`,
+      ),
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Repair',
+          handler: () => {
+            try {
+              this.embassyApi.repairDisk({}).then(_ => {
+                this.restart()
+              })
+            } catch (e) {
+              this.errToast.present(e)
+            }
+          },
+          cssClass: 'enter-click',
+        },
+      ],
+    })
+    await alert.present()
+  }
+
   private async restart() {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
@@ -305,7 +337,7 @@ export class ServerShowPage {
       {
         title: 'Marketplace Settings',
         description: 'Add or remove marketplaces',
-        icon: 'storefront',
+        icon: 'storefront-outline',
         action: () =>
           this.navCtrl.navigateForward(['marketplaces'], {
             relativeTo: this.route,
@@ -418,12 +450,31 @@ export class ServerShowPage {
         detail: false,
         disabled: of(false),
       },
+      {
+        title: 'Repair Disk',
+        description: '',
+        icon: 'medkit-outline',
+        action: () => this.presentAlertRepairDisk(),
+        detail: false,
+        disabled: of(false),
+      },
     ],
   }
 
   asIsOrder() {
     return 0
   }
+
+  async addClick() {
+    this.clicks++
+    if (this.clicks >= 5) {
+      this.clicks = 0
+      const newVal = await this.localStorageService.toggleShowDiskRepair()
+    }
+    setTimeout(() => {
+      this.clicks = Math.max(this.clicks - 1, 0)
+    }, 10000)
+  }
 }
 
 interface ServerSettings {