import discourseComputed from "discourse-common/utils/decorators"; import { makeArray } from "discourse-common/lib/helpers"; import { alias, or, and, reads, equal, notEmpty } from "@ember/object/computed"; import EmberObject from "@ember/object"; import { next } from "@ember/runloop"; import Component from "@ember/component"; import ReportLoader from "discourse/lib/reports-loader"; import { exportEntity } from "discourse/lib/export-csv"; import { outputExportResult } from "discourse/lib/export-result"; import { isNumeric } from "discourse/lib/utilities"; import Report, { SCHEMA_VERSION } from "admin/models/report"; import ENV from "discourse-common/config/environment"; 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 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, showTrend: false, showHeader: true, showTitle: true, showFilteringUI: false, showDatesOptions: alias("model.dates_filtering"), showRefresh: or("showDatesOptions", "model.available_filters.length"), shouldDisplayTrend: and("showTrend", "model.prev_period"), init() { this._super(...arguments); this._reports = []; }, startDate: reads("filters.startDate"), endDate: reads("filters.endDate"), didReceiveAttrs() { this._super(...arguments); if (this.report) { this._renderReport(this.report, this.forcedModes, this.currentMode); } else if (this.dataSourceName) { this._fetchReport(); } }, showError: or("showTimeoutError", "showExceptionError", "showNotFoundError"), showNotFoundError: equal("model.error", "not_found"), showTimeoutError: equal("model.error", "timeout"), showExceptionError: equal("model.error", "exception"), hasData: notEmpty("model.data"), @discourseComputed("dataSourceName", "model.type") dasherizedDataSourceName(dataSourceName, type) { return (dataSourceName || type || "undefined").replace(/_/g, "-"); }, @discourseComputed("dataSourceName", "model.type") dataSource(dataSourceName, type) { dataSourceName = dataSourceName || type; return `/admin/reports/${dataSourceName}`; }, @discourseComputed("displayedModes.length") showModes(displayedModesLength) { return displayedModesLength > 1; }, @discourseComputed("currentMode", "model.modes", "forcedModes") displayedModes(currentMode, reportModes, forcedModes) { const modes = forcedModes ? forcedModes.split(",") : reportModes; return 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" }; }); }, @discourseComputed("currentMode") modeComponent(currentMode) { return `admin-report-${currentMode.replace(/_/g, "-")}`; }, @discourseComputed("startDate") normalizedStartDate(startDate) { return startDate && typeof startDate.isValid === "function" ? moment .utc(startDate.toISOString()) .locale("en") .format("YYYYMMDD") : moment(startDate) .locale("en") .format("YYYYMMDD"); }, @discourseComputed("endDate") normalizedEndDate(endDate) { return endDate && typeof endDate.isValid === "function" ? moment .utc(endDate.toISOString()) .locale("en") .format("YYYYMMDD") : moment(endDate) .locale("en") .format("YYYYMMDD"); }, @discourseComputed( "dataSourceName", "normalizedStartDate", "normalizedEndDate", "filters.customFilters" ) reportKey(dataSourceName, startDate, endDate, customFilters) { if (!dataSourceName || !startDate || !endDate) return null; let reportKey = "reports:"; reportKey += [ dataSourceName, ENV.environment === "test" ? "start" : startDate.replace(/-/g, ""), ENV.environment === "test" ? "end" : endDate.replace(/-/g, ""), "[:prev_period]", this.get("reportOptions.table.limit"), customFilters ? JSON.stringify(customFilters, (key, value) => isNumeric(value) ? value.toString() : value ) : null, SCHEMA_VERSION ] .filter(x => x) .map(x => x.toString()) .join(":"); return reportKey; }, actions: { onChangeEndDate(date) { const startDate = moment(this.startDate); const newEndDate = moment(date).endOf("day"); if (newEndDate.isSameOrAfter(startDate)) { this.set("endDate", newEndDate.format("YYYY-MM-DD")); } else { this.set("endDate", startDate.endOf("day").format("YYYY-MM-DD")); } this.send("refreshReport"); }, onChangeStartDate(date) { const endDate = moment(this.endDate); const newStartDate = moment(date).startOf("day"); if (newStartDate.isSameOrBefore(endDate)) { this.set("startDate", newStartDate.format("YYYY-MM-DD")); } else { this.set("startDate", endDate.startOf("day").format("YYYY-MM-DD")); } this.send("refreshReport"); }, applyFilter(id, value) { let customFilters = this.get("filters.customFilters") || {}; if (typeof value === "undefined") { delete customFilters[id]; } else { customFilters[id] = value; } this.attrs.onRefresh({ type: this.get("model.type"), startDate: this.startDate, endDate: this.endDate, filters: customFilters }); }, refreshReport() { this.attrs.onRefresh({ type: this.get("model.type"), startDate: this.startDate, endDate: this.endDate, filters: this.get("filters.customFilters") }); }, exportCsv() { const customFilters = this.get("filters.customFilters") || {}; exportEntity("report", { name: this.get("model.type"), start_date: this.startDate, end_date: this.endDate, category_id: customFilters.category, group_id: customFilters.group }).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.dataSourceName); } else { return r; } }; if (!this.startDate || !this.endDate) { report = sort(filteredReports)[0]; } else { const reportKey = this.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.forcedModes, this.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 }); 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.dataSourceName, payload.data, callback); }); }, _buildPayload(facets) { let payload = { data: { cache: true, facets } }; if (this.startDate) { payload.data.start_date = moment .utc(this.startDate, "YYYY-MM-DD") .toISOString(); } if (this.endDate) { payload.data.end_date = moment .utc(this.endDate, "YYYY-MM-DD") .toISOString(); } if (this.get("reportOptions.table.limit")) { payload.data.limit = this.get("reportOptions.table.limit"); } if (this.get("filters.customFilters")) { payload.data.filters = this.get("filters.customFilters"); } return payload; }, _buildOptions(mode) { if (mode === "table") { const tableOptions = JSON.parse(JSON.stringify(TABLE_OPTIONS)); return EmberObject.create( Object.assign(tableOptions, this.get("reportOptions.table") || {}) ); } else { const chartOptions = JSON.parse(JSON.stringify(CHART_OPTIONS)); return EmberObject.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_startDate, endDate: jsonReport.prev_endDate }); if (jsonReport.prevChartData && jsonReport.prevChartData.length > 40) { jsonReport.prevChartData = collapseWeekly( jsonReport.prevChartData, jsonReport.average ); } } return Report.create(jsonReport); } });