From a4117da33d43eac2e528d75ed8ed3f8bf3e89fae Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Thu, 5 Jan 2023 13:21:23 -0600
Subject: [PATCH] Refine updates page.

---
 config/menus/admin.php                    |   9 +-
 config/routes/admin.php                   |   4 +
 config/routes/api_admin.php               |  10 +++
 frontend/vue/components/Admin/Updates.vue | 101 +++++++++++++++++-----
 frontend/vue/pages/Admin/Updates.js       |   5 ++
 frontend/webpack.config.js                |   1 +
 src/Controller/Admin/UpdatesAction.php    |   3 +-
 src/Notification/Check/UpdateCheck.php    |   6 +-
 8 files changed, 111 insertions(+), 28 deletions(-)
 create mode 100644 frontend/vue/pages/Admin/Updates.js

diff --git a/config/menus/admin.php b/config/menus/admin.php
index 18ddbed80..078680d20 100644
--- a/config/menus/admin.php
+++ b/config/menus/admin.php
@@ -36,16 +36,21 @@ return static function (App\Event\BuildAdminMenu $e) {
                         'url' => $router->named('admin:storage_locations:index'),
                         'permission' => GlobalPermissions::StorageLocations,
                     ],
-                    'backups'           => [
+                    'backups' => [
                         'label' => __('Backups'),
                         'url' => $router->named('admin:backups:index'),
                         'permission' => GlobalPermissions::Backups,
                     ],
-                    'debug'             => [
+                    'debug' => [
                         'label' => __('System Debugger'),
                         'url' => $router->named('admin:debug:index'),
                         'permission' => GlobalPermissions::All,
                     ],
+                    'updates' => [
+                        'label' => __('Update AzuraCast'),
+                        'url' => $router->named('admin:updates:index'),
+                        'permission' => GlobalPermissions::All,
+                    ],
                 ],
             ],
             'users'       => [
diff --git a/config/routes/admin.php b/config/routes/admin.php
index 6e310bcf7..1a9fdc81e 100644
--- a/config/routes/admin.php
+++ b/config/routes/admin.php
@@ -115,6 +115,10 @@ return static function (RouteCollectorProxy $app) {
                 ->setName('admin:storage_locations:index')
                 ->add(new Middleware\Permissions(GlobalPermissions::StorageLocations));
 
+            $group->get('/updates', Controller\Admin\UpdatesAction::class)
+                ->setName('admin:updates:index')
+                ->add(new Middleware\Permissions(GlobalPermissions::All));
+
             $group->get('/users', Controller\Admin\UsersAction::class)
                 ->setName('admin:users:index')
                 ->add(new Middleware\Permissions(GlobalPermissions::All));
diff --git a/config/routes/api_admin.php b/config/routes/api_admin.php
index ec280949a..3a759c45e 100644
--- a/config/routes/api_admin.php
+++ b/config/routes/api_admin.php
@@ -211,6 +211,16 @@ return static function (RouteCollectorProxy $group) {
                         ->setName('api:admin:log');
                 }
             )->add(new Middleware\Permissions(GlobalPermissions::Logs));
+
+            $group->group(
+                '/updates',
+                function (RouteCollectorProxy $group) {
+                    $group->get('', Controller\Api\Admin\Updates\GetUpdatesAction::class)
+                        ->setName('api:admin:updates');
+
+                    $group->put('', Controller\Api\Admin\Updates\PutUpdatesAction::class);
+                }
+            )->add(new Middleware\Permissions(GlobalPermissions::All));
         }
     );
 };
diff --git a/frontend/vue/components/Admin/Updates.vue b/frontend/vue/components/Admin/Updates.vue
index 8c5f421ff..062a803bb 100644
--- a/frontend/vue/components/Admin/Updates.vue
+++ b/frontend/vue/components/Admin/Updates.vue
@@ -1,15 +1,36 @@
 <template>
+    <h2 class="outside-card-header mb-1">
+        {{ $gettext('Update AzuraCast') }}
+    </h2>
+
     <div class="row">
         <div class="col col-md-8">
-            <section class="card mb-4" role="region">
+            <section
+                class="card mb-4"
+                role="region"
+            >
                 <div class="card-header bg-primary-dark">
                     <h3 class="card-title">
                         {{ $gettext('Update Details') }}
                     </h3>
                 </div>
                 <div class="card-body">
-
-
+                    <div
+                        v-if="needsUpdates"
+                        class="text-warning"
+                    >
+                        {{
+                            $gettext('Your installation needs to be updated. Updating is recommended for performance and security improvements.')
+                        }}
+                    </div>
+                    <div
+                        v-else
+                        class="text-success"
+                    >
+                        {{
+                            $gettext('Your installation is up to date! No update is required.')
+                        }}
+                    </div>
                 </div>
                 <div class="card-actions buttons">
                     <a
@@ -17,34 +38,37 @@
                         href="#"
                         @click.prevent="checkForUpdates()"
                     >
-                        <icon icon="sync"></icon>
+                        <icon icon="sync" />
                         {{ $gettext('Check for Updates') }}
                     </a>
                 </div>
             </section>
         </div>
         <div class="col col-md-4">
-            <section class="card mb-4" role="region">
+            <section
+                class="card mb-4"
+                role="region"
+            >
                 <div class="card-header bg-primary-dark">
                     <h3 class="card-title">
                         {{ $gettext('Release Channel') }}
                     </h3>
                 </div>
                 <div class="card-body">
-                    <p class="card-body">
+                    <p class="card-text">
                         {{ $gettext('Your installation is currently on this release channel:') }}
                     </p>
-                    <p class="card-body typography-subheading">
+                    <p class="card-text typography-subheading">
                         {{ langReleaseChannel }}
                     </p>
-
                 </div>
                 <div class="card-actions buttons">
                     <a
                         class="btn btn-outline-info"
-                        href="https://docs.azuracast.com/en/getting-started/updates/release-channel"
+                        href="https://docs.azuracast.com/en/getting-started/updates/release-channels"
+                        target="_blank"
                     >
-                        <icon icon="info"></icon>
+                        <icon icon="info" />
                         {{ $gettext('About Release Channels') }}
                     </a>
                 </div>
@@ -53,7 +77,10 @@
     </div>
     <div class="row">
         <div class="col col-md-6">
-            <section class="card mb-4" role="region">
+            <section
+                class="card mb-4"
+                role="region"
+            >
                 <div class="card-header bg-primary-dark">
                     <h3 class="card-title">
                         {{ $gettext('Update AzuraCast via Web') }}
@@ -62,18 +89,32 @@
                 <template v-if="enableWebUpdates">
                     <div class="card-body">
                         <p class="card-text">
-
+                            {{
+                                $gettext('For simple updates where you want to keep your current configuration, you can update directly via your web browser. You will be disconnected from the web interface and listeners will be disconnected from all stations.')
+                            }}
+                        </p>
+                        <p class="card-text">
+                            {{
+                                $gettext('Backing up your installation is strongly recommended before any update.')
+                            }}
                         </p>
-
                     </div>
                     <div class="card-actions buttons">
+                        <a
+                            class="btn btn-outline-default"
+                            :href="backupUrl"
+                            target="_blank"
+                        >
+                            <icon icon="cloud_sync" />
+                            {{ $gettext('Backup') }}
+                        </a>
                         <a
                             class="btn btn-outline-success"
                             :data-confirm-title="$gettext('Update AzuraCast? Your installation will restart.')"
                             href="#"
                             @click.prevent="doUpdate()"
                         >
-                            <icon icon="update"></icon>
+                            <icon icon="update" />
                             {{ $gettext('Update AzuraCast via Web') }}
                         </a>
                     </div>
@@ -90,7 +131,10 @@
             </section>
         </div>
         <div class="col col-md-6">
-            <section class="card mb-4" role="region">
+            <section
+                class="card mb-4"
+                role="region"
+            >
                 <div class="card-header bg-primary-dark">
                     <h3 class="card-title">
                         {{ $gettext('Manual Updates') }}
@@ -107,8 +151,9 @@
                     <a
                         class="btn btn-outline-info"
                         href="https://docs.azuracast.com/en/getting-started/updates"
+                        target="_blank"
                     >
-                        <icon icon="info"></icon>
+                        <icon icon="info" />
                         {{ $gettext('Update Instructions') }}
                     </a>
                 </div>
@@ -119,7 +164,7 @@
 
 <script setup>
 import {computed, ref} from "vue";
-import Icon from "~/components/InlinePlayer.vue";
+import Icon from "~/components/Common/Icon.vue";
 import {useTranslate} from "~/vendor/gettext";
 import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
@@ -135,6 +180,10 @@ const props = defineProps({
             return {};
         }
     },
+    backupUrl: {
+        type: String,
+        required: true
+    },
     updatesApiUrl: {
         type: String,
         required: true
@@ -155,26 +204,32 @@ const langReleaseChannel = computed(() => {
         : $gettext('Rolling Release');
 });
 
+const needsUpdates = computed(() => {
+    if (props.releaseChannel === 'stable') {
+        return updateInfo.value.needs_release_update;
+    } else {
+        return updateInfo.value.needs_rolling_update;
+    }
+});
+
 const {wrapWithLoading, notifySuccess} = useNotify();
 const {axios} = useAxios();
 
 const checkForUpdates = () => {
     wrapWithLoading(
-        axios.get(props.restartStatusUrl)
+        axios.get(props.updatesApiUrl)
     ).then((resp) => {
-
-
+        updateInfo.value = resp.data;
     });
 };
 
 const doUpdate = () => {
     wrapWithLoading(
-        axios.put(props.restartStatusUrl)
+        axios.put(props.updatesApiUrl)
     ).then(() => {
         notifySuccess(
             $gettext('Update started. Your installation will restart shortly.')
         );
     });
-}
-
+};
 </script>
diff --git a/frontend/vue/pages/Admin/Updates.js b/frontend/vue/pages/Admin/Updates.js
new file mode 100644
index 000000000..e7349dd06
--- /dev/null
+++ b/frontend/vue/pages/Admin/Updates.js
@@ -0,0 +1,5 @@
+import initBase from '~/base.js';
+
+import AdminUpdates from '~/components/Admin/Updates.vue';
+
+export default initBase(AdminUpdates);
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 9512117a3..c5e523e91 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -23,6 +23,7 @@ module.exports = {
         AdminStereoTool: '~/pages/Admin/StereoTool.js',
         AdminStations: '~/pages/Admin/Stations.js',
         AdminStorageLocations: '~/pages/Admin/StorageLocations.js',
+        AdminUpdates: '~/pages/Admin/Updates.js',
         AdminUsers: '~/pages/Admin/Users.js',
         PublicFullPlayer: '~/pages/Public/FullPlayer.js',
         PublicHistory: '~/pages/Public/History.js',
diff --git a/src/Controller/Admin/UpdatesAction.php b/src/Controller/Admin/UpdatesAction.php
index 7198f2102..5984d8046 100644
--- a/src/Controller/Admin/UpdatesAction.php
+++ b/src/Controller/Admin/UpdatesAction.php
@@ -34,7 +34,8 @@ final class UpdatesAction
             props: [
                 'releaseChannel' => $this->version->getReleaseChannelEnum()->value,
                 'initialUpdateInfo' => $settings->getUpdateResults(),
-                'updatesApiUrl' => $router->fromHere('api:admin:updates'),
+                'backupUrl' => $router->named('admin:backups:index'),
+                'updatesApiUrl' => $router->named('api:admin:updates'),
                 'enableWebUpdates' => $this->environment->enableWebUpdater(),
             ],
         );
diff --git a/src/Notification/Check/UpdateCheck.php b/src/Notification/Check/UpdateCheck.php
index f72f67120..f9a4c2f78 100644
--- a/src/Notification/Check/UpdateCheck.php
+++ b/src/Notification/Check/UpdateCheck.php
@@ -38,8 +38,10 @@ final class UpdateCheck
             return;
         }
 
-        $actionLabel = __('Update Instructions');
-        $actionUrl = Version::UPDATE_URL;
+        $router = $event->getRequest()->getRouter();
+
+        $actionLabel = __('Update AzuraCast');
+        $actionUrl = $router->named('admin:updates:index');
 
         $releaseChannel = $this->version->getReleaseChannelEnum();