fix(ViewTypes.js): Add a fallback widget in case of undefined widgets

This fix addresses a potential issue where a widget created on a newer version of argus will cause an error on an older one when it is loaded from the database.
k0machi · Nov 19, 2024 · 34b5b2b · 34b5b2b
1 parent f8ff3f0
commit 34b5b2b
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 4 deletions.
diff --git a/frontend/AdminPanel/ViewsManager.svelte b/frontend/AdminPanel/ViewsManager.svelte
@@ -4,13 +4,14 @@
     import Fa from "svelte-fa";
     import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
     import ViewWidget from "./ViewWidget.svelte";
-    import { ADD_ALL_ID, Widget } from "../Common/ViewTypes";
+    import { ADD_ALL_ID, Widget, WIDGET_TYPES } from "../Common/ViewTypes";
     import queryString from "query-string";
     import * as urlSlug from "url-slug";
     import Select from "svelte-select";
     import ViewSelectItem from "./ViewSelectItem.svelte";
     import { titleCase } from "../Common/TextUtils";
     import ViewListItem from "./ViewListItem.svelte";
+    import ModalWindow from "../Common/ModalWindow.svelte";
 
     let allViews = [];
 
@@ -32,6 +33,11 @@
     let lockForm = false;
     let editingExistingView = false;
     let testSearcherValue;
+    let errorPopup = false;
+    let errorTitle = "";
+    let errorMessage = "";
+    let errorCallback;
+
 
     const fetchAllViews = async function() {
         try {
@@ -62,10 +68,34 @@
         }
     };
 
-    const handleViewUpdateRequest = function(e) {
+    /**
+     * 
+     * @param {{type: string}[]} viewWidgets
+     */
+    const checkIfViewSupported = function(viewWidgets) {
+        for (const widget of viewWidgets) {
+            if (!WIDGET_TYPES[widget.type]) {
+                return false;
+            }
+        }
+        return true;
+    };
+
+    const handleViewUpdateRequest = function(e, force = false) {
         resetForm();
         let viewForUpdate = e.detail;
-        newWidgets = JSON.parse(viewForUpdate.widget_settings);
+        let widgets = JSON.parse(viewForUpdate.widget_settings);
+        if (!checkIfViewSupported(widgets) && !force) {
+            errorTitle = "Unsupported widget found";
+            errorMessage = "This view contains unsupported widgets. Editing said view will result in the loss of those widgets.";
+            errorPopup = true;
+            errorCallback = handleViewUpdateRequest.bind(undefined, e, true);
+            return;
+        } else if (force) {
+            widgets = widgets.filter(w => WIDGET_TYPES[w.type]);
+            widgets.forEach((w, idx) => w.position = idx + 1);
+        }
+        newWidgets = widgets;
         newView = {
             id: viewForUpdate.id,
             name: viewForUpdate.name,
@@ -333,6 +363,36 @@
     });
 </script>
 
+{#if errorPopup}
+    <ModalWindow on:modalClose={() => {
+        errorTitle = "";
+        errorMessage = "";
+        errorPopup = false;
+    }}>
+        <div slot="title">
+            {errorTitle}
+        </div>
+        <div slot="body">
+            <p>{errorMessage}</p>
+            <div>
+                <button class="btn btn-danger" on:click={() => {
+                    errorTitle = "";
+                    errorMessage = "";
+                    errorPopup = false;
+                    errorCallback();
+                    errorCallback = undefined;
+                }}>Edit Anyway</button>
+                <button class="btn btn-secondary" on:click={() => {
+                    errorTitle = "";
+                    errorMessage = "";
+                    errorPopup = false;
+                    errorCallback = undefined;
+                }}>Cancel</button>
+            </div>
+        </div>
+    </ModalWindow>
+{/if}
+
 <div class="bg-white rounded p-2 shadow-sm my-2">
     <div>
         <h4>View Manager</h4>

diff --git a/frontend/Common/ViewTypes.js b/frontend/Common/ViewTypes.js
@@ -1,6 +1,7 @@
 import ViewGithubIssues from "../Views/Widgets/ViewGithubIssues.svelte";
 import ViewReleaseStats from "../Views/Widgets/ViewReleaseStats.svelte";
 import ViewTestDashboard from "../Views/Widgets/ViewTestDashboard.svelte";
+import ViewUnsupportedPlaceholder from "../Views/Widgets/ViewUnsupportedPlaceholder.svelte";
 import CheckValue from "../Views/WidgetSettingTypes/CheckValue.svelte";
 import MultiSelectValue from "../Views/WidgetSettingTypes/MultiSelectValue.svelte";
 import StringValue from "../Views/WidgetSettingTypes/StringValue.svelte";
@@ -17,6 +18,13 @@ export class Widget {
 
 
 export const WIDGET_TYPES = {
+    UNSUPPORTED: {
+        type: ViewUnsupportedPlaceholder,
+        hidden: true,
+        friendlyName: "Dummy widget",
+        settingDefinitions: {
+        }
+    },
     testDashboard: {
         type: ViewTestDashboard,
         friendlyName: "Test Dashboard",

diff --git a/frontend/Views/ViewDashboard.svelte b/frontend/Views/ViewDashboard.svelte
@@ -55,7 +55,7 @@
         {#each view.widget_settings as widget}
             <div class="mb-2">
                 <svelte:component
-                    this={WIDGET_TYPES[widget.type].type}
+                    this={WIDGET_TYPES[widget.type]?.type ?? WIDGET_TYPES.UNSUPPORTED.type}
                     dashboardObject={view}
                     dashboardObjectType="view"
                     settings={widget.settings}

diff --git a/frontend/Views/Widgets/ViewUnsupportedPlaceholder.svelte b/frontend/Views/Widgets/ViewUnsupportedPlaceholder.svelte
@@ -0,0 +1,3 @@
+<div class="alert alert-warning p-2 m-2 text-center">
+    This widget is not supported by this version of argus.
+</div>