Show backend search errors in hist panel

client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue

@@ -51,7 +51,13 @@
             <b-form-input v-model="filterSettings['tag:']" size="sm" placeholder="any tag" />
             <small class="mt-1">Filter by state:</small>
             <b-input-group>
-                <b-form-input v-model="filterSettings['state:']" size="sm" placeholder="any state" list="stateSelect" />
+                <b-form-input
+                    v-model="filterSettings['state:']"
+                    v-b-tooltip.focus.v-danger="hasError('state:')"
+                    :class="hasError('state:') && 'ui-input-error'"
+                    size="sm"
+                    placeholder="any state"
+                    list="stateSelect" />
                 <b-form-datalist id="stateSelect" :options="states"></b-form-datalist>
                 <b-input-group-append>
                     <b-button title="States Help" size="sm" @click="showHelp = true">
@@ -63,22 +69,47 @@
             <small>Filter by database:</small>
             <b-form-input v-model="filterSettings['genome_build:']" size="sm" placeholder="any database" />
             <small class="mt-1">Filter by related to item index:</small>
-            <b-form-input v-model="filterSettings['related:']" size="sm" placeholder="index equals" />
+            <b-form-input
+                v-model="filterSettings['related:']"
+                v-b-tooltip.focus.v-danger="hasError('related:')"
+                :class="hasError('related:') && 'ui-input-error'"
+                size="sm"
+                placeholder="index equals" />
             <small class="mt-1">Filter by item index:</small>
             <b-form-group class="m-0">
                 <b-input-group>
-                    <b-form-input v-model="filterSettings['hid>']" size="sm" placeholder="index greater" />
-                    <b-form-input v-model="filterSettings['hid<']" size="sm" placeholder="index lower" />
+                    <b-form-input
+                        v-model="filterSettings['hid>']"
+                        v-b-tooltip.focus.v-danger="hasError('hid>')"
+                        :class="hasError('hid>') && 'ui-input-error'"
+                        size="sm"
+                        placeholder="index greater" />
+                    <b-form-input
+                        v-model="filterSettings['hid<']"
+                        v-b-tooltip.focus.v-danger="hasError('hid<')"
+                        :class="hasError('hid<') && 'ui-input-error'"
+                        size="sm"
+                        placeholder="index lower" />
                 </b-input-group>
             </b-form-group>
             <small class="mt-1">Filter by creation time:</small>
             <b-form-group class="m-0">
                 <b-input-group>
-                    <b-form-input v-model="create_time_gt" size="sm" placeholder="created after" />
+                    <b-form-input
+                        v-model="create_time_gt"
+                        v-b-tooltip.focus.v-danger="hasError('create_time>')"
+                        :class="hasError('create_time>') && 'ui-input-error'"
+                        size="sm"
+                        placeholder="created after" />
                     <b-input-group-append>
                         <b-form-datepicker v-model="create_time_gt" reset-button button-only size="sm" />
                     </b-input-group-append>
-                    <b-form-input v-model="create_time_lt" size="sm" placeholder="created before" />
+                    <b-form-input
+                        v-model="create_time_lt"
+                        v-b-tooltip.focus.v-danger="hasError('create_time<')"
+                        :class="hasError('create_time<') && 'ui-input-error'"
+                        size="sm"
+                        placeholder="created before" />
                     <b-input-group-append>
                         <b-form-datepicker v-model="create_time_lt" reset-button button-only size="sm" />
                     </b-input-group-append>
@@ -115,6 +146,7 @@ export default {
     props: {
         filterText: { type: String, default: null },
         showAdvanced: { type: Boolean, default: false },
+        searchError: { type: Object, default: null },
     },
     data() {
         return {
@@ -147,8 +179,17 @@ export default {
             this.create_time_gt = this.filterSettings["create_time>"];
             this.create_time_lt = this.filterSettings["create_time<"];
         },
+        showAdvanced(newVal) {
+            this.showHelp = !newVal ? false : this.showHelp;
+        },
     },
     methods: {
+        hasError(field) {
+            if (this.searchError && this.searchError.filter == field) {
+                return this.searchError.typeError || this.searchError.msg;
+            }
+            return "";
+        },
         onOption(name, value) {
             this.filterSettings[name] = value;
         },

client/src/components/History/CurrentHistory/HistoryPanel.vue

@@ -31,7 +31,8 @@
                     v-if="showControls"
                     class="content-operations-filters mx-3"
                     :filter-text.sync="filterText"
-                    :show-advanced.sync="showAdvanced" />
+                    :show-advanced.sync="showAdvanced"
+                    :search-error="formattedSearchError" />
                 <section v-if="!showAdvanced">
                     <HistoryDetails
                         :history="history"
@@ -93,6 +94,12 @@
                         </b-alert>
                         <div v-else-if="itemsLoaded.length === 0">
                             <HistoryEmpty v-if="queryDefault" class="m-2" />
+                            <b-alert v-else-if="formattedSearchError" class="m-2" variant="danger" show>
+                                Error in filter:
+                                <a href="javascript:void(0)" @click="showAdvanced = true">
+                                    {{ formattedSearchError.filter }}'{{ formattedSearchError.value }}'
+                                </a>
+                            </b-alert>
                             <b-alert v-else class="m-2" variant="info" show>
                                 No data found for selected filter.
                             </b-alert>
@@ -153,6 +160,7 @@ import HistoryDetails from "./HistoryDetails";
 import HistoryDropZone from "./HistoryDropZone";
 import HistoryEmpty from "./HistoryEmpty";
 import HistoryFilters from "./HistoryFilters/HistoryFilters";
+import { getOperatorForAlias } from "utils/filtering";
 import HistoryMessages from "./HistoryMessages";
 import HistorySelectionOperations from "./HistoryOperations/SelectionOperations";
 import HistorySelectionStatus from "./HistoryOperations/SelectionStatus";
@@ -190,12 +198,12 @@ export default {
     },
     data() {
         return {
-            error: null,
             filterText: "",
             highlightsKey: null,
             invisible: {},
             loading: false,
             offset: 0,
+            searchError: null,
             showAdvanced: false,
             showDropZone: false,
             operationRunning: null,
@@ -248,6 +256,23 @@ export default {
             const { getWatchingVisibility } = storeToRefs(useHistoryItemsStore());
             return getWatchingVisibility.value;
         },
+        /** @returns {Object} */
+        formattedSearchError() {
+            if (this.searchError) {
+                const { column, col, operation, op, value, val, err_msg, ValueError } = this.searchError;
+                const alias = operation || op;
+                const operator = alias ? getOperatorForAlias(alias) : ":";
+                const formatted = {
+                    filter: `${column || col}${operator}`,
+                    value: value || val,
+                    msg: err_msg,
+                    typeError: ValueError,
+                };
+                return formatted;
+            } else {
+                return null;
+            }
+        },
         /** @returns {String} */
         storeFilterText() {
             const { currentFilterText } = storeToRefs(useHistoryStore());
@@ -316,11 +341,15 @@ export default {
             this.loading = true;
             try {
                 await this.fetchHistoryItems(this.historyId, this.filterText, this.offset);
-                this.error = null;
+                this.searchError = null;
                 this.loading = false;
             } catch (error) {
-                console.debug("HistoryPanel - Load error.", error);
-                this.error = error;
+                if (error.response && error.response.data && error.response.data.err_msg) {
+                    console.debug("HistoryPanel - Load items error:", error.response.data.err_msg);
+                    this.searchError = error.response.data;
+                } else {
+                    console.debug("HistoryPanel - Load items error.", error);
+                }
                 this.loading = false;
             }
         },

client/src/stores/history/historyItemsStore.js

@@ -67,7 +67,7 @@ export const useHistoryItemsStore = defineStore("historyItemsStore", {
             const params = `v=dev&order=hid&offset=${offset}&limit=${limit}`;
             const url = `/api/histories/${historyId}/contents?${params}&${queryString}`;
             const headers = { accept: "application/vnd.galaxy.history.contents.stats+json" };
-            await queue.enqueue(urlData, { url, headers }, historyId).then((data) => {
+            return await queue.enqueue(urlData, { url, headers, errorSimplify: false }, historyId).then((data) => {
                 const stats = data.stats;
                 this.totalMatchesCount = stats.total_matches;
                 const payload = data.contents;

client/src/style/scss/ui.scss

@@ -213,6 +213,10 @@ $ui-margin-horizontal-large: $margin-v * 2;
     }
 }
 
+.ui-input-error {
+    border-color: $brand-danger;
+}
+
 .ui-textarea {
     @extend .ui-input;
     height: 100px !important;

client/src/utils/url.js

@@ -2,14 +2,18 @@ import axios from "axios";
 import { withPrefix } from "utils/redirect";
 import { rethrowSimple } from "utils/simple-error";
 
-export async function urlData({ url, headers, params }) {
+export async function urlData({ url, headers, params, errorSimplify = true }) {
     try {
         headers = headers || {};
         params = params || {};
         const { data } = await axios.get(withPrefix(url), { headers, params });
         return data;
     } catch (e) {
-        rethrowSimple(e);
+        if (errorSimplify) {
+            rethrowSimple(e);
+        } else {
+            throw e;
+        }
     }
 }