Upgrade planet using nginx and the ui (fixes #1524) (#1599)

.travis/travis_utils.sh

@@ -58,7 +58,11 @@ prepare_planet_rpi(){
   docker create --name reuse-artifact $DOCKER_ORG/$DOCKER_REPO_TEST:$VERSION-$BRANCH-$COMMIT
   mkdir -p ./ng-app/dist
   docker export reuse-artifact > reuse-artifact.tar
-  tar -xvf reuse-artifact.tar -C ./ng-app/dist
+  # this used to had verbose mode,
+  # which was been removed due to problems when building travis images.
+  # we found the solution here
+  # https://stackoverflow.com/questions/37540792/jenkins-script-tar-write-error
+  tar -xf reuse-artifact.tar -C ./ng-app/dist
 }
 
 prepare_db_init_rpi(){

docker/planet.yml

@@ -15,6 +15,8 @@ services:
     image: treehouses/planet:latest
     ports:
       - "80:80"
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock"
     environment:
       - MULTIPLE_IPS=true
       - HOST_PROTOCOL=http

docker/planet/Dockerfile

@@ -22,6 +22,12 @@ FROM nginx:1.13.3-alpine
 COPY docker/planet/default.conf /etc/nginx/conf.d/
 RUN rm -rf /usr/share/nginx/html/*
 COPY --from=builder /ng-app/dist /usr/share/nginx/html
+RUN apk add --update \
+    fcgiwrap \
+    spawn-fcgi \
+    nano \
+    curl
 COPY docker/planet/scripts/docker-entrypoint.sh ./
+COPY docker/planet/upgrade.sh /usr/share/nginx/html
 
 CMD ./docker-entrypoint.sh

docker/planet/default.conf

@@ -47,4 +47,9 @@ server {
     try_files $uri$args /eng/index.html =404;
   }
 
+  location = /upgrade {
+    include fastcgi_params;
+    fastcgi_param SCRIPT_FILENAME "$document_root/upgrade.sh";
+    fastcgi_pass unix://run/fcgi.sock;
+  }
 }

docker/planet/rpi-Dockerfile

@@ -2,6 +2,14 @@ FROM tobi312/rpi-nginx:alpine
 COPY docker/planet/default.conf /etc/nginx/conf.d/
 RUN rm -rf /usr/share/nginx/html/*
 COPY ./ng-app/dist/usr/share/nginx/html /usr/share/nginx/html
+
+RUN apk add --update \
+    fcgiwrap \
+    spawn-fcgi \
+    nano \
+    curl
 COPY docker/planet/scripts/docker-entrypoint.sh ./
+COPY docker/planet/upgrade.sh /usr/share/nginx/html
+
 
 CMD ./docker-entrypoint.sh

docker/planet/scripts/docker-entrypoint.sh

@@ -20,5 +20,5 @@ fi
 sed -i -e "s#planet-db-port#$DB_PORT#g" /usr/share/nginx/html/**/main*
 sed -i -e "s#planet-center-address#$CENTER_ADDRESS#g" /usr/share/nginx/html/**/main*
 
+spawn-fcgi -s /run/fcgi.sock -U nginx -G nginx /usr/bin/fcgiwrap
 nginx -g "daemon off;"
-

docker/planet/upgrade.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+echo "HTTP/1.0 200 OK"
+echo "Content-type: text/plain"
+echo ""
+
+PULL_IMAGES=(
+    treehouses/planet:db-init
+    treehouses/planet:latest
+    treehouses/couchdb:2.1.1
+)
+
+for image in "${PULL_IMAGES[@]}" ; do
+  curl --unix-socket /var/run/docker.sock -X POST "http://localhost/images/create?fromImage=$image"
+done

src/app/feedback/feedback.directive.ts

@@ -60,6 +60,9 @@ const dialogFieldOptions = [
 })
 export class FeedbackDirective {
   @Input() feedbackOf: any = {};
+  @Input() message = '';
+  @Input() type = '';
+  @Input() priority = '';
 
   constructor(
     private userService: UserService,
@@ -100,9 +103,9 @@ export class FeedbackDirective {
     const type = 'feedback';
     const fields = dialogFieldOptions;
     const formGroup = {
-      priority: [ '', Validators.required ],
-      type: [ '', Validators.required ],
-      message: [ '', Validators.required ]
+      priority: [ this.priority, Validators.required ],
+      type: [ this.type, Validators.required ],
+      message: [ this.message, Validators.required ]
     };
     this.dialogsFormService
       .confirm(title, fields, formGroup)

src/app/home/home-router.module.ts

@@ -6,6 +6,7 @@ import { CommunityComponent } from '../community/community.component';
 import { NotificationsComponent } from '../notifications/notifications.component';
 import { SubmissionsComponent } from '../submissions/submissions.component';
 import { SubmissionsModule } from '../submissions/submissions.module';
+import { UpgradeComponent } from '../upgrade/upgrade.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent,
@@ -20,6 +21,7 @@ const routes: Routes = [
       { path: 'meetups', loadChildren: '../meetups/meetups.module#MeetupsModule' },
       { path: 'notifications', component: NotificationsComponent },
       { path: 'submissions', loadChildren: '../submissions/submissions.module#SubmissionsModule' },
+      { path: 'upgrade', component: UpgradeComponent },
       { path: 'teams', loadChildren: '../teams/teams.module#TeamsModule' }
     ]
   }

src/app/home/home.module.ts

@@ -15,6 +15,7 @@ import { NotificationsComponent } from '../notifications/notifications.component
 import { PlanetDialogsModule } from '../shared/dialogs/planet-dialogs.module';
 import { PulsateIconDirective } from './pulsate-icon.directive';
 import { PlanetLanguageModule } from '../shared/planet-language.module';
+import { UpgradeComponent } from '../upgrade/upgrade.component';
 
 @NgModule({
   imports: [
@@ -35,7 +36,8 @@ import { PlanetLanguageModule } from '../shared/planet-language.module';
     CommunityComponent,
     DashboardTileComponent,
     NotificationsComponent,
-    PulsateIconDirective
+    PulsateIconDirective,
+    UpgradeComponent
   ]
 })
 export class HomeModule {}

src/app/manager-dashboard/manager-dashboard.component.html

@@ -22,6 +22,7 @@
       Get Resources ({{pushedItems?.resources?.length}})
     </button>
     <a routerLink="sync" *ngIf="requestStatus === 'accepted'" i18n mat-raised-button>Manage Sync</a>
+    <a routerLink="/upgrade" i18n mat-raised-button>Upgrade</a>
   </div>
   <div class="view-container" *ngIf="planetType !== 'community'">
     <h3 i18n>Send On Accept</h3><br />

src/app/upgrade/upgrade.component.html

@@ -0,0 +1,45 @@
+
+<div class="space-container">
+  <div class="upgrade_buttons">
+      <button mat-stroked-button color="primary" (click)="start()" [disabled]="!enabled || done">{{ message }}</button>
+  </div>
+  <div style="height: 5px; padding: 5px;" *ngIf="!done">
+      <mat-progress-bar mode="indeterminate" *ngIf="working"></mat-progress-bar>
+  </div>
+
+  <pre class="upgrade_output" [innerHTML]="output"></pre>
+
+  <mat-card class="upgrade_mat-card" *ngIf="done && !error">
+      <mat-card-header>
+        <div mat-card-avatar class="upgrade_mat-card-icon"></div>
+        <mat-card-title>Success!</mat-card-title>
+        <mat-card-subtitle>Reboot is required</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <p>
+            The upgrade of the system has been done successfully.<br>
+            Please reboot your Raspberry Pi to apply changes
+        </p>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-raised-button color="primary" routerLink="/">OK</button>
+      </mat-card-actions>
+  </mat-card>
+
+  <mat-card class="upgrade_mat-card" *ngIf="error && done">
+      <mat-card-header>
+        <div mat-card-avatar class="upgrade_mat-card-icon"></div>
+        <mat-card-title>Error :(</mat-card-title>
+        <mat-card-subtitle>Please let us know</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <p>
+            There has been an error when trying to upgrade the system
+        </p>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-raised-button color="primary" planetFeedback [message]="cleanOutput" [type]="'Bug'" [priority]="'Yes'"><mat-icon>feedback</mat-icon> Send feedback</button>
+      </mat-card-actions>
+  </mat-card>
+
+</div>

src/app/upgrade/upgrade.component.ts

@@ -0,0 +1,72 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+
+@Component({
+  templateUrl: './upgrade.component.html',
+  styleUrls: [ './upgrade.scss' ],
+  encapsulation: ViewEncapsulation.None
+})
+export class UpgradeComponent {
+  enabled: Boolean = true;
+  message = 'Start upgrade';
+  output = '';
+  working: Boolean = false;
+  done: Boolean = false;
+  error: Boolean = false;
+  cleanOutput = '';
+
+  constructor(private http: HttpClient) {
+    this.addLine('Not started');
+  }
+
+  start() {
+    this.enabled = false;
+    this.message = 'Upgrading';
+    this.working = true;
+    this.addLine('Server request started');
+    this.upgrade();
+  }
+
+  upgrade() {
+    this.http.get(environment.upgradeAddress, { responseType: 'text' }).subscribe(result => {
+      result.split('\n').forEach(line => {
+        this.addLine(line, false, true);
+      });
+      this.message = 'Success';
+      this.error = false;
+      this.done = true;
+    }, err => {
+      this.addLine('An error ocurred:', true);
+      JSON.stringify(err, null, 1).split('\n').forEach(line => {
+        this.addLine(line, true);
+      });
+      this.working = false;
+      this.message = 'Start upgrade';
+      this.error = true;
+      this.done = true;
+    });
+  }
+
+  getDateTime () {
+    const date = new Date();
+    const d = ('0'  + date.getDate()).slice(-2);
+    const M = ('0'  + date.getMonth()).slice(-2);
+    const Y = date.getFullYear();
+    const h = ('0'  + date.getHours()).slice(-2);
+    const m = ('0'  + date.getMinutes()).slice(-2);
+    const s = ('0'  + date.getSeconds()).slice(-2);
+    return `[${d}/${M}/${Y} ${h}:${m}:${s}]`;
+  }
+
+  addLine(string, error?, success?) {
+    if (!string.length) { return; }
+    string = string.trim();
+    const dTime = this.getDateTime();
+    let start = '<span>';
+    if (error) { start = '<span class=\'upgrade_error\'>'; }
+    if (success) { start = '<span class=\'upgrade_success\'>'; }
+    this.output += `${start}${dTime} ${string}</span>\n`;
+    this.cleanOutput += `${dTime} ${string}\n`;
+  }
+}

src/app/upgrade/upgrade.scss

@@ -0,0 +1,29 @@
+.upgrade_error {
+    color: #C70039;
+}
+
+.upgrade_success {
+  color: #8DC75F;
+}
+
+.upgrade_buttons button {
+  margin: 0px 0px 0px 2px;
+}
+
+.upgrade_mat-card {
+  max-width: 400px;
+}
+
+.upgrade_mat-card-icon {
+  background-image: url('/assets/OLE_Logo1.png');
+  background-size: cover;
+}
+
+.upgrade_output {
+  border: 1px solid #D5D5D5;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  max-height: 300px;
+  min-height: 300px;
+  overflow: auto;
+}

src/environments/environment.prod.ts

@@ -5,5 +5,6 @@ export const environment = {
   couchAddress: 'planet-db-host:planet-db-port/',
   centerAddress: 'planet-center-address',
   centerProtocol: 'https',
-  parentProtocol: 'https'
+  parentProtocol: 'https',
+  upgradeAddress: window.location.origin + '/upgrade'
 };

src/environments/environment.test.ts

@@ -4,5 +4,6 @@ export const environment = {
   couchAddress: 'http://127.0.0.1:5984/',
   centerAddress: 'earth.ole.org:2200',
   centerProtocol: 'https',
-  parentProtocol: 'https'
+  parentProtocol: 'https',
+  upgradeAddress: window.location.origin + '/upgrade'
 };

src/environments/environment.ts

@@ -9,5 +9,6 @@ export const environment = {
   couchAddress: window.location.protocol + '//' + window.location.hostname + ':2200/',
   centerAddress: 'earth.ole.org:2200',
   centerProtocol: 'https',
-  parentProtocol: 'https'
+  parentProtocol: 'https',
+  upgradeAddress: window.location.origin + '/upgrade'
 };