import ReportLoader from "discourse/lib/reports-loader"; import Category from "discourse/models/category"; import { exportEntity } from "discourse/lib/export-csv"; import { outputExportResult } from "discourse/lib/export-result"; import { SCHEMA_VERSION, default as Report } from "admin/models/report"; import computed from "ember-addons/ember-computed-decorators"; import { registerHoverTooltip, unregisterHoverTooltip } from "discourse/lib/tooltip"; const TABLE_OPTIONS = { perPage: 8, total: true, limit: 20, formatNumbers: true }; const CHART_OPTIONS = {}; function collapseWeekly(data, average) { let aggregate = []; let bucket, i; let offset = data.length % 7; for (i = offset; i < data.length; i++) { if (bucket && i % 7 === offset) { if (average) { bucket.y = parseFloat((bucket.y / 7.0).toFixed(2)); } aggregate.push(bucket); bucket = null; } bucket = bucket || { x: data[i].x, y: 0 }; bucket.y += data[i].y; } return aggregate; } export default Ember.Component.extend({ classNameBindings: ["isEnabled", "isLoading", "dasherizedDataSourceName"], classNames: ["admin-report"], isEnabled: true, disabledLabel: I18n.t("admin.dashboard.disabled"), isLoading: false, rateLimitationString: null, dataSourceName: null, report: null, model: null, reportOptions: null, forcedModes: null, showAllReportsLink: false, filters: null, startDate: null, endDate: null, category: null, groupId: null, showTrend: false, showHeader: true, showTitle: true, showFilteringUI: false, showCategoryOptions: Ember.computed.alias("model.category_filtering"), showDatesOptions: Ember.computed.alias("model.dates_filtering"), showGroupOptions: Ember.computed.alias("model.group_filtering"), showExport: Ember.computed.not("model.onlyTable"), showRefresh: Ember.computed.or( "showCategoryOptions", "showDatesOptions", "showGroupOptions" ), shouldDisplayTrend: Ember.computed.and("showTrend", "model.prev_period"), init() { this._super(...arguments); this._reports = []; }, didReceiveAttrs() { this._super(...arguments); const state = this.get("filters") || {}; this.setProperties({ category: Category.findById(state.categoryId), groupId: state.groupId, startDate: state.startDate, endDate: state.endDate }); if (this.get("report")) { this._renderReport( this.get("report"), this.get("forcedModes"), this.get("currentMode") ); } else if (this.get("dataSourceName")) { this._fetchReport(); } }, didRender() { this._super(...arguments); registerHoverTooltip($(".info[data-tooltip]")); }, willDestroyElement() { this._super(...arguments); unregisterHoverTooltip($(".info[data-tooltip]")); }, showError: Ember.computed.or( "showTimeoutError", "showExceptionError", "showNotFoundError" ), showNotFoundError: Ember.computed.equal("model.error", "not_found"), showTimeoutError: Ember.computed.equal("model.error", "timeout"), showExceptionError: Ember.computed.equal("model.error", "exception"), hasData: Ember.computed.notEmpty("model.data"), @computed("dataSourceName", "model.type") dasherizedDataSourceName(dataSourceName, type) { return (dataSourceName || type || "undefined").replace(/_/g, "-"); }, @computed("dataSourceName", "model.type") dataSource(dataSourceName, type) { dataSourceName = dataSourceName || type; return `/admin/reports/${dataSourceName}`; }, @computed("displayedModes.length") showModes(displayedModesLength) { return displayedModesLength > 1; }, categoryId: Ember.computed.alias("category.id"), @computed("currentMode", "model.modes", "forcedModes") displayedModes(currentMode, reportModes, forcedModes) { const modes = forcedModes ? forcedModes.split(",") : reportModes; return Ember.makeArray(modes).map(mode => { const base = `btn-default mode-btn ${mode}`; const cssClass = currentMode === mode ? `${base} is-current` : base; return { mode, cssClass, icon: mode === "table" ? "table" : "signal" }; }); }, @computed() groupOptions() { const arr = [ { name: I18n.t("admin.dashboard.reports.groups"), value: "all" } ]; return arr.concat( (this.site.groups || []).map(i => { return { name: i["name"], value: i["id"] }; }) ); }, @computed("currentMode") modeComponent(currentMode) { return `admin-report-${currentMode}`; }, @computed("startDate") normalizedStartDate(startDate) { return startDate && typeof startDate.isValid === "function" ? moment .utc(startDate.toISOString()) .locale("en") .format("YYYYMMDD") : moment(startDate) .locale("en") .format("YYYYMMDD"); }, @computed("endDate") normalizedEndDate(endDate) { return endDate && typeof endDate.isValid === "function" ? moment .utc(endDate.toISOString()) .locale("en") .format("YYYYMMDD") : moment(endDate) .locale("en") .format("YYYYMMDD"); }, @computed( "dataSourceName", "categoryId", "groupId", "normalizedStartDate", "normalizedEndDate" ) reportKey(dataSourceName, categoryId, groupId, startDate, endDate) { if (!dataSourceName || !startDate || !endDate) return null; let reportKey = "reports:"; reportKey += [ dataSourceName, categoryId, startDate.replace(/-/g, ""), endDate.replace(/-/g, ""), groupId, "[:prev_period]", this.get("reportOptions.table.limit"), SCHEMA_VERSION ] .filter(x => x) .map(x => x.toString()) .join(":"); return reportKey; }, actions: { refreshReport() { this.attrs.onRefresh({ categoryId: this.get("categoryId"), groupId: this.get("groupId"), startDate: this.get("startDate"), endDate: this.get("endDate") }); }, exportCsv() { exportEntity("report", { name: this.get("model.type"), start_date: this.get("startDate"), end_date: this.get("endDate"), category_id: this.get("categoryId") === "all" ? undefined : this.get("categoryId"), group_id: this.get("groupId") === "all" ? undefined : this.get("groupId") }).then(outputExportResult); }, changeMode(mode) { this.set("currentMode", mode); } }, _computeReport() { if (!this.element || this.isDestroying || this.isDestroyed) { return; } if (!this._reports || !this._reports.length) { return; } // on a slow network _fetchReport could be called multiple times between // T and T+x, and all the ajax responses would occur after T+(x+y) // to avoid any inconsistencies we filter by period and make sure // the array contains only unique values let filteredReports = this._reports.uniqBy("report_key"); let report; const sort = r => { if (r.length > 1) { return r.findBy("type", this.get("dataSourceName")); } else { return r; } }; if (!this.get("startDate") || !this.get("endDate")) { report = sort(filteredReports)[0]; } else { const reportKey = this.get("reportKey"); report = sort( filteredReports.filter(r => r.report_key.includes(reportKey)) )[0]; if (!report) return; } if (report.error === "not_found") { this.set("showFilteringUI", false); } this._renderReport( report, this.get("forcedModes"), this.get("currentMode") ); }, _renderReport(report, forcedModes, currentMode) { const modes = forcedModes ? forcedModes.split(",") : report.modes; currentMode = currentMode || (modes ? modes[0] : null); this.setProperties({ model: report, currentMode, options: this._buildOptions(currentMode) }); }, _fetchReport() { this._super(...arguments); this.setProperties({ isLoading: true, rateLimitationString: null }); Ember.run.next(() => { let payload = this._buildPayload(["prev_period"]); const callback = response => { if (!this.element || this.isDestroying || this.isDestroyed) { return; } this.set("isLoading", false); if (response === 429) { this.set( "rateLimitationString", I18n.t("admin.dashboard.too_many_requests") ); } else if (response === 500) { this.set("model.error", "exception"); } else if (response) { this._reports.push(this._loadReport(response)); this._computeReport(); } }; ReportLoader.enqueue(this.get("dataSourceName"), payload.data, callback); }); }, _buildPayload(facets) { let payload = { data: { cache: true, facets } }; if (this.get("startDate")) { payload.data.start_date = moment .utc(this.get("startDate"), "YYYY-MM-DD") .toISOString(); } if (this.get("endDate")) { payload.data.end_date = moment .utc(this.get("endDate"), "YYYY-MM-DD") .toISOString(); } if (this.get("groupId") && this.get("groupId") !== "all") { payload.data.group_id = this.get("groupId"); } if (this.get("categoryId") && this.get("categoryId") !== "all") { payload.data.category_id = this.get("categoryId"); } if (this.get("reportOptions.table.limit")) { payload.data.limit = this.get("reportOptions.table.limit"); } return payload; }, _buildOptions(mode) { if (mode === "table") { const tableOptions = JSON.parse(JSON.stringify(TABLE_OPTIONS)); return Ember.Object.create( Object.assign(tableOptions, this.get("reportOptions.table") || {}) ); } else { const chartOptions = JSON.parse(JSON.stringify(CHART_OPTIONS)); return Ember.Object.create( Object.assign(chartOptions, this.get("reportOptions.chart") || {}) ); } }, _loadReport(jsonReport) { Report.fillMissingDates(jsonReport, { filledField: "chartData" }); if (jsonReport.chartData && jsonReport.modes[0] === "stacked_chart") { jsonReport.chartData = jsonReport.chartData.map(chartData => { if (chartData.length > 40) { return { data: collapseWeekly(chartData.data), req: chartData.req, label: chartData.label, color: chartData.color }; } else { return chartData; } }); } else if (jsonReport.chartData && jsonReport.chartData.length > 40) { jsonReport.chartData = collapseWeekly( jsonReport.chartData, jsonReport.average ); } if (jsonReport.prev_data) { Report.fillMissingDates(jsonReport, { filledField: "prevChartData", dataField: "prev_data", starDate: jsonReport.prev_start_date, endDate: jsonReport.prev_end_date }); if (jsonReport.prevChartData && jsonReport.prevChartData.length > 40) { jsonReport.prevChartData = collapseWeekly( jsonReport.prevChartData, jsonReport.average ); } } return Report.create(jsonReport); } });