Skip to content

Commit

Permalink
Show backend errors in history panel search
Browse files Browse the repository at this point in the history
  • Loading branch information
ahmedhamidawan committed Mar 30, 2023
1 parent 2b38fd1 commit 03cdefd
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 24 deletions.
Expand Up @@ -44,27 +44,58 @@
<small class="mt-1">Filter by tag:</small>
<b-form-input v-model="filterSettings['tag:']" size="sm" placeholder="any tag" />
<small class="mt-1">Filter by state:</small>
<b-form-input v-model="filterSettings['state:']" size="sm" placeholder="any state" list="stateSelect" />
<b-form-input
v-model="filterSettings['state:']"
v-b-tooltip="hasError('state')"
size="sm"
placeholder="any state"
list="stateSelect"
:autofocus="hasError('state') !== ''" />

Check failure on line 53 in client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18)

The autofocus prop should not be used, as it can reduce usability and accessibility for users
<b-form-datalist id="stateSelect" :options="states"></b-form-datalist>
<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="hasError('related')"
size="sm"
placeholder="index equals"
:autofocus="hasError('related') !== ''" />

Check failure on line 63 in client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18)

The autofocus prop should not be used, as it can reduce usability and accessibility for users
<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="hasError('hid', 'gt')"
size="sm"
placeholder="index greater"
:autofocus="hasError('hid', 'gt') !== ''" />

Check failure on line 72 in client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18)

The autofocus prop should not be used, as it can reduce usability and accessibility for users
<b-form-input
v-model="filterSettings['hid<']"
v-b-tooltip="hasError('hid', 'lt')"
size="sm"
placeholder="index lower"
:autofocus="hasError('hid', 'lt') !== ''" />

Check failure on line 78 in client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18)

The autofocus prop should not be used, as it can reduce usability and accessibility for users
</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="hasError('create_time', 'gt')"
size="sm"
placeholder="created after"
:autofocus="hasError('create_time', 'gt') !== ''" />

Check failure on line 89 in client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18)

The autofocus prop should not be used, as it can reduce usability and accessibility for users
<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="hasError('create_time', 'lt')"
size="sm"
placeholder="created before"
:autofocus="hasError('create_time', 'lt') !== ''" />

Check failure on line 98 in client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18)

The autofocus prop should not be used, as it can reduce usability and accessibility for users
<b-input-group-append>
<b-form-datepicker v-model="create_time_lt" reset-button button-only size="sm" />
</b-input-group-append>
Expand Down Expand Up @@ -99,6 +130,7 @@ export default {
props: {
filterText: { type: String, default: null },
showAdvanced: { type: Boolean, default: false },
searchError: { type: Object, required: false },
},
data() {
return {
Expand Down Expand Up @@ -129,8 +161,23 @@ export default {
this.create_time_gt = this.filterSettings["create_time>"];
this.create_time_lt = this.filterSettings["create_time<"];
},
searchError(newVal) {
if (newVal) {
this.onToggle();
}
},
},
methods: {
hasError(col, op = "eq") {
if (
this.searchError &&
(this.searchError.column == col || this.searchError.col == col) &&
(this.searchError.operation == op || this.searchError.op == op)
) {
return this.searchError.ValueError || this.searchError.err_msg;
}
return "";
},
onOption(name, value) {
this.filterSettings[name] = value;
},
Expand Down
16 changes: 11 additions & 5 deletions client/src/components/History/CurrentHistory/HistoryPanel.vue
Expand Up @@ -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="searchError" />
<section v-if="!showAdvanced">
<HistoryDetails
:history="history"
Expand Down Expand Up @@ -93,8 +94,8 @@
</b-alert>
<div v-else-if="itemsLoaded.length === 0">
<HistoryEmpty v-if="queryDefault" class="m-2" />
<b-alert v-else-if="historySearchError" class="m-2" variant="danger" show>
{{ historySearchError }}
<b-alert v-else-if="searchError" class="m-2" variant="danger" show>
{{ searchErrorMessage }}
</b-alert>
<b-alert v-else class="m-2" variant="info" show>
No data found for selected filter.
Expand Down Expand Up @@ -251,10 +252,15 @@ export default {
const { getWatchingVisibility } = storeToRefs(useHistoryItemsStore());
return getWatchingVisibility.value;
},
/** @returns {String} */
historySearchError() {
/** @returns {Object} */
searchError() {
return useHistoryItemsStore().error[`${this.historyId}-${this.filterText}`];
},
/** @returns {String} */
searchErrorMessage() {
const { column, col, operation, op, value, val, err_msg } = this.searchError;
return `For filter:"${column || col}-${operation || op}" and value:"${value || val}", Error: ${err_msg}`;
},
},
watch: {
queryKey() {
Expand Down
23 changes: 12 additions & 11 deletions client/src/stores/history/historyItemsStore.js
Expand Up @@ -66,17 +66,18 @@ 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) => {
const stats = data.stats;
this.totalMatchesCount = stats.total_matches;
const payload = data.contents;
const relatedHid = HistoryFilters.getFilterValue(filterText, "related");
this.saveHistoryItems(historyId, payload, relatedHid);
})
.catch((error) => {
console.error(error);
Vue.set(this.error, `${historyId}-${filterText}`, error);
});
await queue
.enqueue(urlData, { url, headers }, historyId)
.then((data) => {
const stats = data.stats;
this.totalMatchesCount = stats.total_matches;
const payload = data.contents;
const relatedHid = HistoryFilters.getFilterValue(filterText, "related");
this.saveHistoryItems(historyId, payload, relatedHid);
})
.catch((error) => {
Vue.set(this.error, `${historyId}-${filterText}`, error);
});
},
// Setters
saveHistoryItems(historyId, payload, relatedHid = null) {
Expand Down
11 changes: 9 additions & 2 deletions client/src/utils/promise-queue.js
Expand Up @@ -26,8 +26,15 @@ export class LastQueue {
delete this.nextPromise[nextKey];
this.pendingPromise = true;
try {
const payload = await item.action(item.args);
item.resolve(payload);
const { url, headers } = item.args;
const response = await fetch(url, { headers });
if (!response.ok) {
const error = await response.json();
item.reject(error);
} else {
const payload = await response.json();
item.resolve(payload);
}
} catch (e) {
item.reject(e);
} finally {
Expand Down

0 comments on commit 03cdefd

Please sign in to comment.