fix(frontend): remove network error toasts

Remove network errors from toasts which are usually just noise.

Signed-off-by: Edward Sammut Alessi <[email protected]>

Author: Slessi

frontend/src/notification.ts

@@ -2,14 +2,15 @@
 //
 // Use of this software is governed by the Business Source License
 // included in the LICENSE file.
+import { milliseconds } from 'date-fns'
 import { toast } from 'vue-sonner'
 
 export function showError(title: string, description?: string) {
   console.error(`error occurred: title: ${title}, body: ${description}`)
 
-  toast.error(title, { description, duration: Infinity })
+  toast.error(title, { description, duration: milliseconds({ minutes: 1 }) })
 }
 
 export function showSuccess(title: string, description?: string) {
-  toast.success(title, { description, duration: 5000 })
+  toast.success(title, { description, duration: milliseconds({ seconds: 5 }) })
 }

frontend/src/views/omni/Clusters/Management/ClusterCreate.vue

@@ -41,6 +41,7 @@ import TAlert from '@/components/TAlert.vue'
 import { setupBackupStatus } from '@/methods'
 import { canCreateClusters } from '@/methods/auth'
 import {
+  ClusterCommandError,
   clusterSync,
   embeddedDiscoveryServiceAvailable,
   nextAvailableClusterName,
@@ -249,7 +250,7 @@ const createCluster_ = async (untaint: boolean) => {
       state.value.cluster.name = await nextAvailableClusterName('talos-default')
     }
 
-    if (e.errorNotification) {
+    if (e instanceof ClusterCommandError) {
       showError(e.errorNotification.title, e.errorNotification.details)
 
       return

frontend/src/views/omni/Clusters/Management/ClusterScale.vue

@@ -29,7 +29,7 @@ import PageHeader from '@/components/common/PageHeader.vue'
 import TSpinner from '@/components/common/Spinner/TSpinner.vue'
 import Watch from '@/components/common/Watch/Watch.vue'
 import TAlert from '@/components/TAlert.vue'
-import { clusterSync } from '@/methods/cluster'
+import { ClusterCommandError, clusterSync } from '@/methods/cluster'
 import { showError, showSuccess } from '@/notification'
 import { populateExisting, state } from '@/states/cluster-management'
 import ManagedByTemplatesWarning from '@/views/cluster/ManagedByTemplatesWarning.vue'
@@ -66,7 +66,7 @@ const scaleCluster = async () => {
   try {
     await clusterSync(state.value.resources(), existingResources.value)
   } catch (e) {
-    if (e.errorNotification) {
+    if (e instanceof ClusterCommandError) {
       showError(e.errorNotification.title, e.errorNotification.details)
 
       return

frontend/src/views/omni/Home/HomeGeneralInformation.vue

@@ -6,7 +6,7 @@ included in the LICENSE file.
 -->
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
-import { onBeforeMount, ref, watch } from 'vue'
+import { onBeforeMount, ref } from 'vue'
 
 import { Runtime } from '@/api/common/omni.pb'
 import type { DefaultJoinTokenSpec, SiderolinkAPIConfigSpec } from '@/api/omni/specs/siderolink.pb'
@@ -25,6 +25,7 @@ import TButton from '@/components/common/Button/TButton.vue'
 import Card from '@/components/common/Card/Card.vue'
 import TSpinner from '@/components/common/Spinner/TSpinner.vue'
 import { useWatch } from '@/components/common/Watch/useWatch'
+import TAlert from '@/components/TAlert.vue'
 import {
   downloadAuditLog,
   downloadMachineJoinConfig,
@@ -34,7 +35,6 @@ import {
 } from '@/methods'
 import { canReadAuditLog } from '@/methods/auth'
 import { auditLogEnabled, useInstallationMediaEnabled } from '@/methods/features'
-import { showError } from '@/notification'
 import HomeGeneralInformationCopyable from '@/views/omni/Home/HomeGeneralInformationCopyable.vue'
 
 const auditLogAvailable = ref(false)
@@ -79,8 +79,6 @@ const {
   },
   runtime: Runtime.Omni,
 })
-
-watch(apiConfigErr, (err) => err && showError(err))
 </script>
 
 <template>
@@ -90,6 +88,8 @@ watch(apiConfigErr, (err) => err && showError(err))
       <TSpinner v-if="apiConfigLoading" class="size-4" />
     </header>
 
+    <TAlert v-if="apiConfigErr" type="error" :title="apiConfigErr" />
+
     <dl class="flex flex-col gap-4">
       <HomeGeneralInformationCopyable
         title="Backend Version"

frontend/src/views/omni/Modals/ClusterDestroy.vue

@@ -25,7 +25,7 @@ import {
 import Watch from '@/api/watch'
 import TButton from '@/components/common/Button/TButton.vue'
 import TSpinner from '@/components/common/Spinner/TSpinner.vue'
-import { clusterDestroy } from '@/methods/cluster'
+import { ClusterCommandError, clusterDestroy } from '@/methods/cluster'
 import { showError, showSuccess } from '@/notification'
 import ManagedByTemplatesWarning from '@/views/cluster/ManagedByTemplatesWarning.vue'
 import CloseButton from '@/views/omni/Modals/CloseButton.vue'
@@ -93,7 +93,7 @@ const destroyCluster = async () => {
   } catch (e) {
     close()
 
-    if (e.errorNotification) {
+    if (e instanceof ClusterCommandError) {
       showError(e.errorNotification.title, e.errorNotification.details)
 
       return

frontend/src/views/omni/Modals/NodeDestroy.vue

@@ -26,7 +26,7 @@ import {
 } from '@/api/resources'
 import TButton from '@/components/common/Button/TButton.vue'
 import TSpinner from '@/components/common/Spinner/TSpinner.vue'
-import { destroyNodes } from '@/methods/cluster'
+import { ClusterCommandError, destroyNodes } from '@/methods/cluster'
 import { controlPlaneMachineSetId } from '@/methods/machineset'
 import { setupNodenameWatch } from '@/methods/node'
 import { showError, showSuccess } from '@/notification'
@@ -163,7 +163,7 @@ const destroyNode = async () => {
       forceDestroy.value,
     )
   } catch (e) {
-    if (e.errorNotification) {
+    if (e instanceof ClusterCommandError) {
       showError(e.errorNotification.title, e.errorNotification.details)
 
       close(true)

frontend/src/views/omni/Modals/NodeDestroyCancel.vue

@@ -13,7 +13,7 @@ import type { ClusterMachineSpec } from '@/api/omni/specs/omni.pb'
 import { ClusterMachineType, DefaultNamespace } from '@/api/resources'
 import TButton from '@/components/common/Button/TButton.vue'
 import Watch from '@/components/common/Watch/Watch.vue'
-import { restoreNode } from '@/methods/cluster'
+import { ClusterCommandError, restoreNode } from '@/methods/cluster'
 import { setupNodenameWatch } from '@/methods/node'
 import { showError, showSuccess } from '@/notification'
 import CloseButton from '@/views/omni/Modals/CloseButton.vue'
@@ -53,7 +53,7 @@ const restore = async (clusterMachine: Resource<ClusterMachineSpec>) => {
   try {
     await restoreNode(clusterMachine)
   } catch (e) {
-    if (e.errorNotification) {
+    if (e instanceof ClusterCommandError) {
       showError(e.errorNotification.title, e.errorNotification.details)
 
       close(true)