Discourse/discourse-data-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade query-result to Octane (#204)

Browse Source 
* Upgrade query-result to Octane
This commit is contained in:
Isaac Janzen
2022-12-20 12:09:37 -06:00
committed by GitHub
parent cf365f7df2
commit 4c70cfa100
8 changed files with 334 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/javascripts/discourse/templates/explorer-query-result.hbs → assets/javascripts/discourse/components/query-result.hbs
+36 -39
View File
@@ -1,76 +1,73 @@
<article>
<header class="result-header">
<div class="result-info">
{{d-button
action=(action "downloadResultJson")
icon="download"
label="explorer.download_json"
group=group
}}
<DButton
@action={{this.downloadResultJson}}
@icon="download"
@label="explorer.download_json"
/>
{{d-button
action=(action "downloadResultCsv")
icon="download"
label="explorer.download_csv"
group=group
}}
<DButton
@action={{this.downloadResultCsv}}
@icon="download"
@label="explorer.download_csv"
/>
{{#if canShowChart}}
{{#if showChart}}
{{d-button
action=(action "showTable")
icon="table"
label="explorer.show_table"
group=group
}}
{{#if this.canShowChart}}
{{#if this.chartDisplayed}}
<DButton
@action={{this.hideChart}}
@icon="table"
@label="explorer.show_table"
/>
{{else}}
{{d-button
action=(action "showChart")
icon="chart-bar"
label="explorer.show_graph"
group=group
}}
<DButton
@action={{this.showChart}}
@icon="chart-bar"
@label="explorer.show_graph"
/>
{{/if}}
{{/if}}
</div>
<div class="result-about">
{{resultCount}}
{{duration}}
{{this.resultCount}}
{{this.duration}}
</div>
<br />
{{~#if hasExplain}}
<pre class="result-explain"><code>
{{~content.explain}}
</code></pre>
{{~#if this.explainText}}
<pre class="result-explain">
<code>
{{~this.explainText}}
</code>
</pre>
{{~/if}}
<br />
</header>
<section>
{{#if showChart}}
{{#if this.chartDisplayed}}
<DataExplorerBarChart
@labels={{chartLabels}}
@values={{chartValues}}
@datasetName={{chartDatasetName}}
@labels={{this.chartLabels}}
@values={{this.chartValues}}
@datasetName={{this.chartDatasetName}}
/>
{{else}}
<table>
<thead>
<tr class="headers">
{{#each columnDispNames as |col|}}
{{#each this.columnNames as |col|}}
<th>{{col}}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each rows as |row|}}
{{#each this.rows as |row|}}
<QueryRowContent
@row={{row}}
@fallbackTemplate={{this.fallbackTemplate}}
@columnTemplates={{this.columnTemplates}}
@lookupUser={{this.lookupUser}}
@lookupBadge={{this.lookupBadge}}
assets/javascripts/discourse/components/query-result.js
+257 -250
View File
File diff suppressed because it is too large Load Diff
assets/javascripts/discourse/components/query-results-wrapper.hbs
+11
View File
@@ -0,0 +1,11 @@
{{#if @results}}
<div class="query-results">
{{#if @showResults}}
<QueryResult @query={{@selectedItem}} @content={{@results}} />
{{else}}
{{#each @results.errors as |err|}}
<pre class="query-error"><code>{{~err}}</code></pre>
{{/each}}
{{/if}}
</div>
{{/if}}
assets/javascripts/discourse/components/query-row-content.js
+14 -11
View File
@@ -9,8 +9,19 @@ import { get } from "@ember/object";
import { isEmpty } from "@ember/utils";
import { escapeExpression } from "discourse/lib/utilities";
import { cached } from "@glimmer/tracking";
import { findRawTemplate } from "discourse-common/lib/raw-templates";
export default class QueryRowContent extends Component {
constructor() {
super(...arguments);
this.helpers = {
"icon-or-image": icon_or_image_replacement,
"category-link": category_badge_replacement,
reltime: bound_date_replacement,
};
}
@cached
get results() {
return this.args.columnTemplates.map((t, idx) => {
@@ -46,23 +57,15 @@ export default class QueryRowContent extends Component {
}
try {
return htmlSafe(
(t.template || this.args.fallbackTemplate)(ctx, params)
);
return htmlSafe((t.template || this.fallbackTemplate)(ctx, params));
} catch (e) {
return "error";
}
});
}
constructor() {
super(...arguments);
this.helpers = {
"icon-or-image": icon_or_image_replacement,
"category-link": category_badge_replacement,
reltime: bound_date_replacement,
};
fallbackTemplate() {
return findRawTemplate("javascripts/explorer/text");
}
}
assets/javascripts/discourse/templates/admin/plugins-explorer.hbs
+6 -11
View File
@@ -252,17 +252,12 @@
{{conditional-loading-spinner condition=loading}}
{{#unless selectedItem.fake}}
{{#if results}}
<div class="query-results">
{{#if showResults}}
{{query-result query=selectedItem content=results}}
{{else}}
{{#each results.errors as |err|}}
<pre class="query-error"><code>{{~err}}</code></pre>
{{/each}}
{{/if}}
</div>
{{/if}}
<QueryResultsWrapper
@results={{results}}
@showResults={{showResults}}
@query={{selectedItem}}
@content={{results}}
/>
{{/unless}}
{{#if showRecentQueries}}
test/javascripts/acceptance/run-query-test.js
+1
View File
@@ -199,6 +199,7 @@ acceptance("Data Explorer Plugin | Run Query", function (needs) {
queryAll("div.query-results table tbody tr").length === 2,
"the table with query results was rendered"
);
assert.ok(
query("div.result-info button:nth-child(3) span").innerText.trim() ===
I18n.t("explorer.show_graph"),
test/javascripts/integration/components/query-result-test.js
+9 -9
View File
@@ -16,7 +16,7 @@ discourseModule(
setupRenderingTest(hooks);
componentTest("it renders query results", {
template: hbs`{{query-result content=content}}`,
template: hbs`<QueryResult @content={{content}} />`,
beforeEach() {
const results = {
@@ -70,7 +70,7 @@ discourseModule(
});
componentTest("it renders badge names in query results", {
template: hbs`{{query-result content=content}}`,
template: hbs`<QueryResult @content={{content}} />`,
beforeEach() {
const results = {
@@ -102,7 +102,7 @@ discourseModule(
});
componentTest("it renders a post in query results", {
template: hbs`{{query-result content=content}}`,
template: hbs`<QueryResult @content={{content}} />`,
beforeEach() {
const results = {
@@ -141,7 +141,7 @@ discourseModule(
});
componentTest("it renders a category_id in query results", {
template: hbs`{{query-result content=content}}`,
template: hbs`<QueryResult @content={{content}} />`,
beforeEach() {
const results = {
@@ -183,7 +183,7 @@ discourseModule(
setupRenderingTest(hooks);
componentTest("navigation between a table and a chart works", {
template: hbs`{{query-result content=content}}`,
template: hbs`<QueryResult @content={{content}} />`,
beforeEach() {
const results = {
@@ -228,7 +228,7 @@ discourseModule(
componentTest(
"it renders a chart button when data has two columns and numbers in the second column",
{
template: hbs`{{query-result content=content}}`,
template: hbs`<QueryResult @content={{content}} />`,
beforeEach() {
const results = {
@@ -255,7 +255,7 @@ discourseModule(
componentTest(
"it doesn't render a chart button when data contains identifiers in the second column",
{
template: hbs`{{query-result content=content}}`,
template: hbs`<QueryResult @content={{content}} />`,
beforeEach() {
const results = {
@@ -285,7 +285,7 @@ discourseModule(
componentTest(
"it doesn't render a chart button when data contains one column",
{
template: hbs`{{query-result content=content}}`,
template: hbs`<QueryResult @content={{content}} />`,
beforeEach() {
const results = {
@@ -306,7 +306,7 @@ discourseModule(
componentTest(
"it doesn't render a chart button when data contains more than two columns",
{
template: hbs`{{query-result content=content}}`,
template: hbs`<QueryResult @content={{content}} />`,
beforeEach() {
const results = {
test/javascripts/unit/components/query-result-test.js
-111
View File
@@ -1,111 +0,0 @@
import { discourseModule } from "discourse/tests/helpers/qunit-helpers";
import { test } from "qunit";
discourseModule("Unit | Component | query-result", function () {
test("it transforms data for a chart", function (assert) {
const component = this.container
.factoryFor("component:query-result")
.create({ renderer: {} });
component.setProperties({
content: {
colrender: [],
result_count: 2,
columns: ["user", "like_count"],
rows: [
["user1", 10],
["user2", 20],
],
},
});
assert.deepEqual(
component.chartLabels,
["user1", "user2"],
"labels are correct"
);
assert.deepEqual(component.chartValues, [10, 20], "values are correct");
assert.deepEqual(
component.chartDatasetName,
"like_count",
"the dataset name is correct"
);
});
test("it uses descriptive chart labels instead of identifiers", function (assert) {
const component = this.container
.factoryFor("component:query-result")
.create({ renderer: {} });
component.setProperties({
content: {
colrender: { 0: "user" },
relations: {
user: [
{ id: 1, username: "user1" },
{ id: 2, username: "user2" },
],
},
result_count: 2,
columns: ["user", "like_count"],
rows: [
[1, 10],
[2, 20],
],
},
});
assert.deepEqual(component.chartLabels, ["user1", "user2"]);
});
test("it uses an identifier as a chart label if labelSelector doesn't exist", function (assert) {
const component = this.container
.factoryFor("component:query-result")
.create({ renderer: {} });
component.setProperties({
content: {
colrender: { 0: "unknown_entity" },
relations: {
unknown_entity: [
{ id: 1, username: "user1" },
{ id: 2, username: "user2" },
],
},
result_count: 2,
columns: ["user", "like_count"],
rows: [
[1, 10],
[2, 20],
],
},
});
assert.deepEqual(component.chartLabels, ["1", "2"]);
});
test("it cuts too long chart labels", function (assert) {
const component = this.container
.factoryFor("component:query-result")
.create({ renderer: {} });
component.setProperties({
content: {
colrender: [],
result_count: 2,
columns: ["user", "like_count"],
rows: [
["This string is too long to be used as a label on a chart", 10],
["This string is too long to be used as a label on a chart", 20],
],
},
});
assert.deepEqual(component.chartLabels, [
"This string is too long t...",
"This string is too long t...",
]);
});
});