refactor: downgrades working + reboot notice

web/components/HeaderOsVersion.ce.vue

@@ -21,7 +21,7 @@ const updateOsStore = useUpdateOsStore();
 const updateOsActionsStore = useUpdateOsActionsStore();
 
 const { osVersion } = storeToRefs(serverStore);
-const { available, parsedReleaseTimestamp } = storeToRefs(updateOsStore);
+const { available } = storeToRefs(updateOsStore);
 const { rebootType } = storeToRefs(updateOsActionsStore);
 </script>
 
@@ -45,7 +45,7 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
 
     <a href="/Tools/Update" class="group" :title="t('Go to Tools > Update')">
       <UiBadge
-        v-if="available && rebootType === 'none'"
+        v-if="available && rebootType === ''"
         color="orange"
         :icon="BellAlertIcon"
         size="12px"
@@ -53,7 +53,7 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
         {{ t('Update Available') }}
       </UiBadge>
       <UiBadge
-        v-else-if="rebootType !== 'none'"
+        v-else-if="rebootType !== ''"
         :color="'yellow'"
         :icon="ExclamationTriangleIcon"
         size="12px"

web/components/UpdateOs.ce.vue

@@ -1,9 +1,21 @@
 <script lang="ts" setup>
 /**
- * @todo require keyfile to be set before allowing user to check for updates
- * @todo require keyfile to update
- * @todo require valid guid / server state to update
+ * @todo how are we going to update test, beta, and stable releases for internal testing?
+ * @todo after install / downgrade detect if third-party drivers are installed and tell users to wait for a user to wait for a new notification
+ *
+ * run exec("ps aux | grep -E "inotifywait -q /boot/changes.txt -e move_self,delete_self" | grep -v "grep -E inotifywait" | awk '{print $2}'");
+ * if this returns are value assume we have third-party drivers installed and tell the user to wait for a new notification
+ *
+ * view https://s3.amazonaws.com/dnld.lime-technology.com/stable/unRAIDServer.plg to see how the update is handled
+# ensure writes to USB flash boot device have completed
+sync -f /boot
+if [ -z "${plg_update_helper}" ]; then
+  echo "Update successful - PLEASE REBOOT YOUR SERVER"
+else
+  echo "Third party plugins found - PLEASE CHECK YOUR UNRAID NOTIFICATIONS AND WAIT FOR THE MESSAGE THAT IT IS SAFE TO REBOOT!"
+fi
  */
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
 import { useUpdateOsActionsStore } from '~/store/updateOsActions';
@@ -14,29 +26,27 @@ import '~/assets/main.css';
 const { t } = useI18n();
 
 export interface Props {
-  rebootType?: 'downgrade' | 'upgrade' | 'none';
+  restoreReleaseDate?: string;
   restoreVersion?: string;
 }
-const props = withDefaults(defineProps<Props>(), {
-  rebootType: 'none',
+withDefaults(defineProps<Props>(), {
+  restoreReleaseDate: '',
   restoreVersion: '',
 });
 
 const updateOsActionsStore = useUpdateOsActionsStore();
-
-onBeforeMount(() => {
-  updateOsActionsStore.setRebootType(props.rebootType);
-});
+const { rebootType } = storeToRefs(updateOsActionsStore);
 </script>
 
 <template>
-  <div class="grid gap-y-24px max-w-1024px mx-auto">
+  <div class="grid gap-y-24px max-w-1024px mx-auto px-16px">
     <UpdateOsStatus :t="t" />
     <UpdateOsUpdate
-      v-if="rebootType === 'none'"
+      v-if="rebootType === ''"
       :t="t" />
     <UpdateOsDowngrade
-      v-if="restoreVersion && rebootType === 'none'"
+      v-if="restoreVersion && rebootType === ''"
+      :release-date="restoreReleaseDate"
       :version="restoreVersion"
       :t="t" />
   </div>

web/components/UpdateOs/Downgrade.vue

@@ -17,6 +17,7 @@ import type { UserProfileLink } from '~/types/userProfile';
 
 const props = defineProps<{
   t: any;
+  releaseDate: string;
   version: string;
 }>();
 
@@ -47,7 +48,7 @@ const downgradeButton = ref<UserProfileLink | undefined>({
       }"
     >
       <div class="grid gap-y-16px">
-        <h3 class="text-20px font-semibold leading-6 flex flex-row items-center gap-8px">
+        <h3 class="text-20px font-semibold leading-normal flex flex-row items-center gap-8px">
           <ArrowUturnDownIcon class="w-20px shrink-0" />
           {{ t('Downgrade Unraid OS to {0}', [version]) }}
         </h3>
@@ -70,11 +71,7 @@ const downgradeButton = ref<UserProfileLink | undefined>({
           :icon="LifebuoyIcon"
           :icon-right="ArrowTopRightOnSquareIcon"
           :text="t('Open a bug report')" />
-        <BrandButton
-          @click="downgradeButton?.click"
-          btn-style="underline"
-          :icon="InformationCircleIcon"
-          :text="t('View Changelog for {0}', [version])" />
+        <p class="opacity-75">{{ t('Original release date {0}', [releaseDate]) }}</p>
         <BrandButton
           @click="downgradeButton?.click"
           btn-style="outline"

web/components/UpdateOs/Status.vue

@@ -32,7 +32,7 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
   <div class="grid gap-y-16px">
     <h1 class="text-24px">{{ t('Update Unraid OS') }}</h1>
     <div class="flex flex-col md:flex-row gap-16px justify-start md:items-start md:justify-between">
-      <div class="inline-flex gap-8px">
+      <div class="inline-flex flex-wrap justify-center gap-8px">
         <button
           @click="updateOsActionsStore.viewCurrentReleaseNotes(t('{0} Release Notes', [osVersion]))"
           class="group"
@@ -52,7 +52,7 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
           {{ t('Unable to check for updates') }}
         </UiBadge>
         <UiBadge
-          v-else-if="rebootType === 'none'"
+          v-else-if="rebootType === ''"
           :color="available ? 'orange' : 'green'"
           :icon="available ? BellAlertIcon : CheckCircleIcon"
           :title="parsedReleaseTimestamp ? t('Last checked: {0}', [parsedReleaseTimestamp.relative]) : ''"
@@ -70,7 +70,7 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
 
       <div>
         <UpdateOsCheckButton
-          v-if="rebootType === 'none'"
+          v-if="rebootType === ''"
           :t="t" />
         <BrandButton
           v-else

web/components/UpdateOs/Update.vue

@@ -55,7 +55,7 @@ watchEffect(() => {
   <UiCardWrapper :increased-padding="true">
     <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-20px sm:gap-24px">
       <div class="grid gap-y-16px">
-        <h3 class="text-20px font-semibold leading-6 flex flex-row items-center gap-8px">
+        <h3 class="text-20px font-semibold leading-normal flex flex-row items-center gap-8px">
           <BellAlertIcon v-if="available" class="w-20px shrink-0" />
           <ArrowPathIcon v-else class="w-20px shrink-0" />
           <span>

web/components/UserProfile.ce.vue

@@ -7,12 +7,13 @@ import { useCallbackStore } from '~/store/callbackActions';
 import { useDropdownStore } from '~/store/dropdown';
 import { useServerStore } from '~/store/server';
 import { useThemeStore } from '~/store/theme';
-import { useUpdateOsStore } from '~/store/updateOsActions';
+import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
 import type { Server } from '~/types/server';
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
 export interface Props {
+  rebootType?: 'downgrade' | 'upgrade' | '';
   server?: Server | string;
 }
 const props = defineProps<Props>();
@@ -23,6 +24,7 @@ const callbackStore = useCallbackStore();
 const dropdownStore = useDropdownStore();
 const serverStore = useServerStore();
 const updateOsStore = useUpdateOsStore();
+const updateOsActionsStore = useUpdateOsActionsStore();
 
 const { dropdownVisible } = storeToRefs(dropdownStore);
 const {
@@ -87,8 +89,14 @@ onBeforeMount(() => {
     serverStore.setServer(parsedServerProp);
   }
 
+  // look for any callback params
   callbackStore.watcher();
 
+  // see if we've started the downgrade or upgrade and need to display a reboot message
+  if (props.rebootType) {
+    updateOsActionsStore.setRebootType(props.rebootType);
+  }
+
   if (guid.value && keyfile.value) {
     updateOsStore.checkForUpdate({
       cache: true,

web/components/UserProfile/DropdownContent.vue

@@ -18,6 +18,7 @@ const updateOsActionsStore = useUpdateOsActionsStore();
 const { errors } = storeToRefs(errorsStore);
 const { keyActions, connectPluginInstalled, registered, stateData } = storeToRefs(useServerStore());
 const { available: osUpdateAvailable } = storeToRefs(useUpdateOsStore());
+const { rebootType } = storeToRefs(updateOsActionsStore);
 
 const signInAction = computed(() => stateData.value.actions?.filter((act: { name: string; }) => act.name === 'signIn') ?? []);
 const signOutAction = computed(() => stateData.value.actions?.filter((act: { name: string; }) => act.name === 'signOut') ?? []);
@@ -94,7 +95,7 @@ const showKeyline = computed(() => showConnectStatus.value && (keyActions.value?
         <UpcKeyline />
       </li>
 
-      <template v-if="osUpdateAvailable">
+      <template v-if="osUpdateAvailable && !rebootType">
         <li>
           <UpcDropdownItem :item="updateOsActionsStore.initUpdateOsCallback()" :t="t" />
         </li>

web/components/UserProfile/DropdownTrigger.vue

@@ -12,7 +12,7 @@ import {
 import { useDropdownStore } from '~/store/dropdown';
 import { useErrorsStore } from '~/store/errors';
 import { useServerStore } from '~/store/server';
-import { useUpdateOsStore } from '~/store/updateOsActions';
+import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
 
 const props = defineProps<{ t: any; }>();
 
@@ -21,6 +21,7 @@ const { dropdownVisible } = storeToRefs(dropdownStore);
 const { errors } = storeToRefs(useErrorsStore());
 const { state, stateData } = storeToRefs(useServerStore());
 const { available: osUpdateAvailable } = storeToRefs(useUpdateOsStore());
+const { rebootType } = storeToRefs(useUpdateOsActionsStore());
 
 const showErrorIcon = computed(() => errors.value.length || stateData.value.error);
 
@@ -52,7 +53,7 @@ const title = computed((): string => {
       <span class="absolute bottom-[-3px] inset-x-0 h-2px w-full bg-gradient-to-r from-unraid-red to-orange rounded opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity" />
     </span>
 
-    <BellAlertIcon v-if="osUpdateAvailable" class="hover:animate-pulse text-white fill-current relative w-16px h-16px" />
+    <BellAlertIcon v-if="osUpdateAvailable && !rebootType" class="hover:animate-pulse text-white fill-current relative w-16px h-16px" />
 
     <Bars3Icon v-if="!dropdownVisible" class="w-20px" />
     <Bars3BottomRightIcon v-else class="w-20px" />

web/locales/en_US.json

@@ -240,5 +240,6 @@
   "Go to Tools > Update": "Go to Tools > Update",
   "A valid keyfile and USB Flash boot device are required to check for updates.": "A valid keyfile and USB Flash boot device are required to check for updates.",
   "Please fix any errors and try again.": "Please fix any errors and try again.",
-  "Go to Tools > Registration": "Go to Tools > Registration"
+  "Go to Tools > Registration": "Go to Tools > Registration",
+  "Original release date {0}": "Original release date {0}"
 }

web/store/updateOsActions.ts

@@ -34,7 +34,7 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
   // State
   const osVersion = computed(() => serverStore.osVersion);
   /** used when coming back from callback, this will be the release to install */
-  const rebootType = ref<'downgrade' | 'upgrade' | 'none'>('none');
+  const rebootType = ref<'downgrade' | 'upgrade' | ''>('');
   const status = ref<'confirming' | 'checking' | 'ineligible' | 'failed' | 'ready' | 'success' | 'updating' | 'downgrading'>('ready');
   const callbackUpdateRelease = ref<Release | null>(null);
 
@@ -94,13 +94,13 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
     document.rebootNow.submit();
   };
 
-  const viewCurrentReleaseNotes = (text: string) => {
+  const viewCurrentReleaseNotes = ( modalTitle: string, webguiFilePath?: string | undefined,) => {
     // @ts-ignore – this is a global function provided by the webgui
     if (typeof openChanges === 'function') {
       // @ts-ignore
       openChanges(
-        'showchanges /var/tmp/unRAIDServer.txt',
-        text,
+        `showchanges ${webguiFilePath ?? '/var/tmp/unRAIDServer.txt'}`,
+        modalTitle,
       );
     } else {
       alert('Unable to open release notes');