DEV: Upgrade `admin-plugins-explorer` to Octane (#209)
- Drop `explorer-container` and move its logic to `admin-plugin-explorer` container - Convert resizing of the query edit pane from jquery -> draggable modifier
This commit is contained in:
Isaac Janzen
GitHub
parent
b1df914549
commit
4d26cf78f0
|
|
@ -0,0 +1 @@
|
|||
<pre><code class={{@codeClass}}>{{@value}}</code></pre>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
import Component from "@ember/component";
|
||||
import { observes } from "discourse-common/utils/decorators";
|
||||
import { schedule, throttle } from "@ember/runloop";
|
||||
|
||||
export default Component.extend({
|
||||
@observes("hideSchema")
|
||||
_onHideSchema() {
|
||||
this.appEvents.trigger("ace:resize");
|
||||
},
|
||||
|
||||
@observes("everEditing")
|
||||
_onInsertEditor() {
|
||||
schedule("afterRender", this, () => this._bindControls());
|
||||
},
|
||||
|
||||
_bindControls() {
|
||||
if (this._state !== "inDOM") {
|
||||
return;
|
||||
}
|
||||
const $editPane = $(".query-editor");
|
||||
if (!$editPane.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const oldGrippie = this.grippie;
|
||||
if (oldGrippie) {
|
||||
oldGrippie.off("mousedown mousemove mouseup");
|
||||
}
|
||||
|
||||
const $grippie = $editPane.find(".grippie");
|
||||
const $target = $editPane.find(".panels-flex");
|
||||
const $document = $(document);
|
||||
|
||||
const minWidth = $target.width();
|
||||
const minHeight = $target.height();
|
||||
|
||||
this.set("grippie", $grippie);
|
||||
|
||||
const mousemove = (e) => {
|
||||
const diffY = this.startY - e.screenY;
|
||||
const diffX = this.startX - e.screenX;
|
||||
|
||||
const newHeight = Math.max(minHeight, this.startHeight - diffY);
|
||||
const newWidth = Math.max(minWidth, this.startWidth - diffX);
|
||||
|
||||
$target.height(newHeight);
|
||||
$target.width(newWidth);
|
||||
$grippie.width(newWidth);
|
||||
this.appEvents.trigger("ace:resize");
|
||||
};
|
||||
|
||||
const throttledMousemove = ((event) => {
|
||||
event.preventDefault();
|
||||
throttle(this, mousemove, event, 20);
|
||||
}).bind(this);
|
||||
|
||||
const mouseup = (() => {
|
||||
$document.off("mousemove", throttledMousemove);
|
||||
$document.off("mouseup", mouseup);
|
||||
this.setProperties({
|
||||
startY: null,
|
||||
startX: null,
|
||||
startHeight: null,
|
||||
startWidth: null,
|
||||
});
|
||||
}).bind(this);
|
||||
|
||||
$grippie.on("mousedown", (e) => {
|
||||
this.setProperties({
|
||||
startY: e.screenY,
|
||||
startX: e.screenX,
|
||||
startHeight: $target.height(),
|
||||
startWidth: $target.width(),
|
||||
});
|
||||
|
||||
$document.on("mousemove", throttledMousemove);
|
||||
$document.on("mouseup", mouseup);
|
||||
e.preventDefault();
|
||||
});
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
this._bindControls();
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (this.everEditing) {
|
||||
this.grippie && this.grippie.off("mousedown");
|
||||
this.set("grippie", null);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
@ -3,140 +3,126 @@ import showModal from "discourse/lib/show-modal";
|
|||
import Query from "discourse/plugins/discourse-data-explorer/discourse/models/query";
|
||||
import { popupAjaxError } from "discourse/lib/ajax-error";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
import discourseComputed, {
|
||||
bind,
|
||||
observes,
|
||||
} from "discourse-common/utils/decorators";
|
||||
import { bind } from "discourse-common/utils/decorators";
|
||||
import I18n from "I18n";
|
||||
import { Promise } from "rsvp";
|
||||
import { inject as service } from "@ember/service";
|
||||
import { get } from "@ember/object";
|
||||
import { not, reads, sort } from "@ember/object/computed";
|
||||
import { action } from "@ember/object";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
|
||||
const NoQuery = Query.create({ name: "No queries", fake: true, group_ids: [] });
|
||||
|
||||
export default Controller.extend({
|
||||
dialog: service(),
|
||||
queryParams: { selectedQueryId: "id", params: "params" },
|
||||
selectedQueryId: null,
|
||||
editDisabled: false,
|
||||
showResults: false,
|
||||
hideSchema: false,
|
||||
loading: false,
|
||||
explain: false,
|
||||
export default class PluginsExplorerController extends Controller {
|
||||
@service dialog;
|
||||
@service appEvents;
|
||||
|
||||
saveDisabled: not("selectedItem.dirty"),
|
||||
runDisabled: reads("selectedItem.dirty"),
|
||||
results: reads("selectedItem.results"),
|
||||
@tracked sortByProperty = "last_run_at";
|
||||
@tracked sortDescending = true;
|
||||
@tracked params;
|
||||
@tracked search;
|
||||
@tracked newQueryName;
|
||||
@tracked showCreate;
|
||||
@tracked editingName = false;
|
||||
@tracked editingQuery = false;
|
||||
@tracked selectedQueryId;
|
||||
@tracked loading = false;
|
||||
@tracked showResults = false;
|
||||
@tracked hideSchema = false;
|
||||
@tracked results = this.selectedItem.results;
|
||||
@tracked dirty = false;
|
||||
|
||||
asc: null,
|
||||
order: null,
|
||||
editing: false,
|
||||
everEditing: false,
|
||||
showRecentQueries: true,
|
||||
sortBy: ["last_run_at:desc"],
|
||||
sortedQueries: sort("model", "sortBy"),
|
||||
queryParams = ["params", { selectedQueryId: "id" }];
|
||||
explain = false;
|
||||
acceptedImportFileTypes = ["application/json"];
|
||||
order = null;
|
||||
|
||||
@discourseComputed("params")
|
||||
parsedParams(params) {
|
||||
return params ? JSON.parse(params) : null;
|
||||
},
|
||||
get validQueryPresent() {
|
||||
return !!this.selectedItem.id;
|
||||
}
|
||||
|
||||
@discourseComputed
|
||||
acceptedImportFileTypes() {
|
||||
return ["application/json"];
|
||||
},
|
||||
get saveDisabled() {
|
||||
return !this.dirty;
|
||||
}
|
||||
|
||||
@discourseComputed("search", "sortBy")
|
||||
filteredContent(search) {
|
||||
const regexp = new RegExp(search, "i");
|
||||
get runDisabled() {
|
||||
return this.dirty;
|
||||
}
|
||||
|
||||
get sortedQueries() {
|
||||
const sortedQueries = this.model.sortBy(this.sortByProperty);
|
||||
return this.sortDescending ? sortedQueries.reverse() : sortedQueries;
|
||||
}
|
||||
|
||||
get parsedParams() {
|
||||
return this.params ? JSON.parse(this.params) : null;
|
||||
}
|
||||
|
||||
get filteredContent() {
|
||||
const regexp = new RegExp(this.search, "i");
|
||||
return this.sortedQueries.filter(
|
||||
(result) => regexp.test(result.name) || regexp.test(result.description)
|
||||
);
|
||||
},
|
||||
|
||||
@discourseComputed("newQueryName")
|
||||
createDisabled(newQueryName) {
|
||||
return (newQueryName || "").trim().length === 0;
|
||||
},
|
||||
|
||||
@discourseComputed("selectedQueryId")
|
||||
selectedItem(selectedQueryId) {
|
||||
const id = parseInt(selectedQueryId, 10);
|
||||
const item = this.model.findBy("id", id);
|
||||
|
||||
!isNaN(id)
|
||||
? this.set("showRecentQueries", false)
|
||||
: this.set("showRecentQueries", true);
|
||||
|
||||
if (id < 0) {
|
||||
this.set("editDisabled", true);
|
||||
}
|
||||
|
||||
return item || NoQuery;
|
||||
},
|
||||
get createDisabled() {
|
||||
return (this.newQueryName || "").trim().length === 0;
|
||||
}
|
||||
|
||||
@discourseComputed("selectedItem", "editing")
|
||||
selectedGroupNames() {
|
||||
const groupIds = this.selectedItem.group_ids || [];
|
||||
const groupNames = groupIds.map((id) => {
|
||||
return this.groupOptions.find((groupOption) => groupOption.id === id)
|
||||
.name;
|
||||
});
|
||||
return groupNames.join(", ");
|
||||
},
|
||||
get selectedItem() {
|
||||
const query = this.model.findBy("id", parseInt(this.selectedQueryId, 10));
|
||||
return query || NoQuery;
|
||||
}
|
||||
|
||||
@discourseComputed("groups")
|
||||
groupOptions(groups) {
|
||||
return groups
|
||||
get editDisabled() {
|
||||
return parseInt(this.selectedQueryId, 10) < 0 ? true : false;
|
||||
}
|
||||
|
||||
get groupOptions() {
|
||||
return this.groups
|
||||
.filter((g) => g.id !== 0)
|
||||
.map((g) => {
|
||||
return { id: g.id, name: g.name };
|
||||
});
|
||||
},
|
||||
|
||||
@discourseComputed("selectedItem", "selectedItem.dirty")
|
||||
othersDirty(selectedItem) {
|
||||
return !!this.model.find((q) => q !== selectedItem && q.dirty);
|
||||
},
|
||||
|
||||
@observes("editing")
|
||||
setEverEditing() {
|
||||
if (this.editing && !this.everEditing) {
|
||||
this.set("everEditing", true);
|
||||
}
|
||||
},
|
||||
|
||||
get othersDirty() {
|
||||
return !!this.model.find((q) => q !== this.selectedItem && this.dirty);
|
||||
}
|
||||
|
||||
addCreatedRecord(record) {
|
||||
this.model.pushObject(record);
|
||||
this.set("selectedQueryId", get(record, "id"));
|
||||
this.selectedItem.set("dirty", false);
|
||||
this.selectedQueryId = record.id;
|
||||
this.dirty = false;
|
||||
this.setProperties({
|
||||
showResults: false,
|
||||
results: null,
|
||||
editing: true,
|
||||
editingName: true,
|
||||
editingQuery: true,
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
this.set("loading", true);
|
||||
if (this.get("selectedItem.description") === "") {
|
||||
this.set("selectedItem.description", "");
|
||||
}
|
||||
|
||||
@action
|
||||
save() {
|
||||
this.loading = true;
|
||||
|
||||
return this.selectedItem
|
||||
.save()
|
||||
.then(() => {
|
||||
const query = this.selectedItem;
|
||||
query.markNotDirty();
|
||||
this.set("editing", false);
|
||||
this.dirty = false;
|
||||
this.editingName = false;
|
||||
this.editingQuery = false;
|
||||
})
|
||||
.catch((x) => {
|
||||
popupAjaxError(x);
|
||||
throw x;
|
||||
})
|
||||
.finally(() => this.set("loading", false));
|
||||
},
|
||||
.finally(() => (this.loading = false));
|
||||
}
|
||||
|
||||
@action
|
||||
saveAndRun() {
|
||||
this.save().then(() => this.run());
|
||||
}
|
||||
|
||||
async _importQuery(file) {
|
||||
const json = await this._readFileAsTextAsync(file);
|
||||
|
|
@ -144,7 +130,7 @@ export default Controller.extend({
|
|||
const record = this.store.createRecord("query", query);
|
||||
const response = await record.save();
|
||||
return response.target;
|
||||
},
|
||||
}
|
||||
|
||||
_parseQuery(json) {
|
||||
const parsed = JSON.parse(json);
|
||||
|
|
@ -154,7 +140,7 @@ export default Controller.extend({
|
|||
}
|
||||
query.id = 0; // 0 means no Id yet
|
||||
return query;
|
||||
},
|
||||
}
|
||||
|
||||
_readFileAsTextAsync(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
@ -166,21 +152,67 @@ export default Controller.extend({
|
|||
|
||||
reader.readAsText(file);
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
@bind
|
||||
dragMove(e) {
|
||||
if (!e.movementY && !e.movementX) {
|
||||
return;
|
||||
}
|
||||
|
||||
const editPane = document.querySelector(".query-editor");
|
||||
const target = editPane.querySelector(".panels-flex");
|
||||
const grippie = editPane.querySelector(".grippie");
|
||||
|
||||
// we need to get the initial height / width of edit pane
|
||||
// before we manipulate the size
|
||||
if (!this.initialPaneWidth && !this.originalPaneHeight) {
|
||||
this.originalPaneWidth = target.clientWidth;
|
||||
this.originalPaneHeight = target.clientHeight;
|
||||
}
|
||||
|
||||
const newHeight = Math.max(
|
||||
this.originalPaneHeight,
|
||||
target.clientHeight + e.movementY
|
||||
);
|
||||
const newWidth = Math.max(
|
||||
this.originalPaneWidth,
|
||||
target.clientWidth + e.movementX
|
||||
);
|
||||
|
||||
target.style.height = newHeight + "px";
|
||||
target.style.width = newWidth + "px";
|
||||
grippie.style.width = newWidth + "px";
|
||||
this.appEvents.trigger("ace:resize");
|
||||
}
|
||||
|
||||
@bind
|
||||
didStartDrag() {}
|
||||
|
||||
@bind
|
||||
didEndDrag() {}
|
||||
|
||||
@bind
|
||||
scrollTop() {
|
||||
window.scrollTo(0, 0);
|
||||
this.setProperties({ editing: false, everEditing: false });
|
||||
},
|
||||
this.editingName = false;
|
||||
this.editingQuery = false;
|
||||
}
|
||||
|
||||
actions: {
|
||||
@action
|
||||
updateGroupIds(value) {
|
||||
this.dirty = true;
|
||||
this.selectedItem.set("group_ids", value);
|
||||
}
|
||||
|
||||
@action
|
||||
updateHideSchema(value) {
|
||||
this.set("hideSchema", value);
|
||||
},
|
||||
this.hideSchema = value;
|
||||
}
|
||||
|
||||
@action
|
||||
import(files) {
|
||||
this.set("loading", true);
|
||||
this.loading = true;
|
||||
const file = files[0];
|
||||
this._importQuery(file)
|
||||
.then((record) => this.addCreatedRecord(record))
|
||||
|
|
@ -198,129 +230,160 @@ export default Controller.extend({
|
|||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.set("loading", false);
|
||||
this.loading = false;
|
||||
this.dirty = true;
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
showCreate() {
|
||||
this.set("showCreate", true);
|
||||
},
|
||||
@action
|
||||
displayCreate() {
|
||||
this.showCreate = true;
|
||||
}
|
||||
|
||||
@action
|
||||
editName() {
|
||||
this.set("editing", true);
|
||||
},
|
||||
this.editingName = true;
|
||||
}
|
||||
|
||||
@action
|
||||
editQuery() {
|
||||
this.editingQuery = true;
|
||||
}
|
||||
|
||||
@action
|
||||
download() {
|
||||
window.open(this.get("selectedItem.downloadUrl"), "_blank");
|
||||
},
|
||||
window.open(this.selectedItem.downloadUrl, "_blank");
|
||||
}
|
||||
|
||||
@action
|
||||
goHome() {
|
||||
this.setProperties({
|
||||
asc: null,
|
||||
order: null,
|
||||
showResults: false,
|
||||
editDisabled: false,
|
||||
showRecentQueries: true,
|
||||
selectedQueryId: null,
|
||||
params: null,
|
||||
sortBy: ["last_run_at:desc"],
|
||||
sortByProperty: "last_run_at",
|
||||
sortDescending: true,
|
||||
});
|
||||
this.transitionToRoute({ queryParams: { id: null, params: null } });
|
||||
},
|
||||
}
|
||||
|
||||
@action
|
||||
showHelpModal() {
|
||||
showModal("query-help");
|
||||
},
|
||||
}
|
||||
|
||||
@action
|
||||
resetParams() {
|
||||
this.selectedItem.resetParams();
|
||||
},
|
||||
}
|
||||
|
||||
@action
|
||||
saveDefaults() {
|
||||
this.selectedItem.saveDefaults();
|
||||
},
|
||||
|
||||
save() {
|
||||
this.save();
|
||||
},
|
||||
|
||||
saverun() {
|
||||
this.save().then(() => this.send("run"));
|
||||
},
|
||||
|
||||
sortByProperty(property) {
|
||||
if (this.sortBy[0] === `${property}:desc`) {
|
||||
this.set("sortBy", [`${property}:asc`]);
|
||||
} else {
|
||||
this.set("sortBy", [`${property}:desc`]);
|
||||
}
|
||||
},
|
||||
|
||||
@action
|
||||
updateSortProperty(property) {
|
||||
if (this.sortByProperty === property) {
|
||||
this.sortDescending = !this.sortDescending;
|
||||
} else {
|
||||
this.sortByProperty = property;
|
||||
this.sortDescending = true;
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
create() {
|
||||
const name = this.newQueryName.trim();
|
||||
this.setProperties({
|
||||
loading: true,
|
||||
showCreate: false,
|
||||
showRecentQueries: false,
|
||||
});
|
||||
this.store
|
||||
.createRecord("query", { name })
|
||||
.save()
|
||||
.then((result) => this.addCreatedRecord(result.target))
|
||||
.catch(popupAjaxError)
|
||||
.finally(() => this.set("loading", false));
|
||||
},
|
||||
|
||||
discard() {
|
||||
this.set("loading", true);
|
||||
this.store
|
||||
.find("query", this.get("selectedItem.id"))
|
||||
.then((result) => {
|
||||
const query = this.get("selectedItem");
|
||||
query.setProperties(result.getProperties(Query.updatePropertyNames));
|
||||
if (!query.group_ids || !Array.isArray(query.group_ids)) {
|
||||
query.set("group_ids", []);
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
this.dirty = true;
|
||||
});
|
||||
}
|
||||
query.markNotDirty();
|
||||
this.set("editing", false);
|
||||
|
||||
@action
|
||||
discard() {
|
||||
this.loading = true;
|
||||
this.store
|
||||
.find("query", this.selectedItem.id)
|
||||
.then((result) => {
|
||||
this.selectedItem.setProperties(
|
||||
result.getProperties(Query.updatePropertyNames)
|
||||
);
|
||||
if (
|
||||
!this.selectedItem.group_ids ||
|
||||
!Array.isArray(this.selectedItem.group_ids)
|
||||
) {
|
||||
this.selectedItem.set("group_ids", []);
|
||||
}
|
||||
this.dirty = false;
|
||||
this.editingName = false;
|
||||
this.editingQuery = false;
|
||||
})
|
||||
.catch(popupAjaxError)
|
||||
.finally(() => this.set("loading", false));
|
||||
},
|
||||
.finally(() => (this.loading = false));
|
||||
}
|
||||
|
||||
destroy() {
|
||||
const query = this.selectedItem;
|
||||
this.setProperties({ loading: true, showResults: false });
|
||||
@action
|
||||
destroyQuery() {
|
||||
this.loading = true;
|
||||
this.showResults = false;
|
||||
this.store
|
||||
.destroyRecord("query", query)
|
||||
.then(() => query.set("destroyed", true))
|
||||
.destroyRecord("query", this.selectedItem)
|
||||
.then(() => this.selectedItem.set("destroyed", true))
|
||||
.catch(popupAjaxError)
|
||||
.finally(() => this.set("loading", false));
|
||||
},
|
||||
.finally(() => (this.loading = false));
|
||||
}
|
||||
|
||||
@action
|
||||
recover() {
|
||||
const query = this.selectedItem;
|
||||
this.setProperties({ loading: true, showResults: true });
|
||||
query
|
||||
this.loading = true;
|
||||
this.showResults = true;
|
||||
this.selectedItem
|
||||
.save()
|
||||
.then(() => query.set("destroyed", false))
|
||||
.then(() => this.selectedItem.set("destroyed", false))
|
||||
.catch(popupAjaxError)
|
||||
.finally(() => {
|
||||
this.set("loading", false);
|
||||
});
|
||||
},
|
||||
.finally(() => (this.loading = false));
|
||||
}
|
||||
|
||||
// This is necessary with glimmer's one way data stream to get the child's
|
||||
// changes of 'params' to bubble up.
|
||||
@action
|
||||
updateParams(identifier, value) {
|
||||
this.selectedItem.set(`params.${identifier}`, value);
|
||||
},
|
||||
|
||||
run() {
|
||||
if (this.get("selectedItem.dirty")) {
|
||||
return;
|
||||
}
|
||||
if (this.runDisabled) {
|
||||
|
||||
@action
|
||||
updateSearch(value) {
|
||||
this.search = value;
|
||||
}
|
||||
|
||||
@action
|
||||
updateNewQueryName(value) {
|
||||
this.newQueryName = value;
|
||||
}
|
||||
|
||||
@action
|
||||
setDirty() {
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
@action
|
||||
exitEdit() {
|
||||
this.editingName = false;
|
||||
}
|
||||
|
||||
@action
|
||||
run() {
|
||||
if (this.dirty || this.runDisabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -330,36 +393,29 @@ export default Controller.extend({
|
|||
params: JSON.stringify(this.selectedItem.params),
|
||||
});
|
||||
|
||||
ajax(
|
||||
"/admin/plugins/explorer/queries/" +
|
||||
this.get("selectedItem.id") +
|
||||
"/run",
|
||||
{
|
||||
ajax("/admin/plugins/explorer/queries/" + this.selectedItem.id + "/run", {
|
||||
type: "POST",
|
||||
data: {
|
||||
params: JSON.stringify(this.get("selectedItem.params")),
|
||||
params: JSON.stringify(this.selectedItem.params),
|
||||
explain: this.explain,
|
||||
},
|
||||
}
|
||||
)
|
||||
})
|
||||
.then((result) => {
|
||||
this.set("results", result);
|
||||
this.results = result;
|
||||
if (!result.success) {
|
||||
this.set("showResults", false);
|
||||
this.showResults = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.set("showResults", true);
|
||||
this.showResults = true;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.set("showResults", false);
|
||||
this.showResults = false;
|
||||
if (err.jqXHR && err.jqXHR.status === 422 && err.jqXHR.responseJSON) {
|
||||
this.set("results", err.jqXHR.responseJSON);
|
||||
this.results = err.jqXHR.responseJSON;
|
||||
} else {
|
||||
popupAjaxError(err);
|
||||
}
|
||||
})
|
||||
.finally(() => this.set("loading", false));
|
||||
},
|
||||
},
|
||||
});
|
||||
.finally(() => (this.loading = false));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,16 +7,9 @@ import RestModel from "discourse/models/rest";
|
|||
import { reads } from "@ember/object/computed";
|
||||
|
||||
const Query = RestModel.extend({
|
||||
dirty: false,
|
||||
params: {},
|
||||
results: null,
|
||||
|
||||
@on("init")
|
||||
_init() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.set("dirty", false);
|
||||
},
|
||||
hasParams: reads("param_info.length"),
|
||||
|
||||
@on("init")
|
||||
@observes("param_info")
|
||||
|
|
@ -24,17 +17,6 @@ const Query = RestModel.extend({
|
|||
this.resetParams();
|
||||
},
|
||||
|
||||
@observes("name", "description", "sql", "group_ids")
|
||||
markDirty() {
|
||||
this.set("dirty", true);
|
||||
},
|
||||
|
||||
markNotDirty() {
|
||||
this.set("dirty", false);
|
||||
},
|
||||
|
||||
hasParams: reads("param_info.length"),
|
||||
|
||||
resetParams() {
|
||||
const newParams = {};
|
||||
const oldParams = this.params;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ export default DiscourseRoute.extend({
|
|||
return schemaPromise.then((schema) => {
|
||||
return queryPromise.then((model) => {
|
||||
model.forEach((query) => {
|
||||
query.markNotDirty();
|
||||
query.set(
|
||||
"group_names",
|
||||
(query.group_ids || []).map((id) => groupNames[id])
|
||||
|
|
|
|||
|
|
@ -1,41 +1,45 @@
|
|||
{{#explorer-container hideSchema=hideSchema everEditing=everEditing}}
|
||||
{{#if disallow}}
|
||||
{{#if this.disallow}}
|
||||
<h1>{{i18n "explorer.admins_only"}}</h1>
|
||||
{{else}}
|
||||
{{#unless selectedQueryId}}
|
||||
{{#unless this.validQueryPresent}}
|
||||
<div class="query-list">
|
||||
{{text-field value=search placeholderKey="explorer.search_placeholder"}}
|
||||
{{d-button
|
||||
action=(action "showCreate")
|
||||
icon="plus"
|
||||
class="no-text btn-right"
|
||||
}}
|
||||
{{pick-files-button
|
||||
class="import-btn"
|
||||
label="explorer.import.label"
|
||||
icon="upload"
|
||||
acceptedFormatsOverride=acceptedImportFileTypes
|
||||
showButton=true
|
||||
onFilesPicked=(action "import")
|
||||
}}
|
||||
<TextField
|
||||
@value={{this.search}}
|
||||
@placeholderKey="explorer.search_placeholder"
|
||||
@onChange={{this.updateSearch}}
|
||||
/>
|
||||
<DButton
|
||||
@action={{this.displayCreate}}
|
||||
@icon="plus"
|
||||
@class="no-text btn-right"
|
||||
/>
|
||||
<PickFilesButton
|
||||
@class="import-btn"
|
||||
@label="explorer.import.label"
|
||||
@icon="upload"
|
||||
@acceptedFormatsOverride={{this.acceptedImportFileTypes}}
|
||||
@showButton="true"
|
||||
@onFilesPicked={{this.import}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{{#if showCreate}}
|
||||
{{#if this.showCreate}}
|
||||
<div class="query-create">
|
||||
{{text-field
|
||||
value=newQueryName
|
||||
placeholderKey="explorer.create_placeholder"
|
||||
}}
|
||||
{{d-button
|
||||
action=(action "create")
|
||||
disabled=createDisabled
|
||||
label="explorer.create"
|
||||
icon="plus"
|
||||
}}
|
||||
<TextField
|
||||
@value={{this.newQueryName}}
|
||||
@placeholderKey="explorer.create_placeholder"
|
||||
@onChange={{this.updateNewQueryName}}
|
||||
/>
|
||||
<DButton
|
||||
@action={{this.create}}
|
||||
@disabled={{this.createDisabled}}
|
||||
@label="explorer.create"
|
||||
@icon="plus"
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if othersDirty}}
|
||||
{{#if this.othersDirty}}
|
||||
<div class="warning">
|
||||
{{d-icon "exclamation-triangle"}}
|
||||
{{i18n "explorer.others_dirty"}}
|
||||
|
|
@ -43,40 +47,49 @@
|
|||
{{/if}}
|
||||
{{/unless}}
|
||||
|
||||
{{#if model.length}}
|
||||
{{#unless selectedItem.fake}}
|
||||
<div class="query-edit {{if editName 'editing'}}">
|
||||
{{#if selectedItem}}
|
||||
{{#if editing}}
|
||||
{{#if this.model.length}}
|
||||
{{#unless this.selectedItem.fake}}
|
||||
<div class="query-edit {{if this.editName 'editing'}}">
|
||||
{{#if this.selectedItem}}
|
||||
{{#if this.editingName}}
|
||||
<div class="name">
|
||||
{{d-button
|
||||
action=(action "goHome")
|
||||
icon="chevron-left"
|
||||
class="previous"
|
||||
}}
|
||||
<DButton
|
||||
@action={{this.goHome}}
|
||||
@icon="chevron-left"
|
||||
@class="previous"
|
||||
/>
|
||||
<DButton
|
||||
@action={{this.exitEdit}}
|
||||
@icon="times"
|
||||
@class="previous"
|
||||
/>
|
||||
<div class="name-text-field">
|
||||
{{text-field value=selectedItem.name}}
|
||||
<TextField
|
||||
@value={{this.selectedItem.name}}
|
||||
@onChange={{this.setDirty}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="desc">
|
||||
{{textarea
|
||||
value=selectedItem.description
|
||||
placeholder=(i18n "explorer.description_placeholder")
|
||||
}}
|
||||
<DTextarea
|
||||
@value={{this.selectedItem.description}}
|
||||
@placeholder={{(i18n "explorer.description_placeholder")}}
|
||||
@input={{this.setDirty}}
|
||||
/>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="name">
|
||||
{{d-button
|
||||
action=(action "goHome")
|
||||
icon="chevron-left"
|
||||
class="previous"
|
||||
}}
|
||||
<DButton
|
||||
@action={{this.goHome}}
|
||||
@icon="chevron-left"
|
||||
@class="previous"
|
||||
/>
|
||||
|
||||
<h1>
|
||||
{{selectedItem.name}}
|
||||
{{#unless editDisabled}}
|
||||
<a href {{action "editName" class="edit-query-name"}}>
|
||||
{{this.selectedItem.name}}
|
||||
{{#unless this.editDisabled}}
|
||||
<a href {{action "editName"}} class="edit-query-name">
|
||||
{{d-icon "pencil-alt"}}
|
||||
</a>
|
||||
{{/unless}}
|
||||
|
|
@ -84,21 +97,21 @@
|
|||
</div>
|
||||
|
||||
<div class="desc">
|
||||
{{selectedItem.description}}
|
||||
{{this.selectedItem.description}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#unless selectedItem.destroyed}}
|
||||
{{#unless this.selectedItem.destroyed}}
|
||||
<div class="pull-left">
|
||||
<div class="groups">
|
||||
<span class="label">{{i18n "explorer.allow_groups"}}</span>
|
||||
<span>
|
||||
{{multi-select
|
||||
value=selectedItem.group_ids
|
||||
content=groupOptions
|
||||
allowAny=false
|
||||
onSelect=(action (mut selectedItem.group_ids))
|
||||
}}
|
||||
<MultiSelect
|
||||
@value={{this.selectedItem.group_ids}}
|
||||
@content={{this.groupOptions}}
|
||||
@options={{hash allowAny=false}}
|
||||
@onChange={{this.updateGroupIds}}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -106,28 +119,35 @@
|
|||
|
||||
<div class="clear"></div>
|
||||
|
||||
{{! the SQL editor will show the first time you }}
|
||||
{{#if everEditing}}
|
||||
<div class="query-editor {{if hideSchema 'no-schema'}}">
|
||||
{{#if this.editingQuery}}
|
||||
<div class="query-editor {{if this.hideSchema 'no-schema'}}">
|
||||
<div class="panels-flex">
|
||||
<div class="editor-panel">
|
||||
{{ace-editor
|
||||
content=selectedItem.sql
|
||||
mode="sql"
|
||||
disabled=selectedItem.destroyed
|
||||
}}
|
||||
<AceEditor
|
||||
@content={{this.selectedItem.sql}}
|
||||
@mode="sql"
|
||||
@disabled={{this.selectedItem.destroyed}}
|
||||
{{on "click" this.setDirty}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="right-panel">
|
||||
<ExplorerSchema
|
||||
@schema={{schema}}
|
||||
@hideSchema={{hideSchema}}
|
||||
@updateHideSchema={{action "updateHideSchema"}}
|
||||
@schema={{this.schema}}
|
||||
@hideSchema={{this.hideSchema}}
|
||||
@updateHideSchema={{this.updateHideSchema}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grippie">
|
||||
<div
|
||||
class="grippie"
|
||||
{{draggable
|
||||
didStartDrag=this.didStartDrag
|
||||
didEndDrag=this.didEndDrag
|
||||
dragMove=this.dragMove
|
||||
}}
|
||||
>
|
||||
{{d-icon "discourse-expand"}}
|
||||
</div>
|
||||
|
||||
|
|
@ -135,69 +155,72 @@
|
|||
</div>
|
||||
{{else}}
|
||||
<div class="sql">
|
||||
{{hljs-code-view value=selectedItem.sql codeClass="sql"}}
|
||||
<CodeView
|
||||
@value={{selectedItem.sql}}
|
||||
@codeClass="sql"
|
||||
@setDirty={{this.setDirty}}
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<div class="pull-left left-buttons">
|
||||
{{#if everEditing}}
|
||||
{{d-button
|
||||
action=(action "save")
|
||||
label="explorer.save"
|
||||
disabled=saveDisable
|
||||
}}
|
||||
{{#if this.editingQuery}}
|
||||
<DButton
|
||||
@action={{this.save}}
|
||||
@label="explorer.save"
|
||||
@disabled={{this.saveDisabled}}
|
||||
/>
|
||||
{{else}}
|
||||
{{#unless editDisabled}}
|
||||
{{d-button
|
||||
action=(action "editName")
|
||||
label="explorer.edit"
|
||||
icon="pencil-alt"
|
||||
}}
|
||||
{{#unless this.editDisabled}}
|
||||
<DButton
|
||||
@action={{this.editQuery}}
|
||||
@label="explorer.edit"
|
||||
@icon="pencil-alt"
|
||||
/>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
|
||||
{{d-button
|
||||
action=(action "download")
|
||||
label="explorer.export"
|
||||
disabled=runDisabled
|
||||
icon="download"
|
||||
}}
|
||||
<DButton
|
||||
@action={{this.download}}
|
||||
@label="explorer.export"
|
||||
@disabled={{this.runDisabled}}
|
||||
@icon="download"
|
||||
/>
|
||||
|
||||
{{#if everEditing}}
|
||||
{{d-button
|
||||
action=(action "showHelpModal")
|
||||
label="explorer.help.label"
|
||||
icon="question-circle"
|
||||
}}
|
||||
{{#if this.editingQuery}}
|
||||
<DButton
|
||||
@action={{this.showHelpModal}}
|
||||
@label="explorer.help.label"
|
||||
@icon="question-circle"
|
||||
/>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="pull-right right-buttons">
|
||||
{{#if selectedItem.destroyed}}
|
||||
{{d-button
|
||||
action=(action "recover")
|
||||
class=""
|
||||
icon="undo"
|
||||
label="explorer.recover"
|
||||
}}
|
||||
{{#if this.selectedItem.destroyed}}
|
||||
<DButton
|
||||
@action={{this.recover}}
|
||||
@icon="undo"
|
||||
@label="explorer.recover"
|
||||
/>
|
||||
{{else}}
|
||||
{{#if everEditing}}
|
||||
{{d-button
|
||||
action=(action "discard")
|
||||
icon="undo"
|
||||
label="explorer.undo"
|
||||
disabled=saveDisabled
|
||||
}}
|
||||
{{#if this.editingQuery}}
|
||||
<DButton
|
||||
@action={{this.discard}}
|
||||
@icon="undo"
|
||||
@label="explorer.undo"
|
||||
@disabled={{this.saveDisabled}}
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
{{d-button
|
||||
action=(action "destroy")
|
||||
class="btn-danger"
|
||||
icon="trash-alt"
|
||||
label="explorer.delete"
|
||||
}}
|
||||
<DButton
|
||||
@action={{this.destroyQuery}}
|
||||
@class="btn-danger"
|
||||
@icon="trash-alt"
|
||||
@label="explorer.delete"
|
||||
/>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
|
|
@ -205,53 +228,52 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
|
||||
<form class="query-run" {{action "run" on="submit"}}>
|
||||
<form class="query-run" {{on "submit" this.run}}>
|
||||
<ParamInputsWrapper
|
||||
@hasParams={{selectedItem.hasParams}}
|
||||
@params={{selectedItem.params}}
|
||||
@initialValues={{parsedParams}}
|
||||
@paramInfo={{selectedItem.param_info}}
|
||||
@updateParams={{action "updateParams"}}
|
||||
@hasParams={{this.selectedItem.hasParams}}
|
||||
@params={{this.selectedItem.params}}
|
||||
@initialValues={{this.parsedParams}}
|
||||
@paramInfo={{this.selectedItem.param_info}}
|
||||
@updateParams={{this.updateParams}}
|
||||
/>
|
||||
|
||||
{{#if runDisabled}}
|
||||
{{#if saveDisabled}}
|
||||
{{d-button
|
||||
label="explorer.run"
|
||||
disabled="true"
|
||||
class="btn-primary"
|
||||
}}
|
||||
{{#if this.runDisabled}}
|
||||
{{#if this.saveDisabled}}
|
||||
<DButton
|
||||
@label="explorer.run"
|
||||
@disabled="true"
|
||||
@class="btn-primary"
|
||||
/>
|
||||
{{else}}
|
||||
{{d-button
|
||||
action=(action "saverun")
|
||||
icon="play"
|
||||
label="explorer.saverun"
|
||||
class="btn-primary"
|
||||
}}
|
||||
<DButton
|
||||
@action={{this.saveAndRun}}
|
||||
@icon="play"
|
||||
@label="explorer.saverun"
|
||||
@class="btn-primary"
|
||||
/>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{d-button
|
||||
action=(action "run")
|
||||
icon="play"
|
||||
label="explorer.run"
|
||||
disabled=runDisabled
|
||||
class="btn-primary"
|
||||
type="submit"
|
||||
}}
|
||||
<DButton
|
||||
@action={{this.run}}
|
||||
@icon="play"
|
||||
@label="explorer.run"
|
||||
@disabled={{this.runDisabled}}
|
||||
@class="btn-primary"
|
||||
@type="submit"
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
<label class="query-plan">
|
||||
{{input type="checkbox" checked=explain name="explain"}}
|
||||
<Input @type="checkbox" @checked={{this.explain}} name="explain" />
|
||||
{{i18n "explorer.explain_label"}}
|
||||
</label>
|
||||
</form>
|
||||
|
||||
<hr />
|
||||
{{/unless}}
|
||||
|
||||
{{conditional-loading-spinner condition=loading}}
|
||||
<ConditionalLoadingSpinner @condition={{this.loading}} />
|
||||
|
||||
{{#unless selectedItem.fake}}
|
||||
{{#unless this.selectedItem.fake}}
|
||||
<QueryResultsWrapper
|
||||
@results={{results}}
|
||||
@showResults={{showResults}}
|
||||
|
|
@ -260,7 +282,7 @@
|
|||
/>
|
||||
{{/unless}}
|
||||
|
||||
{{#if showRecentQueries}}
|
||||
{{#unless this.validQueryPresent}}
|
||||
<div class="container">
|
||||
<table class="recent-queries">
|
||||
<thead class="heading-container">
|
||||
|
|
@ -268,30 +290,30 @@
|
|||
<div
|
||||
role="button"
|
||||
class="heading-toggle"
|
||||
{{action "sortByProperty" "name"}}
|
||||
{{on "click" (fn this.updateSortProperty "name")}}
|
||||
>
|
||||
{{table-header-toggle
|
||||
field="name"
|
||||
labelKey="explorer.query_name"
|
||||
order=order
|
||||
asc=asc
|
||||
automatic=true
|
||||
}}
|
||||
<TableHeaderToggle
|
||||
@field="name"
|
||||
@labelKey="explorer.query_user"
|
||||
@order={{this.order}}
|
||||
@asc={{(not this.sortDescending)}}
|
||||
@automatic="true"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th class="col heading created-by">
|
||||
<div
|
||||
role="button"
|
||||
class="heading-toggle"
|
||||
{{action "sortByProperty" "username"}}
|
||||
{{on "click" (fn this.updateSortProperty "username")}}
|
||||
>
|
||||
{{table-header-toggle
|
||||
field="username"
|
||||
labelKey="explorer.query_user"
|
||||
order=order
|
||||
asc=asc
|
||||
automatic=true
|
||||
}}
|
||||
<TableHeaderToggle
|
||||
@field="username"
|
||||
@labelKey="explorer.query_user"
|
||||
@order={{this.order}}
|
||||
@asc={{(not this.sortDescending)}}
|
||||
@automatic="true"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th class="col heading group-names">
|
||||
|
|
@ -303,20 +325,20 @@
|
|||
<div
|
||||
role="button"
|
||||
class="heading-toggle"
|
||||
{{action "sortByProperty" "last_run_at"}}
|
||||
{{on "click" (fn this.updateSortProperty "last_run_at")}}
|
||||
>
|
||||
{{table-header-toggle
|
||||
field="last_run_at"
|
||||
labelKey="explorer.query_time"
|
||||
order=order
|
||||
asc=asc
|
||||
automatic=true
|
||||
}}
|
||||
<TableHeaderToggle
|
||||
@field="last_run_at"
|
||||
@labelKey="explorer.query_time"
|
||||
@order={{this.order}}
|
||||
@asc={{(not this.sortDescending)}}
|
||||
@automatic="true"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each filteredContent as |query|}}
|
||||
{{#each this.filteredContent as |query|}}
|
||||
<tr class="query-row">
|
||||
<td>
|
||||
<a
|
||||
|
|
@ -360,9 +382,8 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
|
||||
<div class="explorer-pad-bottom"></div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/explorer-container}}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<pre><code class={{codeClass}}>{{value}}</code></pre>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{{#d-modal-body title="explorer.help.modal_title"}}
|
||||
<DModalBody @title="explorer.help.modal_title">
|
||||
{{html-safe (i18n "explorer.help.auto_resolution")}}
|
||||
{{html-safe (i18n "explorer.help.custom_params")}}
|
||||
{{html-safe (i18n "explorer.help.default_values")}}
|
||||
{{html-safe (i18n "explorer.help.data_types")}}
|
||||
{{/d-modal-body}}
|
||||
</DModalBody>
|
||||
|
|
@ -22,7 +22,7 @@ ar:
|
|||
label: "استيراد"
|
||||
modal: "استيراد استعلام"
|
||||
unparseable_json: "ملف JSON غير قابل للتحليل"
|
||||
wrong_json: "ملف JSON خاطئ. يجب أن يحتوي ملف JSON على كائن \"استعلام\"، والذي يجب أن يحتوي على الأقل على خاصية \"sql\"."
|
||||
wrong_json: 'ملف JSON خاطئ. يجب أن يحتوي ملف JSON على كائن "استعلام"، والذي يجب أن يحتوي على الأقل على خاصية "sql".'
|
||||
help:
|
||||
label: "المساعدة"
|
||||
modal_title: "مساعدة مستكشف البيانات"
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ it:
|
|||
label: "Importa"
|
||||
modal: "Importa una query"
|
||||
unparseable_json: "File JSON non analizzabile."
|
||||
wrong_json: "File JSON errato. Un file JSON dovrebbe contenere un oggetto \"query\" contenente almeno una proprietà \"sql\"."
|
||||
wrong_json: 'File JSON errato. Un file JSON dovrebbe contenere un oggetto "query" contenente almeno una proprietà "sql".'
|
||||
help:
|
||||
label: "Guida"
|
||||
modal_title: "Guida di Data Explorer"
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ pt_BR:
|
|||
label: "Importar"
|
||||
modal: "Importar Uma Consulta"
|
||||
unparseable_json: "Arquivo JSON não analisável"
|
||||
wrong_json: "Arquivo JSON incorreto. Um arquivo JSON deve conter um objeto \"consulta\", que deve ter pelo menos a propriedade \"sql\""
|
||||
wrong_json: 'Arquivo JSON incorreto. Um arquivo JSON deve conter um objeto "consulta", que deve ter pelo menos a propriedade "sql"'
|
||||
help:
|
||||
label: "Ajuda"
|
||||
modal_title: "Ajuda do Explorador de Dados"
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@
|
|||
|
||||
hr:
|
||||
site_settings:
|
||||
data_explorer_enabled: "Uključi \"Data Explorer\" na /admin/plugins/explorer"
|
||||
data_explorer_enabled: 'Uključi "Data Explorer" na /admin/plugins/explorer'
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@
|
|||
|
||||
pt:
|
||||
site_settings:
|
||||
data_explorer_enabled: "Ativar o «Explorador de Dados» em \"/admin/plugins/explorer\""
|
||||
data_explorer_enabled: 'Ativar o «Explorador de Dados» em "/admin/plugins/explorer"'
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@
|
|||
|
||||
sk:
|
||||
site_settings:
|
||||
data_explorer_enabled: "Povoľ \"Data explorer\" v /admin/plugins/explorer"
|
||||
data_explorer_enabled: 'Povoľ "Data explorer" v /admin/plugins/explorer'
|
||||
|
|
|
|||
Loading…
Reference in New Issue