Refine updates page.

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'       => [

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));

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

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>

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);

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',

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(),
             ],
         );

src/Notification/Check/UpdateCheck.php

@@ -38,8 +38,10 @@ final class UpdateCheck
             return;
         }
 
-        $actionLabel = __('Update Instructions');
+        $router = $event->getRequest()->getRouter();
-        $actionUrl = Version::UPDATE_URL;
+
+        $actionLabel = __('Update AzuraCast');
+        $actionUrl = $router->named('admin:updates:index');
 
         $releaseChannel = $this->version->getReleaseChannelEnum();