add SystemUpdate view/route

app/src/i18n/locales/en.json

@@ -72,7 +72,7 @@
     "confirm_uninstall": "Are you sure you want to uninstall %s?",
     "confirm_update_apps": "Are you sure you want to update all applications?",
     "confirm_update_system": "Are you sure you want to update all system packages?",
-    "confirm_update_specific_app": "Are you sure you want to update %s?",
+    "confirm_update_specific_app": "Are you sure you want to update {app}?",
     "confirm_upnp_enable": "Are you sure you want to enable UPnP?",
     "confirm_upnp_disable": "Are you sure you want to disable UPnP?",
     "confirm_reboot_action_reboot": "Are you sure you want to reboot your server?",
@@ -130,7 +130,7 @@
         "firewall_port_already": "Port {port} is already {state} (protocol: {protocol}; connection: {connection})"
     },
     "form_input_example": "Example: %s",
-    "from_to": "from %s to %s",
+    "from_to": "from {0} to {1}",
     "good_practices_about_admin_password": "You are now about to define a new admin password. The password should be at least 8 characters - though it is good practice to use longer password (i.e. a passphrase) and/or to use various kind of characters (uppercase, lowercase, digits and special characters).",
     "good_practices_about_user_password": "You are now about to define a new user password. The password should be at least 8 characters - though it is good practice to use longer password (i.e. a passphrase) and/or to use various kind of characters (uppercase, lowercase, digits and special characters).",
     "group": "Group",

app/src/router/routes.js

@@ -146,6 +146,20 @@ const routes = [
     }
   },
 
+  /* ────────────────╮
+   │  SYSTEM UPDATE  │
+   ╰──────────────── */
+  {
+    name: 'update',
+    path: '/update',
+    component: () => import(/* webpackChunkName: "views/update" */ '@/views/update/SystemUpdate'),
+    meta: {
+      breadcrumb: [
+        { name: 'update', trad: 'system_update' }
+      ]
+    }
+  },
+
   /* ──────────╮
    │  SERVICE  │
    ╰────────── */

app/src/views/update/SystemUpdate.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="system-update">
+    <!-- FIXME add perform update button ? -->
+    <!-- <div class="actions">
+      <div class="buttons ml-auto">
+        <b-button variant="success" @click="performUpdate">
+          <icon iname="refresh" /> {{ $t('system_update') }}
+        </b-button>
+      </div>
+    </div> -->
+
+    <!-- MIGRATIONS WARN -->
+    <b-alert variant="warning" :show="migrationsNotDone">
+      <icon iname="exclamation-triangle" /> <span v-html="$t('pending_migrations')" />
+    </b-alert>
+
+    <!-- SYSTEM UPGRADE -->
+    <b-card no-body>
+      <template v-slot:header>
+        <h2><icon iname="server" /> {{ $t('system') }}</h2>
+      </template>
+
+      <b-list-group v-if="system" flush>
+        <b-list-group-item
+          v-for="{ name, current_version, new_version } in system" :key="name"
+        >
+          <h5 class="m-0">{{ name }} <small>({{ $t('from_to', [current_version, new_version]) }})</small></h5>
+        </b-list-group-item>
+      </b-list-group>
+
+      <b-card-body v-else-if="system === null">
+        <span class="text-success"><icon iname="check-circle" /> {{ $t('system_packages_nothing') }}</span>
+      </b-card-body>
+
+      <template v-if="system" v-slot:footer>
+        <div class="d-flex justify-content-end">
+          <b-button
+            v-b-modal.confirm-upgrade variant="success"
+            v-t="'system_upgrade_all_packages_btn'"
+            @click="action = ['system']"
+          />
+        </div>
+      </template>
+    </b-card>
+
+    <!-- APPS UPGRADE -->
+    <b-card no-body>
+      <template v-slot:header>
+        <h2><icon iname="cubes" /> {{ $t('applications') }}</h2>
+      </template>
+
+      <b-list-group v-if="apps" flush>
+        <b-list-group-item
+          v-for="{ label, id, current_version, new_version } in apps" :key="id"
+          class="d-flex justify-content-between align-items-center"
+        >
+          <h5 class="m-0">{{ label }} <small>({{ id }}) {{ $t('from_to', [current_version, new_version]) }}</small></h5>
+
+          <b-button
+            v-b-modal.confirm-upgrade variant="success" size="sm"
+            v-t="'system_upgrade_btn'"
+            @click="action = ['specific_app', id]"
+          />
+        </b-list-group-item>
+      </b-list-group>
+
+      <b-card-body v-else-if="apps === null">
+        <span class="text-success"><icon iname="check-circle" /> {{ $t('system_apps_nothing') }}</span>
+      </b-card-body>
+
+      <template v-if="apps" v-slot:footer>
+        <div class="d-flex justify-content-end">
+          <b-button
+            v-b-modal.confirm-upgrade variant="success"
+            v-t="'system_upgrade_all_applications_btn'"
+            @click="action = ['apps']"
+          />
+        </div>
+      </template>
+    </b-card>
+
+    <!-- UPGRADE CONFIRM MODAL -->
+    <b-modal
+      v-if="action"
+      id="confirm-upgrade" centered
+      body-bg-variant="danger" body-text-variant="light"
+      @ok="performUpgrade" hide-header
+    >
+      {{ $t('confirm_update_' + action[0], action[1] ? { app: action[1] } : {}) }}
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import api from '@/helpers/api'
+
+export default {
+  name: 'SystemUpdate',
+
+  data () {
+    return {
+      action: undefined,
+      app: undefined,
+      // api data
+      migrationsNotDone: undefined,
+      system: undefined,
+      apps: undefined
+    }
+  },
+
+  methods: {
+    async fetchData () {
+      api.get('migrations?pending').then(({ migrations }) => {
+        this.migrationsNotDone = migrations.length !== 0
+      })
+    },
+
+    performUpdate () {
+      api.put('update').then(({ apps, system }) => {
+        this.apps = apps.length !== 0 ? apps : null
+        this.system = system.length !== 0 ? apps : null
+      })
+    },
+
+    performUpgrade () {
+      const [type, id] = this.action
+      const uri = type === 'specific_app'
+        ? 'upgrade/apps?app=' + id
+        : 'upgrade?' + type
+
+      api.put(uri).then(() => {
+        this.$router.push({ name: 'tool-logs' })
+      })
+    }
+  },
+
+  created () {
+    this.fetchData()
+    // FIXME Do not perform directly the update ?
+    this.performUpdate()
+  }
+}
+</script>