diff --git a/app/assets/javascripts/admin/components/dashboard-mini-table.js.es6 b/app/assets/javascripts/admin/components/dashboard-inline-table.js.es6 similarity index 95% rename from app/assets/javascripts/admin/components/dashboard-mini-table.js.es6 rename to app/assets/javascripts/admin/components/dashboard-inline-table.js.es6 index e416601d851..070625e9e47 100644 --- a/app/assets/javascripts/admin/components/dashboard-mini-table.js.es6 +++ b/app/assets/javascripts/admin/components/dashboard-inline-table.js.es6 @@ -2,7 +2,7 @@ import { ajax } from 'discourse/lib/ajax'; import computed from 'ember-addons/ember-computed-decorators'; export default Ember.Component.extend({ - classNames: ["dashboard-mini-table"], + classNames: ["dashboard-table", "dashboard-inline-table"], classNameBindings: ["isLoading"], diff --git a/app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6 b/app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6 index 7d1986721b2..eea4bc917cd 100644 --- a/app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6 +++ b/app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6 @@ -11,22 +11,18 @@ export default Ember.Component.extend({ total: null, trend: null, title: null, - chartData: null, oneDataPoint: false, backgroundColor: "rgba(200,220,240,0.3)", borderColor: "#08C", + didInsertElement() { + this._super(); + this._initializeChart(); + }, + didUpdateAttrs() { this._super(); - - loadScript("/javascripts/Chart.min.js").then(() => { - if (this.get("model") && !this.get("chartData")) { - this._setPropertiesFromModel(this.get("model")); - this._drawChart(); - } else if (this.get("dataSource")) { - this._fetchReport(); - } - }); + this._initializeChart(); }, @computed("dataSourceName") @@ -75,13 +71,27 @@ export default Ember.Component.extend({ }); }, + _initializeChart() { + loadScript("/javascripts/Chart.min.js").then(() => { + if (this.get("model") && !this.get("values")) { + this._setPropertiesFromModel(this.get("model")); + this._drawChart(); + } else if (this.get("dataSource")) { + this._fetchReport(); + } + }); + }, + _drawChart() { - const context = this.$(".chart-canvas")[0].getContext("2d"); + const $chartCanvas = this.$(".chart-canvas"); + if (!$chartCanvas.length) return; + + const context = $chartCanvas[0].getContext("2d"); const data = { - labels: this.get("chartData").map(r => r.x), + labels: this.get("labels"), datasets: [{ - data: this.get("chartData").map(r => r.y), + data: this.get("values"), backgroundColor: this.get("backgroundColor"), borderColor: this.get("borderColor") }] @@ -92,17 +102,18 @@ export default Ember.Component.extend({ _setPropertiesFromModel(model) { this.setProperties({ + labels: model.data.map(r => r.x), + values: model.data.map(r => r.y), oneDataPoint: (this.get("startDate") && this.get("endDate")) && this.get("startDate").isSame(this.get("endDate"), 'day'), total: model.total, title: model.title, - trend: this._computeTrend(model.total, model.prev30Days), - chartData: model.data + trend: this._computeTrend(model.total, model.prev30Days) }); }, _buildChartConfig(data) { - const values = this.get("chartData").map(d => d.y); + const values = this.get("values"); const max = Math.max(...values); const min = Math.min(...values); const stepSize = Math.max(...[Math.ceil((max - min)/5), 20]); diff --git a/app/assets/javascripts/admin/components/dashboard-table-trending-search.js.es6 b/app/assets/javascripts/admin/components/dashboard-table-trending-search.js.es6 new file mode 100644 index 00000000000..aac53bb9c0c --- /dev/null +++ b/app/assets/javascripts/admin/components/dashboard-table-trending-search.js.es6 @@ -0,0 +1,17 @@ +import DashboardTable from "admin/components/dashboard-table"; +import { number } from 'discourse/lib/formatter'; + +export default DashboardTable.extend({ + layoutName: "admin/templates/components/dashboard-table", + + classNames: ["dashboard-table", "dashboard-table-trending-search"], + + transformModel(model) { + return { + labels: model.labels, + values: model.data.map(data => { + return [data[0], number(data[1]), number(data[2])]; + }) + }; + }, +}); diff --git a/app/assets/javascripts/admin/components/dashboard-table.js.es6 b/app/assets/javascripts/admin/components/dashboard-table.js.es6 new file mode 100644 index 00000000000..2bf5929443d --- /dev/null +++ b/app/assets/javascripts/admin/components/dashboard-table.js.es6 @@ -0,0 +1,83 @@ +import { ajax } from 'discourse/lib/ajax'; +import computed from 'ember-addons/ember-computed-decorators'; + +export default Ember.Component.extend({ + classNames: ["dashboard-table"], + + classNameBindings: ["isLoading"], + + total: null, + labels: null, + title: null, + chartData: null, + isLoading: false, + help: null, + helpPage: null, + model: null, + + transformModel(model) { + const data = model.data.sort((a, b) => a.x >= b.x); + + return { + labels: model.labels, + values: data + }; + }, + + didInsertElement() { + this._super(); + this._initializeTable(); + }, + + didUpdateAttrs() { + this._super(); + this._initializeTable(); + }, + + @computed("dataSourceName") + dataSource(dataSourceName) { + return `/admin/reports/${dataSourceName}`; + }, + + _initializeTable() { + if (this.get("model") && !this.get("values")) { + this._setPropertiesFromModel(this.get("model")); + } else if (this.get("dataSource")) { + this._fetchReport(); + } + }, + + _fetchReport() { + if (this.get("isLoading")) return; + + this.set("isLoading", true); + + let payload = {data: {}}; + + if (this.get("startDate")) { + payload.data.start_date = this.get("startDate").toISOString(); + } + + if (this.get("endDate")) { + payload.data.end_date = this.get("endDate").toISOString(); + } + + ajax(this.get("dataSource"), payload) + .then((response) => { + this._setPropertiesFromModel(response.report); + }).finally(() => { + this.set("isLoading", false); + }); + }, + + _setPropertiesFromModel(model) { + const { labels, values } = this.transformModel(model); + + this.setProperties({ + labels, + values, + total: model.total, + title: model.title + }); + } +}); diff --git a/app/assets/javascripts/admin/controllers/admin-dashboard-next.js.es6 b/app/assets/javascripts/admin/controllers/admin-dashboard-next.js.es6 index 443597c2fb0..3afb55343dd 100644 --- a/app/assets/javascripts/admin/controllers/admin-dashboard-next.js.es6 +++ b/app/assets/javascripts/admin/controllers/admin-dashboard-next.js.es6 @@ -34,7 +34,7 @@ export default Ember.Controller.extend({ }).finally(() => { this.set("isLoading", false); }); - }; + } }, @computed("period") diff --git a/app/assets/javascripts/admin/routes/admin-dashboard-next.js.es6 b/app/assets/javascripts/admin/routes/admin-dashboard-next.js.es6 index afb2eaaec5f..30ca9b033c0 100644 --- a/app/assets/javascripts/admin/routes/admin-dashboard-next.js.es6 +++ b/app/assets/javascripts/admin/routes/admin-dashboard-next.js.es6 @@ -1,5 +1,5 @@ export default Discourse.Route.extend({ - setupController(controller) { - controller.fetchDashboard(); + activate() { + this.controllerFor('admin-dashboard-next').fetchDashboard(); } }); diff --git a/app/assets/javascripts/admin/templates/components/dashboard-mini-table.hbs b/app/assets/javascripts/admin/templates/components/dashboard-inline-table.hbs similarity index 100% rename from app/assets/javascripts/admin/templates/components/dashboard-mini-table.hbs rename to app/assets/javascripts/admin/templates/components/dashboard-inline-table.hbs diff --git a/app/assets/javascripts/admin/templates/components/dashboard-table.hbs b/app/assets/javascripts/admin/templates/components/dashboard-table.hbs new file mode 100644 index 00000000000..cb4070e40ea --- /dev/null +++ b/app/assets/javascripts/admin/templates/components/dashboard-table.hbs @@ -0,0 +1,31 @@ +{{#conditional-loading-spinner condition=isLoading}} +
{{label}} | + {{/each}} +
---|
{{v}} | + {{/each}} +
- {{disk_space.backups_used}} ({{i18n "admin.dashboard.space_free" size=disk_space.backups_free}})
-
- {{{i18n "admin.dashboard.lastest_backup" date=backupTimestamp}}}
-
- {{disk_space.uploads_used}} ({{i18n "admin.dashboard.space_free" size=disk_space.uploads_free}})
+ {{disk_space.backups_used}} ({{i18n "admin.dashboard.space_free" size=disk_space.backups_free}})
+
+ {{{i18n "admin.dashboard.lastest_backup" date=backupTimestamp}}}
+ {{disk_space.uploads_used}} ({{i18n "admin.dashboard.space_free" size=disk_space.uploads_free}}) +
- {{i18n "admin.dashboard.last_updated"}} {{updatedTimestamp}} -
- - - {{i18n "admin.dashboard.whats_new_in_discourse"}} -+ {{i18n "admin.dashboard.last_updated"}} {{updatedTimestamp}} +
+ + + {{i18n "admin.dashboard.whats_new_in_discourse"}} + +