| null;
+
+type NotificationFunction = (
+ message: ArgsProps["message"],
+ description?: ArgsProps["description"],
+ args?: NotificationConfig
+) => void;
+
+declare const notification: NotificationApi & {
+ success: NotificationFunction;
+ error: NotificationFunction;
+ info: NotificationFunction;
+ warning: NotificationFunction;
+ warn: NotificationFunction;
+};
+
+export default notification;
diff --git a/client/app/services/notification.js b/client/app/services/notification.js
new file mode 100644
index 000000000..83bd9a407
--- /dev/null
+++ b/client/app/services/notification.js
@@ -0,0 +1,21 @@
+import notification from "antd/lib/notification";
+
+notification.config({
+ placement: "bottomRight",
+ duration: 3,
+});
+
+const simpleNotification = {};
+
+["success", "error", "info", "warning", "warn"].forEach(action => {
+ // eslint-disable-next-line arrow-body-style
+ simpleNotification[action] = (message, description = null, props = null) => {
+ return notification[action]({ ...props, message, description });
+ };
+});
+
+export default {
+ // export Ant's notification and replace actions
+ ...notification,
+ ...simpleNotification,
+};
diff --git a/client/app/services/notifications.js b/client/app/services/notifications.js
new file mode 100644
index 000000000..6999471e7
--- /dev/null
+++ b/client/app/services/notifications.js
@@ -0,0 +1,46 @@
+import { find } from "lodash";
+import debug from "debug";
+import recordEvent from "@/services/recordEvent";
+import redashIconUrl from "@/assets/images/redash_icon_small.png";
+
+const logger = debug("redash:notifications");
+
+const Notification = window.Notification || null;
+if (!Notification) {
+ logger("HTML5 notifications are not supported.");
+}
+
+const hidden = find(["hidden", "webkitHidden", "mozHidden", "msHidden"], prop => prop in document);
+
+function isPageVisible() {
+ return !document[hidden];
+}
+
+function getPermissions() {
+ if (Notification && Notification.permission === "default") {
+ Notification.requestPermission();
+ }
+}
+
+function showNotification(title, content) {
+ if (!Notification || isPageVisible() || Notification.permission !== "granted") {
+ return;
+ }
+
+ // using the 'tag' to avoid showing duplicate notifications
+ const notification = new Notification(title, {
+ tag: title + content,
+ body: content,
+ icon: redashIconUrl,
+ });
+ notification.onclick = function onClick() {
+ window.focus();
+ this.close();
+ recordEvent("click", "notification");
+ };
+}
+
+export default {
+ getPermissions,
+ showNotification,
+};
diff --git a/client/app/services/offline-listener.js b/client/app/services/offline-listener.js
new file mode 100644
index 000000000..e58a9cfa5
--- /dev/null
+++ b/client/app/services/offline-listener.js
@@ -0,0 +1,21 @@
+import notification from "@/services/notification";
+
+function addOnlineListener(notificationKey) {
+ function onlineStateHandler() {
+ notification.close(notificationKey);
+ window.removeEventListener("online", onlineStateHandler);
+ }
+ window.addEventListener("online", onlineStateHandler);
+}
+
+export default {
+ init() {
+ window.addEventListener("offline", () => {
+ notification.warning("Please check your Internet connection.", null, {
+ key: "connectionNotification",
+ duration: null,
+ });
+ addOnlineListener("connectionNotification");
+ });
+ },
+};
diff --git a/client/app/services/organizationSettings.js b/client/app/services/organizationSettings.js
new file mode 100644
index 000000000..9220626b6
--- /dev/null
+++ b/client/app/services/organizationSettings.js
@@ -0,0 +1,16 @@
+import { axios } from "@/services/axios";
+import notification from "@/services/notification";
+
+export default {
+ get: () => axios.get("api/settings/organization"),
+ save: (data, message = "Settings changes saved.") =>
+ axios
+ .post("api/settings/organization", data)
+ .then(data => {
+ notification.success(message);
+ return data;
+ })
+ .catch(() => {
+ notification.error("Failed saving changes.");
+ }),
+};
diff --git a/client/app/services/organizationStatus.js b/client/app/services/organizationStatus.js
new file mode 100644
index 000000000..94ce04c60
--- /dev/null
+++ b/client/app/services/organizationStatus.js
@@ -0,0 +1,16 @@
+import { axios } from "@/services/axios";
+
+class OrganizationStatus {
+ constructor() {
+ this.objectCounters = {};
+ }
+
+ refresh() {
+ return axios.get("api/organization/status").then(data => {
+ this.objectCounters = data.object_counters;
+ return this;
+ });
+ }
+}
+
+export default new OrganizationStatus();
diff --git a/client/app/services/parameters/DateParameter.js b/client/app/services/parameters/DateParameter.js
new file mode 100644
index 000000000..3d386b384
--- /dev/null
+++ b/client/app/services/parameters/DateParameter.js
@@ -0,0 +1,95 @@
+import { findKey, startsWith, has, includes, isNull, values } from "lodash";
+import moment from "moment";
+import PropTypes from "prop-types";
+import Parameter from "./Parameter";
+
+const DATETIME_FORMATS = {
+ // eslint-disable-next-line quote-props
+ date: "YYYY-MM-DD",
+ "datetime-local": "YYYY-MM-DD HH:mm",
+ "datetime-with-seconds": "YYYY-MM-DD HH:mm:ss",
+};
+
+const DYNAMIC_PREFIX = "d_";
+
+const DYNAMIC_DATES = {
+ now: {
+ name: "Today/Now",
+ value: () => moment(),
+ },
+ yesterday: {
+ name: "Yesterday",
+ value: () => moment().subtract(1, "day"),
+ },
+};
+
+export const DynamicDateType = PropTypes.oneOf(values(DYNAMIC_DATES));
+
+function isDynamicDateString(value) {
+ return startsWith(value, DYNAMIC_PREFIX) && has(DYNAMIC_DATES, value.substring(DYNAMIC_PREFIX.length));
+}
+
+export function isDynamicDate(value) {
+ return includes(DYNAMIC_DATES, value);
+}
+
+export function getDynamicDateFromString(value) {
+ if (!isDynamicDateString(value)) {
+ return null;
+ }
+ return DYNAMIC_DATES[value.substring(DYNAMIC_PREFIX.length)];
+}
+
+class DateParameter extends Parameter {
+ constructor(parameter, parentQueryId) {
+ super(parameter, parentQueryId);
+ this.useCurrentDateTime = parameter.useCurrentDateTime;
+ this.setValue(parameter.value);
+ }
+
+ get hasDynamicValue() {
+ return isDynamicDate(this.normalizedValue);
+ }
+
+ // eslint-disable-next-line class-methods-use-this
+ normalizeValue(value) {
+ if (isDynamicDateString(value)) {
+ return getDynamicDateFromString(value);
+ }
+
+ if (isDynamicDate(value)) {
+ return value;
+ }
+
+ const normalizedValue = moment(value);
+ return normalizedValue.isValid() ? normalizedValue : null;
+ }
+
+ setValue(value) {
+ const normalizedValue = this.normalizeValue(value);
+ if (isDynamicDate(normalizedValue)) {
+ this.value = DYNAMIC_PREFIX + findKey(DYNAMIC_DATES, normalizedValue);
+ } else if (moment.isMoment(normalizedValue)) {
+ this.value = normalizedValue.format(DATETIME_FORMATS[this.type]);
+ } else {
+ this.value = normalizedValue;
+ }
+ this.$$value = normalizedValue;
+
+ this.updateLocals();
+ this.clearPendingValue();
+ return this;
+ }
+
+ getExecutionValue() {
+ if (this.hasDynamicValue) {
+ return this.normalizedValue.value().format(DATETIME_FORMATS[this.type]);
+ }
+ if (isNull(this.value) && this.useCurrentDateTime) {
+ return moment().format(DATETIME_FORMATS[this.type]);
+ }
+ return this.value;
+ }
+}
+
+export default DateParameter;
diff --git a/client/app/services/parameters/DateRangeParameter.js b/client/app/services/parameters/DateRangeParameter.js
new file mode 100644
index 000000000..dc284ae29
--- /dev/null
+++ b/client/app/services/parameters/DateRangeParameter.js
@@ -0,0 +1,278 @@
+import { startsWith, has, includes, findKey, values, isObject, isArray } from "lodash";
+import moment from "moment";
+import PropTypes from "prop-types";
+import Parameter from "./Parameter";
+
+const DATETIME_FORMATS = {
+ "date-range": "YYYY-MM-DD",
+ "datetime-range": "YYYY-MM-DD HH:mm",
+ "datetime-range-with-seconds": "YYYY-MM-DD HH:mm:ss",
+};
+
+const DYNAMIC_PREFIX = "d_";
+
+/**
+ * Dynamic date range preset value with end set to current time
+ * @param from {function(): moment.Moment}
+ * @param now {function(): moment.Moment=} moment - defaults to now
+ * @returns {function(withNow: boolean): [moment.Moment, moment.Moment|undefined]}
+ */
+const untilNow = (from, now = () => moment()) => (withNow = true) => [from(), withNow ? now() : undefined];
+
+const DYNAMIC_DATE_RANGES = {
+ today: {
+ name: "Today",
+ value: () => [moment().startOf("day"), moment().endOf("day")],
+ },
+ yesterday: {
+ name: "Yesterday",
+ value: () => [
+ moment()
+ .subtract(1, "day")
+ .startOf("day"),
+ moment()
+ .subtract(1, "day")
+ .endOf("day"),
+ ],
+ },
+ this_week: {
+ name: "This week",
+ value: () => [moment().startOf("week"), moment().endOf("week")],
+ },
+ this_month: {
+ name: "This month",
+ value: () => [moment().startOf("month"), moment().endOf("month")],
+ },
+ this_year: {
+ name: "This year",
+ value: () => [moment().startOf("year"), moment().endOf("year")],
+ },
+ last_week: {
+ name: "Last week",
+ value: () => [
+ moment()
+ .subtract(1, "week")
+ .startOf("week"),
+ moment()
+ .subtract(1, "week")
+ .endOf("week"),
+ ],
+ },
+ last_month: {
+ name: "Last month",
+ value: () => [
+ moment()
+ .subtract(1, "month")
+ .startOf("month"),
+ moment()
+ .subtract(1, "month")
+ .endOf("month"),
+ ],
+ },
+ last_year: {
+ name: "Last year",
+ value: () => [
+ moment()
+ .subtract(1, "year")
+ .startOf("year"),
+ moment()
+ .subtract(1, "year")
+ .endOf("year"),
+ ],
+ },
+ last_hour: {
+ name: "Last hour",
+ value: untilNow(() => moment().subtract(1, "hour")),
+ },
+ last_8_hours: {
+ name: "Last 8 hours",
+ value: untilNow(() => moment().subtract(8, "hour")),
+ },
+ last_24_hours: {
+ name: "Last 24 hours",
+ value: untilNow(() => moment().subtract(24, "hour")),
+ },
+ last_7_days: {
+ name: "Last 7 days",
+ value: untilNow(
+ () =>
+ moment()
+ .subtract(7, "days")
+ .startOf("day"),
+ () => moment().endOf("day")
+ ),
+ },
+ last_14_days: {
+ name: "Last 14 days",
+ value: untilNow(
+ () =>
+ moment()
+ .subtract(14, "days")
+ .startOf("day"),
+ () => moment().endOf("day")
+ ),
+ },
+ last_30_days: {
+ name: "Last 30 days",
+ value: untilNow(
+ () =>
+ moment()
+ .subtract(30, "days")
+ .startOf("day"),
+ () => moment().endOf("day")
+ ),
+ },
+ last_60_days: {
+ name: "Last 60 days",
+ value: untilNow(
+ () =>
+ moment()
+ .subtract(60, "days")
+ .startOf("day"),
+ () => moment().endOf("day")
+ ),
+ },
+ last_90_days: {
+ name: "Last 90 days",
+ value: untilNow(
+ () =>
+ moment()
+ .subtract(90, "days")
+ .startOf("day"),
+ () => moment().endOf("day")
+ ),
+ },
+ last_12_months: {
+ name: "Last 12 months",
+ value: untilNow(
+ () =>
+ moment()
+ .subtract(12, "months")
+ .startOf("day"),
+ () => moment().endOf("day")
+ ),
+ },
+};
+
+export const DynamicDateRangeType = PropTypes.oneOf(values(DYNAMIC_DATE_RANGES));
+
+export function isDynamicDateRangeString(value) {
+ if (!startsWith(value, DYNAMIC_PREFIX)) {
+ return false;
+ }
+ return !!DYNAMIC_DATE_RANGES[value.substring(DYNAMIC_PREFIX.length)];
+}
+
+export function getDynamicDateRangeStringFromName(dynamicRangeName) {
+ const key = findKey(DYNAMIC_DATE_RANGES, range => range.name === dynamicRangeName);
+ return key ? DYNAMIC_PREFIX + key : undefined;
+}
+
+export function isDynamicDateRange(value) {
+ return includes(DYNAMIC_DATE_RANGES, value);
+}
+
+export function getDynamicDateRangeFromString(value) {
+ if (!isDynamicDateRangeString(value)) {
+ return null;
+ }
+ return DYNAMIC_DATE_RANGES[value.substring(DYNAMIC_PREFIX.length)];
+}
+
+class DateRangeParameter extends Parameter {
+ constructor(parameter, parentQueryId) {
+ super(parameter, parentQueryId);
+ this.setValue(parameter.value);
+ }
+
+ get hasDynamicValue() {
+ return isDynamicDateRange(this.normalizedValue);
+ }
+
+ // eslint-disable-next-line class-methods-use-this
+ normalizeValue(value) {
+ if (isDynamicDateRangeString(value)) {
+ return getDynamicDateRangeFromString(value);
+ }
+
+ if (isDynamicDateRange(value)) {
+ return value;
+ }
+
+ if (isObject(value) && !isArray(value)) {
+ value = [value.start, value.end];
+ }
+
+ if (isArray(value) && value.length === 2) {
+ value = [moment(value[0]), moment(value[1])];
+ if (value[0].isValid() && value[1].isValid()) {
+ return value;
+ }
+ }
+ return null;
+ }
+
+ setValue(value) {
+ const normalizedValue = this.normalizeValue(value);
+ if (isDynamicDateRange(normalizedValue)) {
+ this.value = DYNAMIC_PREFIX + findKey(DYNAMIC_DATE_RANGES, normalizedValue);
+ } else if (isArray(normalizedValue)) {
+ this.value = {
+ start: normalizedValue[0].format(DATETIME_FORMATS[this.type]),
+ end: normalizedValue[1].format(DATETIME_FORMATS[this.type]),
+ };
+ } else {
+ this.value = normalizedValue;
+ }
+ this.$$value = normalizedValue;
+
+ this.updateLocals();
+ this.clearPendingValue();
+ return this;
+ }
+
+ getExecutionValue() {
+ if (this.hasDynamicValue) {
+ const format = date => date.format(DATETIME_FORMATS[this.type]);
+ const [start, end] = this.normalizedValue.value().map(format);
+ return { start, end };
+ }
+ return this.value;
+ }
+
+ toUrlParams() {
+ const prefix = this.urlPrefix;
+ if (isObject(this.value) && this.value.start && this.value.end) {
+ return {
+ [`${prefix}${this.name}`]: `${this.value.start}--${this.value.end}`,
+ };
+ }
+ return super.toUrlParams();
+ }
+
+ fromUrlParams(query) {
+ const prefix = this.urlPrefix;
+ const key = `${prefix}${this.name}`;
+
+ // backward compatibility
+ const keyStart = `${prefix}${this.name}.start`;
+ const keyEnd = `${prefix}${this.name}.end`;
+
+ if (has(query, key)) {
+ const dates = query[key].split("--");
+ if (dates.length === 2) {
+ this.setValue(dates);
+ } else {
+ this.setValue(query[key]);
+ }
+ } else if (has(query, keyStart) && has(query, keyEnd)) {
+ this.setValue([query[keyStart], query[keyEnd]]);
+ }
+ }
+
+ toQueryTextFragment() {
+ return `{{ ${this.name}.start }} {{ ${this.name}.end }}`;
+ }
+}
+
+export default DateRangeParameter;
diff --git a/client/app/services/parameters/EnumParameter.js b/client/app/services/parameters/EnumParameter.js
new file mode 100644
index 000000000..7185e2d55
--- /dev/null
+++ b/client/app/services/parameters/EnumParameter.js
@@ -0,0 +1,76 @@
+import { isArray, isEmpty, includes, intersection, get, map, join, has } from "lodash";
+import Parameter from "./Parameter";
+
+class EnumParameter extends Parameter {
+ constructor(parameter, parentQueryId) {
+ super(parameter, parentQueryId);
+ this.enumOptions = parameter.enumOptions;
+ this.multiValuesOptions = parameter.multiValuesOptions;
+ this.setValue(parameter.value);
+ }
+
+ normalizeValue(value) {
+ if (isEmpty(this.enumOptions)) {
+ return null;
+ }
+
+ const enumOptionsArray = this.enumOptions.split("\n") || [];
+ if (this.multiValuesOptions) {
+ if (!isArray(value)) {
+ value = [value];
+ }
+ value = intersection(value, enumOptionsArray);
+ } else if (!value || isArray(value) || !includes(enumOptionsArray, value)) {
+ value = enumOptionsArray[0];
+ }
+
+ if (isArray(value) && isEmpty(value)) {
+ return null;
+ }
+ return value;
+ }
+
+ getExecutionValue(extra = {}) {
+ const { joinListValues } = extra;
+ if (joinListValues && isArray(this.value)) {
+ const separator = get(this.multiValuesOptions, "separator", ",");
+ const prefix = get(this.multiValuesOptions, "prefix", "");
+ const suffix = get(this.multiValuesOptions, "suffix", "");
+ const parameterValues = map(this.value, v => `${prefix}${v}${suffix}`);
+ return join(parameterValues, separator);
+ }
+ return this.value;
+ }
+
+ toUrlParams() {
+ const prefix = this.urlPrefix;
+
+ let urlParam = this.value;
+ if (this.multiValuesOptions && isArray(this.value)) {
+ urlParam = JSON.stringify(this.value);
+ }
+
+ return {
+ [`${prefix}${this.name}`]: !this.isEmpty ? urlParam : null,
+ };
+ }
+
+ fromUrlParams(query) {
+ const prefix = this.urlPrefix;
+ const key = `${prefix}${this.name}`;
+ if (has(query, key)) {
+ if (this.multiValuesOptions) {
+ try {
+ const valueFromJson = JSON.parse(query[key]);
+ this.setValue(isArray(valueFromJson) ? valueFromJson : query[key]);
+ } catch (e) {
+ this.setValue(query[key]);
+ }
+ } else {
+ this.setValue(query[key]);
+ }
+ }
+ }
+}
+
+export default EnumParameter;
diff --git a/client/app/services/parameters/NumberParameter.js b/client/app/services/parameters/NumberParameter.js
new file mode 100644
index 000000000..cc5a3a6f0
--- /dev/null
+++ b/client/app/services/parameters/NumberParameter.js
@@ -0,0 +1,20 @@
+import { toNumber, isNull } from "lodash";
+import Parameter from "./Parameter";
+
+class NumberParameter extends Parameter {
+ constructor(parameter, parentQueryId) {
+ super(parameter, parentQueryId);
+ this.setValue(parameter.value);
+ }
+
+ // eslint-disable-next-line class-methods-use-this
+ normalizeValue(value) {
+ if (isNull(value)) {
+ return null;
+ }
+ const normalizedValue = toNumber(value);
+ return !isNaN(normalizedValue) ? normalizedValue : null;
+ }
+}
+
+export default NumberParameter;
diff --git a/client/app/services/parameters/Parameter.js b/client/app/services/parameters/Parameter.js
new file mode 100644
index 000000000..03bc698a2
--- /dev/null
+++ b/client/app/services/parameters/Parameter.js
@@ -0,0 +1,124 @@
+import { isNull, isObject, isFunction, isUndefined, isEqual, has, omit, isArray, each } from "lodash";
+
+class Parameter {
+ constructor(parameter, parentQueryId) {
+ this.title = parameter.title;
+ this.name = parameter.name;
+ this.type = parameter.type;
+ this.global = parameter.global; // backward compatibility in Widget service
+ this.parentQueryId = parentQueryId;
+
+ // Used for meta-parameters (i.e. dashboard-level params)
+ this.locals = [];
+
+ // Used for URL serialization
+ this.urlPrefix = "p_";
+ }
+
+ static getExecutionValue(param, extra = {}) {
+ if (!isObject(param) || !isFunction(param.getExecutionValue)) {
+ return null;
+ }
+
+ return param.getExecutionValue(extra);
+ }
+
+ static setValue(param, value) {
+ if (!isObject(param) || !isFunction(param.setValue)) {
+ return null;
+ }
+
+ return param.setValue(value);
+ }
+
+ get isEmpty() {
+ return isNull(this.normalizedValue);
+ }
+
+ get hasPendingValue() {
+ return this.pendingValue !== undefined && !isEqual(this.pendingValue, this.normalizedValue);
+ }
+
+ /** Get normalized value to be used in inputs */
+ get normalizedValue() {
+ return this.$$value;
+ }
+
+ isEmptyValue(value) {
+ return isNull(this.normalizeValue(value));
+ }
+
+ // eslint-disable-next-line class-methods-use-this
+ normalizeValue(value) {
+ if (isUndefined(value)) {
+ return null;
+ }
+ return value;
+ }
+
+ updateLocals() {
+ if (isArray(this.locals)) {
+ each(this.locals, local => {
+ local.setValue(this.value);
+ });
+ }
+ }
+
+ setValue(value) {
+ const normalizedValue = this.normalizeValue(value);
+ this.value = normalizedValue;
+ this.$$value = normalizedValue;
+
+ this.updateLocals();
+ this.clearPendingValue();
+ return this;
+ }
+
+ /** Get execution value for a query */
+ getExecutionValue() {
+ return this.value;
+ }
+
+ setPendingValue(value) {
+ this.pendingValue = this.normalizeValue(value);
+ }
+
+ applyPendingValue() {
+ if (this.hasPendingValue) {
+ this.setValue(this.pendingValue);
+ }
+ }
+
+ clearPendingValue() {
+ this.pendingValue = undefined;
+ }
+
+ /** Update URL with Parameter value */
+ toUrlParams() {
+ const prefix = this.urlPrefix;
+ // `null` removes the parameter from the URL in case it exists
+ return {
+ [`${prefix}${this.name}`]: !this.isEmpty ? this.value : null,
+ };
+ }
+
+ /** Set parameter value from the URL */
+ fromUrlParams(query) {
+ const prefix = this.urlPrefix;
+ const key = `${prefix}${this.name}`;
+ if (has(query, key)) {
+ this.setValue(query[key]);
+ }
+ }
+
+ toQueryTextFragment() {
+ return `{{ ${this.name} }}`;
+ }
+
+ /** Get a saveable version of the Parameter by omitting unnecessary props */
+ toSaveableObject() {
+ return omit(this, ["$$value", "urlPrefix", "pendingValue", "parentQueryId"]);
+ }
+}
+
+export default Parameter;
diff --git a/client/app/services/parameters/QueryBasedDropdownParameter.js b/client/app/services/parameters/QueryBasedDropdownParameter.js
new file mode 100644
index 000000000..0ab7ff700
--- /dev/null
+++ b/client/app/services/parameters/QueryBasedDropdownParameter.js
@@ -0,0 +1,79 @@
+import { isNull, isUndefined, isArray, isEmpty, get, map, join, has } from "lodash";
+import { Query } from "@/services/query";
+import Parameter from "./Parameter";
+
+class QueryBasedDropdownParameter extends Parameter {
+ constructor(parameter, parentQueryId) {
+ super(parameter, parentQueryId);
+ this.queryId = parameter.queryId;
+ this.multiValuesOptions = parameter.multiValuesOptions;
+ this.setValue(parameter.value);
+ }
+
+ normalizeValue(value) {
+ if (isUndefined(value) || isNull(value) || (isArray(value) && isEmpty(value))) {
+ return null;
+ }
+
+ if (this.multiValuesOptions) {
+ value = isArray(value) ? value : [value];
+ } else {
+ value = isArray(value) ? value[0] : value;
+ }
+ return value;
+ }
+
+ getExecutionValue(extra = {}) {
+ const { joinListValues } = extra;
+ if (joinListValues && isArray(this.value)) {
+ const separator = get(this.multiValuesOptions, "separator", ",");
+ const prefix = get(this.multiValuesOptions, "prefix", "");
+ const suffix = get(this.multiValuesOptions, "suffix", "");
+ const parameterValues = map(this.value, v => `${prefix}${v}${suffix}`);
+ return join(parameterValues, separator);
+ }
+ return this.value;
+ }
+
+ toUrlParams() {
+ const prefix = this.urlPrefix;
+
+ let urlParam = this.value;
+ if (this.multiValuesOptions && isArray(this.value)) {
+ urlParam = JSON.stringify(this.value);
+ }
+
+ return {
+ [`${prefix}${this.name}`]: !this.isEmpty ? urlParam : null,
+ };
+ }
+
+ fromUrlParams(query) {
+ const prefix = this.urlPrefix;
+ const key = `${prefix}${this.name}`;
+ if (has(query, key)) {
+ if (this.multiValuesOptions) {
+ try {
+ const valueFromJson = JSON.parse(query[key]);
+ this.setValue(isArray(valueFromJson) ? valueFromJson : query[key]);
+ } catch (e) {
+ this.setValue(query[key]);
+ }
+ } else {
+ this.setValue(query[key]);
+ }
+ }
+ }
+
+ loadDropdownValues() {
+ if (this.parentQueryId) {
+ return Query.associatedDropdown({ queryId: this.parentQueryId, dropdownQueryId: this.queryId }).catch(() =>
+ Promise.resolve([])
+ );
+ }
+
+ return Query.asDropdown({ id: this.queryId }).catch(Promise.resolve([]));
+ }
+}
+
+export default QueryBasedDropdownParameter;
diff --git a/client/app/services/parameters/TextParameter.js b/client/app/services/parameters/TextParameter.js
new file mode 100644
index 000000000..67ffe97a6
--- /dev/null
+++ b/client/app/services/parameters/TextParameter.js
@@ -0,0 +1,20 @@
+import { toString, isEmpty } from "lodash";
+import Parameter from "./Parameter";
+
+class TextParameter extends Parameter {
+ constructor(parameter, parentQueryId) {
+ super(parameter, parentQueryId);
+ this.setValue(parameter.value);
+ }
+
+ // eslint-disable-next-line class-methods-use-this
+ normalizeValue(value) {
+ const normalizedValue = toString(value);
+ if (isEmpty(normalizedValue)) {
+ return null;
+ }
+ return normalizedValue;
+ }
+}
+
+export default TextParameter;
diff --git a/client/app/services/parameters/index.js b/client/app/services/parameters/index.js
new file mode 100644
index 000000000..9e1b3fffc
--- /dev/null
+++ b/client/app/services/parameters/index.js
@@ -0,0 +1,44 @@
+import Parameter from "./Parameter";
+import TextParameter from "./TextParameter";
+import NumberParameter from "./NumberParameter";
+import EnumParameter from "./EnumParameter";
+import QueryBasedDropdownParameter from "./QueryBasedDropdownParameter";
+import DateParameter from "./DateParameter";
+import DateRangeParameter from "./DateRangeParameter";
+
+function createParameter(param, parentQueryId) {
+ switch (param.type) {
+ case "number":
+ return new NumberParameter(param, parentQueryId);
+ case "enum":
+ return new EnumParameter(param, parentQueryId);
+ case "query":
+ return new QueryBasedDropdownParameter(param, parentQueryId);
+ case "date":
+ case "datetime-local":
+ case "datetime-with-seconds":
+ return new DateParameter(param, parentQueryId);
+ case "date-range":
+ case "datetime-range":
+ case "datetime-range-with-seconds":
+ return new DateRangeParameter(param, parentQueryId);
+ default:
+ return new TextParameter({ ...param, type: "text" }, parentQueryId);
+ }
+}
+
+function cloneParameter(param) {
+ return createParameter(param, param.parentQueryId);
+}
+
+export {
+ Parameter,
+ TextParameter,
+ NumberParameter,
+ EnumParameter,
+ QueryBasedDropdownParameter,
+ DateParameter,
+ DateRangeParameter,
+ createParameter,
+ cloneParameter,
+};
diff --git a/client/app/services/parameters/tests/DateParameter.test.js b/client/app/services/parameters/tests/DateParameter.test.js
new file mode 100644
index 000000000..68d03f47e
--- /dev/null
+++ b/client/app/services/parameters/tests/DateParameter.test.js
@@ -0,0 +1,79 @@
+import { createParameter } from "..";
+import { getDynamicDateFromString } from "../DateParameter";
+import moment from "moment";
+
+describe("DateParameter", () => {
+ let type = "date";
+ let param;
+
+ beforeEach(() => {
+ param = createParameter({ name: "param", title: "Param", type });
+ });
+
+ describe("getExecutionValue", () => {
+ beforeEach(() => {
+ param.setValue(moment("2019-10-06 10:00:00"));
+ });
+
+ test("formats value as a string date", () => {
+ const executionValue = param.getExecutionValue();
+ expect(executionValue).toBe("2019-10-06");
+ });
+
+ describe("type is datetime-local", () => {
+ beforeAll(() => {
+ type = "datetime-local";
+ });
+
+ test("formats value as a string datetime", () => {
+ const executionValue = param.getExecutionValue();
+ expect(executionValue).toBe("2019-10-06 10:00");
+ });
+ });
+
+ describe("type is datetime-with-seconds", () => {
+ beforeAll(() => {
+ type = "datetime-with-seconds";
+ });
+
+ test("formats value as a string datetime with seconds", () => {
+ const executionValue = param.getExecutionValue();
+ expect(executionValue).toBe("2019-10-06 10:00:00");
+ });
+ });
+ });
+
+ describe("normalizeValue", () => {
+ test("recognizes dates from strings", () => {
+ const normalizedValue = param.normalizeValue("2019-10-06");
+ expect(moment.isMoment(normalizedValue)).toBeTruthy();
+ expect(normalizedValue.format("YYYY-MM-DD")).toBe("2019-10-06");
+ });
+
+ test("recognizes dates from moment values", () => {
+ const normalizedValue = param.normalizeValue(moment("2019-10-06"));
+ expect(moment.isMoment(normalizedValue)).toBeTruthy();
+ expect(normalizedValue.format("YYYY-MM-DD")).toBe("2019-10-06");
+ });
+
+ test("normalizes unrecognized values as null", () => {
+ const normalizedValue = param.normalizeValue("value");
+ expect(normalizedValue).toBeNull();
+ });
+
+ describe("Dynamic values", () => {
+ test("recognizes dynamic values from string index", () => {
+ const normalizedValue = param.normalizeValue("d_now");
+ expect(normalizedValue).not.toBeNull();
+ expect(normalizedValue).toEqual(getDynamicDateFromString("d_now"));
+ });
+
+ test("recognizes dynamic values from a dynamic date", () => {
+ const dynamicDate = getDynamicDateFromString("d_now");
+ const normalizedValue = param.normalizeValue(dynamicDate);
+ expect(normalizedValue).not.toBeNull();
+ expect(normalizedValue).toEqual(dynamicDate);
+ });
+ });
+ });
+});
diff --git a/client/app/services/parameters/tests/DateRangeParameter.test.js b/client/app/services/parameters/tests/DateRangeParameter.test.js
new file mode 100644
index 000000000..c8dde1017
--- /dev/null
+++ b/client/app/services/parameters/tests/DateRangeParameter.test.js
@@ -0,0 +1,76 @@
+import { createParameter } from "..";
+import { getDynamicDateRangeFromString } from "../DateRangeParameter";
+import moment from "moment";
+
+describe("DateRangeParameter", () => {
+ let type = "date-range";
+ let param;
+
+ beforeEach(() => {
+ param = createParameter({ name: "param", title: "Param", type });
+ });
+
+ describe("getExecutionValue", () => {
+ beforeEach(() => {
+ param.setValue({ start: "2019-10-05 10:00:00", end: "2019-10-06 09:59:59" });
+ });
+
+ test("formats value as a string date", () => {
+ const executionValue = param.getExecutionValue();
+ expect(executionValue).toEqual({ start: "2019-10-05", end: "2019-10-06" });
+ });
+
+ describe("type is datetime-range", () => {
+ beforeAll(() => {
+ type = "datetime-range";
+ });
+
+ test("formats value as a string datetime", () => {
+ const executionValue = param.getExecutionValue();
+ expect(executionValue).toEqual({ start: "2019-10-05 10:00", end: "2019-10-06 09:59" });
+ });
+ });
+
+ describe("type is datetime-range-with-seconds", () => {
+ beforeAll(() => {
+ type = "datetime-range-with-seconds";
+ });
+
+ test("formats value as a string datetime with seconds", () => {
+ const executionValue = param.getExecutionValue();
+ expect(executionValue).toEqual({ start: "2019-10-05 10:00:00", end: "2019-10-06 09:59:59" });
+ });
+ });
+ });
+
+ describe("normalizeValue", () => {
+ test("recognizes dates from moment arrays", () => {
+ const normalizedValue = param.normalizeValue([moment("2019-10-05"), moment("2019-10-06")]);
+ expect(normalizedValue).toHaveLength(2);
+ expect(normalizedValue[0].format("YYYY-MM-DD")).toBe("2019-10-05");
+ expect(normalizedValue[1].format("YYYY-MM-DD")).toBe("2019-10-06");
+ });
+
+ test("recognizes dates from object", () => {
+ const normalizedValue = param.normalizeValue({ start: "2019-10-05", end: "2019-10-06" });
+ expect(normalizedValue).toHaveLength(2);
+ expect(normalizedValue[0].format("YYYY-MM-DD")).toBe("2019-10-05");
+ expect(normalizedValue[1].format("YYYY-MM-DD")).toBe("2019-10-06");
+ });
+
+ describe("Dynamic values", () => {
+ test("recognizes dynamic values from string index", () => {
+ const normalizedValue = param.normalizeValue("d_last_week");
+ expect(normalizedValue).not.toBeNull();
+ expect(normalizedValue).toEqual(getDynamicDateRangeFromString("d_last_week"));
+ });
+
+ test("recognizes dynamic values from a dynamic date range", () => {
+ const dynamicDateRange = getDynamicDateRangeFromString("d_last_week");
+ const normalizedValue = param.normalizeValue(dynamicDateRange);
+ expect(normalizedValue).not.toBeNull();
+ expect(normalizedValue).toEqual(dynamicDateRange);
+ });
+ });
+ });
+});
diff --git a/client/app/services/parameters/tests/EnumParameter.test.js b/client/app/services/parameters/tests/EnumParameter.test.js
new file mode 100644
index 000000000..d4d0555a8
--- /dev/null
+++ b/client/app/services/parameters/tests/EnumParameter.test.js
@@ -0,0 +1,56 @@
+import { createParameter } from "..";
+
+describe("EnumParameter", () => {
+ let param;
+ let multiValuesOptions = null;
+ const enumOptions = "value1\nvalue2\nvalue3\nvalue4";
+
+ beforeEach(() => {
+ const paramOptions = {
+ name: "param",
+ title: "Param",
+ type: "enum",
+ enumOptions,
+ multiValuesOptions,
+ };
+ param = createParameter(paramOptions);
+ });
+
+ describe("normalizeValue", () => {
+ test("returns the value when the input in the enum options", () => {
+ const normalizedValue = param.normalizeValue("value2");
+ expect(normalizedValue).toBe("value2");
+ });
+
+ test("returns the first value when the input is not in the enum options", () => {
+ const normalizedValue = param.normalizeValue("anything");
+ expect(normalizedValue).toBe("value1");
+ });
+ });
+
+ describe("Multi-valued", () => {
+ beforeAll(() => {
+ multiValuesOptions = { prefix: '"', suffix: '"', separator: "," };
+ });
+
+ describe("normalizeValue", () => {
+ test("returns only valid values", () => {
+ const normalizedValue = param.normalizeValue(["value3", "anything", null]);
+ expect(normalizedValue).toEqual(["value3"]);
+ });
+
+ test("normalizes empty values as null", () => {
+ const normalizedValue = param.normalizeValue([]);
+ expect(normalizedValue).toBeNull();
+ });
+ });
+
+ describe("getExecutionValue", () => {
+ test("joins values when joinListValues is truthy", () => {
+ param.setValue(["value1", "value3"]);
+ const executionValue = param.getExecutionValue({ joinListValues: true });
+ expect(executionValue).toBe('"value1","value3"');
+ });
+ });
+ });
+});
diff --git a/client/app/services/parameters/tests/NumberParameter.test.js b/client/app/services/parameters/tests/NumberParameter.test.js
new file mode 100644
index 000000000..bfb27c327
--- /dev/null
+++ b/client/app/services/parameters/tests/NumberParameter.test.js
@@ -0,0 +1,26 @@
+import { createParameter } from "..";
+
+describe("NumberParameter", () => {
+ let param;
+
+ beforeEach(() => {
+ param = createParameter({ name: "param", title: "Param", type: "number" });
+ });
+
+ describe("normalizeValue", () => {
+ test("converts Strings", () => {
+ const normalizedValue = param.normalizeValue("15");
+ expect(normalizedValue).toBe(15);
+ });
+
+ test("converts Numbers", () => {
+ const normalizedValue = param.normalizeValue(42);
+ expect(normalizedValue).toBe(42);
+ });
+
+ test("returns null when not possible to convert to number", () => {
+ const normalizedValue = param.normalizeValue("notanumber");
+ expect(normalizedValue).toBeNull();
+ });
+ });
+});
diff --git a/client/app/services/parameters/tests/Parameter.test.js b/client/app/services/parameters/tests/Parameter.test.js
new file mode 100644
index 000000000..3ec7ad7b1
--- /dev/null
+++ b/client/app/services/parameters/tests/Parameter.test.js
@@ -0,0 +1,32 @@
+import {
+ createParameter,
+ TextParameter,
+ NumberParameter,
+ EnumParameter,
+ QueryBasedDropdownParameter,
+ DateParameter,
+ DateRangeParameter,
+} from "..";
+
+describe("Parameter", () => {
+ describe("create", () => {
+ const parameterTypes = [
+ ["text", TextParameter],
+ ["number", NumberParameter],
+ ["enum", EnumParameter],
+ ["query", QueryBasedDropdownParameter],
+ ["date", DateParameter],
+ ["datetime-local", DateParameter],
+ ["datetime-with-seconds", DateParameter],
+ ["date-range", DateRangeParameter],
+ ["datetime-range", DateRangeParameter],
+ ["datetime-range-with-seconds", DateRangeParameter],
+ [null, TextParameter],
+ ];
+
+ test.each(parameterTypes)("when type is '%s' creates a %p", (type, expectedClass) => {
+ const parameter = createParameter({ name: "param", title: "Param", type });
+ expect(parameter).toBeInstanceOf(expectedClass);
+ });
+ });
+});
diff --git a/client/app/services/parameters/tests/QueryBasedDropdownParameter.test.js b/client/app/services/parameters/tests/QueryBasedDropdownParameter.test.js
new file mode 100644
index 000000000..59f7e8972
--- /dev/null
+++ b/client/app/services/parameters/tests/QueryBasedDropdownParameter.test.js
@@ -0,0 +1,54 @@
+import { createParameter } from "..";
+
+describe("QueryBasedDropdownParameter", () => {
+ let param;
+ let multiValuesOptions = null;
+
+ beforeEach(() => {
+ const paramOptions = {
+ name: "param",
+ title: "Param",
+ type: "query",
+ queryId: 1,
+ multiValuesOptions,
+ };
+ param = createParameter(paramOptions);
+ });
+
+ describe("normalizeValue", () => {
+ test("returns the value when the input in the enum options", () => {
+ const normalizedValue = param.normalizeValue("value2");
+ expect(normalizedValue).toBe("value2");
+ });
+
+ describe("Empty values", () => {
+ const emptyValues = [null, undefined, []];
+
+ test.each(emptyValues)("normalizes empty value '%s' as null", emptyValue => {
+ const normalizedValue = param.normalizeValue(emptyValue);
+ expect(normalizedValue).toBeNull();
+ });
+ });
+ });
+
+ describe("Multi-valued", () => {
+ beforeAll(() => {
+ multiValuesOptions = { prefix: '"', suffix: '"', separator: "," };
+ });
+
+ describe("normalizeValue", () => {
+ test("returns an array with the input when input is not an array", () => {
+ const normalizedValue = param.normalizeValue("value");
+ expect(normalizedValue).toEqual(["value"]);
+ });
+ });
+
+ describe("getExecutionValue", () => {
+ test("joins values when joinListValues is truthy", () => {
+ param.setValue(["value1", "value3"]);
+ const executionValue = param.getExecutionValue({ joinListValues: true });
+ expect(executionValue).toBe('"value1","value3"');
+ });
+ });
+ });
+});
diff --git a/client/app/services/parameters/tests/TextParameter.test.js b/client/app/services/parameters/tests/TextParameter.test.js
new file mode 100644
index 000000000..830912ea5
--- /dev/null
+++ b/client/app/services/parameters/tests/TextParameter.test.js
@@ -0,0 +1,30 @@
+import { createParameter } from "..";
+
+describe("TextParameter", () => {
+ let param;
+
+ beforeEach(() => {
+ param = createParameter({ name: "param", title: "Param", type: "text" });
+ });
+
+ describe("normalizeValue", () => {
+ test("converts Strings", () => {
+ const normalizedValue = param.normalizeValue("exampleString");
+ expect(normalizedValue).toBe("exampleString");
+ });
+
+ test("converts Numbers", () => {
+ const normalizedValue = param.normalizeValue(3);
+ expect(normalizedValue).toBe("3");
+ });
+
+ describe("Empty values", () => {
+ const emptyValues = [null, undefined, ""];
+
+ test.each(emptyValues)("normalizes empty value '%s' as null", emptyValue => {
+ const normalizedValue = param.normalizeValue(emptyValue);
+ expect(normalizedValue).toBeNull();
+ });
+ });
+ });
+});
diff --git a/client/app/services/policy/DefaultPolicy.js b/client/app/services/policy/DefaultPolicy.js
new file mode 100644
index 000000000..368be23f7
--- /dev/null
+++ b/client/app/services/policy/DefaultPolicy.js
@@ -0,0 +1,68 @@
+import { get, isArray } from "lodash";
+import { currentUser, clientConfig } from "@/services/auth";
+
+/* eslint-disable class-methods-use-this */
+
+export default class DefaultPolicy {
+ refresh() {
+ return Promise.resolve(this);
+ }
+
+ canCreateDataSource() {
+ return currentUser.isAdmin;
+ }
+
+ isCreateDataSourceEnabled() {
+ return currentUser.isAdmin;
+ }
+
+ canCreateDestination() {
+ return currentUser.isAdmin;
+ }
+
+ isCreateDestinationEnabled() {
+ return currentUser.isAdmin;
+ }
+
+ canCreateDashboard() {
+ return currentUser.hasPermission("create_dashboard");
+ }
+
+ isCreateDashboardEnabled() {
+ return currentUser.hasPermission("create_dashboard");
+ }
+
+ canCreateAlert() {
+ return true;
+ }
+
+ canCreateUser() {
+ return currentUser.isAdmin;
+ }
+
+ isCreateUserEnabled() {
+ return currentUser.isAdmin;
+ }
+
+ isCreateQuerySnippetEnabled() {
+ return true;
+ }
+
+ getDashboardRefreshIntervals() {
+ const result = clientConfig.dashboardRefreshIntervals;
+ return isArray(result) ? result : null;
+ }
+
+ getQueryRefreshIntervals() {
+ const result = clientConfig.queryRefreshIntervals;
+ return isArray(result) ? result : null;
+ }
+
+ canEdit(object) {
+ return get(object, "can_edit", false);
+ }
+
+ canRun() {
+ return true;
+ }
+}
diff --git a/client/app/services/policy/index.js b/client/app/services/policy/index.js
new file mode 100644
index 000000000..b468aa71f
--- /dev/null
+++ b/client/app/services/policy/index.js
@@ -0,0 +1,8 @@
+import DefaultPolicy from "./DefaultPolicy";
+
+// eslint-disable-next-line import/no-mutable-exports
+export let policy = new DefaultPolicy();
+
+export function setPolicy(newPolicy) {
+ policy = newPolicy;
+}
diff --git a/client/app/services/query-result.js b/client/app/services/query-result.js
new file mode 100644
index 000000000..b41f1e214
--- /dev/null
+++ b/client/app/services/query-result.js
@@ -0,0 +1,495 @@
+import debug from "debug";
+import moment from "moment";
+import { axios } from "@/services/axios";
+import { QueryResultError } from "@/services/query";
+import { Auth } from "@/services/auth";
+import { isString, uniqBy, each, isNumber, includes, extend, forOwn, get } from "lodash";
+
+const logger = debug("redash:services:QueryResult");
+const filterTypes = ["filter", "multi-filter", "multiFilter"];
+
+function defer() {
+ const result = { onStatusChange: status => {} };
+ result.promise = new Promise((resolve, reject) => {
+ result.resolve = resolve;
+ result.reject = reject;
+ });
+ return result;
+}
+
+function getColumnNameWithoutType(column) {
+ let typeSplit;
+ if (column.indexOf("::") !== -1) {
+ typeSplit = "::";
+ } else if (column.indexOf("__") !== -1) {
+ typeSplit = "__";
+ } else {
+ return column;
+ }
+
+ const parts = column.split(typeSplit);
+ if (parts[0] === "" && parts.length === 2) {
+ return parts[1];
+ }
+
+ if (!includes(filterTypes, parts[1])) {
+ return column;
+ }
+
+ return parts[0];
+}
+
+function getColumnFriendlyName(column) {
+ return getColumnNameWithoutType(column).replace(/(?:^|\s)\S/g, a => a.toUpperCase());
+}
+
+const createOrSaveUrl = data => (data.id ? `api/query_results/${data.id}` : "api/query_results");
+const QueryResultResource = {
+ get: ({ id }) => axios.get(`api/query_results/${id}`),
+ post: data => axios.post(createOrSaveUrl(data), data),
+};
+
+export const ExecutionStatus = {
+ WAITING: "waiting",
+ PROCESSING: "processing",
+ DONE: "done",
+ FAILED: "failed",
+ LOADING_RESULT: "loading-result",
+};
+
+const statuses = {
+ 1: ExecutionStatus.WAITING,
+ 2: ExecutionStatus.PROCESSING,
+ 3: ExecutionStatus.DONE,
+ 4: ExecutionStatus.FAILED,
+};
+
+function handleErrorResponse(queryResult, error) {
+ const status = get(error, "response.status");
+ switch (status) {
+ case 403:
+ queryResult.update(error.response.data);
+ return;
+ case 400:
+ if ("job" in error.response.data) {
+ queryResult.update(error.response.data);
+ return;
+ }
+ break;
+ case 404:
+ queryResult.update({
+ job: {
+ error: "cached query result unavailable, please execute again.",
+ status: 4,
+ },
+ });
+ return;
+ // no default
+ }
+
+ logger("Unknown error", error);
+ queryResult.update({
+ job: {
+ error: get(error, "response.data.message", "Unknown error occurred. Please try again later."),
+ status: 4,
+ },
+ });
+}
+
+function sleep(ms) {
+ return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export function fetchDataFromJob(jobId, interval = 1000) {
+ return axios.get(`api/jobs/${jobId}`).then(data => {
+ const status = statuses[data.job.status];
+ if (status === ExecutionStatus.WAITING || status === ExecutionStatus.PROCESSING) {
+ return sleep(interval).then(() => fetchDataFromJob(data.job.id));
+ } else if (status === ExecutionStatus.DONE) {
+ return data.job.result;
+ } else if (status === ExecutionStatus.FAILED) {
+ return Promise.reject(data.job.error);
+ }
+ });
+}
+
+class QueryResult {
+ constructor(props) {
+ this.deferred = defer();
+ this.job = {};
+ this.query_result = {};
+ this.status = "waiting";
+
+ this.updatedAt = moment();
+
+ // extended status flags
+ this.isLoadingResult = false;
+
+ if (props) {
+ this.update(props);
+ }
+ }
+
+ update(props) {
+ extend(this, props);
+
+ if ("query_result" in props) {
+ this.status = ExecutionStatus.DONE;
+ this.deferred.onStatusChange(ExecutionStatus.DONE);
+
+ const columnTypes = {};
+
+ // TODO: we should stop manipulating incoming data, and switch to relaying
+ // on the column type set by the backend. This logic is prone to errors,
+ // and better be removed. Kept for now, for backward compatability.
+ each(this.query_result.data.rows, row => {
+ forOwn(row, (v, k) => {
+ let newType = null;
+ if (isNumber(v)) {
+ newType = "float";
+ } else if (isString(v) && v.match(/^\d{4}-\d{2}-\d{2}T/)) {
+ row[k] = moment.utc(v);
+ newType = "datetime";
+ } else if (isString(v) && v.match(/^\d{4}-\d{2}-\d{2}$/)) {
+ row[k] = moment.utc(v);
+ newType = "date";
+ } else if (typeof v === "object" && v !== null) {
+ row[k] = JSON.stringify(v);
+ } else {
+ newType = "string";
+ }
+
+ if (newType !== null) {
+ if (columnTypes[k] !== undefined && columnTypes[k] !== newType) {
+ columnTypes[k] = "string";
+ } else {
+ columnTypes[k] = newType;
+ }
+ }
+ });
+ });
+
+ each(this.query_result.data.columns, column => {
+ column.name = "" + column.name;
+ if (columnTypes[column.name]) {
+ if (column.type == null || column.type === "string") {
+ column.type = columnTypes[column.name];
+ }
+ }
+ });
+
+ this.deferred.resolve(this);
+ } else if (this.job.status === 3 || this.job.status === 2) {
+ this.deferred.onStatusChange(ExecutionStatus.PROCESSING);
+ this.status = "processing";
+ } else if (this.job.status === 4) {
+ this.status = statuses[this.job.status];
+ this.deferred.reject(new QueryResultError(this.job.error));
+ } else {
+ this.deferred.onStatusChange(undefined);
+ this.status = undefined;
+ }
+ }
+
+ getId() {
+ let id = null;
+ if ("query_result" in this) {
+ id = this.query_result.id;
+ }
+ return id;
+ }
+
+ cancelExecution() {
+ axios.delete(`api/jobs/${this.job.id}`);
+ }
+
+ getStatus() {
+ if (this.isLoadingResult) {
+ return ExecutionStatus.LOADING_RESULT;
+ }
+ return this.status || statuses[this.job.status];
+ }
+
+ getError() {
+ // TODO: move this logic to the server...
+ if (this.job.error === "None") {
+ return undefined;
+ }
+
+ return this.job.error;
+ }
+
+ getLog() {
+ if (!this.query_result.data || !this.query_result.data.log || this.query_result.data.log.length === 0) {
+ return null;
+ }
+
+ return this.query_result.data.log;
+ }
+
+ getUpdatedAt() {
+ return this.query_result.retrieved_at || this.job.updated_at * 1000.0 || this.updatedAt;
+ }
+
+ getRuntime() {
+ return this.query_result.runtime;
+ }
+
+ getRawData() {
+ if (!this.query_result.data) {
+ return null;
+ }
+
+ return this.query_result.data.rows;
+ }
+
+ getData() {
+ return this.query_result.data ? this.query_result.data.rows : null;
+ }
+
+ isEmpty() {
+ return this.getData() === null || this.getData().length === 0;
+ }
+
+ getColumns() {
+ if (this.columns === undefined && this.query_result.data) {
+ this.columns = this.query_result.data.columns;
+ }
+
+ return this.columns;
+ }
+
+ getColumnNames() {
+ if (this.columnNames === undefined && this.query_result.data) {
+ this.columnNames = this.query_result.data.columns.map(v => v.name);
+ }
+
+ return this.columnNames;
+ }
+
+ getColumnFriendlyNames() {
+ return this.getColumnNames().map(col => getColumnFriendlyName(col));
+ }
+
+ getTruncated() {
+ return this.query_result.data ? this.query_result.data.truncated : null;
+ }
+
+ getFilters() {
+ if (!this.getColumns()) {
+ return [];
+ }
+
+ const filters = [];
+
+ this.getColumns().forEach(col => {
+ const name = col.name;
+ const type = name.split("::")[1] || name.split("__")[1];
+ if (includes(filterTypes, type)) {
+ // filter found
+ const filter = {
+ name,
+ friendlyName: getColumnFriendlyName(name),
+ column: col,
+ values: [],
+ multiple: type === "multiFilter" || type === "multi-filter",
+ };
+ filters.push(filter);
+ }
+ }, this);
+
+ this.getRawData().forEach(row => {
+ filters.forEach(filter => {
+ filter.values.push(row[filter.name]);
+ if (filter.values.length === 1) {
+ if (filter.multiple) {
+ filter.current = [row[filter.name]];
+ } else {
+ filter.current = row[filter.name];
+ }
+ }
+ });
+ });
+
+ filters.forEach(filter => {
+ filter.values = uniqBy(filter.values, v => {
+ if (moment.isMoment(v)) {
+ return v.unix();
+ }
+ return v;
+ });
+ if (filter.values.length > 1 && filter.multiple) {
+ filter.current = filter.values.slice();
+ }
+ });
+
+ return filters;
+ }
+
+ toPromise(statusCallback) {
+ if (statusCallback) {
+ this.deferred.onStatusChange = statusCallback;
+ }
+ return this.deferred.promise;
+ }
+
+ static getById(queryId, id) {
+ const queryResult = new QueryResult();
+
+ queryResult.isLoadingResult = true;
+ queryResult.deferred.onStatusChange(ExecutionStatus.LOADING_RESULT);
+
+ axios
+ .get(`api/queries/${queryId}/results/${id}.json`)
+ .then(response => {
+ // Success handler
+ queryResult.isLoadingResult = false;
+ queryResult.update(response);
+ })
+ .catch(error => {
+ // Error handler
+ queryResult.isLoadingResult = false;
+ handleErrorResponse(queryResult, error);
+ });
+
+ return queryResult;
+ }
+
+ loadLatestCachedResult(queryId, parameters) {
+ axios
+ .post(`api/queries/${queryId}/results`, { queryId, parameters })
+ .then(response => {
+ this.update(response);
+ })
+ .catch(error => {
+ handleErrorResponse(this, error);
+ });
+ }
+
+ loadResult(tryCount) {
+ this.isLoadingResult = true;
+ this.deferred.onStatusChange(ExecutionStatus.LOADING_RESULT);
+
+ QueryResultResource.get({ id: this.job.query_result_id })
+ .then(response => {
+ this.update(response);
+ this.isLoadingResult = false;
+ })
+ .catch(error => {
+ if (tryCount === undefined) {
+ tryCount = 0;
+ }
+
+ if (tryCount > 3) {
+ logger("Connection error while trying to load result", error);
+ this.update({
+ job: {
+ error: "failed communicating with server. Please check your Internet connection and try again.",
+ status: 4,
+ },
+ });
+ this.isLoadingResult = false;
+ } else {
+ setTimeout(() => {
+ this.loadResult(tryCount + 1);
+ }, 1000 * Math.pow(2, tryCount));
+ }
+ });
+ }
+
+ refreshStatus(query, parameters, tryNumber = 1) {
+ const loadResult = () =>
+ Auth.isAuthenticated() ? this.loadResult() : this.loadLatestCachedResult(query, parameters);
+
+ const request = Auth.isAuthenticated()
+ ? axios.get(`api/jobs/${this.job.id}`)
+ : axios.get(`api/queries/${query}/jobs/${this.job.id}`);
+
+ request
+ .then(jobResponse => {
+ this.update(jobResponse);
+
+ if (this.getStatus() === "processing" && this.job.query_result_id && this.job.query_result_id !== "None") {
+ loadResult();
+ } else if (this.getStatus() !== "failed") {
+ const waitTime = tryNumber > 10 ? 3000 : 500;
+ setTimeout(() => {
+ this.refreshStatus(query, parameters, tryNumber + 1);
+ }, waitTime);
+ }
+ })
+ .catch(error => {
+ logger("Connection error", error);
+ // TODO: use QueryResultError, or better yet: exception/reject of promise.
+ this.update({
+ job: {
+ error: "failed communicating with server. Please check your Internet connection and try again.",
+ status: 4,
+ },
+ });
+ });
+ }
+
+ getLink(queryId, fileType, apiKey) {
+ let link = `api/queries/${queryId}/results/${this.getId()}.${fileType}`;
+ if (apiKey) {
+ link = `${link}?api_key=${apiKey}`;
+ }
+ return link;
+ }
+
+ getName(queryName, fileType) {
+ return `${queryName.replace(/ /g, "_") + moment(this.getUpdatedAt()).format("_YYYY_MM_DD")}.${fileType}`;
+ }
+
+ static getByQueryId(id, parameters, applyAutoLimit, maxAge) {
+ const queryResult = new QueryResult();
+
+ axios
+ .post(`api/queries/${id}/results`, { id, parameters, apply_auto_limit: applyAutoLimit, max_age: maxAge })
+ .then(response => {
+ queryResult.update(response);
+
+ if ("job" in response) {
+ queryResult.refreshStatus(id, parameters);
+ }
+ })
+ .catch(error => {
+ handleErrorResponse(queryResult, error);
+ });
+
+ return queryResult;
+ }
+
+ static get(dataSourceId, query, parameters, applyAutoLimit, maxAge, queryId) {
+ const queryResult = new QueryResult();
+
+ const params = {
+ data_source_id: dataSourceId,
+ parameters,
+ query,
+ apply_auto_limit: applyAutoLimit,
+ max_age: maxAge,
+ };
+
+ if (queryId !== undefined) {
+ params.query_id = queryId;
+ }
+
+ QueryResultResource.post(params)
+ .then(response => {
+ queryResult.update(response);
+
+ if ("job" in response) {
+ queryResult.refreshStatus(query, parameters);
+ }
+ })
+ .catch(error => {
+ handleErrorResponse(queryResult, error);
+ });
+
+ return queryResult;
+ }
+}
+
+export default QueryResult;
diff --git a/client/app/services/query-snippet.js b/client/app/services/query-snippet.js
new file mode 100644
index 000000000..689611303
--- /dev/null
+++ b/client/app/services/query-snippet.js
@@ -0,0 +1,33 @@
+import { axios } from "@/services/axios";
+import { extend, map } from "lodash";
+
+class QuerySnippet {
+ constructor(querySnippet) {
+ extend(this, querySnippet);
+ }
+
+ getSnippet() {
+ let name = this.trigger;
+ if (this.description !== "") {
+ name = `${this.trigger}: ${this.description}`;
+ }
+
+ return {
+ name,
+ content: this.snippet,
+ tabTrigger: this.trigger,
+ };
+ }
+}
+
+const getQuerySnippet = querySnippet => new QuerySnippet(querySnippet);
+
+const QuerySnippetService = {
+ get: data => axios.get(`api/query_snippets/${data.id}`).then(getQuerySnippet),
+ query: () => axios.get("api/query_snippets").then(data => map(data, getQuerySnippet)),
+ create: data => axios.post("api/query_snippets", data).then(getQuerySnippet),
+ save: data => axios.post(`api/query_snippets/${data.id}`, data).then(getQuerySnippet),
+ delete: data => axios.delete(`api/query_snippets/${data.id}`),
+};
+
+export default QuerySnippetService;
diff --git a/client/app/services/query.js b/client/app/services/query.js
new file mode 100644
index 000000000..a8cf624cb
--- /dev/null
+++ b/client/app/services/query.js
@@ -0,0 +1,411 @@
+import moment from "moment";
+import debug from "debug";
+import Mustache from "mustache";
+import { axios } from "@/services/axios";
+import {
+ zipObject,
+ isEmpty,
+ isArray,
+ map,
+ filter,
+ includes,
+ union,
+ uniq,
+ has,
+ identity,
+ extend,
+ each,
+ some,
+ clone,
+ find,
+} from "lodash";
+import location from "@/services/location";
+
+import { Parameter, createParameter } from "./parameters";
+import { currentUser } from "./auth";
+import QueryResult from "./query-result";
+import localOptions from "@/lib/localOptions";
+
+Mustache.escape = identity; // do not html-escape values
+
+const logger = debug("redash:services:query");
+
+function collectParams(parts) {
+ let parameters = [];
+
+ parts.forEach(part => {
+ if (part[0] === "name" || part[0] === "&") {
+ parameters.push(part[1].split(".")[0]);
+ } else if (part[0] === "#") {
+ parameters = union(parameters, collectParams(part[4]));
+ }
+ });
+
+ return parameters;
+}
+
+export class Query {
+ constructor(query) {
+ extend(this, query);
+
+ if (!has(this, "options")) {
+ this.options = {};
+ }
+ this.options.apply_auto_limit = !!this.options.apply_auto_limit;
+
+ if (!isArray(this.options.parameters)) {
+ this.options.parameters = [];
+ }
+ }
+
+ isNew() {
+ return this.id === undefined;
+ }
+
+ hasDailySchedule() {
+ return this.schedule && this.schedule.match(/\d\d:\d\d/) !== null;
+ }
+
+ scheduleInLocalTime() {
+ const parts = this.schedule.split(":");
+ return moment
+ .utc()
+ .hour(parts[0])
+ .minute(parts[1])
+ .local()
+ .format("HH:mm");
+ }
+
+ hasResult() {
+ return !!(this.latest_query_data || this.latest_query_data_id);
+ }
+
+ paramsRequired() {
+ return this.getParameters().isRequired();
+ }
+
+ hasParameters() {
+ return this.getParametersDefs().length > 0;
+ }
+
+ prepareQueryResultExecution(execute, maxAge) {
+ const parameters = this.getParameters();
+ const missingParams = parameters.getMissing();
+
+ if (missingParams.length > 0) {
+ let paramsWord = "parameter";
+ let valuesWord = "value";
+ if (missingParams.length > 1) {
+ paramsWord = "parameters";
+ valuesWord = "values";
+ }
+
+ return new QueryResult({
+ job: {
+ error: `missing ${valuesWord} for ${missingParams.join(", ")} ${paramsWord}.`,
+ status: 4,
+ },
+ });
+ }
+
+ if (parameters.isRequired()) {
+ // Need to clear latest results, to make sure we don't use results for different params.
+ this.latest_query_data = null;
+ this.latest_query_data_id = null;
+ }
+
+ if (this.latest_query_data && maxAge !== 0) {
+ if (!this.queryResult) {
+ this.queryResult = new QueryResult({
+ query_result: this.latest_query_data,
+ });
+ }
+ } else if (this.latest_query_data_id && maxAge !== 0) {
+ if (!this.queryResult) {
+ this.queryResult = QueryResult.getById(this.id, this.latest_query_data_id);
+ }
+ } else {
+ this.queryResult = execute();
+ }
+
+ return this.queryResult;
+ }
+
+ getQueryResult(maxAge) {
+ const execute = () =>
+ QueryResult.getByQueryId(this.id, this.getParameters().getExecutionValues(), this.getAutoLimit(), maxAge);
+ return this.prepareQueryResultExecution(execute, maxAge);
+ }
+
+ getQueryResultByText(maxAge, selectedQueryText) {
+ const queryText = selectedQueryText || this.query;
+ if (!queryText) {
+ return new QueryResultError("Can't execute empty query.");
+ }
+
+ const parameters = this.getParameters().getExecutionValues({ joinListValues: true });
+ const execute = () =>
+ QueryResult.get(this.data_source_id, queryText, parameters, this.getAutoLimit(), maxAge, this.id);
+ return this.prepareQueryResultExecution(execute, maxAge);
+ }
+
+ getUrl(source, hash) {
+ let url = `queries/${this.id}`;
+
+ if (source) {
+ url += "/source";
+ }
+
+ let params = {};
+ if (this.getParameters().isRequired()) {
+ this.getParametersDefs().forEach(param => {
+ extend(params, param.toUrlParams());
+ });
+ }
+ Object.keys(params).forEach(key => params[key] == null && delete params[key]);
+ params = map(params, (value, name) => `${encodeURIComponent(name)}=${encodeURIComponent(value)}`).join("&");
+
+ if (params !== "") {
+ url += `?${params}`;
+ }
+
+ if (hash) {
+ url += `#${hash}`;
+ }
+
+ return url;
+ }
+
+ getQueryResultPromise() {
+ return this.getQueryResult().toPromise();
+ }
+
+ getParameters() {
+ if (!this.$parameters) {
+ this.$parameters = new Parameters(this, location.search);
+ }
+
+ return this.$parameters;
+ }
+
+ getAutoLimit() {
+ return this.options.apply_auto_limit;
+ }
+
+ getParametersDefs(update = true) {
+ return this.getParameters().get(update);
+ }
+
+ favorite() {
+ return Query.favorite(this);
+ }
+
+ unfavorite() {
+ return Query.unfavorite(this);
+ }
+
+ clone() {
+ const newQuery = clone(this);
+ newQuery.$parameters = null;
+ newQuery.getParameters();
+ return newQuery;
+ }
+}
+
+class Parameters {
+ constructor(query, queryString) {
+ this.query = query;
+ this.updateParameters();
+ this.initFromQueryString(queryString);
+ }
+
+ parseQuery() {
+ const fallback = () => map(this.query.options.parameters, i => i.name);
+
+ let parameters = [];
+ if (this.query.query !== undefined) {
+ try {
+ const parts = Mustache.parse(this.query.query);
+ parameters = uniq(collectParams(parts));
+ } catch (e) {
+ logger("Failed parsing parameters: ", e);
+ // Return current parameters so we don't reset the list
+ parameters = fallback();
+ }
+ } else {
+ parameters = fallback();
+ }
+
+ return parameters;
+ }
+
+ updateParameters(update) {
+ if (this.query.query === this.cachedQueryText) {
+ const parameters = this.query.options.parameters;
+ const hasUnprocessedParameters = find(parameters, p => !(p instanceof Parameter));
+ if (hasUnprocessedParameters) {
+ this.query.options.parameters = map(parameters, p =>
+ p instanceof Parameter ? p : createParameter(p, this.query.id)
+ );
+ }
+ return;
+ }
+
+ this.cachedQueryText = this.query.query;
+ const parameterNames = update ? this.parseQuery() : map(this.query.options.parameters, p => p.name);
+
+ this.query.options.parameters = this.query.options.parameters || [];
+
+ const parametersMap = {};
+ this.query.options.parameters.forEach(param => {
+ parametersMap[param.name] = param;
+ });
+
+ parameterNames.forEach(param => {
+ if (!has(parametersMap, param)) {
+ this.query.options.parameters.push(
+ createParameter({
+ title: param,
+ name: param,
+ type: "text",
+ value: null,
+ global: false,
+ })
+ );
+ }
+ });
+
+ const parameterExists = p => includes(parameterNames, p.name);
+ const parameters = this.query.options.parameters;
+ this.query.options.parameters = parameters
+ .filter(parameterExists)
+ .map(p => (p instanceof Parameter ? p : createParameter(p, this.query.id)));
+ }
+
+ initFromQueryString(query) {
+ this.get().forEach(param => {
+ param.fromUrlParams(query);
+ });
+ }
+
+ get(update = true) {
+ this.updateParameters(update);
+ return this.query.options.parameters;
+ }
+
+ add(parameterDef) {
+ this.query.options.parameters = this.query.options.parameters.filter(p => p.name !== parameterDef.name);
+ const param = createParameter(parameterDef);
+ this.query.options.parameters.push(param);
+ return param;
+ }
+
+ getMissing() {
+ return map(
+ filter(this.get(), p => p.isEmpty),
+ i => i.title
+ );
+ }
+
+ isRequired() {
+ return !isEmpty(this.get());
+ }
+
+ getExecutionValues(extra = {}) {
+ const params = this.get();
+ return zipObject(
+ map(params, i => i.name),
+ map(params, i => i.getExecutionValue(extra))
+ );
+ }
+
+ hasPendingValues() {
+ return some(this.get(), p => p.hasPendingValue);
+ }
+
+ applyPendingValues() {
+ each(this.get(), p => p.applyPendingValue());
+ }
+
+ toUrlParams() {
+ if (this.get().length === 0) {
+ return "";
+ }
+
+ const params = Object.assign(...this.get().map(p => p.toUrlParams()));
+ Object.keys(params).forEach(key => params[key] == null && delete params[key]);
+ return Object.keys(params)
+ .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`)
+ .join("&");
+ }
+}
+
+export class QueryResultError {
+ constructor(errorMessage) {
+ this.errorMessage = errorMessage;
+ this.updatedAt = moment.utc();
+ }
+
+ getUpdatedAt() {
+ return this.updatedAt;
+ }
+
+ getError() {
+ return this.errorMessage;
+ }
+
+ toPromise() {
+ return Promise.reject(this);
+ }
+
+ // eslint-disable-next-line class-methods-use-this
+ getStatus() {
+ return "failed";
+ }
+
+ // eslint-disable-next-line class-methods-use-this
+ getData() {
+ return null;
+ }
+
+ // eslint-disable-next-line class-methods-use-this
+ getLog() {
+ return null;
+ }
+}
+
+const getQuery = query => new Query(query);
+const saveOrCreateUrl = data => (data.id ? `api/queries/${data.id}` : "api/queries");
+const mapResults = data => ({ ...data, results: map(data.results, getQuery) });
+
+const QueryService = {
+ query: params => axios.get("api/queries", { params }).then(mapResults),
+ get: data => axios.get(`api/queries/${data.id}`, data).then(getQuery),
+ save: data => axios.post(saveOrCreateUrl(data), data).then(getQuery),
+ delete: data => axios.delete(`api/queries/${data.id}`),
+ recent: params => axios.get(`api/queries/recent`, { params }).then(data => map(data, getQuery)),
+ archive: params => axios.get(`api/queries/archive`, { params }).then(mapResults),
+ myQueries: params => axios.get("api/queries/my", { params }).then(mapResults),
+ fork: ({ id }) => axios.post(`api/queries/${id}/fork`, { id }).then(getQuery),
+ resultById: data => axios.get(`api/queries/${data.id}/results.json`),
+ asDropdown: data => axios.get(`api/queries/${data.id}/dropdown`),
+ associatedDropdown: ({ queryId, dropdownQueryId }) =>
+ axios.get(`api/queries/${queryId}/dropdowns/${dropdownQueryId}`),
+ favorites: params => axios.get("api/queries/favorites", { params }).then(mapResults),
+ favorite: data => axios.post(`api/queries/${data.id}/favorite`),
+ unfavorite: data => axios.delete(`api/queries/${data.id}/favorite`),
+};
+
+QueryService.newQuery = function newQuery() {
+ return new Query({
+ query: "",
+ name: "New Query",
+ schedule: null,
+ user: currentUser,
+ options: { apply_auto_limit: localOptions.get("applyAutoLimit", true) },
+ tags: [],
+ can_edit: true,
+ });
+};
+
+extend(Query, QueryService);
diff --git a/client/app/services/recordEvent.js b/client/app/services/recordEvent.js
new file mode 100644
index 000000000..7329ab760
--- /dev/null
+++ b/client/app/services/recordEvent.js
@@ -0,0 +1,25 @@
+import { axios } from "@/services/axios";
+import { debounce, extend } from "lodash";
+
+let events = [];
+
+const post = debounce(() => {
+ const eventsToSend = events;
+ events = [];
+
+ axios.post("api/events", eventsToSend);
+}, 1000);
+
+export default function recordEvent(action, objectType, objectId, additionalProperties) {
+ const event = {
+ action,
+ object_type: objectType,
+ object_id: objectId,
+ timestamp: Date.now() / 1000.0,
+ screen_resolution: `${window.screen.width}x${window.screen.height}`,
+ };
+ extend(event, additionalProperties);
+ events.push(event);
+
+ post();
+}
diff --git a/client/app/services/resizeObserver.js b/client/app/services/resizeObserver.js
new file mode 100644
index 000000000..c27b3bbae
--- /dev/null
+++ b/client/app/services/resizeObserver.js
@@ -0,0 +1,32 @@
+const items = new Map();
+
+function checkItems() {
+ if (items.size > 0) {
+ items.forEach((item, node) => {
+ const bounds = node.getBoundingClientRect();
+ // convert to int (because these numbers needed for comparisons), but preserve 1 decimal point
+ const width = Math.round(bounds.width * 10);
+ const height = Math.round(bounds.height * 10);
+
+ if (item.width !== width || item.height !== height) {
+ item.width = width;
+ item.height = height;
+ item.callback(node);
+ }
+ });
+
+ setTimeout(checkItems, 100);
+ }
+}
+
+export default function observe(node, callback) {
+ if (node && !items.has(node)) {
+ const shouldTrigger = items.size === 0;
+ items.set(node, { callback });
+ if (shouldTrigger) {
+ checkItems();
+ }
+ return () => items.delete(node);
+ }
+ return () => {};
+}
diff --git a/client/app/services/restoreSession.jsx b/client/app/services/restoreSession.jsx
new file mode 100644
index 000000000..b7773325e
--- /dev/null
+++ b/client/app/services/restoreSession.jsx
@@ -0,0 +1,91 @@
+import { map } from "lodash";
+import React from "react";
+import Modal from "antd/lib/modal";
+import { Auth } from "@/services/auth";
+
+const SESSION_RESTORED_MESSAGE = "redash_session_restored";
+
+export function notifySessionRestored() {
+ if (window.opener) {
+ window.opener.postMessage({ type: SESSION_RESTORED_MESSAGE }, window.location.origin);
+ }
+}
+
+function getPopupPosition(width, height) {
+ const windowLeft = window.screenX;
+ const windowTop = window.screenY;
+ const windowWidth = window.innerWidth;
+ const windowHeight = window.innerHeight;
+
+ return {
+ left: Math.floor((windowWidth - width) / 2 + windowLeft),
+ top: Math.floor((windowHeight - height) / 2 + windowTop),
+ width: Math.floor(width),
+ height: Math.floor(height),
+ };
+}
+
+function showRestoreSessionPrompt(loginUrl, onSuccess) {
+ let popup = null;
+
+ Modal.warning({
+ content: "Your session has expired. Please login to continue.",
+ okText: (
+
+ Login (opens in a new tab)
+
+ ),
+ centered: true,
+ mask: true,
+ maskClosable: false,
+ keyboard: false,
+ onOk: closeModal => {
+ if (popup && !popup.closed) {
+ popup.focus();
+ return; // popup already shown
+ }
+
+ const popupOptions = {
+ ...getPopupPosition(640, 640),
+ menubar: "no",
+ toolbar: "no",
+ location: "yes",
+ resizable: "yes",
+ scrollbars: "yes",
+ status: "yes",
+ };
+
+ popup = window.open(loginUrl, "Restore Session", map(popupOptions, (value, key) => `${key}=${value}`).join(","));
+
+ const handlePostMessage = event => {
+ if (event.data.type === SESSION_RESTORED_MESSAGE) {
+ if (popup) {
+ popup.close();
+ }
+ popup = null;
+ window.removeEventListener("message", handlePostMessage);
+ closeModal();
+ onSuccess();
+ }
+ };
+
+ window.addEventListener("message", handlePostMessage, false);
+ },
+ });
+}
+
+let restoreSessionPromise = null;
+
+export function restoreSession() {
+ if (!restoreSessionPromise) {
+ restoreSessionPromise = new Promise(resolve => {
+ showRestoreSessionPrompt(Auth.getLoginUrl(), () => {
+ restoreSessionPromise = null;
+ resolve();
+ });
+ });
+ }
+
+ return restoreSessionPromise;
+}
diff --git a/client/app/services/routes.ts b/client/app/services/routes.ts
new file mode 100644
index 000000000..eae32f8fc
--- /dev/null
+++ b/client/app/services/routes.ts
@@ -0,0 +1,63 @@
+import { isString, isObject, filter, sortBy } from "lodash";
+import React from "react";
+import { Context, Route as UniversalRouterRoute } from "universal-router";
+import pathToRegexp from "path-to-regexp";
+
+export interface CurrentRoute {
+ id: string | null;
+ key?: string;
+ title: string;
+ routeParams: P;
+}
+
+export interface RedashRoute
extends UniversalRouterRoute {
+ path: string; // we don't use other UniversalRouterRoute options, path should be available and should be a string
+ key?: string; // generated in Router.jsx
+ title: string;
+ render?: (currentRoute: CurrentRoute) => React.ReactNode;
+ getApiKey?: () => string;
+}
+
+interface RouteItem extends RedashRoute {
+ id: string | null;
+}
+
+function getRouteParamsCount(path: string) {
+ const tokens = pathToRegexp.parse(path);
+ return filter(tokens, isObject).length;
+}
+
+class Routes {
+ _items: RouteItem[] = [];
+ _sorted = false;
+
+ get items(): RouteItem[] {
+ if (!this._sorted) {
+ this._items = sortBy(this._items, [
+ item => getRouteParamsCount(item.path), // simple definitions first, with more params - last
+ item => -item.path.length, // longer first
+ item => item.path, // if same type and length - sort alphabetically
+ ]);
+ this._sorted = true;
+ }
+ return this._items;
+ }
+
+ public register(id: string, route: RedashRoute
) {
+ const idOrNull = isString(id) ? id : null;
+ this.unregister(idOrNull);
+ if (isObject(route)) {
+ this._items = [...this.items, { ...route, id: idOrNull }];
+ this._sorted = false;
+ }
+ }
+
+ public unregister(id: string | null) {
+ if (isString(id)) {
+ // removing item does not break their order (if already sorted)
+ this._items = filter(this.items, item => item.id !== id);
+ }
+ }
+}
+
+export default new Routes();
diff --git a/client/app/services/sanitize.js b/client/app/services/sanitize.js
new file mode 100644
index 000000000..47521ba40
--- /dev/null
+++ b/client/app/services/sanitize.js
@@ -0,0 +1,23 @@
+import { isString } from "lodash";
+import DOMPurify from "dompurify";
+
+DOMPurify.setConfig({
+ ADD_ATTR: ["target"],
+});
+
+DOMPurify.addHook("afterSanitizeAttributes", function(node) {
+ // Fix elements with `target` attribute:
+ // - allow only `target="_blank"
+ // - add `rel="noopener noreferrer"` to prevent https://www.owasp.org/index.php/Reverse_Tabnabbing
+
+ const target = node.getAttribute("target");
+ if (isString(target) && target.toLowerCase() === "_blank") {
+ node.setAttribute("rel", "noopener noreferrer");
+ } else {
+ node.removeAttribute("target");
+ }
+});
+
+export { DOMPurify };
+
+export default DOMPurify.sanitize;
diff --git a/client/app/services/settingsMenu.js b/client/app/services/settingsMenu.js
new file mode 100644
index 000000000..c1d12dd77
--- /dev/null
+++ b/client/app/services/settingsMenu.js
@@ -0,0 +1,54 @@
+import { isString, isObject, isFunction, extend, omit, sortBy, find, filter } from "lodash";
+import { stripBase } from "@/components/ApplicationArea/Router";
+import { currentUser } from "@/services/auth";
+
+class SettingsMenuItem {
+ constructor(menuItem) {
+ extend(this, { pathPrefix: `/${menuItem.path}` }, omit(menuItem, ["isActive", "isAvailable"]));
+ if (isFunction(menuItem.isActive)) {
+ this.isActive = menuItem.isActive;
+ }
+ if (isFunction(menuItem.isAvailable)) {
+ this.isAvailable = menuItem.isAvailable;
+ }
+ }
+
+ isActive(path) {
+ return path.startsWith(this.pathPrefix);
+ }
+
+ isAvailable() {
+ return this.permission === undefined || currentUser.hasPermission(this.permission);
+ }
+}
+
+class SettingsMenu {
+ items = [];
+
+ add(id, item) {
+ id = isString(id) ? id : null;
+ this.remove(id);
+ if (isObject(item)) {
+ this.items.push(new SettingsMenuItem({ ...item, id }));
+ this.items = sortBy(this.items, "order");
+ }
+ }
+
+ remove(id) {
+ if (isString(id)) {
+ this.items = filter(this.items, item => item.id !== id);
+ // removing item does not change order of other items, so no need to sort
+ }
+ }
+
+ getAvailableItems() {
+ return filter(this.items, item => item.isAvailable());
+ }
+
+ getActiveItem(path) {
+ const strippedPath = stripBase(path);
+ return find(this.items, item => item.isActive(strippedPath));
+ }
+}
+
+export default new SettingsMenu();
diff --git a/client/app/services/settingsMenu.test.js b/client/app/services/settingsMenu.test.js
new file mode 100644
index 000000000..8a51b0beb
--- /dev/null
+++ b/client/app/services/settingsMenu.test.js
@@ -0,0 +1,33 @@
+import settingsMenu from "./settingsMenu";
+
+const dataSourcesItem = {
+ permission: "admin",
+ title: "Data Sources",
+ path: "data_sources",
+};
+
+const usersItem = {
+ title: "Users",
+ path: "users",
+};
+
+settingsMenu.add(null, dataSourcesItem);
+settingsMenu.add(null, usersItem);
+
+describe("SettingsMenu", () => {
+ describe("isActive", () => {
+ test("works with non multi org paths", () => {
+ expect(settingsMenu.getActiveItem("/data_sources/").title).toBe(dataSourcesItem.title);
+ });
+
+ test("works with multi org paths", () => {
+ // Set base href:
+ const base = document.createElement("base");
+ base.setAttribute("href", "http://localhost/acme/");
+ document.head.appendChild(base);
+
+ expect(settingsMenu.getActiveItem("/acme/data_sources/")).toBeTruthy();
+ expect(settingsMenu.getActiveItem("/acme/data_sources/").title).toBe(dataSourcesItem.title);
+ });
+ });
+});
diff --git a/client/app/services/url.js b/client/app/services/url.js
new file mode 100644
index 000000000..e5e84ca5d
--- /dev/null
+++ b/client/app/services/url.js
@@ -0,0 +1,25 @@
+import { pick, extend } from "lodash";
+
+const link = document.createElement("a"); // the only way to get an instance of Location class
+// add to document to apply
+ Redash doesn't support your browser
+
+
+
Whoops... Redash doesn't support your browser
+
+
Download one of these free and up-to-date browsers:
+
+
world ' AS html,
+ 'hello, world ' AS html2,
+ 'Link: http://example.com' AS html3,
+ '1995-09-03T07:45' AS "date",
+ true AS bool,
+ '[{"a": 3.14, "b": "test", "c": [], "d": {}}, false, [null, 123], "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."]' AS json,
+ 'ukr' AS img,
+ 'redash' AS link
+`;
+
+export const config = {
+ itemsPerPage: 25,
+ columns: [
+ {
+ name: "num",
+ displayAs: "number",
+ numberFormat: "0.000",
+ },
+ {
+ name: "str",
+ displayAs: "string",
+ allowHTML: true,
+ highlightLinks: false,
+ },
+ {
+ name: "html",
+ displayAs: "string",
+ allowHTML: true,
+ highlightLinks: false,
+ },
+ {
+ name: "html2",
+ displayAs: "string",
+ allowHTML: false,
+ highlightLinks: false,
+ },
+ {
+ name: "html3",
+ displayAs: "string",
+ allowHTML: true,
+ highlightLinks: true,
+ },
+ {
+ name: "date",
+ displayAs: "datetime",
+ dateTimeFormat: "D MMMM YYYY, h:mm A",
+ },
+ {
+ name: "bool",
+ displayAs: "boolean",
+ booleanValues: ["No", "Yes"],
+ },
+ {
+ name: "json",
+ displayAs: "json",
+ },
+ {
+ name: "img",
+ displayAs: "image",
+ imageUrlTemplate: "https://raw.githubusercontent.com/linssen/country-flag-icons/master/images/png/{{ @ }}.png",
+ imageTitleTemplate: "ISO: {{ @ }}",
+ imageWidth: "30",
+ imageHeight: "",
+ },
+ {
+ name: "link",
+ displayAs: "link",
+ linkUrlTemplate: "https://www.google.com.ua/search?q={{ @ }}",
+ linkTextTemplate: "Search for '{{ @ }}'",
+ linkTitleTemplate: "Search for '{{ @ }}'",
+ linkOpenInNewTab: true,
+ },
+ ],
+};
diff --git a/client/cypress/integration/visualizations/table/.mocks/large-dataset.js b/client/cypress/integration/visualizations/table/.mocks/large-dataset.js
new file mode 100644
index 000000000..2677beab5
--- /dev/null
+++ b/client/cypress/integration/visualizations/table/.mocks/large-dataset.js
@@ -0,0 +1,35 @@
+const loremIpsum =
+ "Lorem ipsum dolor sit amet consectetur adipiscing elit" +
+ "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua";
+
+function pseudoRandom(seed) {
+ const x = Math.sin(seed) * 10000;
+ return x - Math.floor(x);
+}
+
+function randomString(index) {
+ const n = pseudoRandom(index);
+ const offset = Math.floor(n * loremIpsum.length);
+ const length = Math.floor(n * 15) + 1;
+ return loremIpsum.substr(offset, length).trim();
+}
+
+export const query = new Array(400)
+ .fill(null) // we actually don't need these values, but `.map()` ignores undefined elements
+ .map((unused, index) => `SELECT ${index} AS a, '${randomString(index)}' as b`)
+ .join(" UNION ALL\n");
+
+export const config = {
+ itemsPerPage: 10,
+ columns: [
+ {
+ name: "a",
+ displayAs: "number",
+ numberFormat: "0",
+ },
+ {
+ name: "b",
+ displayAs: "string",
+ },
+ ],
+};
diff --git a/client/cypress/integration/visualizations/table/.mocks/multi-column-sort.js b/client/cypress/integration/visualizations/table/.mocks/multi-column-sort.js
new file mode 100644
index 000000000..cf96ec32d
--- /dev/null
+++ b/client/cypress/integration/visualizations/table/.mocks/multi-column-sort.js
@@ -0,0 +1,32 @@
+export const query = `
+ SELECT 3 AS a, 1 AS b, 'h' AS c UNION ALL
+ SELECT 1 AS a, 1 AS b, 'b' AS c UNION ALL
+ SELECT 2 AS a, 1 AS b, 'e' AS c UNION ALL
+ SELECT 1 AS a, 3 AS b, 'd' AS c UNION ALL
+ SELECT 2 AS a, 2 AS b, 'f' AS c UNION ALL
+ SELECT 1 AS a, 1 AS b, 'a' AS c UNION ALL
+ SELECT 3 AS a, 2 AS b, 'i' AS c UNION ALL
+ SELECT 2 AS a, 3 AS b, 'g' AS c UNION ALL
+ SELECT 1 AS a, 2 AS b, 'c' AS c UNION ALL
+ SELECT 3 AS a, 3 AS b, 'j' AS c
+`;
+
+export const config = {
+ itemsPerPage: 25,
+ columns: [
+ {
+ name: "a",
+ displayAs: "number",
+ numberFormat: "0",
+ },
+ {
+ name: "b",
+ displayAs: "number",
+ numberFormat: "0",
+ },
+ {
+ name: "c",
+ displayAs: "string",
+ },
+ ],
+};
diff --git a/client/cypress/integration/visualizations/table/.mocks/search-in-data.js b/client/cypress/integration/visualizations/table/.mocks/search-in-data.js
new file mode 100644
index 000000000..de5aa68ed
--- /dev/null
+++ b/client/cypress/integration/visualizations/table/.mocks/search-in-data.js
@@ -0,0 +1,26 @@
+export const query = `
+ SELECT 'contains test' AS a, 'random string' AS b, 'another string' AS c UNION ALL
+ SELECT 'contains test' AS a, 'also contains Test' AS b, '' AS c UNION ALL
+ SELECT 'lorem ipsum' AS a, 'but TEST is here' AS b, 'none' AS c UNION ALL
+ SELECT 'should not appear' AS a, 'because' AS b, '"test" is here' AS c
+`;
+
+export const config = {
+ itemsPerPage: 25,
+ columns: [
+ {
+ name: "a",
+ displayAs: "string",
+ allowSearch: true,
+ },
+ {
+ name: "b",
+ displayAs: "string",
+ allowSearch: true,
+ },
+ {
+ name: "c",
+ allowSearch: false,
+ },
+ ],
+};
diff --git a/client/cypress/integration/visualizations/table/table_spec.js b/client/cypress/integration/visualizations/table/table_spec.js
new file mode 100644
index 000000000..b0fa8ec61
--- /dev/null
+++ b/client/cypress/integration/visualizations/table/table_spec.js
@@ -0,0 +1,126 @@
+/* global cy, Cypress */
+
+/*
+ This test suite relies on Percy (does not validate rendered visualizations)
+*/
+
+import * as AllCellTypes from "./.mocks/all-cell-types";
+import * as MultiColumnSort from "./.mocks/multi-column-sort";
+import * as SearchInData from "./.mocks/search-in-data";
+import * as LargeDataset from "./.mocks/large-dataset";
+
+function prepareVisualization(query, type, name, options) {
+ return cy
+ .createQuery({ query })
+ .then(({ id }) => cy.createVisualization(id, type, name, options))
+ .then(({ id: visualizationId, query_id: queryId }) => {
+ // use data-only view because we don't need editor features, but it will
+ // free more space for visualizations. Also, we'll hide schema browser (via shortcut)
+ cy.visit(`queries/${queryId}#${visualizationId}`);
+
+ cy.getByTestId("ExecuteButton").click();
+ cy.get("body").type("{alt}D");
+
+ // do some pre-checks here to ensure that visualization was created and is visible
+ cy.getByTestId("TableVisualization")
+ .should("exist")
+ .find("table")
+ .should("exist");
+
+ return cy.then(() => ({ queryId, visualizationId }));
+ });
+}
+
+describe("Table", () => {
+ const viewportWidth = Cypress.config("viewportWidth");
+
+ beforeEach(() => {
+ cy.login();
+ });
+
+ it("renders all cell types", () => {
+ const { query, config } = AllCellTypes;
+ prepareVisualization(query, "TABLE", "All cell types", config).then(() => {
+ // eslint-disable-next-line cypress/no-unnecessary-waiting
+ cy.wait(500); // add some waiting to avoid an async update error from .jvi-toggle
+
+ // expand JSON cell
+ cy.get(".jvi-item.jvi-root .jvi-toggle").click();
+ cy.get(".jvi-item.jvi-root .jvi-item .jvi-toggle").click({ multiple: true });
+
+ cy.percySnapshot("Visualizations - Table (All cell types)", { widths: [viewportWidth] });
+ });
+ });
+
+ describe("Sorting data", () => {
+ beforeEach(function() {
+ const { query, config } = MultiColumnSort;
+ prepareVisualization(query, "TABLE", "Sort data", config).then(({ queryId, visualizationId }) => {
+ this.queryId = queryId;
+ this.visualizationId = visualizationId;
+ });
+ });
+
+ it("sorts data by a single column", function() {
+ cy.getByTestId("TableVisualization")
+ .find("table th")
+ .contains("c")
+ .should("exist")
+ .click();
+ cy.percySnapshot("Visualizations - Table (Single-column sort)", { widths: [viewportWidth] });
+ });
+
+ it("sorts data by a multiple columns", function() {
+ cy.getByTestId("TableVisualization")
+ .find("table th")
+ .contains("a")
+ .should("exist")
+ .click();
+
+ cy.get("body").type("{shift}", { release: false });
+ cy.getByTestId("TableVisualization")
+ .find("table th")
+ .contains("b")
+ .should("exist")
+ .click();
+
+ cy.percySnapshot("Visualizations - Table (Multi-column sort)", { widths: [viewportWidth] });
+ });
+
+ it("sorts data in reverse order", function() {
+ cy.getByTestId("TableVisualization")
+ .find("table th")
+ .contains("c")
+ .should("exist")
+ .click()
+ .click();
+ cy.percySnapshot("Visualizations - Table (Single-column reverse sort)", { widths: [viewportWidth] });
+ });
+ });
+
+ it("searches in multiple columns", () => {
+ const { query, config } = SearchInData;
+ prepareVisualization(query, "TABLE", "Search", config).then(({ visualizationId }) => {
+ cy.getByTestId("TableVisualization")
+ .find("table input")
+ .should("exist")
+ .type("test");
+ cy.percySnapshot("Visualizations - Table (Search in data)", { widths: [viewportWidth] });
+ });
+ });
+
+ it("shows pagination and navigates to third page", () => {
+ const { query, config } = LargeDataset;
+ prepareVisualization(query, "TABLE", "With pagination", config).then(({ visualizationId }) => {
+ cy.get(".visualization-renderer")
+ .find(".ant-table-pagination")
+ .should("exist")
+ .find("li")
+ .contains("3")
+ .should("exist")
+ .click();
+
+ cy.percySnapshot("Visualizations - Table (Pagination)", { widths: [viewportWidth] });
+ });
+ });
+});
diff --git a/client/cypress/integration/visualizations/word_cloud_spec.js b/client/cypress/integration/visualizations/word_cloud_spec.js
new file mode 100644
index 000000000..bd9b5148d
--- /dev/null
+++ b/client/cypress/integration/visualizations/word_cloud_spec.js
@@ -0,0 +1,134 @@
+/* global cy, Cypress */
+
+const { map } = Cypress._;
+
+const SQL = `
+ SELECT 'Lorem ipsum dolor' AS a, 'ipsum' AS b, 2 AS c UNION ALL
+ SELECT 'Lorem sit amet' AS a, 'amet' AS b, 2 AS c UNION ALL
+ SELECT 'dolor adipiscing elit' AS a, 'elit' AS b, 4 AS c UNION ALL
+ SELECT 'sed do sed' AS a, 'sed' AS b, 5 AS c UNION ALL
+ SELECT 'sed eiusmod tempor' AS a, 'tempor' AS b, 7 AS c
+`;
+
+// Hack to fix Cypress -> Percy communication
+// Word Cloud uses `font-family` defined in CSS with a lot of fallbacks, so
+// it's almost impossible to know which font will be used on particular machine/browser.
+// In Cypress browser it could be one font, in Percy - another.
+// The issue is in how Percy takes screenshots: it takes a DOM/CSS/assets snapshot in Cypress,
+// copies it to own servers and restores in own browsers. Word Cloud computes its layout
+// using Cypress font, sets absolute positions for elements (in pixels), and when it is restored
+// on Percy machines (with another font) - visualization gets messed up.
+// Solution: explicitly provide some font that will be 100% the same on all CI machines. In this
+// case, it's "Roboto" just because it's in the list of fallback fonts and we already have this
+// webfont in assets folder (so browser can load it).
+function injectFont(document) {
+ const style = document.createElement("style");
+ style.setAttribute("id", "percy-fix");
+ style.setAttribute("type", "text/css");
+
+ const fonts = [
+ ["Roboto", "Roboto-Light-webfont", 300],
+ ["Roboto", "Roboto-Regular-webfont", 400],
+ ["Roboto", "Roboto-Medium-webfont", 500],
+ ["Roboto", "Roboto-Bold-webfont", 700],
+ ];
+
+ const basePath = "/static/fonts/roboto/";
+
+ // `insertRule` does not load font for some reason. Using text content works ¯\_(ツ)_/¯
+ style.appendChild(
+ document.createTextNode(
+ map(
+ fonts,
+ ([fontFamily, fileName, fontWeight]) => `
+ @font-face {
+ font-family: "${fontFamily}";
+ font-weight: ${fontWeight};
+ src: url("${basePath}${fileName}.eot");
+ src: url("${basePath}${fileName}.eot?#iefix") format("embedded-opentype"),
+ url("${basePath}${fileName}.woff") format("woff"),
+ url("${basePath}${fileName}.ttf") format("truetype"),
+ url("${basePath}${fileName}.svg") format("svg");
+ }
+ `
+ ).join("\n\n")
+ )
+ );
+ document.getElementsByTagName("head")[0].appendChild(style);
+}
+
+describe("Word Cloud", () => {
+ const viewportWidth = Cypress.config("viewportWidth");
+
+ beforeEach(() => {
+ cy.login();
+ cy.createQuery({ query: SQL }).then(({ id }) => {
+ cy.visit(`queries/${id}/source`);
+ cy.getByTestId("ExecuteButton").click();
+ });
+ cy.document().then(injectFont);
+ cy.getByTestId("NewVisualization").click();
+ cy.getByTestId("VisualizationType").selectAntdOption("VisualizationType.WORD_CLOUD");
+ });
+
+ it("creates visualization with automatic word frequencies", () => {
+ cy.clickThrough(`
+ WordCloud.WordsColumn
+ WordCloud.WordsColumn.a
+ `);
+
+ // Wait for proper initialization of visualization
+ cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
+
+ cy.getByTestId("VisualizationPreview")
+ .find("svg text")
+ .should("have.length", 11);
+
+ cy.percySnapshot("Visualizations - Word Cloud (Automatic word frequencies)", { widths: [viewportWidth] });
+ });
+
+ it("creates visualization with word frequencies from another column", () => {
+ cy.clickThrough(`
+ WordCloud.WordsColumn
+ WordCloud.WordsColumn.b
+
+ WordCloud.FrequenciesColumn
+ WordCloud.FrequenciesColumn.c
+ `);
+
+ // Wait for proper initialization of visualization
+ cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
+
+ cy.getByTestId("VisualizationPreview")
+ .find("svg text")
+ .should("have.length", 5);
+
+ cy.percySnapshot("Visualizations - Word Cloud (Frequencies from another column)", { widths: [viewportWidth] });
+ });
+
+ it("creates visualization with word length and frequencies limits", () => {
+ cy.clickThrough(`
+ WordCloud.WordsColumn
+ WordCloud.WordsColumn.b
+
+ WordCloud.FrequenciesColumn
+ WordCloud.FrequenciesColumn.c
+ `);
+
+ cy.fillInputs({
+ "WordCloud.WordLengthLimit.Min": "4",
+ "WordCloud.WordLengthLimit.Max": "5",
+ "WordCloud.WordCountLimit.Min": "1",
+ "WordCloud.WordCountLimit.Max": "3",
+ });
+
+ // Wait for proper initialization of visualization
+ cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
+
+ cy.getByTestId("VisualizationPreview")
+ .find("svg text")
+ .should("have.length", 2);
+
+ cy.percySnapshot("Visualizations - Word Cloud (With filters)", { widths: [viewportWidth] });
+ });
+});
diff --git a/client/cypress/plugins/index.js b/client/cypress/plugins/index.js
new file mode 100644
index 000000000..a11c0619e
--- /dev/null
+++ b/client/cypress/plugins/index.js
@@ -0,0 +1,10 @@
+const percyHealthCheck = require("@percy/cypress/task"); // eslint-disable-line import/no-extraneous-dependencies, import/no-unresolved
+
+module.exports = (on, config) => {
+ if (config.env.coverage) {
+ require("@cypress/code-coverage/task")(on, config);
+ }
+ on("task", percyHealthCheck);
+
+ return config;
+};
diff --git a/client/cypress/seed-data.js b/client/cypress/seed-data.js
new file mode 100644
index 000000000..21c6a47d1
--- /dev/null
+++ b/client/cypress/seed-data.js
@@ -0,0 +1,46 @@
+exports.seedData = [
+ {
+ route: "/setup",
+ type: "form",
+ data: {
+ name: "Example Admin",
+ email: "admin@redash.io",
+ password: "password",
+ org_name: "Redash",
+ },
+ },
+ {
+ route: "/login",
+ type: "form",
+ data: {
+ email: "admin@redash.io",
+ password: "password",
+ },
+ },
+ {
+ route: "/api/data_sources",
+ type: "json",
+ data: {
+ name: "Test PostgreSQL",
+ options: {
+ dbname: "postgres",
+ host: "postgres",
+ port: 5432,
+ sslmode: "prefer",
+ user: "postgres",
+ },
+ type: "pg",
+ },
+ },
+ {
+ route: "/api/destinations",
+ type: "json",
+ data: {
+ name: "Test Email Destination",
+ options: {
+ addresses: "test@example.com",
+ },
+ type: "email",
+ },
+ },
+];
diff --git a/client/cypress/support/commands.js b/client/cypress/support/commands.js
new file mode 100644
index 000000000..675b58f03
--- /dev/null
+++ b/client/cypress/support/commands.js
@@ -0,0 +1,129 @@
+/* global Cypress */
+
+import "@percy/cypress"; // eslint-disable-line import/no-extraneous-dependencies, import/no-unresolved
+
+import "@testing-library/cypress/add-commands";
+
+const { each } = Cypress._;
+
+Cypress.Commands.add("login", (email = "admin@redash.io", password = "password") => {
+ let csrf;
+ cy.visit("/login");
+ cy.getCookie("csrf_token")
+ .then(cookie => {
+ if (cookie) {
+ csrf = cookie.value;
+ } else {
+ cy.visit("/login").then(() => {
+ cy.get('input[name="csrf_token"]')
+ .invoke("val")
+ .then(csrf_token => {
+ csrf = csrf_token;
+ });
+ });
+ }
+ })
+ .then(() => {
+ cy.request({
+ url: "/login",
+ method: "POST",
+ form: true,
+ body: {
+ email,
+ password,
+ csrf_token: csrf,
+ },
+ });
+ });
+});
+
+Cypress.Commands.add("logout", () => cy.visit("/logout"));
+Cypress.Commands.add("getByTestId", element => cy.get('[data-test="' + element + '"]'));
+
+/* Clicks a series of elements. Pass in a newline-seperated string in order to click all elements by their test id,
+ or enclose the above string in an object with 'button' as key to click the buttons by name. For example:
+
+ cy.clickThrough(`
+ TestId1
+ TestId2
+ TestId3
+ `, { button: `
+ Label of button 4
+ Label of button 5
+ ` }, `
+ TestId6
+ TestId7`);
+*/
+Cypress.Commands.add("clickThrough", (...args) => {
+ args.forEach(elements => {
+ const names = elements.button || elements;
+
+ const click = element =>
+ (elements.button ? cy.contains("button", element.trim()) : cy.getByTestId(element.trim())).click();
+
+ names
+ .trim()
+ .split(/\n/)
+ .filter(Boolean)
+ .forEach(click);
+ });
+
+ return undefined;
+});
+
+/**
+ * Selects ANTD selector option
+ */
+Cypress.Commands.add("selectAntdOption", { prevSubject: "element" }, (subject, testId) => {
+ cy.wrap(subject).click();
+ return cy.getByTestId(testId).click({ force: true });
+});
+
+Cypress.Commands.add("fillInputs", (elements, { wait = 0 } = {}) => {
+ each(elements, (value, testId) => {
+ cy.getByTestId(testId)
+ .filter(":visible")
+ .clear()
+ .type(value);
+ if (wait > 0) {
+ cy.wait(wait); // eslint-disable-line cypress/no-unnecessary-waiting
+ }
+ });
+});
+
+Cypress.Commands.add("dragBy", { prevSubject: true }, (subject, offsetLeft, offsetTop, force = false) => {
+ if (!offsetLeft) {
+ offsetLeft = 1;
+ }
+ if (!offsetTop) {
+ offsetTop = 1;
+ }
+ return cy
+ .wrap(subject)
+ .trigger("mouseover", { force })
+ .trigger("mousedown", "topLeft", { force })
+ .trigger("mousemove", 1, 1, { force }) // must have at least 2 mousemove events for react-grid-layout to trigger onLayoutChange
+ .trigger("mousemove", offsetLeft, offsetTop, { force })
+ .trigger("mouseup", { force });
+});
+
+Cypress.Commands.add("all", (...functions) => {
+ if (Cypress._.isEmpty(functions)) {
+ return [];
+ }
+
+ const fns = Cypress._.isArray(functions[0]) ? functions[0] : functions;
+ const results = [];
+
+ fns.reduce((prev, fn) => {
+ fn().then(result => results.push(result));
+ return results;
+ }, results);
+
+ return cy.wrap(results);
+});
+
+Cypress.Commands.overwrite("percySnapshot", (originalFn, ...args) => {
+ Cypress.$("*[data-test=TimeAgo]").text("just now");
+ return originalFn(...args);
+});
diff --git a/client/cypress/support/dashboard/index.js b/client/cypress/support/dashboard/index.js
new file mode 100644
index 000000000..1f92bc249
--- /dev/null
+++ b/client/cypress/support/dashboard/index.js
@@ -0,0 +1,43 @@
+/* global cy */
+
+const { get } = Cypress._;
+const RESIZE_HANDLE_SELECTOR = ".react-resizable-handle";
+
+export function getWidgetTestId(widget) {
+ return `WidgetId${widget.id}`;
+}
+
+export function createQueryAndAddWidget(dashboardId, queryData = {}, widgetOptions = {}) {
+ return cy
+ .createQuery(queryData)
+ .then(query => {
+ const visualizationId = get(query, "visualizations.0.id");
+ assert.isDefined(visualizationId, "Query api call returns at least one visualization with id");
+ return cy.addWidget(dashboardId, visualizationId, widgetOptions);
+ })
+ .then(getWidgetTestId);
+}
+
+export function editDashboard() {
+ cy.getByTestId("DashboardMoreButton").click();
+
+ cy.getByTestId("DashboardMoreButtonMenu")
+ .contains("Edit")
+ .click();
+}
+
+export function shareDashboard() {
+ cy.clickThrough(
+ { button: "Publish" },
+ `OpenShareForm
+ PublicAccessEnabled`
+ );
+
+ return cy.getByTestId("SecretAddress").invoke("val");
+}
+
+export function resizeBy(wrapper, offsetLeft = 0, offsetTop = 0) {
+ return wrapper.within(() => {
+ cy.get(RESIZE_HANDLE_SELECTOR).dragBy(offsetLeft, offsetTop, true);
+ });
+}
diff --git a/client/cypress/support/index.js b/client/cypress/support/index.js
new file mode 100644
index 000000000..ca2180ebf
--- /dev/null
+++ b/client/cypress/support/index.js
@@ -0,0 +1,14 @@
+/* global Cypress */
+
+import "@cypress/code-coverage/support";
+import "./commands";
+import "./redash-api/index.js";
+
+Cypress.env("dataSourceId", 1);
+
+Cypress.on("uncaught:exception", err => {
+ // Prevent ResizeObserver error from failing tests
+ if (err && Cypress._.includes(err.message, "ResizeObserver loop limit exceeded")) {
+ return false;
+ }
+});
diff --git a/client/cypress/support/parameters.js b/client/cypress/support/parameters.js
new file mode 100644
index 000000000..335cc70f7
--- /dev/null
+++ b/client/cypress/support/parameters.js
@@ -0,0 +1,13 @@
+export function dragParam(paramName, offsetLeft, offsetTop) {
+ cy.getByTestId(`DragHandle-${paramName}`)
+ .trigger("mouseover")
+ .trigger("mousedown");
+
+ cy.get(".parameter-dragged .drag-handle")
+ .trigger("mousemove", offsetLeft, offsetTop, { force: true })
+ .trigger("mouseup", { force: true });
+}
+
+export function expectParamOrder(expectedOrder) {
+ cy.get(".parameter-container label").each(($label, index) => expect($label).to.have.text(expectedOrder[index]));
+}
diff --git a/client/cypress/support/redash-api/index.js b/client/cypress/support/redash-api/index.js
new file mode 100644
index 000000000..e9bc0ace6
--- /dev/null
+++ b/client/cypress/support/redash-api/index.js
@@ -0,0 +1,171 @@
+/* global cy, Cypress */
+
+const { extend, get, merge, find } = Cypress._;
+
+const post = options =>
+ cy
+ .getCookie("csrf_token")
+ .then(csrf => cy.request({ ...options, method: "POST", headers: { "X-CSRF-TOKEN": csrf.value } }));
+
+Cypress.Commands.add("createDashboard", name => {
+ return post({ url: "api/dashboards", body: { name } }).then(({ body }) => body);
+});
+
+Cypress.Commands.add("createQuery", (data, shouldPublish = true) => {
+ const merged = extend(
+ {
+ name: "Test Query",
+ query: "select 1",
+ data_source_id: Cypress.env("dataSourceId"),
+ options: {
+ parameters: [],
+ },
+ schedule: null,
+ },
+ data
+ );
+
+ // eslint-disable-next-line cypress/no-assigning-return-values
+ let request = post({ url: "/api/queries", body: merged }).then(({ body }) => body);
+ if (shouldPublish) {
+ request = request.then(query =>
+ post({ url: `/api/queries/${query.id}`, body: { is_draft: false } }).then(() => query)
+ );
+ }
+
+ return request;
+});
+
+Cypress.Commands.add("createVisualization", (queryId, type, name, options) => {
+ const data = { query_id: queryId, type, name, options };
+ return post({ url: "/api/visualizations", body: data }).then(({ body }) => ({
+ query_id: queryId,
+ ...body,
+ }));
+});
+
+Cypress.Commands.add("addTextbox", (dashboardId, text = "text", options = {}) => {
+ const defaultOptions = {
+ position: { col: 0, row: 0, sizeX: 3, sizeY: 3 },
+ };
+
+ const data = {
+ width: 1,
+ dashboard_id: dashboardId,
+ visualization_id: null,
+ text,
+ options: merge(defaultOptions, options),
+ };
+
+ return post({ url: "api/widgets", body: data }).then(({ body }) => {
+ const id = get(body, "id");
+ assert.isDefined(id, "Widget api call returns widget id");
+ return body;
+ });
+});
+
+Cypress.Commands.add("addWidget", (dashboardId, visualizationId, options = {}) => {
+ const defaultOptions = {
+ position: { col: 0, row: 0, sizeX: 3, sizeY: 3 },
+ };
+
+ const data = {
+ width: 1,
+ dashboard_id: dashboardId,
+ visualization_id: visualizationId,
+ options: merge(defaultOptions, options),
+ };
+
+ return post({ url: "api/widgets", body: data }).then(({ body }) => {
+ const id = get(body, "id");
+ assert.isDefined(id, "Widget api call returns widget id");
+ return body;
+ });
+});
+
+Cypress.Commands.add("createAlert", (queryId, options = {}, name) => {
+ const defaultOptions = {
+ column: "?column?",
+ op: "greater than",
+ rearm: 0,
+ value: 1,
+ };
+
+ const data = {
+ query_id: queryId,
+ name: name || "Alert for query " + queryId,
+ options: merge(defaultOptions, options),
+ };
+
+ return post({ url: "api/alerts", body: data }).then(({ body }) => {
+ const id = get(body, "id");
+ assert.isDefined(id, "Alert api call retu ns alert id");
+ return body;
+ });
+});
+
+Cypress.Commands.add("createUser", ({ name, email, password }) => {
+ return post({
+ url: "api/users?no_invite=yes",
+ body: { name, email },
+ failOnStatusCode: false,
+ }).then(xhr => {
+ const { status, body } = xhr;
+ if (status < 200 || status > 400) {
+ throw new Error(xhr);
+ }
+
+ if (status === 400 && body.message === "Email already taken.") {
+ // all is good, do nothing
+ return;
+ }
+
+ const id = get(body, "id");
+ assert.isDefined(id, "User api call returns user id");
+
+ return post({
+ url: body.invite_link,
+ form: true,
+ body: { password },
+ });
+ });
+});
+
+Cypress.Commands.add("createDestination", (name, type, options = {}) => {
+ return post({
+ url: "api/destinations",
+ body: { name, type, options },
+ failOnStatusCode: false,
+ });
+});
+
+Cypress.Commands.add("getDestinations", () => {
+ return cy.request("GET", "api/destinations").then(({ body }) => body);
+});
+
+Cypress.Commands.add("addDestinationSubscription", (alertId, destinationName) => {
+ return cy
+ .getDestinations()
+ .then(destinations => {
+ const destination = find(destinations, { name: destinationName });
+ if (!destination) {
+ throw new Error("Destination not found");
+ }
+ return post({
+ url: `api/alerts/${alertId}/subscriptions`,
+ body: {
+ alert_id: alertId,
+ destination_id: destination.id,
+ },
+ });
+ })
+ .then(({ body }) => {
+ const id = get(body, "id");
+ assert.isDefined(id, "Subscription api call returns subscription id");
+ return body;
+ });
+});
+
+Cypress.Commands.add("updateOrgSettings", settings => {
+ return post({ url: "api/settings/organization", body: settings }).then(({ body }) => body);
+});
diff --git a/client/cypress/support/tags/index.js b/client/cypress/support/tags/index.js
new file mode 100644
index 000000000..cef4c429a
--- /dev/null
+++ b/client/cypress/support/tags/index.js
@@ -0,0 +1,18 @@
+export function expectTagsToContain(tags = []) {
+ cy.getByTestId("TagsControl").within(() => {
+ cy.getByTestId("TagLabel")
+ .should("have.length", tags.length)
+ .each($tag => expect(tags).to.contain($tag.text()));
+ });
+}
+
+export function typeInTagsSelectAndSave(text) {
+ cy.getByTestId("EditTagsDialog").within(() => {
+ cy.get(".ant-select")
+ .find("input")
+ .type(text, { force: true });
+
+ cy.get(".ant-modal-header").click(); // hide dropdown options
+ cy.contains("OK").click();
+ });
+}
diff --git a/client/cypress/support/visualizations/chart.js b/client/cypress/support/visualizations/chart.js
new file mode 100644
index 000000000..a18375dae
--- /dev/null
+++ b/client/cypress/support/visualizations/chart.js
@@ -0,0 +1,100 @@
+/**
+ * Asserts the preview canvas exists, then captures the g.points element, which should be generated by plotly and asserts whether it exists
+ * @param should Passed to should expression after plot points are captured
+ */
+export function assertPlotPreview(should = "exist") {
+ cy.getByTestId("VisualizationPreview")
+ .find("g.plot")
+ .should("exist")
+ .find("g.points")
+ .should(should);
+}
+
+export function createChartThroughUI(chartName, chartSpecificAssertionFn = () => {}) {
+ cy.getByTestId("NewVisualization").click();
+ cy.getByTestId("VisualizationType").selectAntdOption("VisualizationType.CHART");
+ cy.getByTestId("VisualizationName")
+ .clear()
+ .type(chartName);
+
+ chartSpecificAssertionFn();
+
+ cy.server();
+ cy.route("POST", "**/api/visualizations").as("SaveVisualization");
+
+ cy.getByTestId("EditVisualizationDialog")
+ .contains("button", "Save")
+ .click();
+
+ cy.getByTestId("QueryPageVisualizationTabs")
+ .contains("span", chartName)
+ .should("exist");
+
+ cy.wait("@SaveVisualization").should("have.property", "status", 200);
+
+ return cy.get("@SaveVisualization").then(xhr => {
+ const { id, name, options } = xhr.response.body;
+ return cy.wrap({ id, name, options });
+ });
+}
+
+export function assertTabbedEditor(chartSpecificTabbedEditorAssertionFn = () => {}) {
+ cy.getByTestId("Chart.GlobalSeriesType").should("exist");
+
+ cy.getByTestId("VisualizationEditor.Tabs.Series").click();
+ cy.getByTestId("VisualizationEditor")
+ .find("table")
+ .should("exist");
+
+ cy.getByTestId("VisualizationEditor.Tabs.Colors").click();
+ cy.getByTestId("VisualizationEditor")
+ .find("table")
+ .should("exist");
+
+ cy.getByTestId("VisualizationEditor.Tabs.DataLabels").click();
+ cy.getByTestId("VisualizationEditor")
+ .getByTestId("Chart.DataLabels.ShowDataLabels")
+ .should("exist");
+
+ chartSpecificTabbedEditorAssertionFn();
+
+ cy.getByTestId("VisualizationEditor.Tabs.General").click();
+}
+
+export function assertAxesAndAddLabels(xaxisLabel, yaxisLabel) {
+ cy.getByTestId("VisualizationEditor.Tabs.XAxis").click();
+ cy.getByTestId("Chart.XAxis.Type")
+ .contains(".ant-select-selection-item", "Auto Detect")
+ .should("exist");
+
+ cy.getByTestId("Chart.XAxis.Name")
+ .clear()
+ .type(xaxisLabel);
+
+ cy.getByTestId("VisualizationEditor.Tabs.YAxis").click();
+ cy.getByTestId("Chart.LeftYAxis.Type")
+ .contains(".ant-select-selection-item", "Linear")
+ .should("exist");
+
+ cy.getByTestId("Chart.LeftYAxis.Name")
+ .clear()
+ .type(yaxisLabel);
+
+ cy.getByTestId("VisualizationEditor.Tabs.General").click();
+}
+
+export function createDashboardWithCharts(title, chartGetters, widgetsAssertionFn = () => {}) {
+ cy.createDashboard(title).then(dashboard => {
+ const dashboardUrl = `/dashboards/${dashboard.id}`;
+ const widgetGetters = chartGetters.map(chartGetter => `${chartGetter}Widget`);
+
+ chartGetters.forEach((chartGetter, i) => {
+ const position = { autoHeight: false, sizeY: 8, sizeX: 3, col: (i % 2) * 3 };
+ cy.get(`@${chartGetter}`)
+ .then(chart => cy.addWidget(dashboard.id, chart.id, { position }))
+ .as(widgetGetters[i]);
+ });
+
+ widgetsAssertionFn(widgetGetters, dashboardUrl);
+ });
+}
diff --git a/client/cypress/support/visualizations/table.js b/client/cypress/support/visualizations/table.js
new file mode 100644
index 000000000..2095b9fb8
--- /dev/null
+++ b/client/cypress/support/visualizations/table.js
@@ -0,0 +1,12 @@
+export function expectTableToHaveLength(length) {
+ cy.getByTestId("TableVisualization")
+ .find("tbody tr")
+ .should("have.length", length);
+}
+
+export function expectFirstColumnToHaveMembers(values) {
+ cy.getByTestId("TableVisualization")
+ .find("tbody tr td:first-child")
+ .then($cell => Cypress.$.map($cell, item => Cypress.$(item).text()))
+ .then(firstColumnCells => expect(firstColumnCells).to.have.members(values));
+}
diff --git a/client/cypress/tsconfig.json b/client/cypress/tsconfig.json
new file mode 100644
index 000000000..d4c0b515b
--- /dev/null
+++ b/client/cypress/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "types": ["cypress", "@percy/cypress", "@testing-library/cypress"]
+ },
+ "include": ["./**/*.ts"]
+}
diff --git a/client/prettier.config.js b/client/prettier.config.js
new file mode 100644
index 000000000..059f7f83b
--- /dev/null
+++ b/client/prettier.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ printWidth: 120,
+ jsxBracketSameLine: true,
+ tabWidth: 2,
+ trailingComma: 'es5',
+};
diff --git a/client/tsconfig.json b/client/tsconfig.json
new file mode 100644
index 000000000..e8f885200
--- /dev/null
+++ b/client/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ // Target latest version of ECMAScript.
+ "target": "es2019",
+ // Search under node_modules for non-relative imports.
+ "moduleResolution": "node",
+ // Process & infer types from .js files.
+ "allowJs": true,
+ // Don't emit; allow Babel to transform files.
+ "noEmit": true,
+ // Enable strictest settings like strictNullChecks & noImplicitAny.
+ "strict": true,
+ // Import non-ES modules as default imports.
+ "esModuleInterop": true,
+ "jsx": "react",
+ "allowSyntheticDefaultImports": true,
+ "noUnusedLocals": true,
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "forceConsistentCasingInFileNames": true,
+ "baseUrl": "./",
+ "paths": {
+ "@/*": ["./app/*"]
+ },
+ "skipLibCheck": true
+ },
+ "include": ["app/**/*"],
+ "exclude": ["dist"]
+}
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..e84e4ef44
--- /dev/null
+++ b/package.json
@@ -0,0 +1,197 @@
+{
+ "name": "redash-client",
+ "version": "11.0.0-dev",
+ "description": "The frontend part of Redash.",
+ "main": "index.js",
+ "scripts": {
+ "start": "npm-run-all --parallel watch:viz webpack-dev-server",
+ "clean": "rm -rf ./client/dist/",
+ "build:viz": "(cd viz-lib && yarn build:babel)",
+ "build": "yarn clean && yarn build:viz && NODE_ENV=production webpack",
+ "build:old-node-version": "yarn clean && NODE_ENV=production node --max-old-space-size=4096 node_modules/.bin/webpack",
+ "watch:app": "webpack --watch --progress --colors -d",
+ "watch:viz": "(cd viz-lib && yarn watch:babel)",
+ "watch": "npm-run-all --parallel watch:*",
+ "webpack-dev-server": "webpack-dev-server",
+ "analyze": "yarn clean && BUNDLE_ANALYZER=on webpack",
+ "analyze:build": "yarn clean && NODE_ENV=production BUNDLE_ANALYZER=on webpack",
+ "lint": "yarn lint:base --ext .js --ext .jsx --ext .ts --ext .tsx ./client",
+ "lint:fix": "yarn lint:base --fix --ext .js --ext .jsx --ext .ts --ext .tsx ./client",
+ "lint:base": "eslint --config ./client/.eslintrc.js --ignore-path ./client/.eslintignore",
+ "lint:ci": "yarn lint --max-warnings 0 --format junit --output-file /tmp/test-results/eslint/results.xml",
+ "prettier": "prettier --write 'client/app/**/*.{js,jsx,ts,tsx}' 'client/cypress/**/*.{js,jsx,ts,tsx}'",
+ "type-check": "tsc --noEmit --project client/tsconfig.json",
+ "type-check:watch": "yarn type-check --watch",
+ "jest": "TZ=Africa/Khartoum jest",
+ "test": "run-s type-check jest",
+ "test:watch": "jest --watch",
+ "cypress": "node client/cypress/cypress.js",
+ "preinstall": "cd viz-lib && yarn link --link-folder ../.yarn",
+ "postinstall": "(cd viz-lib && yarn --frozen-lockfile && yarn build:babel) && yarn link --link-folder ./.yarn @redash/viz"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/getredash/redash.git"
+ },
+ "engines": {
+ "node": ">14.16.0 <17.0.0",
+ "yarn": "^1.22.10"
+ },
+ "author": "Redash Contributors",
+ "license": "BSD-2-Clause",
+ "bugs": {
+ "url": "https://github.com/getredash/redash/issues"
+ },
+ "homepage": "https://redash.io/",
+ "dependencies": {
+ "@ant-design/icons": "^4.2.1",
+ "@redash/viz": "file:viz-lib",
+ "ace-builds": "^1.4.12",
+ "antd": "^4.4.3",
+ "axios": "^0.21.1",
+ "axios-auth-refresh": "^3.0.0",
+ "bootstrap": "^3.3.7",
+ "classnames": "^2.2.6",
+ "d3": "^3.5.17",
+ "debug": "^3.1.0",
+ "dompurify": "^2.0.7",
+ "font-awesome": "^4.7.0",
+ "history": "^4.10.1",
+ "hoist-non-react-statics": "^3.3.0",
+ "markdown": "0.5.0",
+ "material-design-iconic-font": "^2.2.0",
+ "moment": "^2.19.3",
+ "mousetrap": "^1.6.1",
+ "mustache": "^2.3.0",
+ "numeral": "^2.0.6",
+ "path-to-regexp": "^3.1.0",
+ "prop-types": "^15.6.1",
+ "query-string": "^6.9.0",
+ "react": "^16.14.0",
+ "react-ace": "^9.1.1",
+ "react-dom": "^16.14.0",
+ "react-grid-layout": "^0.18.2",
+ "react-resizable": "^1.10.1",
+ "react-virtualized": "^9.21.2",
+ "sql-formatter": "git+https://github.com/getredash/sql-formatter.git",
+ "universal-router": "^8.3.0",
+ "use-debounce": "^3.1.0",
+ "use-media": "^1.4.0"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.10.4",
+ "@babel/core": "^7.10.4",
+ "@babel/plugin-proposal-class-properties": "^7.10.4",
+ "@babel/plugin-transform-object-assign": "^7.2.0",
+ "@babel/preset-env": "^7.10.4",
+ "@babel/preset-react": "^7.0.0",
+ "@babel/preset-typescript": "^7.10.4",
+ "@cypress/code-coverage": "^3.8.1",
+ "@percy/agent": "0.24.3",
+ "@percy/cypress": "^2.3.2",
+ "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+ "@testing-library/cypress": "^7.0.2",
+ "@types/classnames": "^2.2.10",
+ "@types/hoist-non-react-statics": "^3.3.1",
+ "@types/lodash": "^4.14.157",
+ "@types/prop-types": "^15.7.3",
+ "@types/react": "^16.14.2",
+ "@types/react-dom": "^16.9.10",
+ "@types/sql-formatter": "^2.3.0",
+ "@typescript-eslint/eslint-plugin": "^2.10.0",
+ "@typescript-eslint/parser": "^2.10.0",
+ "atob": "^2.1.2",
+ "babel-eslint": "^10.0.3",
+ "babel-jest": "^24.1.0",
+ "babel-loader": "^8.0.5",
+ "babel-plugin-istanbul": "^6.0.0",
+ "babel-plugin-transform-builtin-extend": "^1.1.2",
+ "copy-webpack-plugin": "^4.5.3",
+ "css-loader": "^0.28.7",
+ "cypress": "^5.3.0",
+ "enzyme": "^3.8.0",
+ "enzyme-adapter-react-16": "^1.7.1",
+ "enzyme-to-json": "^3.3.5",
+ "eslint": "^6.7.2",
+ "eslint-config-prettier": "^6.7.0",
+ "eslint-config-react-app": "^5.1.0",
+ "eslint-loader": "^3.0.3",
+ "eslint-plugin-chai-friendly": "^0.5.0",
+ "eslint-plugin-compat": "^3.3.0",
+ "eslint-plugin-cypress": "^2.0.1",
+ "eslint-plugin-flowtype": "^3.13.0",
+ "eslint-plugin-import": "^2.18.2",
+ "eslint-plugin-jest": "^22.2.2",
+ "eslint-plugin-jsx-a11y": "^6.4.1",
+ "eslint-plugin-no-only-tests": "^2.4.0",
+ "eslint-plugin-react": "^7.17.0",
+ "eslint-plugin-react-hooks": "^1.7.0",
+ "file-loader": "^2.0.0",
+ "html-webpack-plugin": "^3.2.0",
+ "identity-obj-proxy": "^3.0.0",
+ "jest": "^24.1.0",
+ "less": "^3.9.0",
+ "less-loader": "^4.1.0",
+ "less-plugin-autoprefix": "^1.5.1",
+ "lodash": "^4.17.20",
+ "mini-css-extract-plugin": "^0.4.4",
+ "mockdate": "^2.0.2",
+ "npm-run-all": "^4.1.5",
+ "prettier": "^1.19.1",
+ "raw-loader": "^0.5.1",
+ "react-refresh": "^0.9.0",
+ "react-test-renderer": "^16.5.2",
+ "request": "^2.88.0",
+ "request-cookies": "^1.1.0",
+ "style-loader": "^2.0.0",
+ "typescript": "^4.1.2",
+ "url-loader": "^1.1.2",
+ "webpack": "^4.44.2",
+ "webpack-build-notifier": "^0.1.30",
+ "webpack-bundle-analyzer": "^2.11.1",
+ "webpack-cli": "^3.1.2",
+ "webpack-dev-server": "^3.11.0",
+ "webpack-manifest-plugin": "^2.0.4"
+ },
+ "optionalDependencies": {
+ "fsevents": "^2.3.2"
+ },
+ "jest": {
+ "rootDir": "./client",
+ "setupFiles": [
+ "./app/__tests__/enzyme_setup.js",
+ "./app/__tests__/mocks.js"
+ ],
+ "snapshotSerializers": [
+ "enzyme-to-json/serializer"
+ ],
+ "moduleNameMapper": {
+ "^@/(.*)": "/app/$1",
+ "\\.(css|less)$": "identity-obj-proxy"
+ },
+ "testPathIgnorePatterns": [
+ "/app/__tests__/"
+ ]
+ },
+ "nyc": {
+ "include": [
+ "client/app/**",
+ "viz-lib/**"
+ ]
+ },
+ "//": "browserslist set to 'Async functions' compatibility",
+ "browserslist": [
+ "Edge >= 15",
+ "Firefox >= 52",
+ "Chrome >= 55",
+ "Safari >= 10.1",
+ "iOS >= 10.3",
+ "Opera >= 42",
+ "op_mob >= 46",
+ "android >= 67",
+ "and_chr >= 71",
+ "and_ff >= 64",
+ "and_uc >= 11.8",
+ "samsung >= 6.2"
+ ]
+}
diff --git a/rd_service/__init__.py b/rd_service/__init__.py
deleted file mode 100644
index 8b1378917..000000000
--- a/rd_service/__init__.py
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/rd_service/cli.py b/rd_service/cli.py
deleted file mode 100644
index 1157c8c97..000000000
--- a/rd_service/cli.py
+++ /dev/null
@@ -1,44 +0,0 @@
-import argparse
-import logging
-import urlparse
-import redis
-import time
-import settings
-import data
-
-
-def start_workers(data_manager):
- try:
- data_manager.start_workers(settings.WORKERS_COUNT, settings.CONNECTION_STRING,
- settings.MAX_CONNECTIONS)
- logging.info("Workers started.")
-
- while True:
- try:
- data_manager.refresh_queries()
- except Exception:
- logging.error("Something went wrong with refreshing queries...");
- time.sleep(60)
- except KeyboardInterrupt:
- logging.warning("Exiting; waiting for threads")
- data_manager.stop_workers()
-
-
-if __name__ == '__main__':
- channel = logging.StreamHandler()
- logging.getLogger().addHandler(channel)
- logging.getLogger().setLevel("DEBUG")
-
- parser = argparse.ArgumentParser()
- parser.add_argument("command")
- args = parser.parse_args()
-
- url = urlparse.urlparse(settings.REDIS_URL)
- redis_connection = redis.StrictRedis(host=url.hostname, port=url.port, db=0, password=url.password)
- data_manager = data.Manager(redis_connection, settings.INTERNAL_DB_CONNECTION_STRING, settings.MAX_CONNECTIONS)
-
- if args.command == "worker":
- start_workers(data_manager)
- else:
- print "Unknown command"
-
diff --git a/rd_service/data/__init__.py b/rd_service/data/__init__.py
deleted file mode 100644
index 56b4ed1e5..000000000
--- a/rd_service/data/__init__.py
+++ /dev/null
@@ -1,4 +0,0 @@
-from manager import Manager
-from worker import Job
-import models
-import utils
diff --git a/rd_service/data/manager.py b/rd_service/data/manager.py
deleted file mode 100644
index 9b8e54d80..000000000
--- a/rd_service/data/manager.py
+++ /dev/null
@@ -1,171 +0,0 @@
-import collections
-from contextlib import contextmanager
-import json
-import logging
-import psycopg2
-import psycopg2.pool
-import qr
-import redis
-import time
-import query_runner
-import worker
-from utils import gen_query_hash
-
-
-class QueryResult(collections.namedtuple('QueryData', 'id query data runtime retrieved_at query_hash')):
- def to_dict(self, parse_data=False):
- d = self._asdict()
-
- if parse_data and d['data']:
- d['data'] = json.loads(d['data'])
-
- return d
-
-
-class Manager(object):
- def __init__(self, redis_connection, db_connection_string, db_max_connections):
- self.redis_connection = redis_connection
- self.workers = []
- self.db_connection_pool = psycopg2.pool.ThreadedConnectionPool(1, db_max_connections,
- db_connection_string)
- self.queue = qr.PriorityQueue("jobs")
- self.max_retries = 5
-
- # TODO: Use our Django Models
- def get_query_result_by_id(self, query_result_id):
- with self.db_transaction() as cursor:
- sql = "SELECT id, query, data, runtime, retrieved_at, query_hash FROM query_results " \
- "WHERE id=%s LIMIT 1"
- cursor.execute(sql, (query_result_id,))
- query_result = cursor.fetchone()
-
- if query_result:
- query_result = QueryResult(*query_result)
-
- return query_result
-
- def get_query_result(self, query, ttl=0):
- query_hash = gen_query_hash(query)
-
- with self.db_transaction() as cursor:
- sql = "SELECT id, query, data, runtime, retrieved_at, query_hash FROM query_results " \
- "WHERE query_hash=%s " \
- "AND retrieved_at < now() at time zone 'utc' - interval '%s second'" \
- "ORDER BY retrieved_at DESC LIMIT 1"
- cursor.execute(sql, (query_hash, psycopg2.extensions.AsIs(ttl)))
- query_result = cursor.fetchone()
-
- if query_result:
- query_result = QueryResult(*query_result)
-
- return query_result
-
- def add_job(self, query, priority):
- query_hash = gen_query_hash(query)
- logging.info("[Manager][%s] Inserting job with priority=%s", query_hash, priority)
- try_count = 0
- job = None
-
- while try_count < self.max_retries:
- try_count += 1
-
- pipe = self.redis_connection.pipeline()
- try:
- pipe.watch('query_hash_job:%s' % query_hash)
- job_id = pipe.get('query_hash_job:%s' % query_hash)
- if job_id:
- logging.info("[Manager][%s] Found existing job: %s", query_hash, job_id)
- job = worker.Job.load(self, job_id)
- else:
- job = worker.Job(self, query, priority)
- pipe.multi()
- job.save(pipe)
- logging.info("[Manager][%s] Created new job: %s", query_hash, job.id)
- self.queue.push(job.id, job.priority)
- break
-
- except redis.WatchError:
- continue
-
- if not job:
- logging.error("[Manager][%s] Failed adding job for query.", query_hash)
-
- return job
-
- def refresh_queries(self):
- sql = """SELECT queries.query, queries.ttl, retrieved_at
- FROM (SELECT query, min(ttl) as ttl FROM queries WHERE ttl > 0 GROUP by query) queries
- JOIN (SELECT query, max(retrieved_at) as retrieved_at
- FROM query_results
- GROUP BY query) query_results on query_results.query=queries.query
- WHERE queries.ttl > 0
- AND query_results.retrieved_at + ttl * interval '1 second' < now() at time zone 'utc';"""
-
- queries = self.run_query(sql)
- for query, ttl, retrieved_at in queries:
- self.add_job(query, worker.Job.LOW_PRIORITY)
-
- def store_query_result(self, query, data, run_time, retrieved_at):
- query_result_id = None
- query_hash = gen_query_hash(query)
- sql = "INSERT INTO query_results (query_hash, query, data, runtime, retrieved_at) " \
- "VALUES (%s, %s, %s, %s, %s) RETURNING id"
- with self.db_transaction() as cursor:
- cursor.execute(sql, (query_hash, query, data, run_time, retrieved_at))
- if cursor.rowcount == 1:
- query_result_id = cursor.fetchone()[0]
- logging.info("[Manager][%s] Inserted query data; id=%s", query_hash, query_result_id)
-
- sql = "UPDATE queries SET latest_query_data_id=%s WHERE query_hash=%s"
- cursor.execute(sql, (query_result_id, query_hash))
-
- logging.info("[Manager][%s] Updated %s queries.", query_hash, cursor.rowcount)
- else:
- logging.error("[Manager][%s] Failed inserting query data.", query_hash)
- return query_result_id
-
- def run_query(self, *args):
- sql = args[0]
- logging.debug("running query: %s %s", sql, args[1:])
-
- with self.db_transaction() as cursor:
- cursor.execute(sql, args[1:])
- if cursor.description:
- data = list(cursor)
- else:
- data = cursor.rowcount
-
- return data
-
- def start_workers(self, workers_count, connection_string, max_connections):
- if self.workers:
- return self.workers
-
- # TODO: who closes the connection pool?
- pg_connection_pool = psycopg2.pool.ThreadedConnectionPool(1, max_connections, connection_string)
- runner = query_runner.redshift(pg_connection_pool)
-
- self.workers = [worker.Worker(self, runner) for i in range(workers_count)]
- for w in self.workers:
- w.start()
-
- return self.workers
-
- def stop_workers(self):
- for w in self.workers:
- w.continue_working = False
- w.join()
-
- @contextmanager
- def db_transaction(self):
- connection = self.db_connection_pool.getconn()
- cursor = connection.cursor()
- try:
- yield cursor
- except:
- connection.rollback()
- raise
- else:
- connection.commit()
- finally:
- self.db_connection_pool.putconn(connection)
diff --git a/rd_service/data/models.py b/rd_service/data/models.py
deleted file mode 100644
index 381dd3239..000000000
--- a/rd_service/data/models.py
+++ /dev/null
@@ -1,137 +0,0 @@
-import json
-from django.db import models
-from django.template.defaultfilters import slugify
-import utils
-
-
-class QueryResult(models.Model):
- id = models.AutoField(primary_key=True)
- query_hash = models.CharField(max_length=32)
- query = models.TextField()
- data = models.TextField()
- runtime = models.FloatField()
- retrieved_at = models.DateTimeField()
-
- class Meta:
- app_label = 'redash'
- db_table = 'query_results'
-
- def to_dict(self):
- return {
- 'id': self.id,
- 'query_hash': self.query_hash,
- 'query': self.query,
- 'data': json.loads(self.data),
- 'runtime': self.runtime,
- 'retrieved_at': self.retrieved_at
- }
-
- def __unicode__(self):
- return u"%d | %s | %s" % (self.id, self.query_hash, self.retrieved_at)
-
-
-class Query(models.Model):
- id = models.AutoField(primary_key=True)
- latest_query_data = models.ForeignKey(QueryResult)
- name = models.CharField(max_length=255)
- description = models.CharField(max_length=4096)
- query = models.TextField()
- query_hash = models.CharField(max_length=32)
- ttl = models.IntegerField()
- user = models.CharField(max_length=360)
- created_at = models.DateTimeField(auto_now_add=True)
-
- class Meta:
- app_label = 'redash'
- db_table = 'queries'
-
- def to_dict(self, with_result=True):
- d = {
- 'id': self.id,
- 'latest_query_data_id': self.latest_query_data_id,
- 'name': self.name,
- 'description': self.description,
- 'query': self.query,
- 'query_hash': self.query_hash,
- 'ttl': self.ttl,
- 'user': self.user,
- 'created_at': self.created_at,
- }
-
- if with_result and self.latest_query_data_id:
- d['latest_query_data'] = self.latest_query_data.to_dict()
-
- return d
-
- def save(self, *args, **kwargs):
- self.query_hash = utils.gen_query_hash(self.query)
- super(Query, self).save(*args, **kwargs)
-
- def __unicode__(self):
- return unicode(self.id)
-
-
-class Dashboard(models.Model):
- id = models.AutoField(primary_key=True)
- slug = models.CharField(max_length=140)
- name = models.CharField(max_length=100)
- user = models.CharField(max_length=360)
- layout = models.TextField()
- is_archived = models.BooleanField(default=False)
-
- class Meta:
- app_label = 'redash'
- db_table = 'dashboards'
-
- def to_dict(self, with_widgets=False):
- layout = json.loads(self.layout)
-
- if with_widgets:
- widgets = {w.id: w.to_dict() for w in self.widgets.all()}
- widgets_layout = map(lambda row: map(lambda widget_id: widgets.get(widget_id, None), row), layout)
- else:
- widgets_layout = None
-
- return {
- 'id': self.id,
- 'slug': self.slug,
- 'name': self.name,
- 'user': self.user,
- 'layout': layout,
- 'widgets': widgets_layout
- }
-
- def save(self, *args, **kwargs):
- # TODO: make sure slug is unique
- if not self.slug:
- self.slug = slugify(self.name)
- super(Dashboard, self).save(*args, **kwargs)
-
- def __unicode__(self):
- return u"%s=%s" % (self.id, self.name)
-
-
-class Widget(models.Model):
- id = models.AutoField(primary_key=True)
- query = models.ForeignKey(Query)
- type = models.CharField(max_length=100)
- width = models.IntegerField()
- options = models.TextField()
- dashboard = models.ForeignKey(Dashboard, related_name='widgets')
-
- class Meta:
- app_label = 'redash'
- db_table = 'widgets'
-
- def to_dict(self):
- return {
- 'id': self.id,
- 'query': self.query.to_dict(),
- 'type': self.type,
- 'width': self.width,
- 'options': json.loads(self.options),
- 'dashboard_id': self.dashboard_id
- }
-
- def __unicode__(self):
- return u"%s=>%s" % (self.id, self.dashboard_id)
diff --git a/rd_service/data/query_runner.py b/rd_service/data/query_runner.py
deleted file mode 100644
index dfcb7b413..000000000
--- a/rd_service/data/query_runner.py
+++ /dev/null
@@ -1,43 +0,0 @@
-import json
-import psycopg2
-import sys
-from .utils import JSONEncoder
-
-
-def redshift(connection_pool):
- def column_friendly_name(column_name):
- return column_name
-
- def query_runner(query):
- connection = connection_pool.getconn()
- cursor = connection.cursor()
-
- try:
- cursor.execute(query)
-
- column_names = [col.name for col in cursor.description]
-
- rows = [dict(zip(column_names, row)) for row in cursor]
- columns = [{'name': col.name,
- 'friendly_name': column_friendly_name(col.name),
- 'type': None} for col in cursor.description]
-
- data = {'columns': columns, 'rows': rows}
- json_data = json.dumps(data, cls=JSONEncoder)
- error = None
- cursor.close()
- except psycopg2.DatabaseError as e:
- connection.rollback()
- json_data = None
- error = e.message
-
- except Exception as e:
- connection.rollback()
- connection_pool.putconn(connection)
- raise sys.exc_info()[1], None, sys.exc_info()[2]
-
- connection_pool.putconn(connection)
-
- return json_data, error
-
- return query_runner
diff --git a/rd_service/data/tables.sql b/rd_service/data/tables.sql
deleted file mode 100644
index 78191f3a3..000000000
--- a/rd_service/data/tables.sql
+++ /dev/null
@@ -1,68 +0,0 @@
-CREATE TABLE query_results (
- id serial,
- query_hash char(32),
- retrieved_at timestamptz,
- runtime float,
- data text,
- query text
-);
-
-CREATE TABLE queries (
- id serial primary key,
- selected_query_data_id int,
- latest_query_data_id int,
- name varchar(255),
- description varchar(4096),
- query text,
- query_hash char(32),
- ttl int,
- user varchar(360),
- created_at timestamptz default current_timestamp
-);
-
-BEGIN;
-CREATE TABLE "queries" (
- "id" serial NOT NULL PRIMARY KEY,
- "latest_query_data_id" integer NOT NULL,
- "name" varchar(255) NOT NULL,
- "description" varchar(4096) NOT NULL,
- "query" text NOT NULL,
- "query_hash" varchar(32) NOT NULL,
- "ttl" integer NOT NULL,
- "user" varchar(360) NOT NULL,
- "created_at" timestamp with time zone NOT NULL
-)
-;
-CREATE TABLE "query_results" (
- "id" serial NOT NULL PRIMARY KEY,
- "query_hash" varchar(32) NOT NULL,
- "query" text NOT NULL,
- "data" text NOT NULL,
- "runtime" double precision NOT NULL,
- "retrieved_at" timestamp with time zone NOT NULL
-)
-;
-CREATE TABLE "dashboards" (
- "id" serial NOT NULL PRIMARY KEY,
- "slug" varchar(140) NOT NULL,
- "name" varchar(100) NOT NULL,
- "user" varchar(360) NOT NULL,
- "layout" text NOT NULL,
- "is_archived" boolean NOT NULL
-)
-;
-CREATE TABLE "widgets" (
- "id" serial NOT NULL PRIMARY KEY,
- "query_id" integer NOT NULL REFERENCES "queries" ("id") DEFERRABLE INITIALLY DEFERRED,
- "type" varchar(100) NOT NULL,
- "width" integer NOT NULL,
- "options" text NOT NULL,
- "dashboard_id" integer NOT NULL REFERENCES "dashboards" ("id") DEFERRABLE INITIALLY DEFERRED
-)
-;
-CREATE INDEX "dashboards_slug" ON "dashboards" ("slug");
-CREATE INDEX "dashboards_slug_like" ON "dashboards" ("slug" varchar_pattern_ops);
-CREATE INDEX "widgets_query_id" ON "widgets" ("query_id");
-CREATE INDEX "widgets_dashboard_id" ON "widgets" ("dashboard_id");
-
-COMMIT;
\ No newline at end of file
diff --git a/rd_service/data/utils.py b/rd_service/data/utils.py
deleted file mode 100644
index c5d440cb7..000000000
--- a/rd_service/data/utils.py
+++ /dev/null
@@ -1,63 +0,0 @@
-import cStringIO
-import csv
-import codecs
-import decimal
-import datetime
-import json
-import re
-import hashlib
-
-COMMENTS_REGEX = re.compile("/\*.*?\*/")
-
-
-def gen_query_hash(sql):
- sql = COMMENTS_REGEX.sub("", sql)
- sql = "".join(sql.split()).lower()
- return hashlib.md5(sql).hexdigest()
-
-
-class JSONEncoder(json.JSONEncoder):
- def default(self, o):
- if isinstance(o, decimal.Decimal):
- return float(o)
-
- if isinstance(o, datetime.date):
- return o.isoformat()
-
- super(JSONEncoder, self).default(o)
-
-
-class UnicodeWriter:
- """
- A CSV writer which will write rows to CSV file "f",
- which is encoded in the given encoding.
- """
-
- def __init__(self, f, dialect=csv.excel, encoding="utf-8", **kwds):
- # Redirect output to a queue
- self.queue = cStringIO.StringIO()
- self.writer = csv.writer(self.queue, dialect=dialect, **kwds)
- self.stream = f
- self.encoder = codecs.getincrementalencoder(encoding)()
-
- def _encode_utf8(self, val):
- if isinstance(val, (unicode, str)):
- return val.encode('utf-8')
-
- return val
-
- def writerow(self, row):
- self.writer.writerow([self._encode_utf8(s) for s in row])
- # Fetch UTF-8 output from the queue ...
- data = self.queue.getvalue()
- data = data.decode("utf-8")
- # ... and reencode it into the target encoding
- data = self.encoder.encode(data)
- # write to the target stream
- self.stream.write(data)
- # empty queue
- self.queue.truncate(0)
-
- def writerows(self, rows):
- for row in rows:
- self.writerow(row)
\ No newline at end of file
diff --git a/rd_service/data/worker.py b/rd_service/data/worker.py
deleted file mode 100644
index 192816ce9..000000000
--- a/rd_service/data/worker.py
+++ /dev/null
@@ -1,163 +0,0 @@
-import json
-import logging
-import threading
-import uuid
-import datetime
-import time
-from utils import gen_query_hash
-
-
-class Job(object):
- HIGH_PRIORITY = 1
- LOW_PRIORITY = 2
-
- WAITING = 1
- PROCESSING = 2
- DONE = 3
- FAILED = 4
-
- def __init__(self, data_manager, query, priority,
- job_id=None,
- wait_time=None, query_time=None,
- updated_at=None, status=None, error=None, query_result_id=None):
- self.data_manager = data_manager
- self.query = query
- self.priority = priority
- self.query_hash = gen_query_hash(self.query)
- self.query_result_id = query_result_id
-
- if job_id is None:
- self.id = str(uuid.uuid1())
- self.new_job = True
- self.wait_time = 0
- self.query_time = 0
- self.error = None
- self.updated_at = time.time() # job_dict.get('updated_at', time.time())
- self.status = self.WAITING # int(job_dict.get('status', self.WAITING))
- else:
- self.id = job_id
- self.new_job = False
- self.error = error
- self.wait_time = wait_time
- self.query_time = query_time
- self.updated_at = updated_at
- self.status = status
-
-
- def to_dict(self):
- return {
- 'query': self.query,
- 'priority': self.priority,
- 'id': self.id,
- 'wait_time': self.wait_time,
- 'query_time': self.query_time,
- 'updated_at': self.updated_at,
- 'status': self.status,
- 'error': self.error,
- 'query_result_id': self.query_result_id
- }
-
- @staticmethod
- def _redis_key(job_id):
- return 'job:%s' % job_id
-
- def save(self, pipe=None):
- if not pipe:
- pipe = self.data_manager.redis_connection.pipeline()
-
- if self.new_job:
- pipe.set('query_hash_job:%s' % self.query_hash, self.id)
-
- if self.is_finished():
- pipe.delete('query_hash_job:%s' % self.query_hash)
-
- pipe.sadd('jobs_set', self.id)
- pipe.hmset(self._redis_key(self.id), self.to_dict())
- pipe.publish(self._redis_key(self.id), json.dumps(self.to_dict()))
- pipe.execute()
-
- def processing(self):
- self.status = self.PROCESSING
- self.wait_time = time.time() - self.updated_at
- self.updated_at = time.time()
- self.save()
-
- def is_finished(self):
- return self.status in (self.FAILED, self.DONE)
-
- def done(self, query_result_id, error):
- if error:
- self.status = self.FAILED
- else:
- self.status = self.DONE
-
- self.query_result_id = query_result_id
- self.error = error
- self.query_time = time.time() - self.updated_at
- self.updated_at = time.time()
- self.save()
-
- def __str__(self):
- return "" % (self.id, self.priority, self.status)
-
- @classmethod
- def _load(cls, data_manager, job_id):
- return data_manager.redis_connection.hgetall(cls._redis_key(job_id))
-
- @classmethod
- def load(cls, data_manager, job_id):
- job_dict = cls._load(data_manager, job_id)
- job = None
- if job_dict:
- job = Job(data_manager, job_id=job_dict['id'], query=job_dict['query'],
- priority=int(job_dict['priority']), updated_at=float(job_dict['updated_at']),
- status=int(job_dict['status']), wait_time=float(job_dict['wait_time']),
- query_time=float(job_dict['query_time']), error=job_dict['error'],
- query_result_id=job_dict['query_result_id'])
-
- return job
-
-
-class Worker(threading.Thread):
- def __init__(self, manager, query_runner, sleep_time=0.1):
- self.manager = manager
- self.continue_working = True
- self.query_runner = query_runner
- self.sleep_time = sleep_time
-
- super(Worker, self).__init__(name="Worker-%s" % uuid.uuid1())
-
- def run(self):
- logging.info("[%s] started.", self.name)
- while self.continue_working:
- job_id = self.manager.queue.pop()
- if job_id:
- logging.info("[%s] Processing %s", self.name, job_id)
- self._process(job_id)
- logging.info("[%s] Finished Processing %s", self.name, job_id)
- else:
- time.sleep(self.sleep_time)
-
- def _process(self, job_id):
- job = Job.load(self.manager, job_id)
- if job.is_finished():
- logging.warning("[%s][%s] tried to process finished job.", self.name, job)
- return
-
- job.processing()
-
- logging.info("[%s][%s] running query...", self.name, job.id)
- start_time = time.time()
- data, error = self.query_runner(job.query)
- run_time = time.time() - start_time
- logging.info("[%s][%s] query finished... data length=%s, error=%s",
- self.name, job.id, data and len(data), error)
-
- # TODO: it is possible that storing the data will fail, and we will need to retry
- # while we already marked the job as done
- query_result_id = None
- if not error:
- query_result_id = self.manager.store_query_result(job.query, data, run_time,
- datetime.datetime.utcnow())
-
- job.done(query_result_id, error)
diff --git a/rd_service/requirements.txt b/rd_service/requirements.txt
deleted file mode 100644
index 83351077f..000000000
--- a/rd_service/requirements.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-psycopg2==2.5.1
-redis==2.7.5
-tornado==3.0.2
-sqlparse==0.1.8
-Django==1.5.4
-django-db-pool==0.0.10
-qr==0.6.0
-python-dateutil==2.1
\ No newline at end of file
diff --git a/rd_service/server.py b/rd_service/server.py
deleted file mode 100644
index c7018f37f..000000000
--- a/rd_service/server.py
+++ /dev/null
@@ -1,313 +0,0 @@
-import csv
-import hashlib
-import json
-import numbers
-import os
-import urlparse
-import logging
-import cStringIO
-import datetime
-import dateutil.parser
-import redis
-import sqlparse
-import tornado.ioloop
-import tornado.web
-import tornado.auth
-import tornado.options
-import settings
-from data import utils
-import data
-
-
-class BaseHandler(tornado.web.RequestHandler):
- def initialize(self):
- self.data_manager = self.application.settings.get('data_manager', None)
- self.redis_connection = self.application.settings['redis_connection']
-
- def get_current_user(self):
- user = self.get_secure_cookie("user")
- return user
-
- @tornado.web.authenticated
- def prepare(self):
- pass
-
- def write_json(self, response, encode=True):
- if encode:
- response = json.dumps(response, cls=utils.JSONEncoder)
- self.set_header("Content-Type", "application/json; charset=UTF-8")
- self.write(response)
-
-
-class PingHandler(tornado.web.RequestHandler):
- def get(self):
- self.write("PONG")
-
-
-class GoogleLoginHandler(tornado.web.RequestHandler,
- tornado.auth.GoogleMixin):
- @tornado.web.asynchronous
- @tornado.gen.coroutine
- def get(self):
- if self.get_argument("openid.mode", None):
- user = yield self.get_authenticated_user()
-
- if user['email'] in settings.ALLOWED_USERS or user['email'].endswith("@%s" % settings.GOOGLE_APPS_DOMAIN):
- logging.info("Authenticated: %s", user['email'])
- self.set_secure_cookie("user", user['email'])
- self.redirect("/")
- else:
- logging.error("Failed logging in with: %s", user)
- self.authenticate_redirect()
- else:
- self.authenticate_redirect()
-
-
-class MainHandler(BaseHandler):
- def get(self, *args):
- email_md5 = hashlib.md5(self.current_user.lower()).hexdigest()
- gravatar_url = "https://www.gravatar.com/avatar/%s?s=40" % email_md5
-
- user = {
- 'gravatar_url': gravatar_url,
- 'is_admin': self.current_user in settings.ADMINS,
- 'name': self.current_user
- }
-
- self.render("index.html", user=json.dumps(user))
-
-
-class QueryFormatHandler(BaseHandler):
- def post(self):
- arguments = json.loads(self.request.body)
- query = arguments.get("query", "")
-
- self.write(sqlparse.format(query, reindent=True, keyword_case='upper'))
-
-
-class StatusHandler(BaseHandler):
- def get(self):
- status = {}
- info = self.redis_connection.info()
- status['redis_used_memory'] = info['used_memory_human']
- status['queries_in_queue'] = self.redis_connection.zcard('jobs')
- status['queries_count'] = data.models.Query.objects.count()
- status['query_results_count'] = data.models.QueryResult.objects.count()
- status['dashboards_count'] = data.models.Dashboard.objects.count()
- status['widgets_count'] = data.models.Widget.objects.count()
-
- self.write_json(status)
-
-
-class WidgetsHandler(BaseHandler):
- def post(self, widget_id=None):
- widget_properties = json.loads(self.request.body)
- widget_properties['options'] = json.dumps(widget_properties['options'])
- widget = data.models.Widget(**widget_properties)
- widget.save()
-
- layout = json.loads(widget.dashboard.layout)
- new_row = True
-
- if len(layout) == 0 or widget.width == 2:
- layout.append([widget.id])
- elif len(layout[-1]) == 1:
- neighbour_widget = data.models.Widget.objects.get(pk=layout[-1][0])
- if neighbour_widget.width == 1:
- layout[-1].append(widget.id)
- new_row = False
- else:
- layout.append([widget.id])
- else:
- layout.append([widget.id])
-
- widget.dashboard.layout = json.dumps(layout)
- widget.dashboard.save()
-
- self.write_json({'widget': widget.to_dict(), 'layout': layout, 'new_row': new_row})
-
- def delete(self, widget_id):
- widget_id = int(widget_id)
- widget = data.models.Widget.objects.get(pk=widget_id)
- # TODO: reposition existing ones
- layout = json.loads(widget.dashboard.layout)
- layout = map(lambda row: filter(lambda w: w != widget_id, row), layout)
- layout = filter(lambda row: len(row) > 0, layout)
- widget.dashboard.layout = json.dumps(layout)
- widget.dashboard.save()
-
- widget.delete()
-
-
-class DashboardHandler(BaseHandler):
- def get(self, dashboard_slug=None):
- if dashboard_slug:
- dashboard = data.models.Dashboard.objects.prefetch_related('widgets__query__latest_query_data').get(slug=dashboard_slug)
- self.write_json(dashboard.to_dict(with_widgets=True))
- else:
- dashboards = [d.to_dict() for d in
- data.models.Dashboard.objects.filter(is_archived=False)]
- self.write_json(dashboards)
-
- def post(self, dashboard_id):
- if dashboard_id:
- dashboard_properties = json.loads(self.request.body)
- dashboard = data.models.Dashboard.objects.get(pk=dashboard_id)
- dashboard.layout = dashboard_properties['layout']
- dashboard.name = dashboard_properties['name']
- dashboard.save()
-
- self.write_json(dashboard.to_dict(with_widgets=True))
- else:
- dashboard_properties = json.loads(self.request.body)
- dashboard = data.models.Dashboard(name=dashboard_properties['name'],
- user=self.current_user,
- layout='[]')
- dashboard.save()
- self.write_json(dashboard.to_dict())
-
- def delete(self, dashboard_slug):
- dashboard = data.models.Dashboard.objects.get(slug=dashboard_slug)
- dashboard.is_archived = True
- dashboard.save()
-
-
-class QueriesHandler(BaseHandler):
- def post(self, id=None):
- query_def = json.loads(self.request.body)
- if 'created_at' in query_def:
- query_def['created_at'] = dateutil.parser.parse(query_def['created_at'])
-
- query_def.pop('latest_query_data', None)
-
- if id:
- query = data.models.Query(**query_def)
- fields = query_def.keys()
- fields.remove('id')
- query.save(update_fields=fields)
- else:
- query_def['user'] = self.current_user
- query = data.models.Query(**query_def)
- query.save()
-
- self.write_json(query.to_dict())
-
- def get(self, id=None):
- if id:
- q = data.models.Query.objects.get(pk=id)
- if q:
- self.write_json(q.to_dict())
- else:
- self.send_error(404)
- else:
- self.write_json([q.to_dict(with_result=False) for q in data.models.Query.objects.all()])
-
-
-class QueryResultsHandler(BaseHandler):
- def get(self, query_result_id):
- query_result = self.data_manager.get_query_result_by_id(query_result_id)
- if query_result:
- self.write_json({'query_result': query_result.to_dict(parse_data=True)})
- else:
- self.send_error(404)
-
- def post(self, _):
- params = json.loads(self.request.body)
-
- if params['ttl'] == 0:
- query_result = None
- else:
- query_result = self.data_manager.get_query_result(params['query'], int(params['ttl']))
-
- if query_result:
- self.write_json({'query_result': query_result.to_dict(parse_data=True)})
- else:
- job = self.data_manager.add_job(params['query'], data.Job.HIGH_PRIORITY)
- self.write({'job': job.to_dict()})
-
-
-class JobsHandler(BaseHandler):
- def get(self, job_id=None):
- if job_id:
- # TODO: if finished, include the query result
- job = data.Job.load(self.data_manager, job_id)
- self.write({'job': job.to_dict()})
- else:
- raise NotImplemented
-
- def delete(self, job_id):
- raise NotImplemented
-
-
-class CsvQueryResultsHandler(BaseHandler):
- def get(self, query_result_id):
- query_result = self.data_manager.get_query_result_by_id(query_result_id)
- if query_result:
- self.set_header("Content-Type", "text/csv; charset=UTF-8")
- s = cStringIO.StringIO()
-
- query_data = json.loads(query_result.data)
- writer = csv.DictWriter(s, fieldnames=[col['name'] for col in query_data['columns']])
- writer.writer = utils.UnicodeWriter(s)
- writer.writeheader()
- for row in query_data['rows']:
- for k, v in row.iteritems():
- if isinstance(v, numbers.Number) and (v > 1000 * 1000 * 1000 * 100):
- row[k] = datetime.datetime.fromtimestamp(v/1000.0)
-
- writer.writerow(row)
-
- self.write(s.getvalue())
- else:
- self.send_error(404)
-
-
-def get_application(static_path, is_debug, redis_connection, data_manager):
- return tornado.web.Application([(r"/", MainHandler),
- (r"/ping", PingHandler),
- (r"/api/queries/format", QueryFormatHandler),
- (r"/api/queries(?:/([0-9]*))?", QueriesHandler),
- (r"/api/query_results(?:/([0-9]*))?", QueryResultsHandler),
- (r"/api/query_results/(.*?).csv", CsvQueryResultsHandler),
- (r"/api/jobs/(.*)", JobsHandler),
- (r"/api/widgets(?:/([0-9]*))?", WidgetsHandler),
- (r"/api/dashboards(?:/(.*))?", DashboardHandler),
- (r"/admin/(.*)", MainHandler),
- (r"/dashboard/(.*)", MainHandler),
- (r"/queries(.*)", MainHandler),
- (r"/login", GoogleLoginHandler),
- (r"/status.json", StatusHandler),
- (r"/(.*)", tornado.web.StaticFileHandler,
- {"path": static_path})],
- template_path=static_path,
- static_path=static_path,
- debug=is_debug,
- login_url="/login",
- cookie_secret="1f7146d871a6a23263089419cc443813",
- redis_connection=redis_connection,
- data_manager=data_manager)
-
-
-if __name__ == '__main__':
- tornado.options.define("port", default=8888, type=int)
- tornado.options.define("debug", default=False, type=bool)
- tornado.options.define("static", default=settings.STATIC_ASSETS_PATH, type=str)
-
- tornado.options.parse_command_line()
-
- root_path = os.path.dirname(__file__)
- static_path = os.path.abspath(os.path.join(root_path, tornado.options.options.static))
-
- url = urlparse.urlparse(settings.REDIS_URL)
- redis_connection = redis.StrictRedis(host=url.hostname, port=url.port, db=0, password=url.password)
- data_manager = data.Manager(redis_connection, settings.INTERNAL_DB_CONNECTION_STRING,
- settings.MAX_CONNECTIONS)
-
- logging.info("redash web server stating on port: %d...", tornado.options.options.port)
- logging.info("UI assets path: %s...", static_path)
-
- application = get_application(static_path, tornado.options.options.debug,
- redis_connection, data_manager)
-
- application.listen(tornado.options.options.port)
- tornado.ioloop.IOLoop.instance().start()
\ No newline at end of file
diff --git a/rd_service/settings_example.py b/rd_service/settings_example.py
deleted file mode 100644
index 25673ebab..000000000
--- a/rd_service/settings_example.py
+++ /dev/null
@@ -1,21 +0,0 @@
-import django.conf
-
-REDIS_URL = "redis://localhost:6379"
-CONNECTION_STRING = "user= password= host= port=5439 dbname="
-GOOGLE_APPS_DOMAIN = ""
-STATIC_ASSETS_PATH = "../rd_ui/dist/"
-ALLOWED_USERS = []
-ADMINS = []
-WORKERS_COUNT = 2
-MAX_CONNECTIONS = 3
-INTERNAL_DB_CONNECTION_STRING = "dbname=postgres"
-
-django.conf.settings.configure(DATABASES = { 'default': {
- 'ENGINE': 'dbpool.db.backends.postgresql_psycopg2',
- 'OPTIONS': {'MAX_CONNS': 10, 'MIN_CONNS': 1},
- 'NAME': 'postgres',
- 'USER': '',
- 'PASSWORD': '',
- 'HOST': '',
- 'PORT': '',
- },}, TIME_ZONE = 'UTC')
diff --git a/rd_ui/.bowerrc b/rd_ui/.bowerrc
deleted file mode 100644
index ba0accc5a..000000000
--- a/rd_ui/.bowerrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "directory": "app/bower_components"
-}
diff --git a/rd_ui/.editorconfig b/rd_ui/.editorconfig
deleted file mode 100644
index c2cdfb8ad..000000000
--- a/rd_ui/.editorconfig
+++ /dev/null
@@ -1,21 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
diff --git a/rd_ui/.gitattributes b/rd_ui/.gitattributes
deleted file mode 100644
index 212566614..000000000
--- a/rd_ui/.gitattributes
+++ /dev/null
@@ -1 +0,0 @@
-* text=auto
\ No newline at end of file
diff --git a/rd_ui/.gitignore b/rd_ui/.gitignore
deleted file mode 100644
index ff422877e..000000000
--- a/rd_ui/.gitignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules
-.tmp
-.sass-cache
-app/bower_components
diff --git a/rd_ui/.jshintrc b/rd_ui/.jshintrc
deleted file mode 100644
index 40377ba25..000000000
--- a/rd_ui/.jshintrc
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "node": true,
- "browser": true,
- "esnext": true,
- "bitwise": true,
- "camelcase": true,
- "curly": true,
- "eqeqeq": true,
- "immed": true,
- "indent": 2,
- "latedef": true,
- "newcap": true,
- "noarg": true,
- "quotmark": "single",
- "regexp": true,
- "undef": true,
- "unused": true,
- "strict": true,
- "trailing": true,
- "smarttabs": true,
- "globals": {
- "angular": false
- }
-}
diff --git a/rd_ui/.travis.yml b/rd_ui/.travis.yml
deleted file mode 100644
index 83f4e22f0..000000000
--- a/rd_ui/.travis.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-language: node_js
-node_js:
- - '0.8'
- - '0.10'
-before_script:
- - 'npm install -g bower grunt-cli'
- - 'bower install'
diff --git a/rd_ui/Gruntfile.js b/rd_ui/Gruntfile.js
deleted file mode 100644
index ab51fd0fd..000000000
--- a/rd_ui/Gruntfile.js
+++ /dev/null
@@ -1,362 +0,0 @@
-// Generated on 2013-08-25 using generator-angular 0.4.0
-'use strict';
-var LIVERELOAD_PORT = 35729;
-var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });
-var mountFolder = function (connect, dir) {
- return connect.static(require('path').resolve(dir));
-};
-
-// # Globbing
-// for performance reasons we're only matching one level down:
-// 'test/spec/{,*/}*.js'
-// use this if you want to recursively match all subfolders:
-// 'test/spec/**/*.js'
-
-module.exports = function (grunt) {
- require('load-grunt-tasks')(grunt);
- require('time-grunt')(grunt);
-
- // configurable paths
- var yeomanConfig = {
- app: 'app',
- dist: 'dist'
- };
-
- try {
- yeomanConfig.app = require('./bower.json').appPath || yeomanConfig.app;
- } catch (e) {}
-
- grunt.initConfig({
- yeoman: yeomanConfig,
- watch: {
- coffee: {
- files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
- tasks: ['coffee:dist']
- },
- coffeeTest: {
- files: ['test/spec/{,*/}*.coffee'],
- tasks: ['coffee:test']
- },
- styles: {
- files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
- tasks: ['copy:styles', 'autoprefixer']
- },
- livereload: {
- options: {
- livereload: LIVERELOAD_PORT
- },
- files: [
- '<%= yeoman.app %>/{,*/}*.html',
- '.tmp/styles/{,*/}*.css',
- '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
- '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
- ]
- }
- },
- autoprefixer: {
- options: ['last 1 version'],
- dist: {
- files: [{
- expand: true,
- cwd: '.tmp/styles/',
- src: '{,*/}*.css',
- dest: '.tmp/styles/'
- }]
- }
- },
- connect: {
- options: {
- port: 9000,
- // Change this to '0.0.0.0' to access the server from outside.
- hostname: 'localhost'
- },
- livereload: {
- options: {
- middleware: function (connect) {
- return [
- lrSnippet,
- mountFolder(connect, '.tmp'),
- mountFolder(connect, yeomanConfig.app)
- ];
- }
- }
- },
- test: {
- options: {
- middleware: function (connect) {
- return [
- mountFolder(connect, '.tmp'),
- mountFolder(connect, 'test')
- ];
- }
- }
- },
- dist: {
- options: {
- middleware: function (connect) {
- return [
- mountFolder(connect, yeomanConfig.dist)
- ];
- }
- }
- }
- },
- open: {
- server: {
- url: 'http://localhost:<%= connect.options.port %>'
- }
- },
- clean: {
- dist: {
- files: [{
- dot: true,
- src: [
- '.tmp',
- '<%= yeoman.dist %>/*',
- '!<%= yeoman.dist %>/.git*'
- ]
- }]
- },
- server: '.tmp'
- },
- jshint: {
- options: {
- jshintrc: '.jshintrc'
- },
- all: [
- 'Gruntfile.js',
- '<%= yeoman.app %>/scripts/{,*/}*.js'
- ]
- },
- coffee: {
- options: {
- sourceMap: true,
- sourceRoot: ''
- },
- dist: {
- files: [{
- expand: true,
- cwd: '<%= yeoman.app %>/scripts',
- src: '{,*/}*.coffee',
- dest: '.tmp/scripts',
- ext: '.js'
- }]
- },
- test: {
- files: [{
- expand: true,
- cwd: 'test/spec',
- src: '{,*/}*.coffee',
- dest: '.tmp/spec',
- ext: '.js'
- }]
- }
- },
- // not used since Uglify task does concat,
- // but still available if needed
- /*concat: {
- dist: {}
- },*/
- rev: {
- dist: {
- files: {
- src: [
- '<%= yeoman.dist %>/scripts/{,*/}*.js',
- '<%= yeoman.dist %>/styles/{,*/}*.css',
- '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
- '<%= yeoman.dist %>/styles/fonts/*'
- ]
- }
- }
- },
- useminPrepare: {
- html: '<%= yeoman.app %>/index.html',
- options: {
- dest: '<%= yeoman.dist %>'
- }
- },
- usemin: {
- html: ['<%= yeoman.dist %>/{,*/}*.html'],
- css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
- options: {
- dirs: ['<%= yeoman.dist %>']
- }
- },
- imagemin: {
- dist: {
- files: [{
- expand: true,
- cwd: '<%= yeoman.app %>/images',
- src: '{,*/}*.{png,jpg,jpeg}',
- dest: '<%= yeoman.dist %>/images'
- }]
- }
- },
- svgmin: {
- dist: {
- files: [{
- expand: true,
- cwd: '<%= yeoman.app %>/images',
- src: '{,*/}*.svg',
- dest: '<%= yeoman.dist %>/images'
- }]
- }
- },
- cssmin: {
- // By default, your `index.html` will take care of
- // minification. This option is pre-configured if you do not wish to use
- // Usemin blocks.
- // dist: {
- // files: {
- // '<%= yeoman.dist %>/styles/main.css': [
- // '.tmp/styles/{,*/}*.css',
- // '<%= yeoman.app %>/styles/{,*/}*.css'
- // ]
- // }
- // }
- },
- htmlmin: {
- dist: {
- options: {
- /*removeCommentsFromCDATA: true,
- // https://github.com/yeoman/grunt-usemin/issues/44
- //collapseWhitespace: true,
- collapseBooleanAttributes: true,
- removeAttributeQuotes: true,
- removeRedundantAttributes: true,
- useShortDoctype: true,
- removeEmptyAttributes: true,
- removeOptionalTags: true*/
- },
- files: [{
- expand: true,
- cwd: '<%= yeoman.app %>',
- src: ['*.html', 'views/*.html'],
- dest: '<%= yeoman.dist %>'
- }]
- }
- },
- // Put files not handled in other tasks here
- copy: {
- dist: {
- files: [{
- expand: true,
- dot: true,
- cwd: '<%= yeoman.app %>',
- dest: '<%= yeoman.dist %>',
- src: [
- '*.{ico,png,txt}',
- '.htaccess',
- 'bower_components/**/*',
- 'images/{,*/}*.{gif,webp}',
- 'styles/fonts/*'
- ]
- }, {
- expand: true,
- cwd: '.tmp/images',
- dest: '<%= yeoman.dist %>/images',
- src: [
- 'generated/*'
- ]
- }]
- },
- styles: {
- expand: true,
- cwd: '<%= yeoman.app %>/styles',
- dest: '.tmp/styles/',
- src: '{,*/}*.css'
- }
- },
- concurrent: {
- server: [
- 'coffee:dist',
- 'copy:styles'
- ],
- test: [
- 'coffee',
- 'copy:styles'
- ],
- dist: [
- 'coffee',
- 'copy:styles',
- 'imagemin',
- 'svgmin',
- 'htmlmin'
- ]
- },
- karma: {
- unit: {
- configFile: 'karma.conf.js',
- singleRun: true
- }
- },
- cdnify: {
- dist: {
- html: ['<%= yeoman.dist %>/*.html']
- }
- },
- ngmin: {
- dist: {
- files: [{
- expand: true,
- cwd: '<%= yeoman.dist %>/scripts',
- src: '*.js',
- dest: '<%= yeoman.dist %>/scripts'
- }]
- }
- },
- uglify: {
- dist: {
- files: {
- '<%= yeoman.dist %>/scripts/scripts.js': [
- '<%= yeoman.dist %>/scripts/scripts.js'
- ]
- }
- }
- }
- });
-
- grunt.registerTask('server', function (target) {
- if (target === 'dist') {
- return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
- }
-
- grunt.task.run([
- 'clean:server',
- 'concurrent:server',
- 'autoprefixer',
- 'connect:livereload',
- 'open',
- 'watch'
- ]);
- });
-
- grunt.registerTask('test', [
- 'clean:server',
- 'concurrent:test',
- 'autoprefixer',
- 'connect:test',
- 'karma'
- ]);
-
- grunt.registerTask('build', [
- 'clean:dist',
- 'useminPrepare',
- 'concurrent:dist',
- 'autoprefixer',
- 'concat',
- 'copy:dist',
- 'cdnify',
- 'ngmin',
- 'cssmin',
- 'uglify',
- 'rev',
- 'usemin'
- ]);
-
- grunt.registerTask('default', [
- 'jshint',
- 'test',
- 'build'
- ]);
-};
diff --git a/rd_ui/app/.buildignore b/rd_ui/app/.buildignore
deleted file mode 100644
index fc98b8eb5..000000000
--- a/rd_ui/app/.buildignore
+++ /dev/null
@@ -1 +0,0 @@
-*.coffee
\ No newline at end of file
diff --git a/rd_ui/app/404.html b/rd_ui/app/404.html
deleted file mode 100644
index fdace4ab1..000000000
--- a/rd_ui/app/404.html
+++ /dev/null
@@ -1,157 +0,0 @@
-
-
-
- Page Not Found :(
-
-
-
-
-
Not found :(
-
Sorry, but the page you were trying to view does not exist.
-
It looks like this was the result of either:
-
- a mistyped address
- an out-of-date link
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/rd_ui/app/scripts/admin_controllers.js b/rd_ui/app/scripts/admin_controllers.js
deleted file mode 100644
index 93311711d..000000000
--- a/rd_ui/app/scripts/admin_controllers.js
+++ /dev/null
@@ -1,19 +0,0 @@
-(function () {
- var AdminStatusCtrl = function ($scope, $http, $timeout) {
- $scope.$parent.pageTitle = "System Status";
-
- var refresh = function () {
- $scope.refresh_time = moment().add('minutes', 1);
- $http.get('/status.json').success(function (data) {
- $scope.status = data;
- });
-
- $timeout(refresh, 59 * 1000);
- };
-
- refresh();
- }
-
- angular.module('redash.admin_controllers', [])
- .controller('AdminStatusCtrl', ['$scope', '$http', '$timeout', AdminStatusCtrl])
-})();
diff --git a/rd_ui/app/scripts/app.js b/rd_ui/app/scripts/app.js
deleted file mode 100644
index 471cdd4e6..000000000
--- a/rd_ui/app/scripts/app.js
+++ /dev/null
@@ -1,19 +0,0 @@
-angular.module('redash', ['redash.directives', 'redash.admin_controllers', 'redash.controllers', 'redash.filters', 'redash.services',
- 'redash.renderers',
- 'ui.codemirror', 'highchart', 'angular-growl', 'angularMoment', 'ui.bootstrap', 'smartTable.table', 'ngResource']).
- config(['$routeProvider', '$locationProvider', '$compileProvider', function ($routeProvider, $locationProvider, $compileProvider) {
-
- $compileProvider.urlSanitizationWhitelist(/^\s*(https?|http|data):/);
-
- $locationProvider.html5Mode(true);
- $routeProvider.when('/dashboard/:dashboardSlug', {templateUrl: '/views/dashboard.html', controller: 'DashboardCtrl'});
- $routeProvider.when('/queries', {templateUrl: '/views/queries.html', controller: 'QueriesCtrl', reloadOnSearch: false});
- $routeProvider.when('/queries/new', {templateUrl: '/views/queryfiddle.html', controller: 'QueryFiddleCtrl', reloadOnSearch: false});
- $routeProvider.when('/queries/:queryId', {templateUrl: '/views/queryfiddle.html', controller: 'QueryFiddleCtrl', reloadOnSearch: false});
- $routeProvider.when('/admin/status', {templateUrl: '/views/admin_status.html', controller: 'AdminStatusCtrl'});
- $routeProvider.when('/', {templateUrl: '/views/index.html', controller: 'IndexCtrl'});
- $routeProvider.otherwise({redirectTo: '/'});
-
- Highcharts.setOptions({colors: ["#4572A7", "#AA4643", "#89A54E", "#80699B", "#3D96AE", "#DB843D", "#92A8CD", "#A47D7C", "#B5CA92"]});
- }]);
-
diff --git a/rd_ui/app/scripts/controllers.js b/rd_ui/app/scripts/controllers.js
deleted file mode 100644
index baab47318..000000000
--- a/rd_ui/app/scripts/controllers.js
+++ /dev/null
@@ -1,223 +0,0 @@
-(function () {
- var DashboardCtrl = function ($scope, $routeParams, $http, Dashboard) {
- $scope.dashboard = Dashboard.get({slug: $routeParams.dashboardSlug}, function(dashboard) {
- $scope.$parent.pageTitle = dashboard.name;
- });
- };
-
- var WidgetCtrl = function ($scope, $http, Query) {
- $scope.deleteWidget = function() {
- if (!confirm('Are you sure you want to remove "' + $scope.widget.query.name + '" from the dashboard?')) {
- return;
- }
-
- $http.delete('/api/widgets/' + $scope.widget.id).success(function() {
- $scope.dashboard.widgets = _.map($scope.dashboard.widgets, function(row) {
- return _.filter(row, function(widget) {
- return widget.id != $scope.widget.id;
- })
- });
- });
- }
-
- $scope.query = new Query($scope.widget.query);
- $scope.queryResult = $scope.query.getQueryResult();
-
- $scope.updateTime = (new Date($scope.queryResult.getUpdatedAt())).toISOString();
- $scope.nextUpdateTime = moment(new Date(($scope.query.updated_at + $scope.query.ttl + $scope.query.runtime + 300) * 1000)).fromNow();
-
- $scope.updateTime = '';
- }
-
- var QueryFiddleCtrl = function ($scope, $routeParams, $http, $location, growl, Query) {
- $scope.$parent.pageTitle = "Query Fiddle";
-
- $scope.tabs = [{'key': 'table', 'name': 'Table'}, {'key': 'chart', 'name': 'Chart'},
- {'key': 'pivot', 'name': 'Pivot Table'}];
-
- if (currentUser.is_admin) {
- $scope.tabs.push({'key': 'cohort', 'name': 'Cohort'});
- }
-
- $scope.lockButton = function (lock) {
- $scope.queryExecuting = lock;
- };
-
- $scope.formatQuery = function() {
- $scope.editorOptions.readOnly = 'nocursor';
-
- $http.post('/api/queries/format', {'query': $scope.query.query}).success(function(response) {
- $scope.query.query = response;
- $scope.editorOptions.readOnly = false;
- })
- }
-
- $scope.saveQuery = function (duplicate, oldId) {
- if (!oldId) {
- oldId = $scope.query.id;
- }
- $scope.query.$save(function (q) {
- if (duplicate) {
- growl.addInfoMessage("Query duplicated.", {ttl: 2000});
- } else{
- growl.addSuccessMessage("Query saved.", {ttl: 2000});
- }
-
- if (oldId != q.id) {
- if (oldId == undefined) {
- $location.path($location.path().replace('new', q.id)).replace();
- } else {
- // TODO: replace this with a safer method
- $location.path($location.path().replace(oldId, q.id)).replace();
- }
- }
- });
- };
-
- $scope.duplicateQuery = function () {
- var oldId = $scope.query.id;
- $scope.query.id = null;
- $scope.query.ttl = -1;
-
- $scope.saveQuery(true, oldId);
- };
-
- // Query Editor:
- $scope.editorOptions = {
- mode: 'text/x-sql',
- lineWrapping: true,
- lineNumbers: true,
- readOnly: false,
- matchBrackets: true,
- autoCloseBrackets: true
- };
-
- $scope.refreshOptions = [
- {value: -1, name: 'No Refresh'},
- ]
-
- _.each(_.range(1, 13), function(i) {
- $scope.refreshOptions.push({value: i*3600, name: 'Every ' + i + 'h'});
- })
-
- $scope.refreshOptions.push({value: 24*3600, name: 'Every 24h'});
-
-
- $scope.$watch('queryResult && queryResult.getError()', function (newError, oldError) {
- if (newError == undefined) {
- return;
- }
-
- if (oldError == undefined && newError != undefined) {
- $scope.lockButton(false);
- }
- });
-
- $scope.$watch('queryResult && queryResult.getData()', function (data, oldData) {
- if (!data) {
- return;
- }
-
- if ($scope.queryResult.getId() == null) {
- $scope.dataUri = "";
- } else {
- $scope.dataUri = '/api/query_results/' + $scope.queryResult.getId() + '.csv';
- $scope.dataFilename = $scope.query.name.replace(" ", "_") + moment($scope.queryResult.getUpdatedAt()).format("_YYYY_MM_DD") + ".csv";
- }
- });
-
- $scope.$watch("queryResult && queryResult.getStatus()", function (status) {
- if (!status) {
- return;
- }
-
- if (status == "done") {
- if ($scope.query.id && $scope.query.latest_query_data_id != $scope.queryResult.getId() &&
- $scope.query.query_hash == $scope.queryResult.query_result.query_hash) {
- Query.save({'id': $scope.query.id, 'latest_query_data_id': $scope.queryResult.getId()})
- }
- $scope.query.latest_query_data_id = $scope.queryResult.getId();
- $scope.lockButton(false);
- }
- });
-
- if ($routeParams.queryId != undefined) {
- $scope.query = Query.get({id: $routeParams.queryId}, function() {
- $scope.queryResult = $scope.query.getQueryResult();
- });
- } else {
- $scope.query = new Query({query: "", name: "New Query", ttl: -1, user: currentUser.name});
- $scope.lockButton(false);
- }
-
- $scope.$watch('query.name', function() {
- $scope.$parent.pageTitle = $scope.query.name;
- });
-
- $scope.executeQuery = function() {
- $scope.queryResult = $scope.query.getQueryResult(0);
- $scope.lockButton(true);
- }
- }
-
- var QueriesCtrl = function($scope, $http, $location, Query) {
- $scope.$parent.pageTitle = "All Queries";
-
- $scope.queries = Query.query();
- $scope.tabs = [{"name": "My Queries", "key": "my"}, {"key": "all", "name": "All Queries"}, {"key": "drafts", "name": "Drafts"}];
-
- $scope.$watch('selectedTab', function(tab) {
- if (tab) {
- $scope.$parent.pageTitle = tab.name;
- }
- })
-
- $scope.filterQueries = function(query) {
- if (!$scope.selectedTab) {
- return false;
- }
-
- if ($scope.selectedTab.key == 'my') {
- return query.user == currentUser.name && query.name != 'New Query';
- } else if ($scope.selectedTab.key == 'drafts') {
- return query.user == currentUser.name && query.name == 'New Query';
- }
-
- return query.name != 'New Query';
- }
- }
-
- var MainCtrl = function ($scope, Dashboard, notifications) {
- $scope.dashboards = Dashboard.query();
- $scope.currentUser = currentUser;
- $scope.newDashboard = {
- 'name': null,
- 'layout': null
- }
-
- $(window).click(function () {
- notifications.getPermissions();
- });
- }
-
- var IndexCtrl = function($scope, Dashboard) {
- $scope.$parent.pageTitle = "Home";
-
-
- $scope.archiveDashboard = function(dashboard) {
- if (confirm('Are you sure you want to delete "' + dashboard.name + '" dashboard?')) {
- dashboard.$delete(function() {
- $scope.$parent.dashboards = Dashboard.query();
- });
- }
- }
- }
-
- angular.module('redash.controllers', [])
- .controller('DashboardCtrl', ['$scope', '$routeParams', '$http', 'Dashboard', DashboardCtrl])
- .controller('WidgetCtrl', ['$scope', '$http', 'Query', WidgetCtrl])
- .controller('QueriesCtrl', ['$scope', '$http', '$location', 'Query', QueriesCtrl])
- .controller('QueryFiddleCtrl', ['$scope', '$routeParams', '$http', '$location', 'growl', 'Query', QueryFiddleCtrl])
- .controller('IndexCtrl', ['$scope', 'Dashboard', IndexCtrl])
- .controller('MainCtrl', ['$scope', 'Dashboard', 'notifications', MainCtrl]);
-})();
diff --git a/rd_ui/app/scripts/directives.js b/rd_ui/app/scripts/directives.js
deleted file mode 100644
index a2149954e..000000000
--- a/rd_ui/app/scripts/directives.js
+++ /dev/null
@@ -1,222 +0,0 @@
-var directives = angular.module('redash.directives', []);
-directives.directive('rdTabs', ['$location', '$rootScope', function($location, $rootScope) {
- return {
- restrict: 'E',
- scope: {
- tabsCollection: '=',
- selectedTab: '='
- },
- template: '',
- replace: true,
- link: function($scope, element, attrs) {
- $scope.selectTab = function(tabKey) {
- $scope.selectedTab = _.find($scope.tabsCollection, function(tab) { return tab.key == tabKey; });
- }
-
- $scope.$watch(function() { return $location.hash()}, function(hash) {
- if (hash) {
- $scope.selectTab($location.hash());
- } else {
- $scope.selectTab($scope.tabsCollection[0].key);
- }
- });
- }
- }
-}])
-
-directives.directive('editDashboardForm', ['$http', '$location', '$timeout', 'Dashboard', function($http, $location, $timeout, Dashboard) {
- return {
- restrict: 'E',
- scope: {
- dashboard: '='
- },
- templateUrl: '/views/edit_dashboard.html',
- replace: true,
- link: function($scope, element, attrs) {
- $scope.$watch('dashboard.widgets', function() {
- if ($scope.dashboard.widgets) {
- $scope.layout = [];
- _.each($scope.dashboard.widgets, function(row, rowIndex) {
- _.each(row, function(widget, colIndex) {
- $scope.layout.push({
- id: widget.id,
- col: colIndex+1,
- row: rowIndex+1,
- ySize: 1,
- xSize: widget.width,
- name: widget.query.name
- })
- })
- });
-
- $timeout(function () {
- $(".gridster ul").gridster({
- widget_margins: [5, 5],
- widget_base_dimensions: [260, 100],
- min_cols: 2,
- max_cols: 2,
- serialize_params: function ($w, wgd) {
- return { col: wgd.col, row: wgd.row, id: $w.data('widget-id') }
- }
- });
- });
- }
- });
-
- $scope.saveDashboard = function() {
- $scope.saveInProgress = true;
- // TODO: we should use the dashboard service here.
- if ($scope.dashboard.id) {
- var positions = $(element).find('.gridster ul').data('gridster').serialize();
- var layout = [];
- _.each(_.sortBy(positions, function (pos) {
- return pos.row * 10 + pos.col;
- }), function (pos) {
- var row = pos.row - 1;
- var col = pos.col - 1;
- layout[row] = layout[row] || [];
- if (col > 0 && layout[row][col - 1] == undefined) {
- layout[row][col - 1] = pos.id;
- } else {
- layout[row][col] = pos.id;
- }
-
- });
- $scope.dashboard.layout = layout;
-
- layout = JSON.stringify(layout);
- $http.post('/api/dashboards/' + $scope.dashboard.id, {'name': $scope.dashboard.name, 'layout': layout}).success(function(response) {
- $scope.dashboard = new Dashboard(response);
- $scope.saveInProgress = false;
- $(element).modal('hide');
- })
- } else {
- $http.post('/api/dashboards', {'name': $scope.dashboard.name}).success(function(response) {
- $(element).modal('hide');
- $location.path('/dashboard/' + response.slug).replace();
- })
- }
- }
-
- }
- }
-}])
-
-
-directives.directive('newWidgetForm', ['$http', function($http) {
- return {
- restrict: 'E',
- scope: {
- dashboard: '='
- },
- templateUrl: '/views/new_widget_form.html',
- replace: true,
- link: function($scope, element, attrs) {
- $scope.widgetTypes = [{name: 'Chart', value: 'chart'}, {name: 'Table', value: 'grid'}];
- $scope.widgetSizes = [{name: 'Regular Size', value: 1}, {name: 'Double Size', value: 2}];
-
- var reset = function() {
- $scope.saveInProgress = false;
- $scope.widgetType = 'chart';
- $scope.widgetSize = 1;
- $scope.queryId = null;
- }
-
- reset();
-
- $scope.saveWidget = function() {
- $scope.saveInProgress = true;
-
- var widget = {
- 'query_id': $scope.queryId,
- 'dashboard_id': $scope.dashboard.id,
- 'type': $scope.widgetType,
- 'options': {},
- 'width': $scope.widgetSize
- }
-
- $http.post('/api/widgets', widget).success(function(response) {
- // update dashboard layout
- $scope.dashboard.layout = response['layout'];
- if (response['new_row']) {
- $scope.dashboard.widgets.push([response['widget']]);
- } else {
- $scope.dashboard.widgets[$scope.dashboard.widgets.length-1].push(response['widget']);
- }
-
- // close the dialog
- $('#add_query_dialog').modal('hide');
- reset();
- })
- }
-
- }
- }
-}])
-
-// From: http://jsfiddle.net/joshdmiller/NDFHg/
-directives.directive('editInPlace', function () {
- return {
- restrict: 'E',
- scope: { value: '=' },
- template: '
',
- scope: {
- options: "=options",
- series: "=series"
- },
- transclude: true,
- replace: true,
-
- link: function (scope, element, attrs) {
- var chartsDefaults = {
- chart: {
- renderTo: element[0],
- type: attrs.type || null,
- height: attrs.height || null,
- width: attrs.width || null
- }
- };
-
- var deepCopy = true;
- var newSettings = {};
- $.extend(deepCopy, newSettings, chartsDefaults, scope.options);
-
- // Making sure that the DOM is ready before creating the chart element, so it gets proper width.
- $timeout(function(){
- scope.chart = new Highcharts.Chart(newSettings);
-
- //Update when charts data changes
- scope.$watch(function () {
- return (scope.series && scope.series.length) || 0;
- }, function (length) {
- if (!length || length == 0) {
- scope.chart.showLoading();
- } else {
-
- while(scope.chart.series.length > 0) {
- scope.chart.series[0].remove(true);
- }
-
- scope.chart.counters.color = 0;
-
-
- _.each(scope.series, function(s) {
- scope.chart.addSeries(s);
- })
-
- scope.chart.redraw();
- scope.chart.hideLoading();
- };
- }, true);
- });
-
-
- }
- };
-
- }]);
\ No newline at end of file
diff --git a/rd_ui/app/scripts/query_fiddle/renderers.js b/rd_ui/app/scripts/query_fiddle/renderers.js
deleted file mode 100644
index 1594d1ba2..000000000
--- a/rd_ui/app/scripts/query_fiddle/renderers.js
+++ /dev/null
@@ -1,242 +0,0 @@
-var renderers = angular.module('redash.renderers', []);
-var defaultChartOptions = {
- "title": {
- "text": null
- },
- "tooltip": {
- valueDecimals: 2
- },
- xAxis: {
- type: 'datetime'
- },
- yAxis: {
- title: {
- text: null
- }
- },
- exporting: {
- chartOptions: {
- title: {
- text: this.description
- }
- },
- buttons: {
- contextButton: {
- menuItems: [
- {
- text: 'Toggle % Stacking',
- onclick: function () {
- var newStacking = "normal";
- if (this.series[0].options.stacking == "normal") {
- newStacking = "percent";
- }
-
- _.each(this.series, function (series) {
- series.update({stacking: newStacking}, true);
- });
- }
- }
- ]
- }
- }
- },
- credits: {
- enabled: false
- },
- plotOptions: {
- "column": {
- "stacking": "normal",
- "pointPadding": 0,
- "borderWidth": 1,
- "groupPadding": 0,
- "shadow": false
- }
- },
- "series": []
-};
-
-renderers.directive('chartRenderer', function () {
- return {
- restrict: 'E',
- scope: {
- queryResult: '=',
- stacking: '&'
- },
- template: "
');
- compile(element.contents())(scope);
- } else {
- element.text(scope.formatedValue);
- }
- }
-
- scope.$watch('column.cellTemplateUrl', function (value) {
-
- if (value) {
- //we have to load the template (and cache it) : a kind of ngInclude
- http.get(value, {cache: templateCache}).success(function (response) {
-
- //create a scope
- childScope = scope.$new();
- //compile the element with its new content and new scope
- element.html(response);
- compile(element.contents())(childScope);
- }).error(defaultContent);
-
- } else {
- defaultContent();
- }
- });
- }
- };
- }])
- //directive that allows type to be bound in input
- .directive('inputType', function () {
- return {
- restrict: 'A',
- priority: 1,
- link: function (scope, ielement, iattr) {
- //force the type to be set before inputDirective is called
- var type = scope.$eval(iattr.type);
- iattr.$set('type', type);
- }
- };
- })
- //an editable content in the context of a cell (see row, column)
- .directive('editableCell', ['templateUrlList', '$parse', function (templateList, parse) {
- return {
- restrict: 'EA',
- require: '^smartTable',
- templateUrl: templateList.editableCell,
- scope: {
- row: '=',
- column: '=',
- type: '='
- },
- replace: true,
- link: function (scope, element, attrs, ctrl) {
- var form = angular.element(element.children()[1]),
- input = angular.element(form.children()[0]),
- getter = parse(scope.column.map);
-
- //init values
- scope.isEditMode = false;
- scope.value = getter(scope.row);
-
-
- scope.submit = function () {
- //update model if valid
- if (scope.myForm.$valid === true) {
- ctrl.updateDataRow(scope.row, scope.column.map, scope.value);
- ctrl.sortBy();//it will trigger the refresh... (ie it will sort, filter, etc with the new value)
- }
- scope.toggleEditMode();
- };
-
- scope.toggleEditMode = function () {
- scope.value = getter(scope.row);
- scope.isEditMode = scope.isEditMode !== true;
- };
-
- scope.$watch('isEditMode', function (newValue, oldValue) {
- if (newValue) {
- input[0].select();
- input[0].focus();
- }
- });
-
- input.bind('blur', function () {
- scope.$apply(function () {
- scope.submit();
- });
- });
- }
- };
- }]);
-})(angular);
-
-/* Filters */
-(function (angular) {
- "use strict";
- angular.module('smartTable.filters', []).
- constant('DefaultFilters', ['currency', 'date', 'json', 'lowercase', 'number', 'uppercase']).
- filter('format', ['$filter', 'DefaultFilters', function (filter, defaultfilters) {
- return function (value, formatFunction, filterParameter) {
-
- var returnFunction;
-
- if (formatFunction && angular.isFunction(formatFunction)) {
- returnFunction = formatFunction;
- } else {
- returnFunction = defaultfilters.indexOf(formatFunction) !== -1 ? filter(formatFunction) : function (value) {
- return value;
- };
- }
- return returnFunction(value, filterParameter);
- };
- }]);
-})(angular);
-
-
-/*table module */
-
-(function (angular) {
- "use strict";
- angular.module('smartTable.table', ['smartTable.column', 'smartTable.utilities', 'smartTable.directives', 'smartTable.filters', 'ui.bootstrap.pagination.smartTable'])
- .constant('DefaultTableConfiguration', {
- selectionMode: 'none',
- isGlobalSearchActivated: false,
- displaySelectionCheckbox: false,
- isPaginationEnabled: true,
- itemsByPage: 10,
- maxSize: 5,
-
- //just to remind available option
- sortAlgorithm: '',
- filterAlgorithm: ''
- })
- .controller('TableCtrl', ['$scope', 'Column', '$filter', '$parse', 'ArrayUtility', 'DefaultTableConfiguration', function (scope, Column, filter, parse, arrayUtility, defaultConfig) {
-
- scope.columns = [];
- scope.dataCollection = scope.dataCollection || [];
- scope.displayedCollection = []; //init empty array so that if pagination is enabled, it does not spoil performances
- scope.numberOfPages = calculateNumberOfPages(scope.dataCollection);
- scope.currentPage = 1;
- scope.holder = {isAllSelected: false};
-
- var predicate = {},
- lastColumnSort;
-
- function isAllSelected() {
- var i,
- l = scope.displayedCollection.length;
- for (i = 0; i < l; i++) {
- if (scope.displayedCollection[i].isSelected !== true) {
- return false;
- }
- }
- return true;
- }
-
- function calculateNumberOfPages(array) {
-
- if (!angular.isArray(array)) {
- return 1;
- }
- if (array.length === 0 || scope.itemsByPage < 1) {
- return 1;
- }
- return Math.ceil(array.length / scope.itemsByPage);
- }
-
- function sortDataRow(array, column) {
- var sortAlgo = (scope.sortAlgorithm && angular.isFunction(scope.sortAlgorithm)) === true ? scope.sortAlgorithm : filter('orderBy');
- if (column) {
- return arrayUtility.sort(array, sortAlgo, column.sortPredicate, column.reverse);
- } else {
- return array;
- }
- }
-
- function selectDataRow(array, selectionMode, index, select) {
-
- var dataRow, oldValue;
-
- if ((!angular.isArray(array)) || (selectionMode !== 'multiple' && selectionMode !== 'single')) {
- return;
- }
-
- if (index >= 0 && index < array.length) {
- dataRow = array[index];
- if (selectionMode === 'single') {
- //unselect all the others
- for (var i = 0, l = array.length; i < l; i++) {
- oldValue = array[i].isSelected;
- array[i].isSelected = false;
- if (oldValue === true) {
- scope.$emit('selectionChange', {item: array[i]});
- }
- }
- }
- dataRow.isSelected = select;
- scope.holder.isAllSelected = isAllSelected();
- scope.$emit('selectionChange', {item: dataRow});
- }
- }
-
- /**
- * set the config (config parameters will be available through scope
- * @param config
- */
- this.setGlobalConfig = function (config) {
- angular.extend(scope, defaultConfig, config);
- };
-
- /**
- * change the current page displayed
- * @param page
- */
- this.changePage = function (page) {
- var oldPage = scope.currentPage;
- if (angular.isNumber(page.page)) {
- scope.currentPage = page.page;
- scope.displayedCollection = this.pipe(scope.dataCollection);
- scope.holder.isAllSelected = isAllSelected();
- scope.$emit('changePage', {oldValue: oldPage, newValue: scope.currentPage});
- }
- };
-
- /**
- * set column as the column used to sort the data (if it is already the case, it will change the reverse value)
- * @method sortBy
- * @param column
- */
- this.sortBy = function (column) {
- var index = scope.columns.indexOf(column);
- if (index !== -1) {
- if (column.isSortable === true) {
- // reset the last column used
- if (lastColumnSort && lastColumnSort !== column) {
- lastColumnSort.reverse = 'none';
- }
-
- column.sortPredicate = column.sortPredicate || column.map;
- column.reverse = column.reverse !== true;
- lastColumnSort = column;
- }
- }
-
- scope.displayedCollection = this.pipe(scope.dataCollection);
- };
-
- /**
- * set the filter predicate used for searching
- * @param input
- * @param column
- */
- this.search = function (input, column) {
-
- //update column and global predicate
- if (column && scope.columns.indexOf(column) !== -1) {
- predicate.$ = '';
- column.filterPredicate = input;
- } else {
- for (var j = 0, l = scope.columns.length; j < l; j++) {
- scope.columns[j].filterPredicate = '';
- }
- predicate.$ = input;
- }
-
- for (var j = 0, l = scope.columns.length; j < l; j++) {
- predicate[scope.columns[j].map] = scope.columns[j].filterPredicate;
- }
- scope.displayedCollection = this.pipe(scope.dataCollection);
-
- };
-
- /**
- * combine sort, search and limitTo operations on an array,
- * @param array
- * @returns Array, an array result of the operations on input array
- */
- this.pipe = function (array) {
- var filterAlgo = (scope.filterAlgorithm && angular.isFunction(scope.filterAlgorithm)) === true ? scope.filterAlgorithm : filter('filter'),
- output;
- //filter and sort are commutative
- output = sortDataRow(arrayUtility.filter(array, filterAlgo, predicate), lastColumnSort);
- scope.numberOfPages = calculateNumberOfPages(output);
- return scope.isPaginationEnabled ? arrayUtility.fromTo(output, (scope.currentPage - 1) * scope.itemsByPage, scope.itemsByPage) : output;
- };
-
- /*////////////
- Column API
- ///////////*/
-
-
- /**
- * insert a new column in scope.collection at index or push at the end if no index
- * @param columnConfig column configuration used to instantiate the new Column
- * @param index where to insert the column (at the end if not specified)
- */
- this.insertColumn = function (columnConfig, index) {
- var column = new Column(columnConfig);
- arrayUtility.insertAt(scope.columns, index, column);
- };
-
- /**
- * remove the column at columnIndex from scope.columns
- * @param columnIndex index of the column to be removed
- */
- this.removeColumn = function (columnIndex) {
- arrayUtility.removeAt(scope.columns, columnIndex);
- };
-
- /**
- * move column located at oldIndex to the newIndex in scope.columns
- * @param oldIndex index of the column before it is moved
- * @param newIndex index of the column after the column is moved
- */
- this.moveColumn = function (oldIndex, newIndex) {
- arrayUtility.moveAt(scope.columns, oldIndex, newIndex);
- };
-
-
- /*///////////
- ROW API
- */
-
- /**
- * select or unselect the item of the displayedCollection with the selection mode set in the scope
- * @param dataRow
- */
- this.toggleSelection = function (dataRow) {
- var index = scope.dataCollection.indexOf(dataRow);
- if (index !== -1) {
- selectDataRow(scope.dataCollection, scope.selectionMode, index, dataRow.isSelected !== true);
- }
- };
-
- /**
- * select/unselect all the currently displayed rows
- * @param value if true select, else unselect
- */
- this.toggleSelectionAll = function (value) {
- var i = 0,
- l = scope.displayedCollection.length;
-
- if (scope.selectionMode !== 'multiple') {
- return;
- }
- for (; i < l; i++) {
- selectDataRow(scope.displayedCollection, scope.selectionMode, i, value === true);
- }
- };
-
- /**
- * remove the item at index rowIndex from the displayed collection
- * @param rowIndex
- * @returns {*} item just removed or undefined
- */
- this.removeDataRow = function (rowIndex) {
- var toRemove = arrayUtility.removeAt(scope.displayedCollection, rowIndex);
- arrayUtility.removeAt(scope.dataCollection, scope.dataCollection.indexOf(toRemove));
- };
-
- /**
- * move an item from oldIndex to newIndex in displayedCollection
- * @param oldIndex
- * @param newIndex
- */
- this.moveDataRow = function (oldIndex, newIndex) {
- arrayUtility.moveAt(scope.displayedCollection, oldIndex, newIndex);
- };
-
- /**
- * update the model, it can be a non existing yet property
- * @param dataRow the dataRow to update
- * @param propertyName the property on the dataRow ojbect to update
- * @param newValue the value to set
- */
- this.updateDataRow = function (dataRow, propertyName, newValue) {
- var index = scope.displayedCollection.indexOf(dataRow),
- getter = parse(propertyName),
- setter = getter.assign,
- oldValue;
- if (index !== -1) {
- oldValue = getter(scope.displayedCollection[index]);
- if (oldValue !== newValue) {
- setter(scope.displayedCollection[index], newValue);
- scope.$emit('updateDataRow', {item: scope.displayedCollection[index]});
- }
- }
- };
-
-
- }]);
-
-})(angular);
-
-
-
-angular.module('smartTable.templates', ['partials/defaultCell.html', 'partials/defaultHeader.html', 'partials/editableCell.html', 'partials/globalSearchCell.html', 'partials/pagination.html', 'partials/selectAllCheckbox.html', 'partials/selectionCheckbox.html', 'partials/smartTable.html']);
-
-angular.module("partials/defaultCell.html", []).run(["$templateCache", function($templateCache) {
- $templateCache.put("partials/defaultCell.html",
- "{{formatedValue}}");
-}]);
-
-angular.module("partials/defaultHeader.html", []).run(["$templateCache", function($templateCache) {
- $templateCache.put("partials/defaultHeader.html",
- "");
-}]);
-
-angular.module("partials/editableCell.html", []).run(["$templateCache", function($templateCache) {
- $templateCache.put("partials/editableCell.html",
- "\n" +
- " {{value | format:column.formatFunction:column.formatParameter}} \n" +
- "\n" +
- " \n" +
- "
");
-}]);
-
-angular.module("partials/globalSearchCell.html", []).run(["$templateCache", function($templateCache) {
- $templateCache.put("partials/globalSearchCell.html",
- "Search : \n" +
- "\n" +
- " \n" +
- " \n" +
- " \n" +
- " \n" +
- " \n" +
- " \n" +
- " \n" +
- " \n" +
- " \n" +
- " \n" +
- " \n" +
- " \n" +
- " \n" +
- " \n" +
- "
\n" +
- "\n" +
- "\n" +
- "");
-}]);
-
-(function (angular) {
- "use strict";
- angular.module('smartTable.templateUrlList', [])
- .constant('templateUrlList', {
- smartTable: 'partials/smartTable.html',
- smartTableGlobalSearch: 'partials/globalSearchCell.html',
- editableCell: 'partials/editableCell.html',
- selectionCheckbox: 'partials/selectionCheckbox.html',
- selectAllCheckbox: 'partials/selectAllCheckbox.html',
- defaultHeader: 'partials/defaultHeader.html',
- pagination: 'partials/pagination.html'
- });
-})(angular);
-
-
-(function (angular) {
- "use strict";
- angular.module('smartTable.utilities', [])
-
- .factory('ArrayUtility', function () {
-
- /**
- * remove the item at index from arrayRef and return the removed item
- * @param arrayRef
- * @param index
- * @returns {*}
- */
- var removeAt = function (arrayRef, index) {
- if (index >= 0 && index < arrayRef.length) {
- return arrayRef.splice(index, 1)[0];
- }
- },
-
- /**
- * insert item in arrayRef at index or a the end if index is wrong
- * @param arrayRef
- * @param index
- * @param item
- */
- insertAt = function (arrayRef, index, item) {
- if (index >= 0 && index < arrayRef.length) {
- arrayRef.splice(index, 0, item);
- } else {
- arrayRef.push(item);
- }
- },
-
- /**
- * move the item at oldIndex to newIndex in arrayRef
- * @param arrayRef
- * @param oldIndex
- * @param newIndex
- */
- moveAt = function (arrayRef, oldIndex, newIndex) {
- var elementToMove;
- if (oldIndex >= 0 && oldIndex < arrayRef.length && newIndex >= 0 && newIndex < arrayRef.length) {
- elementToMove = arrayRef.splice(oldIndex, 1)[0];
- arrayRef.splice(newIndex, 0, elementToMove);
- }
- },
-
- /**
- * sort arrayRef according to sortAlgorithm following predicate and reverse
- * @param arrayRef
- * @param sortAlgorithm
- * @param predicate
- * @param reverse
- * @returns {*}
- */
- sort = function (arrayRef, sortAlgorithm, predicate, reverse) {
-
- if (!sortAlgorithm || !angular.isFunction(sortAlgorithm)) {
- return arrayRef;
- } else {
- return sortAlgorithm(arrayRef, predicate, reverse === true);//excpet if reverse is true it will take it as false
- }
- },
-
- /**
- * filter arrayRef according with filterAlgorithm and predicate
- * @param arrayRef
- * @param filterAlgorithm
- * @param predicate
- * @returns {*}
- */
- filter = function (arrayRef, filterAlgorithm, predicate) {
- if (!filterAlgorithm || !angular.isFunction(filterAlgorithm)) {
- return arrayRef;
- } else {
- return filterAlgorithm(arrayRef, predicate);
- }
- },
-
- /**
- * return an array, part of array ref starting at min and the size of length
- * @param arrayRef
- * @param min
- * @param length
- * @returns {*}
- */
- fromTo = function (arrayRef, min, length) {
-
- var out = [],
- limit,
- start;
-
- if (!angular.isArray(arrayRef)) {
- return arrayRef;
- }
-
- start = Math.max(min, 0);
- start = Math.min(start, (arrayRef.length - 1) > 0 ? arrayRef.length - 1 : 0);
-
- length = Math.max(0, length);
- limit = Math.min(start + length, arrayRef.length);
-
- for (var i = start; i < limit; i++) {
- out.push(arrayRef[i]);
- }
- return out;
- };
-
-
- return {
- removeAt: removeAt,
- insertAt: insertAt,
- moveAt: moveAt,
- sort: sort,
- filter: filter,
- fromTo: fromTo
- };
- });
-})(angular);
-
-
-
-(function (angular) {
- angular.module('ui.bootstrap.pagination.smartTable', ['smartTable.templateUrlList'])
-
- .constant('paginationConfig', {
- boundaryLinks: false,
- directionLinks: true,
- firstText: 'First',
- previousText: '<',
- nextText: '>',
- lastText: 'Last'
- })
-
- .directive('paginationSmartTable', ['paginationConfig', 'templateUrlList', function (paginationConfig, templateUrlList) {
- return {
- restrict: 'EA',
- require: '^smartTable',
- scope: {
- numPages: '=',
- currentPage: '=',
- maxSize: '='
- },
- templateUrl: templateUrlList.pagination,
- replace: true,
- link: function (scope, element, attrs, ctrl) {
-
- // Setup configuration parameters
- var boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
- var directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$eval(attrs.directionLinks) : paginationConfig.directionLinks;
- var firstText = angular.isDefined(attrs.firstText) ? attrs.firstText : paginationConfig.firstText;
- var previousText = angular.isDefined(attrs.previousText) ? attrs.previousText : paginationConfig.previousText;
- var nextText = angular.isDefined(attrs.nextText) ? attrs.nextText : paginationConfig.nextText;
- var lastText = angular.isDefined(attrs.lastText) ? attrs.lastText : paginationConfig.lastText;
-
- // Create page object used in template
- function makePage(number, text, isActive, isDisabled) {
- return {
- number: number,
- text: text,
- active: isActive,
- disabled: isDisabled
- };
- }
-
- scope.$watch('numPages + currentPage + maxSize', function () {
- scope.pages = [];
-
- // Default page limits
- var startPage = 1, endPage = scope.numPages;
-
- // recompute if maxSize
- if (scope.maxSize && scope.maxSize < scope.numPages) {
- startPage = Math.max(scope.currentPage - Math.floor(scope.maxSize / 2), 1);
- endPage = startPage + scope.maxSize - 1;
-
- // Adjust if limit is exceeded
- if (endPage > scope.numPages) {
- endPage = scope.numPages;
- startPage = endPage - scope.maxSize + 1;
- }
- }
-
- // Add page number links
- for (var number = startPage; number <= endPage; number++) {
- var page = makePage(number, number, scope.isActive(number), false);
- scope.pages.push(page);
- }
-
- // Add previous & next links
- if (directionLinks) {
- var previousPage = makePage(scope.currentPage - 1, previousText, false, scope.noPrevious());
- scope.pages.unshift(previousPage);
-
- var nextPage = makePage(scope.currentPage + 1, nextText, false, scope.noNext());
- scope.pages.push(nextPage);
- }
-
- // Add first & last links
- if (boundaryLinks) {
- var firstPage = makePage(1, firstText, false, scope.noPrevious());
- scope.pages.unshift(firstPage);
-
- var lastPage = makePage(scope.numPages, lastText, false, scope.noNext());
- scope.pages.push(lastPage);
- }
-
-
- if (scope.currentPage > scope.numPages) {
- scope.selectPage(scope.numPages);
- }
- });
- scope.noPrevious = function () {
- return scope.currentPage === 1;
- };
- scope.noNext = function () {
- return scope.currentPage === scope.numPages;
- };
- scope.isActive = function (page) {
- return scope.currentPage === page;
- };
-
- scope.selectPage = function (page) {
- if (!scope.isActive(page) && page > 0 && page <= scope.numPages) {
- scope.currentPage = page;
- ctrl.changePage({ page: page });
- }
- };
- }
- };
- }]);
-})(angular);
-
diff --git a/rd_ui/app/scripts/ui-bootstrap-tpls-0.5.0.min.js b/rd_ui/app/scripts/ui-bootstrap-tpls-0.5.0.min.js
deleted file mode 100644
index 9d3d10e0d..000000000
--- a/rd_ui/app/scripts/ui-bootstrap-tpls-0.5.0.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-angular.module("ui.bootstrap",["ui.bootstrap.tpls","ui.bootstrap.transition","ui.bootstrap.collapse","ui.bootstrap.accordion","ui.bootstrap.alert","ui.bootstrap.buttons","ui.bootstrap.carousel","ui.bootstrap.position","ui.bootstrap.datepicker","ui.bootstrap.dialog","ui.bootstrap.dropdownToggle","ui.bootstrap.modal","ui.bootstrap.pagination","ui.bootstrap.tooltip","ui.bootstrap.popover","ui.bootstrap.progressbar","ui.bootstrap.rating","ui.bootstrap.tabs","ui.bootstrap.timepicker","ui.bootstrap.typeahead"]),angular.module("ui.bootstrap.tpls",["template/accordion/accordion-group.html","template/accordion/accordion.html","template/alert/alert.html","template/carousel/carousel.html","template/carousel/slide.html","template/datepicker/datepicker.html","template/datepicker/popup.html","template/dialog/message.html","template/pagination/pager.html","template/pagination/pagination.html","template/tooltip/tooltip-html-unsafe-popup.html","template/tooltip/tooltip-popup.html","template/popover/popover.html","template/progressbar/bar.html","template/progressbar/progress.html","template/rating/rating.html","template/tabs/tab.html","template/tabs/tabset-titles.html","template/tabs/tabset.html","template/timepicker/timepicker.html","template/typeahead/typeahead-match.html","template/typeahead/typeahead-popup.html"]),angular.module("ui.bootstrap.transition",[]).factory("$transition",["$q","$timeout","$rootScope",function(e,t,n){function a(e){for(var t in e)if(void 0!==o.style[t])return e[t]}var i=function(a,o,r){r=r||{};var l=e.defer(),s=i[r.animation?"animationEndEventName":"transitionEndEventName"],c=function(){n.$apply(function(){a.unbind(s,c),l.resolve(a)})};return s&&a.bind(s,c),t(function(){angular.isString(o)?a.addClass(o):angular.isFunction(o)?o(a):angular.isObject(o)&&a.css(o),s||l.resolve(a)}),l.promise.cancel=function(){s&&a.unbind(s,c),l.reject("Transition cancelled")},l.promise},o=document.createElement("trans"),r={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",transition:"transitionend"},l={WebkitTransition:"webkitAnimationEnd",MozTransition:"animationend",OTransition:"oAnimationEnd",transition:"animationend"};return i.transitionEndEventName=a(r),i.animationEndEventName=a(l),i}]),angular.module("ui.bootstrap.collapse",["ui.bootstrap.transition"]).directive("collapse",["$transition",function(e){var t=function(e,t,n){t.removeClass("collapse"),t.css({height:n}),t[0].offsetWidth,t.addClass("collapse")};return{link:function(n,a,i){var o,r=!0;n.$watch(function(){return a[0].scrollHeight},function(){0!==a[0].scrollHeight&&(o||(r?t(n,a,a[0].scrollHeight+"px"):t(n,a,"auto")))}),n.$watch(i.collapse,function(e){e?u():c()});var l,s=function(t){return l&&l.cancel(),l=e(a,t),l.then(function(){l=void 0},function(){l=void 0}),l},c=function(){r?(r=!1,o||t(n,a,"auto")):s({height:a[0].scrollHeight+"px"}).then(function(){o||t(n,a,"auto")}),o=!1},u=function(){o=!0,r?(r=!1,t(n,a,0)):(t(n,a,a[0].scrollHeight+"px"),s({height:"0"}))}}}}]),angular.module("ui.bootstrap.accordion",["ui.bootstrap.collapse"]).constant("accordionConfig",{closeOthers:!0}).controller("AccordionController",["$scope","$attrs","accordionConfig",function(e,t,n){this.groups=[],this.closeOthers=function(a){var i=angular.isDefined(t.closeOthers)?e.$eval(t.closeOthers):n.closeOthers;i&&angular.forEach(this.groups,function(e){e!==a&&(e.isOpen=!1)})},this.addGroup=function(e){var t=this;this.groups.push(e),e.$on("$destroy",function(){t.removeGroup(e)})},this.removeGroup=function(e){var t=this.groups.indexOf(e);-1!==t&&this.groups.splice(this.groups.indexOf(e),1)}}]).directive("accordion",function(){return{restrict:"EA",controller:"AccordionController",transclude:!0,replace:!1,templateUrl:"template/accordion/accordion.html"}}).directive("accordionGroup",["$parse","$transition","$timeout",function(e){return{require:"^accordion",restrict:"EA",transclude:!0,replace:!0,templateUrl:"template/accordion/accordion-group.html",scope:{heading:"@"},controller:["$scope",function(){this.setHeading=function(e){this.heading=e}}],link:function(t,n,a,i){var o,r;i.addGroup(t),t.isOpen=!1,a.isOpen&&(o=e(a.isOpen),r=o.assign,t.$watch(function(){return o(t.$parent)},function(e){t.isOpen=e}),t.isOpen=o?o(t.$parent):!1),t.$watch("isOpen",function(e){e&&i.closeOthers(t),r&&r(t.$parent,e)})}}}]).directive("accordionHeading",function(){return{restrict:"EA",transclude:!0,template:"",replace:!0,require:"^accordionGroup",compile:function(e,t,n){return function(e,t,a,i){i.setHeading(n(e,function(){}))}}}}).directive("accordionTransclude",function(){return{require:"^accordionGroup",link:function(e,t,n,a){e.$watch(function(){return a[n.accordionTransclude]},function(e){e&&(t.html(""),t.append(e))})}}}),angular.module("ui.bootstrap.alert",[]).directive("alert",function(){return{restrict:"EA",templateUrl:"template/alert/alert.html",transclude:!0,replace:!0,scope:{type:"=",close:"&"},link:function(e,t,n){e.closeable="close"in n}}}),angular.module("ui.bootstrap.buttons",[]).constant("buttonConfig",{activeClass:"active",toggleEvent:"click"}).directive("btnRadio",["buttonConfig",function(e){var t=e.activeClass||"active",n=e.toggleEvent||"click";return{require:"ngModel",link:function(e,a,i,o){o.$render=function(){a.toggleClass(t,angular.equals(o.$modelValue,e.$eval(i.btnRadio)))},a.bind(n,function(){a.hasClass(t)||e.$apply(function(){o.$setViewValue(e.$eval(i.btnRadio)),o.$render()})})}}}]).directive("btnCheckbox",["buttonConfig",function(e){var t=e.activeClass||"active",n=e.toggleEvent||"click";return{require:"ngModel",link:function(e,a,i,o){function r(){var t=e.$eval(i.btnCheckboxTrue);return angular.isDefined(t)?t:!0}function l(){var t=e.$eval(i.btnCheckboxFalse);return angular.isDefined(t)?t:!1}o.$render=function(){a.toggleClass(t,angular.equals(o.$modelValue,r()))},a.bind(n,function(){e.$apply(function(){o.$setViewValue(a.hasClass(t)?l():r()),o.$render()})})}}}]),angular.module("ui.bootstrap.carousel",["ui.bootstrap.transition"]).controller("CarouselController",["$scope","$timeout","$transition","$q",function(e,t,n){function a(){function n(){o?(e.next(),a()):e.pause()}i&&t.cancel(i);var r=+e.interval;!isNaN(r)&&r>=0&&(i=t(n,r))}var i,o,r=this,l=r.slides=[],s=-1;r.currentSlide=null,r.select=function(i,o){function c(){r.currentSlide&&angular.isString(o)&&!e.noTransition&&i.$element?(i.$element.addClass(o),i.$element[0].offsetWidth=i.$element[0].offsetWidth,angular.forEach(l,function(e){angular.extend(e,{direction:"",entering:!1,leaving:!1,active:!1})}),angular.extend(i,{direction:o,active:!0,entering:!0}),angular.extend(r.currentSlide||{},{direction:o,leaving:!0}),e.$currentTransition=n(i.$element,{}),function(t,n){e.$currentTransition.then(function(){u(t,n)},function(){u(t,n)})}(i,r.currentSlide)):u(i,r.currentSlide),r.currentSlide=i,s=p,a()}function u(t,n){angular.extend(t,{direction:"",active:!0,leaving:!1,entering:!1}),angular.extend(n||{},{direction:"",active:!1,leaving:!1,entering:!1}),e.$currentTransition=null}var p=l.indexOf(i);void 0===o&&(o=p>s?"next":"prev"),i&&i!==r.currentSlide&&(e.$currentTransition?(e.$currentTransition.cancel(),t(c)):c())},r.indexOfSlide=function(e){return l.indexOf(e)},e.next=function(){var t=(s+1)%l.length;return e.$currentTransition?void 0:r.select(l[t],"next")},e.prev=function(){var t=0>s-1?l.length-1:s-1;return e.$currentTransition?void 0:r.select(l[t],"prev")},e.select=function(e){r.select(e)},e.isActive=function(e){return r.currentSlide===e},e.slides=function(){return l},e.$watch("interval",a),e.play=function(){o||(o=!0,a())},e.pause=function(){e.noPause||(o=!1,i&&t.cancel(i))},r.addSlide=function(t,n){t.$element=n,l.push(t),1===l.length||t.active?(r.select(l[l.length-1]),1==l.length&&e.play()):t.active=!1},r.removeSlide=function(e){var t=l.indexOf(e);l.splice(t,1),l.length>0&&e.active?t>=l.length?r.select(l[t-1]):r.select(l[t]):s>t&&s--}}]).directive("carousel",[function(){return{restrict:"EA",transclude:!0,replace:!0,controller:"CarouselController",require:"carousel",templateUrl:"template/carousel/carousel.html",scope:{interval:"=",noTransition:"=",noPause:"="}}}]).directive("slide",["$parse",function(e){return{require:"^carousel",restrict:"EA",transclude:!0,replace:!0,templateUrl:"template/carousel/slide.html",scope:{},link:function(t,n,a,i){if(a.active){var o=e(a.active),r=o.assign,l=t.active=o(t.$parent);t.$watch(function(){var e=o(t.$parent);return e!==t.active&&(e!==l?l=t.active=e:r(t.$parent,e=l=t.active)),e})}i.addSlide(t,n),t.$on("$destroy",function(){i.removeSlide(t)}),t.$watch("active",function(e){e&&i.select(t)})}}}]),angular.module("ui.bootstrap.position",[]).factory("$position",["$document","$window",function(e,t){function n(e,n){return e.currentStyle?e.currentStyle[n]:t.getComputedStyle?t.getComputedStyle(e)[n]:e.style[n]}function a(e){return"static"===(n(e,"position")||"static")}var i,o;e.bind("mousemove",function(e){i=e.pageX,o=e.pageY});var r=function(t){for(var n=e[0],i=t.offsetParent||n;i&&i!==n&&a(i);)i=i.offsetParent;return i||n};return{position:function(t){var n=this.offset(t),a={top:0,left:0},i=r(t[0]);return i!=e[0]&&(a=this.offset(angular.element(i)),a.top+=i.clientTop-i.scrollTop,a.left+=i.clientLeft-i.scrollLeft),{width:t.prop("offsetWidth"),height:t.prop("offsetHeight"),top:n.top-a.top,left:n.left-a.left}},offset:function(n){var a=n[0].getBoundingClientRect();return{width:n.prop("offsetWidth"),height:n.prop("offsetHeight"),top:a.top+(t.pageYOffset||e[0].body.scrollTop),left:a.left+(t.pageXOffset||e[0].body.scrollLeft)}},mouse:function(){return{x:i,y:o}}}}]),angular.module("ui.bootstrap.datepicker",["ui.bootstrap.position"]).constant("datepickerConfig",{dayFormat:"dd",monthFormat:"MMMM",yearFormat:"yyyy",dayHeaderFormat:"EEE",dayTitleFormat:"MMMM yyyy",monthTitleFormat:"yyyy",showWeeks:!0,startingDay:0,yearRange:20,minDate:null,maxDate:null}).controller("DatepickerController",["$scope","$attrs","dateFilter","datepickerConfig",function(e,t,n,a){function i(t,n){return angular.isDefined(t)?e.$parent.$eval(t):n}function o(e,t){return new Date(e,t,0).getDate()}function r(e,t){for(var n=Array(t),a=e,i=0;t>i;)n[i++]=new Date(a),a.setDate(a.getDate()+1);return n}function l(e,t,a,i){return{date:e,label:n(e,t),selected:!!a,secondary:!!i}}var s={day:i(t.dayFormat,a.dayFormat),month:i(t.monthFormat,a.monthFormat),year:i(t.yearFormat,a.yearFormat),dayHeader:i(t.dayHeaderFormat,a.dayHeaderFormat),dayTitle:i(t.dayTitleFormat,a.dayTitleFormat),monthTitle:i(t.monthTitleFormat,a.monthTitleFormat)},c=i(t.startingDay,a.startingDay),u=i(t.yearRange,a.yearRange);this.minDate=a.minDate?new Date(a.minDate):null,this.maxDate=a.maxDate?new Date(a.maxDate):null,this.modes=[{name:"day",getVisibleDates:function(e,t){var a=e.getFullYear(),i=e.getMonth(),u=new Date(a,i,1),p=c-u.getDay(),d=p>0?7-p:-p,m=new Date(u),g=0;d>0&&(m.setDate(-d+1),g+=d),g+=o(a,i+1),g+=(7-g%7)%7;for(var f=r(m,g),h=Array(7),v=0;g>v;v++){var b=new Date(f[v]);f[v]=l(b,s.day,t&&t.getDate()===b.getDate()&&t.getMonth()===b.getMonth()&&t.getFullYear()===b.getFullYear(),b.getMonth()!==i)}for(var $=0;7>$;$++)h[$]=n(f[$].date,s.dayHeader);return{objects:f,title:n(e,s.dayTitle),labels:h}},compare:function(e,t){return new Date(e.getFullYear(),e.getMonth(),e.getDate())-new Date(t.getFullYear(),t.getMonth(),t.getDate())},split:7,step:{months:1}},{name:"month",getVisibleDates:function(e,t){for(var a=Array(12),i=e.getFullYear(),o=0;12>o;o++){var r=new Date(i,o,1);a[o]=l(r,s.month,t&&t.getMonth()===o&&t.getFullYear()===i)}return{objects:a,title:n(e,s.monthTitle)}},compare:function(e,t){return new Date(e.getFullYear(),e.getMonth())-new Date(t.getFullYear(),t.getMonth())},split:3,step:{years:1}},{name:"year",getVisibleDates:function(e,t){for(var n=Array(u),a=e.getFullYear(),i=parseInt((a-1)/u,10)*u+1,o=0;u>o;o++){var r=new Date(i+o,0,1);n[o]=l(r,s.year,t&&t.getFullYear()===r.getFullYear())}return{objects:n,title:[n[0].label,n[u-1].label].join(" - ")}},compare:function(e,t){return e.getFullYear()-t.getFullYear()},split:5,step:{years:u}}],this.isDisabled=function(t,n){var a=this.modes[n||0];return this.minDate&&0>a.compare(t,this.minDate)||this.maxDate&&a.compare(t,this.maxDate)>0||e.dateDisabled&&e.dateDisabled({date:t,mode:a.name})}}]).directive("datepicker",["dateFilter","$parse","datepickerConfig","$log",function(e,t,n,a){return{restrict:"EA",replace:!0,templateUrl:"template/datepicker/datepicker.html",scope:{dateDisabled:"&"},require:["datepicker","?^ngModel"],controller:"DatepickerController",link:function(e,i,o,r){function l(){e.showWeekNumbers=0===g&&h}function s(e,t){for(var n=[];e.length>0;)n.push(e.splice(0,t));return n}function c(t){var n=null,i=!0;m.$modelValue&&(n=new Date(m.$modelValue),isNaN(n)?(i=!1,a.error('Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.')):t&&(f=n)),m.$setValidity("date",i);var o=d.modes[g],r=o.getVisibleDates(f,n);angular.forEach(r.objects,function(e){e.disabled=d.isDisabled(e.date,g)}),m.$setValidity("date-disabled",!n||!d.isDisabled(n)),e.rows=s(r.objects,o.split),e.labels=r.labels||[],e.title=r.title}function u(e){g=e,l(),c()}function p(e){var t=new Date(e);t.setDate(t.getDate()+4-(t.getDay()||7));var n=t.getTime();return t.setMonth(0),t.setDate(1),Math.floor(Math.round((n-t)/864e5)/7)+1}var d=r[0],m=r[1];if(m){var g=0,f=new Date,h=n.showWeeks;o.showWeeks?e.$parent.$watch(t(o.showWeeks),function(e){h=!!e,l()}):l(),o.min&&e.$parent.$watch(t(o.min),function(e){d.minDate=e?new Date(e):null,c()}),o.max&&e.$parent.$watch(t(o.max),function(e){d.maxDate=e?new Date(e):null,c()}),m.$render=function(){c(!0)},e.select=function(e){if(0===g){var t=new Date(m.$modelValue);t.setFullYear(e.getFullYear(),e.getMonth(),e.getDate()),m.$setViewValue(t),c(!0)}else f=e,u(g-1)},e.move=function(e){var t=d.modes[g].step;f.setMonth(f.getMonth()+e*(t.months||0)),f.setFullYear(f.getFullYear()+e*(t.years||0)),c()},e.toggleMode=function(){u((g+1)%d.modes.length)},e.getWeekNumber=function(t){return 0===g&&e.showWeekNumbers&&7===t.length?p(t[0].date):null}}}}}]).constant("datepickerPopupConfig",{dateFormat:"yyyy-MM-dd",closeOnDateSelection:!0}).directive("datepickerPopup",["$compile","$parse","$document","$position","dateFilter","datepickerPopupConfig",function(e,t,n,a,i,o){return{restrict:"EA",require:"ngModel",link:function(r,l,s,c){function u(e){return e?i(e,h):null}function p(e){if(e){var t=new Date(e);if(!isNaN(t))return t}return e}function d(e){$?$(r,!!e):v.isOpen=!!e}function m(e,n,a){e&&(r.$watch(t(e),function(e){v[n]=e}),D.attr(a||n,n))}function g(){v.position=a.position(l),v.position.top=v.position.top+l.prop("offsetHeight")}var f=angular.isDefined(s.closeOnDateSelection)?v.$eval(s.closeOnDateSelection):o.closeOnDateSelection,h=s.datepickerPopup||o.dateFormat,v=r.$new();r.$on("$destroy",function(){v.$destroy()}),c.$formatters.push(u),c.$parsers.push(p);var b,$;s.open&&(b=t(s.open),$=b.assign,r.$watch(b,function(e){v.isOpen=!!e})),v.isOpen=b?b(r):!1;var y=function(e){v.isOpen&&e.target!==l[0]&&v.$apply(function(){d(!1)})},w=function(){v.$apply(function(){d(!0)})},k=angular.element("");return t.addClass(e),t}function m(n){var a=this,i=this.options=angular.extend({},e,t,n);this._open=!1,this.backdropEl=d(i.backdropClass),i.backdropFade&&(this.backdropEl.addClass(i.transitionClass),this.backdropEl.removeClass(i.triggerClass)),this.modalEl=d(i.dialogClass),i.dialogFade&&(this.modalEl.addClass(i.transitionClass),this.modalEl.removeClass(i.triggerClass)),this.handledEscapeKey=function(e){27===e.which&&(a.close(),e.preventDefault(),a.$scope.$apply())},this.handleBackDropClick=function(e){a.close(),e.preventDefault(),a.$scope.$apply()}}var g=i.find("body");return m.prototype.isOpen=function(){return this._open},m.prototype.open=function(e,t){var n=this,a=this.options;if(e&&(a.templateUrl=e),t&&(a.controller=t),!a.template&&!a.templateUrl)throw Error("Dialog.open expected template or templateUrl, neither found. Use options or open method to specify them.");return this._loadResolves().then(function(e){var t=e.$scope=n.$scope=e.$scope?e.$scope:r.$new();if(n.modalEl.html(e.$template),n.options.controller){var a=l(n.options.controller,e);n.modalEl.children().data("ngControllerController",a)}o(n.modalEl)(t),n._addElementsToDom(),setTimeout(function(){n.options.dialogFade&&n.modalEl.addClass(n.options.triggerClass),n.options.backdropFade&&n.backdropEl.addClass(n.options.triggerClass)}),n._bindEvents()}),this.deferred=c.defer(),this.deferred.promise},m.prototype.close=function(e){function t(e){e.removeClass(a.options.triggerClass)}function n(){a._open&&a._onCloseComplete(e)}var a=this,i=this._getFadingElements();if(i.length>0)for(var o=i.length-1;o>=0;o--)u(i[o],t).then(n);else this._onCloseComplete(e)},m.prototype._getFadingElements=function(){var e=[];return this.options.dialogFade&&e.push(this.modalEl),this.options.backdropFade&&e.push(this.backdropEl),e},m.prototype._bindEvents=function(){this.options.keyboard&&g.bind("keydown",this.handledEscapeKey),this.options.backdrop&&this.options.backdropClick&&this.backdropEl.bind("click",this.handleBackDropClick)},m.prototype._unbindEvents=function(){this.options.keyboard&&g.unbind("keydown",this.handledEscapeKey),this.options.backdrop&&this.options.backdropClick&&this.backdropEl.unbind("click",this.handleBackDropClick)},m.prototype._onCloseComplete=function(e){this._removeElementsFromDom(),this._unbindEvents(),this.deferred.resolve(e)},m.prototype._addElementsToDom=function(){g.append(this.modalEl),this.options.backdrop&&(0===n.value&&g.append(this.backdropEl),n.value++),this._open=!0},m.prototype._removeElementsFromDom=function(){this.modalEl.remove(),this.options.backdrop&&(n.value--,0===n.value&&this.backdropEl.remove()),this._open=!1},m.prototype._loadResolves=function(){var e,t=[],n=[],i=this;return this.options.template?e=c.when(this.options.template):this.options.templateUrl&&(e=a.get(this.options.templateUrl,{cache:s}).then(function(e){return e.data})),angular.forEach(this.options.resolve||[],function(e,a){n.push(a),t.push(angular.isString(e)?p.get(e):p.invoke(e))}),n.push("$template"),t.push(e),c.all(t).then(function(e){var t={};return angular.forEach(e,function(e,a){t[n[a]]=e}),t.dialog=i,t})},{dialog:function(e){return new m(e)},messageBox:function(e,t,n){return new m({templateUrl:"template/dialog/message.html",controller:"MessageBoxController",resolve:{model:function(){return{title:e,message:t,buttons:n}}}})}}}]}),angular.module("ui.bootstrap.dropdownToggle",[]).directive("dropdownToggle",["$document","$location",function(e){var t=null,n=angular.noop;return{restrict:"CA",link:function(a,i){a.$watch("$location.path",function(){n()}),i.parent().bind("click",function(){n()}),i.bind("click",function(a){var o=i===t;a.preventDefault(),a.stopPropagation(),t&&n(),o||(i.parent().addClass("open"),t=i,n=function(a){a&&(a.preventDefault(),a.stopPropagation()),e.unbind("click",n),i.parent().removeClass("open"),n=angular.noop,t=null},e.bind("click",n))})}}}]),angular.module("ui.bootstrap.modal",["ui.bootstrap.dialog"]).directive("modal",["$parse","$dialog",function(e,t){return{restrict:"EA",terminal:!0,link:function(n,a,i){var o,r=angular.extend({},n.$eval(i.uiOptions||i.bsOptions||i.options)),l=i.modal||i.show;r=angular.extend(r,{template:a.html(),resolve:{$scope:function(){return n}}});var s=t.dialog(r);a.remove(),o=i.close?function(){e(i.close)(n)}:function(){angular.isFunction(e(l).assign)&&e(l).assign(n,!1)},n.$watch(l,function(e){e?s.open().then(function(){o()}):s.isOpen()&&s.close()})}}}]),angular.module("ui.bootstrap.pagination",[]).controller("PaginationController",["$scope","$interpolate",function(e,t){this.currentPage=1,this.noPrevious=function(){return 1===this.currentPage},this.noNext=function(){return this.currentPage===e.numPages},this.isActive=function(e){return this.currentPage===e},this.reset=function(){e.pages=[],this.currentPage=parseInt(e.currentPage,10),this.currentPage>e.numPages&&e.selectPage(e.numPages)};var n=this;e.selectPage=function(t){!n.isActive(t)&&t>0&&e.numPages>=t&&(e.currentPage=t,e.onSelectPage({page:t}))},this.getAttributeValue=function(n,a,i){return angular.isDefined(n)?i?t(n)(e.$parent):e.$parent.$eval(n):a}}]).constant("paginationConfig",{boundaryLinks:!1,directionLinks:!0,firstText:"First",previousText:"Previous",nextText:"Next",lastText:"Last",rotate:!0}).directive("pagination",["paginationConfig",function(e){return{restrict:"EA",scope:{numPages:"=",currentPage:"=",maxSize:"=",onSelectPage:"&"},controller:"PaginationController",templateUrl:"template/pagination/pagination.html",replace:!0,link:function(t,n,a,i){function o(e,t,n,a){return{number:e,text:t,active:n,disabled:a}}var r=i.getAttributeValue(a.boundaryLinks,e.boundaryLinks),l=i.getAttributeValue(a.directionLinks,e.directionLinks),s=i.getAttributeValue(a.firstText,e.firstText,!0),c=i.getAttributeValue(a.previousText,e.previousText,!0),u=i.getAttributeValue(a.nextText,e.nextText,!0),p=i.getAttributeValue(a.lastText,e.lastText,!0),d=i.getAttributeValue(a.rotate,e.rotate);t.$watch("numPages + currentPage + maxSize",function(){i.reset();var e=1,n=t.numPages,a=angular.isDefined(t.maxSize)&&t.maxSize
t.numPages&&(n=t.numPages,e=n-t.maxSize+1)):(e=(Math.ceil(i.currentPage/t.maxSize)-1)*t.maxSize+1,n=Math.min(e+t.maxSize-1,t.numPages)));for(var m=e;n>=m;m++){var g=o(m,m,i.isActive(m),!1);t.pages.push(g)}if(a&&!d){if(e>1){var f=o(e-1,"...",!1,!1);t.pages.unshift(f)}if(t.numPages>n){var h=o(n+1,"...",!1,!1);t.pages.push(h)}}if(l){var v=o(i.currentPage-1,c,!1,i.noPrevious());t.pages.unshift(v);var b=o(i.currentPage+1,u,!1,i.noNext());t.pages.push(b)}if(r){var $=o(1,s,!1,i.noPrevious());t.pages.unshift($);var y=o(t.numPages,p,!1,i.noNext());t.pages.push(y)}})}}}]).constant("pagerConfig",{previousText:"« Previous",nextText:"Next »",align:!0}).directive("pager",["pagerConfig",function(e){return{restrict:"EA",scope:{numPages:"=",currentPage:"=",onSelectPage:"&"},controller:"PaginationController",templateUrl:"template/pagination/pager.html",replace:!0,link:function(t,n,a,i){function o(e,t,n,a,i){return{number:e,text:t,disabled:n,previous:s&&a,next:s&&i}}var r=i.getAttributeValue(a.previousText,e.previousText,!0),l=i.getAttributeValue(a.nextText,e.nextText,!0),s=i.getAttributeValue(a.align,e.align);t.$watch("numPages + currentPage",function(){i.reset();var e=o(i.currentPage-1,r,i.noPrevious(),!0,!1);t.pages.unshift(e);var n=o(i.currentPage+1,l,i.noNext(),!1,!0);t.pages.push(n)})}}}]),angular.module("ui.bootstrap.tooltip",["ui.bootstrap.position"]).provider("$tooltip",function(){function e(e){var t=/[A-Z]/g,n="-";return e.replace(t,function(e,t){return(t?n:"")+e.toLowerCase()})}var t={placement:"top",animation:!0,popupDelay:0},n={mouseenter:"mouseleave",click:"click",focus:"blur"},a={};this.options=function(e){angular.extend(a,e)},this.setTriggers=function(e){angular.extend(n,e)},this.$get=["$window","$compile","$timeout","$parse","$document","$position","$interpolate",function(i,o,r,l,s,c,u){return function(i,p,d){function m(e){var t=e||g.trigger||d,a=n[t]||t;return{show:t,hide:a}}var g=angular.extend({},t,a),f=e(i),h=u.startSymbol(),v=u.endSymbol(),b="<"+f+"-popup "+'title="'+h+"tt_title"+v+'" '+'content="'+h+"tt_content"+v+'" '+'placement="'+h+"tt_placement"+v+'" '+'animation="tt_animation()" '+'is-open="tt_isOpen"'+">"+"";return{restrict:"EA",scope:!0,link:function(e,t,n){function a(){e.tt_isOpen?d():u()}function u(){e.tt_popupDelay?$=r(f,e.tt_popupDelay):e.$apply(f)}function d(){e.$apply(function(){h()})}function f(){var n,a,i,o;if(e.tt_content){switch(v&&r.cancel(v),w.css({top:0,left:0,display:"block"}),k?(y=y||s.find("body"),y.append(w)):t.after(w),n=k?c.offset(t):c.position(t),a=w.prop("offsetWidth"),i=w.prop("offsetHeight"),e.tt_placement){case"mouse":var l=c.mouse();o={top:l.y,left:l.x};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width};break;case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-a/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-a};break;default:o={top:n.top-i,left:n.left+n.width/2-a/2}}o.top+="px",o.left+="px",w.css(o),e.tt_isOpen=!0}}function h(){e.tt_isOpen=!1,r.cancel($),angular.isDefined(e.tt_animation)&&e.tt_animation()?v=r(function(){w.remove()},500):w.remove()}var v,$,y,w=o(b)(e),k=angular.isDefined(g.appendToBody)?g.appendToBody:!1,D=m(void 0),x=!1;e.tt_isOpen=!1,n.$observe(i,function(t){e.tt_content=t}),n.$observe(p+"Title",function(t){e.tt_title=t}),n.$observe(p+"Placement",function(t){e.tt_placement=angular.isDefined(t)?t:g.placement}),n.$observe(p+"Animation",function(t){e.tt_animation=angular.isDefined(t)?l(t):function(){return g.animation}}),n.$observe(p+"PopupDelay",function(t){var n=parseInt(t,10);e.tt_popupDelay=isNaN(n)?g.popupDelay:n}),n.$observe(p+"Trigger",function(e){x&&(t.unbind(D.show,u),t.unbind(D.hide,d)),D=m(e),D.show===D.hide?t.bind(D.show,a):(t.bind(D.show,u),t.bind(D.hide,d)),x=!0}),n.$observe(p+"AppendToBody",function(t){k=angular.isDefined(t)?l(t)(e):k}),k&&e.$on("$locationChangeSuccess",function(){e.tt_isOpen&&h()}),e.$on("$destroy",function(){e.tt_isOpen?h():w.remove()})}}}}]}).directive("tooltipPopup",function(){return{restrict:"E",replace:!0,scope:{content:"@",placement:"@",animation:"&",isOpen:"&"},templateUrl:"template/tooltip/tooltip-popup.html"}}).directive("tooltip",["$tooltip",function(e){return e("tooltip","tooltip","mouseenter")}]).directive("tooltipHtmlUnsafePopup",function(){return{restrict:"E",replace:!0,scope:{content:"@",placement:"@",animation:"&",isOpen:"&"},templateUrl:"template/tooltip/tooltip-html-unsafe-popup.html"}}).directive("tooltipHtmlUnsafe",["$tooltip",function(e){return e("tooltipHtmlUnsafe","tooltip","mouseenter")}]),angular.module("ui.bootstrap.popover",["ui.bootstrap.tooltip"]).directive("popoverPopup",function(){return{restrict:"EA",replace:!0,scope:{title:"@",content:"@",placement:"@",animation:"&",isOpen:"&"},templateUrl:"template/popover/popover.html"}}).directive("popover",["$compile","$timeout","$parse","$window","$tooltip",function(e,t,n,a,i){return i("popover","popover","click")}]),angular.module("ui.bootstrap.progressbar",["ui.bootstrap.transition"]).constant("progressConfig",{animate:!0,autoType:!1,stackedTypes:["success","info","warning","danger"]}).controller("ProgressBarController",["$scope","$attrs","progressConfig",function(e,t,n){function a(e){return r[e]}var i=angular.isDefined(t.animate)?e.$eval(t.animate):n.animate,o=angular.isDefined(t.autoType)?e.$eval(t.autoType):n.autoType,r=angular.isDefined(t.stackedTypes)?e.$eval("["+t.stackedTypes+"]"):n.stackedTypes;this.makeBar=function(e,t,n){var r=angular.isObject(e)?e.value:e||0,l=angular.isObject(t)?t.value:t||0,s=angular.isObject(e)&&angular.isDefined(e.type)?e.type:o?a(n||0):null;return{from:l,to:r,type:s,animate:i}},this.addBar=function(t){e.bars.push(t),e.totalPercent+=t.to},this.clearBars=function(){e.bars=[],e.totalPercent=0},this.clearBars()}]).directive("progress",function(){return{restrict:"EA",replace:!0,controller:"ProgressBarController",scope:{value:"=percent",onFull:"&",onEmpty:"&"},templateUrl:"template/progressbar/progress.html",link:function(e,t,n,a){e.$watch("value",function(e,t){if(a.clearBars(),angular.isArray(e))for(var n=0,i=e.length;i>n;n++)a.addBar(a.makeBar(e[n],t[n],n));else a.addBar(a.makeBar(e,t))},!0),e.$watch("totalPercent",function(t){t>=100?e.onFull():0>=t&&e.onEmpty()},!0)}}}).directive("progressbar",["$transition",function(e){return{restrict:"EA",replace:!0,scope:{width:"=",old:"=",type:"=",animate:"="},templateUrl:"template/progressbar/bar.html",link:function(t,n){t.$watch("width",function(a){t.animate?(n.css("width",t.old+"%"),e(n,{width:a+"%"})):n.css("width",a+"%")})}}}]),angular.module("ui.bootstrap.rating",[]).constant("ratingConfig",{max:5}).directive("rating",["ratingConfig","$parse",function(e,t){return{restrict:"EA",scope:{value:"=",onHover:"&",onLeave:"&"},templateUrl:"template/rating/rating.html",replace:!0,link:function(n,a,i){var o=angular.isDefined(i.max)?n.$parent.$eval(i.max):e.max;n.range=[];for(var r=1;o>=r;r++)n.range.push(r);n.rate=function(e){n.readonly||(n.value=e)},n.enter=function(e){n.readonly||(n.val=e),n.onHover({value:e})},n.reset=function(){n.val=angular.copy(n.value),n.onLeave()},n.reset(),n.$watch("value",function(e){n.val=e}),n.readonly=!1,i.readonly&&n.$parent.$watch(t(i.readonly),function(e){n.readonly=!!e})}}}]),angular.module("ui.bootstrap.tabs",[]).directive("tabs",function(){return function(){throw Error("The `tabs` directive is deprecated, please migrate to `tabset`. Instructions can be found at http://github.com/angular-ui/bootstrap/tree/master/CHANGELOG.md")}}).controller("TabsetController",["$scope","$element",function(e){var t=this,n=t.tabs=e.tabs=[];t.select=function(e){angular.forEach(n,function(e){e.active=!1}),e.active=!0},t.addTab=function(e){n.push(e),(1===n.length||e.active)&&t.select(e)},t.removeTab=function(e){var a=n.indexOf(e);if(e.active&&n.length>1){var i=a==n.length-1?a-1:a+1;t.select(n[i])}n.splice(a,1)}}]).directive("tabset",function(){return{restrict:"EA",transclude:!0,replace:!0,require:"^tabset",scope:{},controller:"TabsetController",templateUrl:"template/tabs/tabset.html",compile:function(e,t,n){return function(e,t,a,i){e.vertical=angular.isDefined(a.vertical)?e.$eval(a.vertical):!1,e.type=angular.isDefined(a.type)?e.$parent.$eval(a.type):"tabs",e.direction=angular.isDefined(a.direction)?e.$parent.$eval(a.direction):"top",e.tabsAbove="below"!=e.direction,i.$scope=e,i.$transcludeFn=n}}}}).directive("tab",["$parse","$http","$templateCache","$compile",function(e){return{require:"^tabset",restrict:"EA",replace:!0,templateUrl:"template/tabs/tab.html",transclude:!0,scope:{heading:"@",onSelect:"&select",onDeselect:"&deselect"},controller:function(){},compile:function(t,n,a){return function(t,n,i,o){var r,l;i.active?(r=e(i.active),l=r.assign,t.$parent.$watch(r,function(e){t.active=!!e}),t.active=r(t.$parent)):l=r=angular.noop,t.$watch("active",function(e){l(t.$parent,e),e?(o.select(t),t.onSelect()):t.onDeselect()}),t.disabled=!1,i.disabled&&t.$parent.$watch(e(i.disabled),function(e){t.disabled=!!e
-}),t.select=function(){t.disabled||(t.active=!0)},o.addTab(t),t.$on("$destroy",function(){o.removeTab(t)}),t.active&&l(t.$parent,!0),t.$transcludeFn=a}}}}]).directive("tabHeadingTransclude",[function(){return{restrict:"A",require:"^tab",link:function(e,t){e.$watch("headingElement",function(e){e&&(t.html(""),t.append(e))})}}}]).directive("tabContentTransclude",["$compile","$parse",function(){function e(e){return e.tagName&&(e.hasAttribute("tab-heading")||e.hasAttribute("data-tab-heading")||"tab-heading"===e.tagName.toLowerCase()||"data-tab-heading"===e.tagName.toLowerCase())}return{restrict:"A",require:"^tabset",link:function(t,n,a){var i=t.$eval(a.tabContentTransclude);i.$transcludeFn(i.$parent,function(t){angular.forEach(t,function(t){e(t)?i.headingElement=t:n.append(t)})})}}}]).directive("tabsetTitles",function(){return{restrict:"A",require:"^tabset",templateUrl:"template/tabs/tabset-titles.html",replace:!0,link:function(e,t,n,a){e.$eval(n.tabsetTitles)?a.$transcludeFn(a.$scope.$parent,function(e){t.append(e)}):t.remove()}}}),angular.module("ui.bootstrap.timepicker",[]).filter("pad",function(){return function(e){return angular.isDefined(e)&&2>(""+e).length&&(e="0"+e),e}}).constant("timepickerConfig",{hourStep:1,minuteStep:1,showMeridian:!0,meridians:["AM","PM"],readonlyInput:!1,mousewheel:!0}).directive("timepicker",["padFilter","$parse","timepickerConfig",function(e,t,n){return{restrict:"EA",require:"ngModel",replace:!0,templateUrl:"template/timepicker/timepicker.html",scope:{model:"=ngModel"},link:function(a,i,o){function r(){var e=parseInt(a.hours,10),t=a.showMeridian?e>0&&13>e:e>=0&&24>e;return t?(a.showMeridian&&(12===e&&(e=0),a.meridian===u[1]&&(e+=12)),e):void 0}function l(){var t=c.getHours();a.showMeridian&&(t=0===t||12===t?12:t%12),a.hours="h"===b?t:e(t),a.validHours=!0;var n=c.getMinutes();a.minutes="m"===b?n:e(n),a.validMinutes=!0,a.meridian=a.showMeridian?12>c.getHours()?u[0]:u[1]:"",b=!1}function s(e){var t=new Date(c.getTime()+6e4*e);c.setHours(t.getHours()),c.setMinutes(t.getMinutes()),a.model=new Date(c)}var c=new Date,u=n.meridians,p=n.hourStep;o.hourStep&&a.$parent.$watch(t(o.hourStep),function(e){p=parseInt(e,10)});var d=n.minuteStep;o.minuteStep&&a.$parent.$watch(t(o.minuteStep),function(e){d=parseInt(e,10)}),a.showMeridian=n.showMeridian,o.showMeridian&&a.$parent.$watch(t(o.showMeridian),function(e){if(a.showMeridian=!!e,a.model)l();else{var t=new Date(c),n=r();angular.isDefined(n)&&t.setHours(n),a.model=new Date(t)}});var m=i.find("input"),g=m.eq(0),f=m.eq(1),h=angular.isDefined(o.mousewheel)?a.$eval(o.mousewheel):n.mousewheel;if(h){var v=function(e){e.originalEvent&&(e=e.originalEvent);var t=e.wheelDelta?e.wheelDelta:-e.deltaY;return e.detail||t>0};g.bind("mousewheel wheel",function(e){a.$apply(v(e)?a.incrementHours():a.decrementHours()),e.preventDefault()}),f.bind("mousewheel wheel",function(e){a.$apply(v(e)?a.incrementMinutes():a.decrementMinutes()),e.preventDefault()})}var b=!1;a.readonlyInput=angular.isDefined(o.readonlyInput)?a.$eval(o.readonlyInput):n.readonlyInput,a.readonlyInput?(a.updateHours=angular.noop,a.updateMinutes=angular.noop):(a.updateHours=function(){var e=r();angular.isDefined(e)?(b="h",null===a.model&&(a.model=new Date(c)),a.model.setHours(e)):(a.model=null,a.validHours=!1)},g.bind("blur",function(){a.validHours&&10>a.hours&&a.$apply(function(){a.hours=e(a.hours)})}),a.updateMinutes=function(){var e=parseInt(a.minutes,10);e>=0&&60>e?(b="m",null===a.model&&(a.model=new Date(c)),a.model.setMinutes(e)):(a.model=null,a.validMinutes=!1)},f.bind("blur",function(){a.validMinutes&&10>a.minutes&&a.$apply(function(){a.minutes=e(a.minutes)})})),a.$watch(function(){return+a.model},function(e){!isNaN(e)&&e>0&&(c=new Date(e),l())}),a.incrementHours=function(){s(60*p)},a.decrementHours=function(){s(60*-p)},a.incrementMinutes=function(){s(d)},a.decrementMinutes=function(){s(-d)},a.toggleMeridian=function(){s(720*(12>c.getHours()?1:-1))}}}}]),angular.module("ui.bootstrap.typeahead",["ui.bootstrap.position"]).factory("typeaheadParser",["$parse",function(e){var t=/^\s*(.*?)(?:\s+as\s+(.*?))?\s+for\s+(?:([\$\w][\$\w\d]*))\s+in\s+(.*)$/;return{parse:function(n){var a=n.match(t);if(!a)throw Error("Expected typeahead specification in form of '_modelValue_ (as _label_)? for _item_ in _collection_' but got '"+n+"'.");return{itemName:a[3],source:e(a[4]),viewMapper:e(a[2]||a[1]),modelMapper:e(a[1])}}}}]).directive("typeahead",["$compile","$parse","$q","$timeout","$document","$position","typeaheadParser",function(e,t,n,a,i,o,r){var l=[9,13,27,38,40];return{require:"ngModel",link:function(s,c,u,p){var d=s.$eval(u.typeaheadMinLength)||1,m=s.$eval(u.typeaheadWaitMs)||0,g=s.$eval(u.typeaheadEditable)!==!1,f=t(u.typeaheadLoading).assign||angular.noop,h=t(u.typeaheadOnSelect),v=u.typeaheadInputFormatter?t(u.typeaheadInputFormatter):void 0,b=t(u.ngModel).assign,$=r.parse(u.typeahead),y=angular.element("$& "):n}}),angular.module("template/accordion/accordion-group.html",[]).run(["$templateCache",function(e){e.put("template/accordion/accordion-group.html",'')}]),angular.module("template/accordion/accordion.html",[]).run(["$templateCache",function(e){e.put("template/accordion/accordion.html",'
')}]),angular.module("template/alert/alert.html",[]).run(["$templateCache",function(e){e.put("template/alert/alert.html","\n")}]),angular.module("template/carousel/carousel.html",[]).run(["$templateCache",function(e){e.put("template/carousel/carousel.html",'\n')}]),angular.module("template/carousel/slide.html",[]).run(["$templateCache",function(e){e.put("template/carousel/slide.html","
\n")}]),angular.module("template/datepicker/datepicker.html",[]).run(["$templateCache",function(e){e.put("template/datepicker/datepicker.html",'\n \n \n {{title}} \n \n # \n {{label}} \n \n \n \n \n {{ getWeekNumber(row) }} \n {{dt.label}} \n \n \n
\n')}]),angular.module("template/datepicker/popup.html",[]).run(["$templateCache",function(e){e.put("template/datepicker/popup.html",'')}]),angular.module("template/dialog/message.html",[]).run(["$templateCache",function(e){e.put("template/dialog/message.html",'\n\n\n')}]),angular.module("template/modal/backdrop.html",[]).run(["$templateCache",function(e){e.put("template/modal/backdrop.html",'
')}]),angular.module("template/modal/window.html",[]).run(["$templateCache",function(e){e.put("template/modal/window.html",'
')}]),angular.module("template/pagination/pager.html",[]).run(["$templateCache",function(e){e.put("template/pagination/pager.html",'\n')}]),angular.module("template/pagination/pagination.html",[]).run(["$templateCache",function(e){e.put("template/pagination/pagination.html",'\n')}]),angular.module("template/tooltip/tooltip-html-unsafe-popup.html",[]).run(["$templateCache",function(e){e.put("template/tooltip/tooltip-html-unsafe-popup.html",'\n')}]),angular.module("template/tooltip/tooltip-popup.html",[]).run(["$templateCache",function(e){e.put("template/tooltip/tooltip-popup.html",'\n')}]),angular.module("template/popover/popover.html",[]).run(["$templateCache",function(e){e.put("template/popover/popover.html",'\n')}]),angular.module("template/progressbar/bar.html",[]).run(["$templateCache",function(e){e.put("template/progressbar/bar.html",'
')}]),angular.module("template/progressbar/progress.html",[]).run(["$templateCache",function(e){e.put("template/progressbar/progress.html",'')}]),angular.module("template/rating/rating.html",[]).run(["$templateCache",function(e){e.put("template/rating/rating.html",'\n ')}]),angular.module("template/tabs/pane.html",[]).run(["$templateCache",function(e){e.put("template/tabs/pane.html",'
\n')}]),angular.module("template/tabs/tab.html",[]).run(["$templateCache",function(e){e.put("template/tabs/tab.html",'\n {{heading}} \n \n')}]),angular.module("template/tabs/tabs.html",[]).run(["$templateCache",function(e){e.put("template/tabs/tabs.html",'\n')}]),angular.module("template/tabs/tabset-titles.html",[]).run(["$templateCache",function(e){e.put("template/tabs/tabset-titles.html","\n")}]),angular.module("template/tabs/tabset.html",[]).run(["$templateCache",function(e){e.put("template/tabs/tabset.html",'\n\n')}]),angular.module("template/timepicker/timepicker.html",[]).run(["$templateCache",function(e){e.put("template/timepicker/timepicker.html",'')}]),angular.module("template/typeahead/typeahead-match.html",[]).run(["$templateCache",function(e){e.put("template/typeahead/typeahead-match.html",'
-
-
-
Status
-
-
-
-
- {{value}}
- {{name | toHuman}}
-
-
-
-
-
-
-
- {{dashboard.name}}
-
-
-
-
-
-
\ No newline at end of file
diff --git a/rd_ui/app/views/edit_dashboard.html b/rd_ui/app/views/edit_dashboard.html
deleted file mode 100644
index f776b0356..000000000
--- a/rd_ui/app/views/edit_dashboard.html
+++ /dev/null
@@ -1,33 +0,0 @@
-
\ No newline at end of file
diff --git a/rd_ui/app/views/grid_renderer.html b/rd_ui/app/views/grid_renderer.html
deleted file mode 100644
index 3524c8338..000000000
--- a/rd_ui/app/views/grid_renderer.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
- {{filter.friendlyName}}: {{filter.current}}
-
-
-
-
-
-
-
-
-
- Name
- Runtime
- Created at
- Update Schedule
- Created By
-
-
-
-
- {{query.name}} {{query.runtime | durationHumanize}}
-
- Never
-
-
- Every {{query.ttl | durationHumanize}}
- Manual
-
- {{query.user}}
-
-
-
-
-
-
-
-
-
-
Executing query...
-
Query in queue...
-
Error running query: {{queryResult.getError()}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
End2end Test Runner
-
-
-
-
-
-
\ No newline at end of file
diff --git a/viz-lib/.babelrc b/viz-lib/.babelrc
new file mode 100644
index 000000000..ad10c4591
--- /dev/null
+++ b/viz-lib/.babelrc
@@ -0,0 +1,20 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ [
+ "module-resolver",
+ {
+ "root": ["./src"],
+ "alias": {
+ "@": "./src"
+ }
+ }
+ ]
+ ],
+ "env": {
+ "test": {
+ "plugins": ["istanbul"]
+ }
+ }
+}
diff --git a/viz-lib/.gitignore b/viz-lib/.gitignore
new file mode 100644
index 000000000..64fcced46
--- /dev/null
+++ b/viz-lib/.gitignore
@@ -0,0 +1,20 @@
+# dependencies
+node_modules
+
+# builds
+/build
+/dist
+/lib
+.rpt2_cache
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
\ No newline at end of file
diff --git a/viz-lib/CHANGELOG.md b/viz-lib/CHANGELOG.md
new file mode 100644
index 000000000..e468b426f
--- /dev/null
+++ b/viz-lib/CHANGELOG.md
@@ -0,0 +1,5 @@
+# Change Log
+
+## v0.1.0 - 2020-05-05
+
+- Created the library from Redash codebase
diff --git a/viz-lib/README.md b/viz-lib/README.md
new file mode 100644
index 000000000..cae2f4964
--- /dev/null
+++ b/viz-lib/README.md
@@ -0,0 +1,186 @@
+# @redash/viz
+
+
+
+`@redash/viz` is a library containing the visualizations used by [Redash](https://redash.io).
+
+## Installation
+
+Required libraries:
+
+- react (`>=16.8.0`)
+- react-dom (`>=16.8.0`)
+- antd (`>=4.0.0`)
+
+Using npm:
+
+```bash
+npm install @redash/viz
+```
+
+Using yarn:
+
+```bash
+yarn add @redash/viz
+```
+
+## Usage
+
+### Basic Usage
+
+You can check [our live example](https://codesandbox.io/s/redashviz-v9odv) or follow the code below:
+
+```jsx
+import React, { useState } from "react";
+import { Renderer, Editor } from "@redash/viz";
+
+const exampleData = {
+ columns: [
+ { type: null, name: "Country" },
+ { type: null, name: "Amount" },
+ ],
+ rows: [
+ { Amount: 37.620000000000005, Country: "Argentina" },
+ { Amount: 37.620000000000005, Country: "Australia" },
+ { Amount: 42.62, Country: "Austria" },
+ { Amount: 37.62, Country: "Belgium" },
+ { Amount: 190.09999999999997, Country: "Brazil" },
+ { Amount: 303.9599999999999, Country: "Canada" },
+ { Amount: 46.62, Country: "Chile" },
+ { Amount: 90.24000000000001, Country: "Czech Republic" },
+ { Amount: 37.620000000000005, Country: "Denmark" },
+ { Amount: 41.620000000000005, Country: "Finland" },
+ { Amount: 195.09999999999994, Country: "France" },
+ ],
+};
+
+function Example() {
+ const [options, setOptions] = useState({ countRows: true });
+
+ return (
+
+
+ );
+}
+```
+
+### Available Types
+
+- Chart: `CHART`
+- Cohort: `COHORT`
+- Counter: `COUNTER`
+- Details View: `DETAILS`
+- Funnel: `FUNNEL`
+- Map (Choropleth): `CHOROPLETH`
+- Map (Markers): `MAP`
+- Pivot Table: `PIVOT`
+- Sankey: `SANKEY`
+- Sunburst Sequence: `SUNBURST_SEQUENCE`
+- Table: `TABLE`
+- Word Cloud: `WORD_CLOUD`
+
+### Column Types
+
+Types used for the `columns` property in the `data` object. Currently used to determine the default column view for the Table Visualization. This field is not mandatory and can receive a `null` value.
+
+Example:
+
+```js
+const data = {
+ columns: [
+ { type: "string", name: "Country" },
+ { type: "float", name: "Amount" },
+ ],
+ rows: [],
+};
+```
+
+Available types:
+
+- `integer`
+- `float`
+- `boolean`
+- `string`
+- `datetime`
+- `date`
+
+### Customizable Settings
+
+| Option | Description | Type | Default |
+| -------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| dateFormat | Date Format | `string` | `"DD/MM/YYYY"` |
+| dateTimeFormat | DateTime Format | `string` | `"DD/MM/YYYY HH:mm"` |
+| integerFormat | Integer Format | `string` | `"0,0"` |
+| floatFormat | Float Format | `string` | `"0,0.00"` |
+| booleanValues | Boolean names | `Array [string, string]` (correspond to false and true values) | `["false", "true"]` |
+| tableCellMaxJSONSize | Max json size that will be parsed and rendered in a Table Cell | `integer` | `50000` |
+| allowCustomJSVisualization | Whether to allow the `Custom` chart type | `boolean` | `false` |
+| hidePlotlyModeBar | Whether to hide the Plotly Mode Bar on charts | `boolean` | `false` |
+| choroplethAvailableMaps | Configure the JSONs used for Choropleth maps (Note: Choropleth won't work without this setting) | `Object` (see example below) | `{}` |
+| HelpTriggerComponent | Component used to render helper links on the Editor | React component with `title` and `href` props | Renders a [tooltip with a link](https://github.com/getredash/redash/blob/fc246aafc445bdfc3ad2b82560141ef51f8753a9/viz-lib/src/visualizations/visualizationsSettings.js#L6-L33) |
+
+Example:
+
+```jsx
+import React from "react";
+import { Renderer, Editor, updateVisualizationsSettings } from "@redash/viz";
+
+import countriesDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/countries.geo.json";
+import subdivJapanDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/japan.prefectures.geo.json";
+
+function wrapComponentWithSettings(WrappedComponent) {
+ return function VisualizationComponent(props) {
+ updateVisualizationsSettings({
+ choroplethAvailableMaps: {
+ countries: {
+ name: "Countries",
+ url: countriesDataUrl,
+ },
+ subdiv_japan: {
+ name: "Japan/Prefectures",
+ url: subdivJapanDataUrl,
+ },
+ },
+ dateFormat: "YYYY/MM/DD",
+ booleanValues: ["False", "True"],
+ hidePlotlyModeBar: true,
+ });
+
+ return /$1",
+ "\\.(css|less)$": "identity-obj-proxy"
+ }
+ }
+}
diff --git a/viz-lib/prettier.config.js b/viz-lib/prettier.config.js
new file mode 100644
index 000000000..059f7f83b
--- /dev/null
+++ b/viz-lib/prettier.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ printWidth: 120,
+ jsxBracketSameLine: true,
+ tabWidth: 2,
+ trailingComma: 'es5',
+};
diff --git a/viz-lib/src/components/ColorPicker/Input.tsx b/viz-lib/src/components/ColorPicker/Input.tsx
new file mode 100644
index 000000000..cfacffe3d
--- /dev/null
+++ b/viz-lib/src/components/ColorPicker/Input.tsx
@@ -0,0 +1,97 @@
+import { isNil, isArray, chunk, map, filter, toPairs } from "lodash";
+import React, { useState, useEffect } from "react";
+import tinycolor from "tinycolor2";
+import TextInput from "antd/lib/input";
+import Typography from "antd/lib/typography";
+import Swatch from "./Swatch";
+
+import "./input.less";
+
+function preparePresets(presetColors: any, presetColumns: any) {
+ presetColors = isArray(presetColors) ? map(presetColors, v => [null, v]) : toPairs(presetColors);
+ presetColors = map(presetColors, ([title, value]) => {
+ if (isNil(value)) {
+ return [title, null];
+ }
+ value = tinycolor(value);
+ if (value.isValid()) {
+ return [title, "#" + value.toHex().toUpperCase()];
+ }
+ return null;
+ });
+ return chunk(filter(presetColors), presetColumns);
+}
+
+function validateColor(value: any, callback: any, prefix = "#") {
+ if (isNil(value)) {
+ callback(null);
+ }
+ value = tinycolor(value);
+ if (value.isValid()) {
+ callback(prefix + value.toHex().toUpperCase());
+ }
+}
+
+type OwnProps = {
+ color?: string;
+ presetColors?:
+ | string[]
+ | {
+ [key: string]: string;
+ };
+ presetColumns?: number;
+ onChange?: (...args: any[]) => any;
+ onPressEnter?: (...args: any[]) => any;
+};
+
+type Props = OwnProps & typeof Input.defaultProps;
+
+export default function Input({ color, presetColors, presetColumns, onChange, onPressEnter }: Props) {
+ const [inputValue, setInputValue] = useState("");
+ const [isInputFocused, setIsInputFocused] = useState(false);
+
+ const presets = preparePresets(presetColors, presetColumns);
+
+ function handleInputChange(value: any) {
+ setInputValue(value);
+ validateColor(value, onChange);
+ }
+
+ useEffect(() => {
+ if (!isInputFocused) {
+ validateColor(color, setInputValue, "");
+ }
+ }, [color, isInputFocused]);
+
+ return (
+
+ {map(presets, (group, index) => (
+
+ {map(group, ([title, value]) => (
+ // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
+ validateColor(value, onChange)} />
+ ))}
+
+ ))}
+
+ #}
+ value={inputValue}
+ onChange={e => handleInputChange(e.target.value)}
+ onFocus={() => setIsInputFocused(true)}
+ onBlur={() => setIsInputFocused(false)}
+ onPressEnter={onPressEnter}
+ />
+
+
+ );
+}
+
+Input.defaultProps = {
+ color: "#FFFFFF",
+ presetColors: null,
+ presetColumns: 8,
+ onChange: () => {},
+ onPressEnter: () => {},
+};
diff --git a/viz-lib/src/components/ColorPicker/Label.tsx b/viz-lib/src/components/ColorPicker/Label.tsx
new file mode 100644
index 000000000..1235e3a7b
--- /dev/null
+++ b/viz-lib/src/components/ColorPicker/Label.tsx
@@ -0,0 +1,34 @@
+import React, { useMemo } from "react";
+import cx from "classnames";
+
+import { validateColor, getColorName } from "./utils";
+import "./label.less";
+
+type OwnProps = {
+ className?: string;
+ color?: string;
+ presetColors?:
+ | string[]
+ | {
+ [key: string]: string;
+ };
+};
+
+type Props = OwnProps & typeof Label.defaultProps;
+
+// @ts-expect-error ts-migrate(2700) FIXME: Rest types may only be created from object types.
+export default function Label({ className, color, presetColors, ...props }: Props) {
+ const name = useMemo(() => getColorName(validateColor(color), presetColors), [color, presetColors]);
+
+ return (
+
+ {name}
+
+ );
+}
+
+Label.defaultProps = {
+ className: null,
+ color: "#FFFFFF",
+ presetColors: null,
+};
diff --git a/viz-lib/src/components/ColorPicker/Swatch.tsx b/viz-lib/src/components/ColorPicker/Swatch.tsx
new file mode 100644
index 000000000..d60d9e4d8
--- /dev/null
+++ b/viz-lib/src/components/ColorPicker/Swatch.tsx
@@ -0,0 +1,45 @@
+import { isString } from "lodash";
+import React from "react";
+import cx from "classnames";
+import Tooltip from "antd/lib/tooltip";
+
+import "./swatch.less";
+
+type OwnProps = {
+ className?: string;
+ style?: any;
+ title?: string;
+ color?: string;
+ size?: number;
+};
+
+type Props = OwnProps & typeof Swatch.defaultProps;
+
+// @ts-expect-error ts-migrate(2700) FIXME: Rest types may only be created from object types.
+export default function Swatch({ className, color, title, size, style, ...props }: Props) {
+ const result = (
+
+ {result}
+
+ );
+ }
+ return result;
+}
+
+Swatch.defaultProps = {
+ className: null,
+ style: null,
+ title: null,
+ color: "transparent",
+ size: 12,
+};
diff --git a/viz-lib/src/components/ColorPicker/index.less b/viz-lib/src/components/ColorPicker/index.less
new file mode 100644
index 000000000..bd6857990
--- /dev/null
+++ b/viz-lib/src/components/ColorPicker/index.less
@@ -0,0 +1,44 @@
+.color-picker {
+ &.color-picker-with-actions {
+ &.ant-popover-placement-top,
+ &.ant-popover-placement-topLeft,
+ &.ant-popover-placement-topRight,
+ &.ant-popover-placement-leftBottom,
+ &.ant-popover-placement-rightBottom {
+ > .ant-popover-content > .ant-popover-arrow {
+ border-color: #fafafa; // same as card actions
+ }
+ }
+ }
+
+ &.ant-popover-placement-bottom,
+ &.ant-popover-placement-bottomLeft,
+ &.ant-popover-placement-bottomRight,
+ &.ant-popover-placement-leftTop,
+ &.ant-popover-placement-rightTop {
+ > .ant-popover-content > .ant-popover-arrow {
+ border-color: var(--color-picker-selected-color);
+ }
+ }
+
+ .ant-popover-inner-content {
+ padding: 0;
+ }
+
+ .ant-card-head {
+ text-align: center;
+ border-bottom-color: rgba(0, 0, 0, 0.1);
+ }
+
+ .ant-card-body {
+ padding: 10px;
+ }
+}
+
+.color-picker-trigger {
+ cursor: pointer;
+}
+
+.color-picker-wrapper {
+ white-space: nowrap;
+}
diff --git a/viz-lib/src/components/ColorPicker/index.tsx b/viz-lib/src/components/ColorPicker/index.tsx
new file mode 100644
index 000000000..03129db4b
--- /dev/null
+++ b/viz-lib/src/components/ColorPicker/index.tsx
@@ -0,0 +1,173 @@
+import { toString } from "lodash";
+import React, { useState, useEffect, useMemo } from "react";
+import cx from "classnames";
+import Popover from "antd/lib/popover";
+import Card from "antd/lib/card";
+import Tooltip from "antd/lib/tooltip";
+import chooseTextColorForBackground from "@/lib/chooseTextColorForBackground";
+
+import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
+import CheckOutlinedIcon from "@ant-design/icons/CheckOutlined";
+
+import ColorInput from "./Input";
+import Swatch from "./Swatch";
+import Label from "./Label";
+import { validateColor } from "./utils";
+
+import "./index.less";
+
+type OwnProps = {
+ color?: string;
+ placement?:
+ | "top"
+ | "left"
+ | "right"
+ | "bottom"
+ | "topLeft"
+ | "topRight"
+ | "bottomLeft"
+ | "bottomRight"
+ | "leftTop"
+ | "leftBottom"
+ | "rightTop"
+ | "rightBottom";
+ presetColors?:
+ | string[]
+ | {
+ [key: string]: string;
+ };
+ presetColumns?: number;
+ interactive?: boolean;
+ triggerProps?: any;
+ children?: React.ReactNode;
+ addonBefore?: React.ReactNode;
+ addonAfter?: React.ReactNode;
+ onChange?: (...args: any[]) => any;
+};
+
+type Props = OwnProps & typeof ColorPicker.defaultProps;
+
+export default function ColorPicker({
+ color,
+ placement,
+ presetColors,
+ presetColumns,
+ interactive,
+ children,
+ onChange,
+ triggerProps,
+ addonBefore,
+ addonAfter,
+}: Props) {
+ const [visible, setVisible] = useState(false);
+ const validatedColor = useMemo(() => validateColor(color), [color]);
+ const [currentColor, setCurrentColor] = useState("");
+
+ function handleApply() {
+ setVisible(false);
+ if (!interactive) {
+ // @ts-expect-error ts-migrate(2349) FIXME: This expression is not callable.
+ onChange(currentColor);
+ }
+ }
+
+ function handleCancel() {
+ setVisible(false);
+ }
+
+ const actions = [];
+ if (!interactive) {
+ actions.push(
+
+
+ );
+ actions.push(
+
+
+ );
+ }
+
+ function handleInputChange(newColor: any) {
+ setCurrentColor(newColor);
+ if (interactive) {
+ // @ts-expect-error ts-migrate(2349) FIXME: This expression is not callable.
+ onChange(newColor);
+ }
+ }
+
+ useEffect(() => {
+ if (visible) {
+ // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string | null' is not assignable... Remove this comment to see the full error message
+ setCurrentColor(validatedColor);
+ }
+ }, [validatedColor, visible]);
+
+ return (
+
+ {addonBefore}
+
+ void' is not assignable t... Remove this comment to see the full error message
+ onChange={handleInputChange}
+ // @ts-expect-error ts-migrate(2322) FIXME: Type '() => void' is not assignable to type 'never... Remove this comment to see the full error message
+ onPressEnter={handleApply}
+ />
+
+ }
+ trigger="click"
+ placement={placement}
+ visible={visible}
+ onVisibleChange={setVisible}>
+ {children || (
+
+ {addonAfter}
+
+ );
+}
+
+ColorPicker.defaultProps = {
+ color: "#FFFFFF",
+ placement: "top",
+ presetColors: null,
+ presetColumns: 8,
+ interactive: false,
+ triggerProps: {},
+ children: null,
+ addonBefore: null,
+ addonAfter: null,
+ onChange: () => {},
+};
+
+ColorPicker.Input = ColorInput;
+ColorPicker.Swatch = Swatch;
+ColorPicker.Label = Label;
diff --git a/viz-lib/src/components/ColorPicker/input.less b/viz-lib/src/components/ColorPicker/input.less
new file mode 100644
index 000000000..56f9d7ec5
--- /dev/null
+++ b/viz-lib/src/components/ColorPicker/input.less
@@ -0,0 +1,19 @@
+.color-picker-input-swatches {
+ margin: 0 0 10px 0;
+ text-align: left;
+ white-space: nowrap;
+
+ .color-swatch {
+ cursor: pointer;
+ margin: 0 10px 0 0;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+}
+
+.color-picker-input {
+ text-align: left;
+ white-space: nowrap;
+}
diff --git a/viz-lib/src/components/ColorPicker/label.less b/viz-lib/src/components/ColorPicker/label.less
new file mode 100644
index 000000000..e8aa009f3
--- /dev/null
+++ b/viz-lib/src/components/ColorPicker/label.less
@@ -0,0 +1,7 @@
+.color-label {
+ vertical-align: middle;
+
+ .color-swatch + & {
+ margin-left: 7px;
+ }
+}
diff --git a/viz-lib/src/components/ColorPicker/swatch.less b/viz-lib/src/components/ColorPicker/swatch.less
new file mode 100644
index 000000000..4dea312c4
--- /dev/null
+++ b/viz-lib/src/components/ColorPicker/swatch.less
@@ -0,0 +1,30 @@
+.color-swatch {
+ display: inline-block;
+ box-sizing: border-box;
+ vertical-align: middle;
+ border-radius: 2px;
+ overflow: hidden;
+ width: 12px;
+
+ @cell-size: 12px;
+ @cell-color: rgba(0, 0, 0, 0.1);
+
+ background-color: transparent;
+ background-image:
+ linear-gradient(45deg, @cell-color 25%, transparent 25%),
+ linear-gradient(-45deg, @cell-color 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, @cell-color 75%),
+ linear-gradient(-45deg, transparent 75%, @cell-color 75%);
+ background-size: @cell-size @cell-size;
+ background-position: 0 0, 0 @cell-size/2, @cell-size/2 -@cell-size/2, -@cell-size/2 0px;
+
+ &:before {
+ content: "";
+ display: block;
+ padding-top: ~"calc(100% - 2px)";
+ background-color: inherit;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-radius: 2px;
+ overflow: hidden;
+ }
+}
diff --git a/viz-lib/src/components/ColorPicker/utils.ts b/viz-lib/src/components/ColorPicker/utils.ts
new file mode 100644
index 000000000..4736e786a
--- /dev/null
+++ b/viz-lib/src/components/ColorPicker/utils.ts
@@ -0,0 +1,14 @@
+import { isArray, findKey } from "lodash";
+import tinycolor from "tinycolor2";
+
+export function validateColor(value: any, fallback = null) {
+ value = tinycolor(value);
+ return value.isValid() ? "#" + value.toHex().toUpperCase() : fallback;
+}
+
+export function getColorName(color: any, presetColors: any) {
+ if (isArray(presetColors)) {
+ return color;
+ }
+ return findKey(presetColors, v => validateColor(v) === color) || color;
+}
diff --git a/viz-lib/src/components/ErrorBoundary.tsx b/viz-lib/src/components/ErrorBoundary.tsx
new file mode 100644
index 000000000..3238fa113
--- /dev/null
+++ b/viz-lib/src/components/ErrorBoundary.tsx
@@ -0,0 +1,85 @@
+import { isFunction } from "lodash";
+import React from "react";
+import debug from "debug";
+import Alert from "antd/lib/alert";
+
+const logger = debug("redash:errors");
+
+export const ErrorBoundaryContext = React.createContext({
+ handleError: (error: any) => {
+ // Allow calling chain to roll up, and then throw the error in global context
+ setTimeout(() => {
+ throw error;
+ });
+ },
+ reset: () => {},
+});
+
+type OwnErrorMessageProps = {
+ children?: React.ReactNode;
+};
+
+type ErrorMessageProps = OwnErrorMessageProps & typeof ErrorMessage.defaultProps;
+
+export function ErrorMessage({ children }: ErrorMessageProps) {
+ return {
+ static defaultProps = {
+ children: null,
+ renderError: null,
+ };
+
+ state = { error: null };
+
+ handleError = (error: any) => {
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'getDerivedStateFromError' does not exist... Remove this comment to see the full error message
+ this.setState(this.constructor.getDerivedStateFromError(error));
+ this.componentDidCatch(error, null);
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleException' does not exist on type ... Remove this comment to see the full error message
+ if (isFunction(window.handleException)) {
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleException' does not exist on type ... Remove this comment to see the full error message
+ window.handleException(error);
+ }
+ };
+
+ reset = () => {
+ this.setState({ error: null });
+ };
+
+ static getDerivedStateFromError(error: any) {
+ return { error };
+ }
+
+ componentDidCatch(error: any, errorInfo: any) {
+ logger(error, errorInfo);
+ }
+
+ render() {
+ const { renderError, children } = this.props;
+ const { error } = this.state;
+
+ if (error) {
+ if (isFunction(renderError)) {
+ // @ts-expect-error ts-migrate(2349) FIXME: This expression is not callable.
+ return renderError(error);
+ }
+ return {children} ;
+ }
+}
diff --git a/viz-lib/src/components/HtmlContent.tsx b/viz-lib/src/components/HtmlContent.tsx
new file mode 100644
index 000000000..b30f9ece3
--- /dev/null
+++ b/viz-lib/src/components/HtmlContent.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import sanitize from "@/services/sanitize";
+
+const HtmlContent = React.memo(function HtmlContent({ children, ...props }) {
+ return (
+
+ );
+});
+
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'propTypes' does not exist on type 'Named... Remove this comment to see the full error message
+HtmlContent.propTypes = {
+ children: PropTypes.string,
+};
+
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'defaultProps' does not exist on type 'Na... Remove this comment to see the full error message
+HtmlContent.defaultProps = {
+ children: "",
+};
+
+export default HtmlContent;
diff --git a/viz-lib/src/components/TextAlignmentSelect/index.less b/viz-lib/src/components/TextAlignmentSelect/index.less
new file mode 100644
index 000000000..6cfcb76ac
--- /dev/null
+++ b/viz-lib/src/components/TextAlignmentSelect/index.less
@@ -0,0 +1,13 @@
+.ant-radio-group.text-alignment-select {
+ display: flex;
+ align-items: stretch;
+ justify-content: stretch;
+
+ .ant-radio-button-wrapper {
+ flex-grow: 1;
+ text-align: center;
+ // fit startsWith(k, "data-"))}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {count > 0 && (
+ setIsExpanded(!isExpanded)}>
+
+ )}
+ {openingBrace}
+ {!isExpanded && count > 0 && (
+ setIsExpanded(true)}>
+ …
+
+ )}
+ {isExpanded && (
+
+ {map(objectKeys, (key, index) => {
+ const isFirst = index === 0;
+ const isLast = index === count - 1;
+ const comma = isLast ? null : , ;
+ return (
+
+ {withKeys && (
+
+
+ :
+
+
+ )}
+ {comma}
+
+ );
+ })}
+
+ )}
+ {closingBrace}
+ {children}
+ {!isExpanded && {" // " + count + " " + (count === 1 ? "item" : "items")} }
+
+ );
+}
+
+function JsonValue({ value, children }: any) {
+ if (value === null || value === false || value === true || isFinite(value)) {
+ return (
+
+ {"" + value}
+ {children}
+
+ );
+ }
+ if (isString(value)) {
+ return (
+
+ "
+ {value}
+ "
+ {children}
+
+ );
+ }
+ if (isArray(value)) {
+ return (
+
+ {children}
+
+ );
+ }
+ if (isObject(value)) {
+ return (
+
+ {children}
+
+ );
+ }
+ return null;
+}
+
+type OwnJsonViewInteractiveProps = {
+ value?: any;
+};
+
+type JsonViewInteractiveProps = OwnJsonViewInteractiveProps & typeof JsonViewInteractive.defaultProps;
+
+export default function JsonViewInteractive({ value }: JsonViewInteractiveProps) {
+ return (
+
+
+ );
+}
+
+JsonViewInteractive.defaultProps = {
+ // `null` will be rendered as "null" because it is a valid JSON value, so use `undefined` for no value
+ value: undefined,
+};
diff --git a/viz-lib/src/components/json-view-interactive/json-view-interactive.less b/viz-lib/src/components/json-view-interactive/json-view-interactive.less
new file mode 100644
index 000000000..fdffcb87a
--- /dev/null
+++ b/viz-lib/src/components/json-view-interactive/json-view-interactive.less
@@ -0,0 +1,112 @@
+@import "../../visualizations/variables";
+
+@jvi-gutter: 20px;
+@jvi-spacing: 2px;
+
+.jvi-root {
+ display: block;
+ font-family: @font-family-monospace;
+}
+
+.jvi-block {
+ display: block;
+ border-left: 1px dotted @table-border-color;
+ margin: 0 0 0 2px;
+}
+
+.jvi-item {
+ display: block;
+ position: relative;
+ padding: 0 0 0 @jvi-gutter;
+ white-space: nowrap;
+
+ .jvi-item {
+ margin: @jvi-spacing 0;
+ }
+
+ &.jvi-nested-last > span > .jvi-punctuation.jvi-comma {
+ display: none;
+ }
+}
+
+.jvi-toggle {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: @jvi-gutter;
+ height: @jvi-gutter;
+ line-height: @jvi-gutter;
+ text-align: center;
+ cursor: pointer;
+ z-index: 1;
+ color: @text-color;
+ opacity: 0.5;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ i {
+ vertical-align: middle;
+ }
+
+ &.hidden {
+ display: none;
+ }
+}
+
+.jvi-punctuation {
+ color: @text-color;
+
+ &.jvi-string {
+ color: @green;
+ }
+
+ &.jvi-braces {
+ margin: 0 @jvi-spacing;
+ }
+
+ &.jvi-ellipsis {
+ padding: 0 @jvi-spacing;
+ cursor: pointer;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ &.hidden {
+ display: none;
+ }
+}
+
+.jvi-value {
+ color: @green;
+
+ &.jvi-primitive {
+ color: @orange;
+ }
+
+ &.jvi-string {
+ white-space: normal;
+ }
+}
+
+.jvi-object-key {
+ .jvi-value,
+ .jvi-punctuation {
+ color: @blue;
+ }
+}
+
+.jvi-comment {
+ color: @text-muted;
+ font-family: @visualizations-font;
+ font-style: italic;
+ margin: 0 0 0 2 * @jvi-spacing;
+ opacity: 0.5;
+
+ &.hidden {
+ display: none;
+ }
+}
diff --git a/viz-lib/src/components/sortable/index.tsx b/viz-lib/src/components/sortable/index.tsx
new file mode 100644
index 000000000..2e329cec0
--- /dev/null
+++ b/viz-lib/src/components/sortable/index.tsx
@@ -0,0 +1,97 @@
+import { isFunction, wrap } from "lodash";
+import React, { useRef, useState } from "react";
+import cx from "classnames";
+// @ts-expect-error ts-migrate(2724) FIXME: Module '"../../../node_modules/react-sortable-hoc/... Remove this comment to see the full error message
+import { sortableContainer, sortableElement, sortableHandle } from "react-sortable-hoc";
+
+import "./style.less";
+
+export const DragHandle = sortableHandle(({ className, ...restProps }: any) => (
+
+));
+
+export const SortableContainerWrapper = sortableContainer(({ children }: any) => children);
+
+export const SortableElement = sortableElement(({ children }: any) => children);
+
+type OwnProps = {
+ disabled?: boolean;
+ containerComponent?: React.ReactElement;
+ containerProps?: any;
+ children?: React.ReactNode;
+};
+
+type Props = OwnProps & typeof SortableContainer.defaultProps;
+
+export function SortableContainer({ disabled, containerComponent, containerProps, children, ...wrapperProps }: Props) {
+ const containerRef = useRef();
+ const [isDragging, setIsDragging] = useState(false);
+
+ wrapperProps = { ...wrapperProps };
+ containerProps = { ...containerProps };
+
+ if (disabled) {
+ // Disabled state:
+ // - forbid drag'n'drop (and therefore no need to hook events
+ // - don't override anything on container element
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'shouldCancelStart' does not exist on typ... Remove this comment to see the full error message
+ wrapperProps.shouldCancelStart = () => true;
+ } else {
+ // Enabled state:
+
+ // - use container element as a default helper element
+ // @ts-expect-error
+ wrapperProps.helperContainer = wrap(wrapperProps.helperContainer, helperContainer =>
+ isFunction(helperContainer) ? helperContainer(containerRef.current) : containerRef.current
+ );
+
+ // - hook drag start/end events
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'updateBeforeSortStart' does not exist on... Remove this comment to see the full error message
+ wrapperProps.updateBeforeSortStart = wrap(wrapperProps.updateBeforeSortStart, (updateBeforeSortStart, ...args) => {
+ setIsDragging(true);
+ if (isFunction(updateBeforeSortStart)) {
+ updateBeforeSortStart(...args);
+ }
+ });
+ // @ts-expect-error
+ wrapperProps.onSortStart = wrap(wrapperProps.onSortStart, (onSortStart, ...args) => {
+ if (isFunction(onSortStart)) {
+ onSortStart(...args);
+ } else {
+ const event = args[1] as DragEvent;
+ event.preventDefault();
+ }
+ });
+
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'onSortEnd' does not exist on type '{}'.
+ wrapperProps.onSortEnd = wrap(wrapperProps.onSortEnd, (onSortEnd, ...args) => {
+ setIsDragging(false);
+ if (isFunction(onSortEnd)) {
+ onSortEnd(...args);
+ }
+ });
+
+ // - update container element: add classes and take a ref
+ containerProps.className = cx(
+ "sortable-container",
+ { "sortable-container-dragging": isDragging },
+ containerProps.className
+ );
+ containerProps.ref = containerRef;
+ }
+
+ const ContainerComponent = containerComponent;
+ return (
+
+ {/* @ts-expect-error ts-migrate(2604) FIXME: JSX element type 'ContainerComponent' does not hav... Remove this comment to see the full error message */}
+ {children}
+
+ );
+}
+
+SortableContainer.defaultProps = {
+ disabled: false,
+ containerComponent: "div",
+ containerProps: {},
+ children: null,
+};
diff --git a/viz-lib/src/components/sortable/style.less b/viz-lib/src/components/sortable/style.less
new file mode 100644
index 000000000..1277df8e9
--- /dev/null
+++ b/viz-lib/src/components/sortable/style.less
@@ -0,0 +1,30 @@
+.drag-handle {
+ vertical-align: bottom;
+ cursor: move;
+
+ display: inline-flex;
+ align-items: stretch;
+ justify-content: center;
+
+ &:before {
+ content: '';
+ display: block;
+ width: 6px;
+
+ background:
+ linear-gradient(90deg, transparent 0px, white 1px, white 2px) center,
+ linear-gradient(transparent 0px, white 1px, white 2px) center,
+ #111111;
+ background-size: 2px 2px;
+ }
+}
+
+.sortable-container {
+ transition: background-color 200ms ease-out;
+ transition-delay: 300ms; // short pause before returning to original bgcolor
+
+ &.sortable-container-dragging {
+ transition-delay: 0s;
+ background-color: #f6f8f9;
+ }
+}
diff --git a/viz-lib/src/components/visualizations/editor/ContextHelp.tsx b/viz-lib/src/components/visualizations/editor/ContextHelp.tsx
new file mode 100644
index 000000000..d523820e5
--- /dev/null
+++ b/viz-lib/src/components/visualizations/editor/ContextHelp.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import Popover from "antd/lib/popover";
+import QuestionCircleFilledIcon from "@ant-design/icons/QuestionCircleFilled";
+import { visualizationsSettings } from "@/visualizations/visualizationsSettings";
+
+import "./context-help.less";
+
+type OwnContextHelpProps = {
+ icon?: React.ReactNode;
+ children?: React.ReactNode;
+};
+
+type ContextHelpProps = OwnContextHelpProps & typeof ContextHelp.defaultProps;
+
+export default function ContextHelp({ icon, children, ...props }: ContextHelpProps) {
+ return (
+
+ {icon || ContextHelp.defaultIcon}
+
+ );
+}
+
+ContextHelp.defaultProps = {
+ icon: null,
+ children: null,
+};
+
+ContextHelp.defaultIcon =
+ {ContextHelp.defaultIcon}
+
+ );
+}
+
+function DateTimeFormatSpecs() {
+ const { HelpTriggerComponent } = visualizationsSettings;
+ return (
+
+ {ContextHelp.defaultIcon}
+
+ );
+}
+
+ContextHelp.NumberFormatSpecs = NumberFormatSpecs;
+ContextHelp.DateTimeFormatSpecs = DateTimeFormatSpecs;
diff --git a/viz-lib/src/components/visualizations/editor/Section.less b/viz-lib/src/components/visualizations/editor/Section.less
new file mode 100644
index 000000000..7299a10ef
--- /dev/null
+++ b/viz-lib/src/components/visualizations/editor/Section.less
@@ -0,0 +1,8 @@
+.visualization-editor-section-title {
+ margin-top: 0px;
+ margin-bottom: 15px;
+}
+
+.visualization-editor-section {
+ margin-bottom: 15px;
+}
diff --git a/viz-lib/src/components/visualizations/editor/Section.tsx b/viz-lib/src/components/visualizations/editor/Section.tsx
new file mode 100644
index 000000000..56816741d
--- /dev/null
+++ b/viz-lib/src/components/visualizations/editor/Section.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import cx from "classnames";
+
+import "./Section.less";
+
+type OwnSectionTitleProps = {
+ className?: string;
+ children?: React.ReactNode;
+};
+
+type SectionTitleProps = OwnSectionTitleProps & typeof SectionTitle.defaultProps;
+
+// @ts-expect-error ts-migrate(2700) FIXME: Rest types may only be created from object types.
+function SectionTitle({ className, children, ...props }: SectionTitleProps) {
+ if (!children) {
+ return null;
+ }
+
+ return (
+
+ {children}
+
+ );
+}
+
+SectionTitle.defaultProps = {
+ className: null,
+ children: null,
+};
+
+type OwnSectionProps = {
+ className?: string;
+ children?: React.ReactNode;
+};
+
+type SectionProps = OwnSectionProps & typeof Section.defaultProps;
+
+// @ts-expect-error ts-migrate(2700) FIXME: Rest types may only be created from object types.
+export default function Section({ className, children, ...props }: SectionProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+Section.defaultProps = {
+ className: null,
+ children: null,
+};
+
+Section.Title = SectionTitle;
diff --git a/viz-lib/src/components/visualizations/editor/Switch.less b/viz-lib/src/components/visualizations/editor/Switch.less
new file mode 100644
index 000000000..fa8376574
--- /dev/null
+++ b/viz-lib/src/components/visualizations/editor/Switch.less
@@ -0,0 +1,8 @@
+.switch-with-label {
+ display: flex;
+ align-items: center;
+
+ .switch-text {
+ margin-left: 10px;
+ }
+}
diff --git a/viz-lib/src/components/visualizations/editor/Switch.tsx b/viz-lib/src/components/visualizations/editor/Switch.tsx
new file mode 100644
index 000000000..7ba6003c3
--- /dev/null
+++ b/viz-lib/src/components/visualizations/editor/Switch.tsx
@@ -0,0 +1,44 @@
+import React, { useMemo } from "react";
+import AntSwitch from "antd/lib/switch";
+import Typography from "antd/lib/typography";
+
+import "./Switch.less";
+
+type OwnProps = {
+ id?: string;
+ disabled?: boolean;
+ children?: React.ReactNode;
+};
+
+type Props = OwnProps & typeof Switch.defaultProps;
+
+// @ts-expect-error ts-migrate(2700) FIXME: Rest types may only be created from object types.
+export default function Switch({ id, children, disabled, ...props }: Props) {
+ const fallbackId = useMemo(
+ () =>
+ `visualization-editor-control-${Math.random()
+ .toString(36)
+ .substr(2, 10)}`,
+ []
+ );
+ id = id || fallbackId;
+
+ if (children) {
+ return (
+
+
+ {children}
+
+
+ );
+ }
+
+ return
+ {map(tabs, ({ key, title, component: Component }) => (
+ {isFunction(title) ? title(options) : title}}>
+
+ ))}
+
+ );
+}
+
+TabbedEditor.defaultProps = {
+ tabs: [],
+};
+
+export default function createTabbedEditor(tabs: any) {
+ return function TabbedEditorWrapper(props: any) {
+ return
+
+ {label}
+
+ {children}
+
+ );
+ }
+
+ if (layout === "horizontal" && label) {
+ return (
+
+
+
+ {label}
+
+
+ {children}
+
+ );
+ }
+
+ return children;
+}
+
+ControlLabel.defaultProps = {
+ layout: "vertical",
+ label: null,
+ disabled: false,
+ children: null,
+};
+
+export default function withControlLabel(WrappedControl: any) {
+ // eslint-disable-next-line react/prop-types
+ function ControlWrapper({ className, id, layout, label, labelProps, disabled, ...props }: any) {
+ const fallbackId = useMemo(
+ () =>
+ `visualization-editor-control-${Math.random()
+ .toString(36)
+ .substr(2, 10)}`,
+ []
+ );
+ labelProps = {
+ ...labelProps,
+ htmlFor: id || fallbackId,
+ };
+
+ return (
+
+ {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'Element' is not assignable to type 'null | u... Remove this comment to see the full error message */}
+
+ );
+ }
+
+ // Copy static methods from `WrappedComponent`
+ hoistNonReactStatics(ControlWrapper, WrappedControl);
+
+ return ControlWrapper;
+}
diff --git a/viz-lib/src/index.ts b/viz-lib/src/index.ts
new file mode 100644
index 000000000..f75ca6d8b
--- /dev/null
+++ b/viz-lib/src/index.ts
@@ -0,0 +1,8 @@
+export * from "./visualizations";
+export * from "./visualizations/visualizationsSettings";
+export { VisualizationType } from "./visualizations/prop-types";
+export {
+ default as registeredVisualizations,
+ getDefaultVisualization,
+ newVisualization,
+} from "./visualizations/registeredVisualizations";
diff --git a/viz-lib/src/lib/chooseTextColorForBackground.ts b/viz-lib/src/lib/chooseTextColorForBackground.ts
new file mode 100644
index 000000000..94e35e647
--- /dev/null
+++ b/viz-lib/src/lib/chooseTextColorForBackground.ts
@@ -0,0 +1,11 @@
+import { maxBy } from "lodash";
+import chroma from "chroma-js";
+
+export default function chooseTextColorForBackground(backgroundColor: any, textColors = ["#ffffff", "#333333"]) {
+ try {
+ backgroundColor = chroma(backgroundColor);
+ return maxBy(textColors, color => chroma.contrast(backgroundColor, color));
+ } catch (e) {
+ return null;
+ }
+}
diff --git a/viz-lib/src/lib/hooks/useMemoWithDeepCompare.ts b/viz-lib/src/lib/hooks/useMemoWithDeepCompare.ts
new file mode 100644
index 000000000..a42adfe17
--- /dev/null
+++ b/viz-lib/src/lib/hooks/useMemoWithDeepCompare.ts
@@ -0,0 +1,12 @@
+import { isEqual } from "lodash";
+import { useMemo, useRef } from "react";
+
+export default function useMemoWithDeepCompare(create: any, inputs: any) {
+ const valueRef = useRef();
+ const value = useMemo(create, inputs);
+ if (!isEqual(value, valueRef.current)) {
+ // @ts-expect-error ts-migrate(2322) FIXME: Type 'unknown' is not assignable to type 'undefine... Remove this comment to see the full error message
+ valueRef.current = value;
+ }
+ return valueRef.current;
+}
diff --git a/viz-lib/src/lib/referenceCountingCache.ts b/viz-lib/src/lib/referenceCountingCache.ts
new file mode 100644
index 000000000..778acff2e
--- /dev/null
+++ b/viz-lib/src/lib/referenceCountingCache.ts
@@ -0,0 +1,46 @@
+import { each, debounce } from "lodash";
+
+export default function createReferenceCountingCache({ cleanupDelay = 2000 } = {}) {
+ const items = {};
+
+ const cleanup = debounce(() => {
+ each(items, (item, key) => {
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'refCount' does not exist on type 'never'... Remove this comment to see the full error message
+ if (item.refCount <= 0) {
+ // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+ delete items[key];
+ }
+ });
+ }, cleanupDelay);
+
+ function get(key: any, getter: any) {
+ // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+ if (!items[key]) {
+ // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+ items[key] = {
+ value: getter(),
+ refCount: 0,
+ };
+ }
+ // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+ const item = items[key];
+ item.refCount += 1;
+ return item.value;
+ }
+
+ function release(key: any) {
+ // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+ if (items[key]) {
+ // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+ const item = items[key];
+ if (item.refCount > 0) {
+ item.refCount -= 1;
+ if (item.refCount <= 0) {
+ cleanup();
+ }
+ }
+ }
+ }
+
+ return { get, release };
+}
diff --git a/viz-lib/src/lib/utils.ts b/viz-lib/src/lib/utils.ts
new file mode 100644
index 000000000..ffca8731a
--- /dev/null
+++ b/viz-lib/src/lib/utils.ts
@@ -0,0 +1,43 @@
+import moment from "moment";
+import { visualizationsSettings } from "@/visualizations/visualizationsSettings";
+
+function formatDateTime(value: any) {
+ if (!value) {
+ return "";
+ }
+
+ const parsed = moment(value);
+ if (!parsed.isValid()) {
+ return "-";
+ }
+
+ return parsed.format(visualizationsSettings.dateTimeFormat);
+}
+
+function formatDate(value: any) {
+ if (!value) {
+ return "";
+ }
+
+ const parsed = moment(value);
+ if (!parsed.isValid()) {
+ return "-";
+ }
+
+ return parsed.format(visualizationsSettings.dateFormat);
+}
+
+export function formatColumnValue(value: any, columnType = null) {
+ if (moment.isMoment(value)) {
+ if (columnType === "date") {
+ return formatDate(value);
+ }
+ return formatDateTime(value);
+ }
+
+ if (typeof value === "boolean") {
+ return value.toString();
+ }
+
+ return value;
+}
diff --git a/viz-lib/src/lib/value-format.tsx b/viz-lib/src/lib/value-format.tsx
new file mode 100644
index 000000000..96693d2d3
--- /dev/null
+++ b/viz-lib/src/lib/value-format.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import ReactDOMServer from "react-dom/server";
+import moment from "moment/moment";
+import numeral from "numeral";
+import { isString, isArray, isUndefined, isFinite, isNil, toString } from "lodash";
+import { visualizationsSettings } from "@/visualizations/visualizationsSettings";
+
+numeral.options.scalePercentBy100 = false;
+
+// eslint-disable-next-line
+const urlPattern = /(^|[\s\n]|)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
+
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+export function createTextFormatter(highlightLinks: any) {
+ if (highlightLinks) {
+ return (value: any) => {
+ if (isString(value)) {
+ const Link = visualizationsSettings.LinkComponent;
+ value = value.replace(urlPattern, (unused, prefix, href) => {
+ const link = ReactDOMServer.renderToStaticMarkup(
+
+ {addonBefore}
+ {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
+
Error while rendering visualization. }>
+
+
+
+ {addonAfter}
+
+ {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
+
+
+ {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
+
+
+ );
+}
+
+Editor.propTypes = EditorPropTypes;
diff --git a/viz-lib/src/visualizations/box-plot/Renderer.tsx b/viz-lib/src/visualizations/box-plot/Renderer.tsx
new file mode 100644
index 000000000..4abc9ccff
--- /dev/null
+++ b/viz-lib/src/visualizations/box-plot/Renderer.tsx
@@ -0,0 +1,205 @@
+import { map, each } from "lodash";
+import d3 from "d3";
+import React, { useState, useEffect } from "react";
+import resizeObserver from "@/services/resizeObserver";
+import { RendererPropTypes } from "@/visualizations/prop-types";
+import box from "./d3box";
+import "./renderer.less";
+
+function calcIqr(k: any) {
+ return (d: any) => {
+ const q1 = d.quartiles[0];
+ const q3 = d.quartiles[2];
+ const iqr = (q3 - q1) * k;
+
+ let i = -1;
+ let j = d.length;
+
+ i += 1;
+ while (d[i] < q1 - iqr) {
+ i += 1;
+ }
+
+ j -= 1;
+ while (d[j] > q3 + iqr) {
+ j -= 1;
+ }
+
+ return [i, j];
+ };
+}
+
+function render(container: any, data: any, { xAxisLabel, yAxisLabel }: any) {
+ container = d3.select(container);
+
+ const containerBounds = container.node().getBoundingClientRect();
+ const containerWidth = Math.floor(containerBounds.width);
+ const containerHeight = Math.floor(containerBounds.height);
+
+ const margin = {
+ top: 10,
+ right: 50,
+ bottom: 40,
+ left: 50,
+ inner: 25,
+ };
+ const width = containerWidth - margin.right - margin.left;
+ const height = containerHeight - margin.top - margin.bottom;
+
+ let min = Infinity;
+ let max = -Infinity;
+ const mydata: any = [];
+ let value = 0;
+ let d = [];
+
+ const columns = map(data.columns, col => col.name);
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'scale' does not exist on type 'typeof im... Remove this comment to see the full error message
+ const xscale = d3.scale
+ .ordinal()
+ .domain(columns)
+ .rangeBands([0, containerWidth - margin.left - margin.right]);
+
+ let boxWidth;
+ if (columns.length > 1) {
+ boxWidth = Math.min(xscale(columns[1]), 120.0);
+ } else {
+ boxWidth = 120.0;
+ }
+ margin.inner = boxWidth / 3.0;
+
+ each(columns, (column, i) => {
+ d = mydata[i] = [];
+ each(data.rows, row => {
+ value = row[column];
+ d.push(value);
+ if (value > max) max = Math.ceil(value);
+ if (value < min) min = Math.floor(value);
+ });
+ });
+
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'scale' does not exist on type 'typeof im... Remove this comment to see the full error message
+ const yscale = d3.scale
+ .linear()
+ .domain([min * 0.99, max * 1.01])
+ .range([height, 0]);
+
+ const chart = box()
+ .whiskers(calcIqr(1.5))
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'width' does not exist on type '{ (g: any... Remove this comment to see the full error message
+ .width(boxWidth - 2 * margin.inner)
+ .height(height)
+ .domain([min * 0.99, max * 1.01]);
+ const xAxis = d3.svg
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'axis' does not exist on type '(url: stri... Remove this comment to see the full error message
+ .axis()
+ .scale(xscale)
+ .orient("bottom");
+
+ const yAxis = d3.svg
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'axis' does not exist on type '(url: stri... Remove this comment to see the full error message
+ .axis()
+ .scale(yscale)
+ .orient("left");
+
+ const xLines = d3.svg
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'axis' does not exist on type '(url: stri... Remove this comment to see the full error message
+ .axis()
+ .scale(xscale)
+ .tickSize(height)
+ .orient("bottom");
+
+ const yLines = d3.svg
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'axis' does not exist on type '(url: stri... Remove this comment to see the full error message
+ .axis()
+ .scale(yscale)
+ .tickSize(width)
+ .orient("right");
+
+ function barOffset(i: any) {
+ return xscale(columns[i]) + (xscale(columns[1]) - margin.inner) / 2.0;
+ }
+
+ container.selectAll("*").remove();
+
+ const svg = container
+ .append("svg")
+ .attr("width", containerWidth)
+ .attr("height", height + margin.bottom + margin.top);
+
+ const plot = svg
+ .append("g")
+ .attr("width", containerWidth - margin.left - margin.right)
+ .attr("transform", `translate(${margin.left},${margin.top})`);
+
+ svg
+ .append("text")
+ .attr("class", "box")
+ .attr("x", containerWidth / 2.0)
+ .attr("text-anchor", "middle")
+ .attr("y", height + margin.bottom)
+ .text(xAxisLabel);
+
+ svg
+ .append("text")
+ .attr("class", "box")
+ .attr("transform", `translate(10,${(height + margin.top + margin.bottom) / 2.0})rotate(-90)`)
+ .attr("text-anchor", "middle")
+ .text(yAxisLabel);
+
+ plot
+ .append("rect")
+ .attr("class", "grid-background")
+ .attr("width", width)
+ .attr("height", height);
+
+ plot
+ .append("g")
+ .attr("class", "grid")
+ .call(yLines);
+
+ plot
+ .append("g")
+ .attr("class", "grid")
+ .call(xLines);
+
+ plot
+ .append("g")
+ .attr("class", "x axis")
+ .attr("transform", `translate(0,${height})`)
+ .call(xAxis);
+
+ plot
+ .append("g")
+ .attr("class", "y axis")
+ .call(yAxis);
+
+ plot
+ .selectAll(".box")
+ .data(mydata)
+ .enter()
+ .append("g")
+ .attr("class", "box")
+ .attr("width", boxWidth)
+ .attr("height", height)
+ .attr("transform", (_: any, i: any) => `translate(${barOffset(i)},${0})`)
+ .call(chart);
+}
+
+export default function Renderer({ data, options }: any) {
+ const [container, setContainer] = useState(null);
+
+ useEffect(() => {
+ if (container) {
+ render(container, data, options);
+ const unwatch = resizeObserver(container, () => {
+ render(container, data, options);
+ });
+ return unwatch;
+ }
+ }, [container, data, options]);
+
+ // @ts-expect-error ts-migrate(2322) FIXME: Type 'Dispatch>' is not assig... Remove this comment to see the full error message
+ return
;
+}
+
+Renderer.propTypes = RendererPropTypes;
diff --git a/viz-lib/src/visualizations/box-plot/d3box.ts b/viz-lib/src/visualizations/box-plot/d3box.ts
new file mode 100644
index 000000000..c5f9eae5d
--- /dev/null
+++ b/viz-lib/src/visualizations/box-plot/d3box.ts
@@ -0,0 +1,340 @@
+/* eslint-disable */
+// Inspired by http://informationandvisualization.de/blog/box-plot
+function box() {
+ let width = 1,
+ height = 1,
+ duration = 0,
+ domain: any = null,
+ value = Number,
+ whiskers = boxWhiskers,
+ quartiles = boxQuartiles,
+ tickFormat: any = null;
+
+ // For each small multiple…
+ function box(g: any) {
+ g.each(function(d: any, i: any) {
+ d = d.map(value).sort(d3.ascending);
+ // @ts-expect-error ts-migrate(2683) FIXME: 'this' implicitly has type 'any' because it does n... Remove this comment to see the full error message
+ let g = d3.select(this),
+ n = d.length,
+ min = d[0],
+ max = d[n - 1];
+
+ // Compute quartiles. Must return exactly 3 elements.
+ const quartileData = (d.quartiles = quartiles(d));
+
+ // Compute whiskers. Must return exactly 2 elements, or null.
+ // @ts-expect-error ts-migrate(2683) FIXME: 'this' implicitly has type 'any' because it does n... Remove this comment to see the full error message
+ let whiskerIndices = whiskers && whiskers.call(this, d, i),
+ whiskerData = whiskerIndices && whiskerIndices.map(i => d[i]);
+
+ // Compute outliers. If no whiskers are specified, all data are "outliers".
+ // We compute the outliers as indices, so that we can join across transitions!
+ const outlierIndices = whiskerIndices
+ ? d3.range(0, whiskerIndices[0]).concat(d3.range(whiskerIndices[1] + 1, n))
+ : d3.range(n);
+
+ // Compute the new x-scale.
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'scale' does not exist on type 'typeof im... Remove this comment to see the full error message
+ const x1 = d3.scale
+ .linear()
+ // @ts-expect-error ts-migrate(2683) FIXME: 'this' implicitly has type 'any' because it does n... Remove this comment to see the full error message
+ .domain((domain && domain.call(this, d, i)) || [min, max])
+ .range([height, 0]);
+
+ // Retrieve the old x-scale, if this is an update.
+ const x0 =
+ // @ts-expect-error ts-migrate(2683) FIXME: 'this' implicitly has type 'any' because it does n... Remove this comment to see the full error message
+ this.__chart__ ||
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'scale' does not exist on type 'typeof im... Remove this comment to see the full error message
+ d3.scale
+ .linear()
+ .domain([0, Infinity])
+ .range(x1.range());
+
+ // Stash the new scale.
+ // @ts-expect-error ts-migrate(2683) FIXME: 'this' implicitly has type 'any' because it does n... Remove this comment to see the full error message
+ this.__chart__ = x1;
+
+ // Note: the box, median, and box tick elements are fixed in number,
+ // so we only have to handle enter and update. In contrast, the outliers
+ // and other elements are variable, so we need to exit them! Variable
+ // elements also fade in and out.
+
+ // Update center line: the vertical line spanning the whiskers.
+ const center = g.selectAll("line.center").data(whiskerData ? [whiskerData] : []);
+
+ center
+ .enter()
+ .insert("line", "rect")
+ .attr("class", "center")
+ .attr("x1", width / 2)
+ .attr("y1", d => x0(d[0]))
+ .attr("x2", width / 2)
+ .attr("y2", d => x0(d[1]))
+ .style("opacity", 1e-6)
+ .transition()
+ .duration(duration)
+ .style("opacity", 1)
+ .attr("y1", d => x1(d[0]))
+ .attr("y2", d => x1(d[1]));
+
+ center
+ .transition()
+ .duration(duration)
+ .style("opacity", 1)
+ .attr("y1", d => x1(d[0]))
+ .attr("y2", d => x1(d[1]));
+
+ center
+ .exit()
+ .transition()
+ .duration(duration)
+ .style("opacity", 1e-6)
+ // @ts-expect-error ts-migrate(2571) FIXME: Object is of type 'unknown'.
+ .attr("y1", d => x1(d[0]))
+ // @ts-expect-error ts-migrate(2571) FIXME: Object is of type 'unknown'.
+ .attr("y2", d => x1(d[1]))
+ .remove();
+
+ // Update innerquartile box.
+ const box = g.selectAll("rect.box").data([quartileData]);
+
+ box
+ .enter()
+ .append("rect")
+ .attr("class", "box")
+ .attr("x", 0)
+ .attr("y", d => x0(d[2]))
+ .attr("width", width)
+ .attr("height", d => x0(d[0]) - x0(d[2]))
+ .transition()
+ .duration(duration)
+ .attr("y", d => x1(d[2]))
+ .attr("height", d => x1(d[0]) - x1(d[2]));
+
+ box
+ .transition()
+ .duration(duration)
+ .attr("y", d => x1(d[2]))
+ .attr("height", d => x1(d[0]) - x1(d[2]));
+
+ box.exit().remove();
+
+ // Update median line.
+ const medianLine = g.selectAll("line.median").data([quartileData[1]]);
+
+ medianLine
+ .enter()
+ .append("line")
+ .attr("class", "median")
+ .attr("x1", 0)
+ .attr("y1", x0)
+ .attr("x2", width)
+ .attr("y2", x0)
+ .transition()
+ .duration(duration)
+ .attr("y1", x1)
+ .attr("y2", x1);
+
+ medianLine
+ .transition()
+ .duration(duration)
+ .attr("y1", x1)
+ .attr("y2", x1);
+
+ medianLine.exit().remove();
+
+ // Update whiskers.
+ const whisker = g.selectAll("line.whisker").data(whiskerData || []);
+
+ whisker
+ .enter()
+ .insert("line", "circle, text")
+ .attr("class", "whisker")
+ .attr("x1", 0)
+ .attr("y1", x0)
+ .attr("x2", width)
+ .attr("y2", x0)
+ .style("opacity", 1e-6)
+ .transition()
+ .duration(duration)
+ .attr("y1", x1)
+ .attr("y2", x1)
+ .style("opacity", 1);
+
+ whisker
+ .transition()
+ .duration(duration)
+ .attr("y1", x1)
+ .attr("y2", x1)
+ .style("opacity", 1);
+
+ whisker
+ .exit()
+ .transition()
+ .duration(duration)
+ .attr("y1", x1)
+ .attr("y2", x1)
+ .style("opacity", 1e-6)
+ .remove();
+
+ // Update outliers.
+ const outlier = g.selectAll("circle.outlier").data(outlierIndices, Number);
+
+ outlier
+ .enter()
+ .insert("circle", "text")
+ .attr("class", "outlier")
+ .attr("r", 5)
+ .attr("cx", width / 2)
+ .attr("cy", i => x0(d[i]))
+ .style("opacity", 1e-6)
+ .transition()
+ .duration(duration)
+ .attr("cy", i => x1(d[i]))
+ .style("opacity", 1);
+
+ outlier
+ .transition()
+ .duration(duration)
+ .attr("cy", i => x1(d[i]))
+ .style("opacity", 1);
+
+ outlier
+ .exit()
+ .transition()
+ .duration(duration)
+ // @ts-expect-error ts-migrate(2538) FIXME: Type 'unknown' cannot be used as an index type.
+ .attr("cy", i => x1(d[i]))
+ .style("opacity", 1e-6)
+ .remove();
+
+ // Compute the tick format.
+ const format = tickFormat || x1.tickFormat(8);
+
+ // Update box ticks.
+ const boxTick = g.selectAll("text.box").data(quartileData);
+
+ boxTick
+ .enter()
+ .append("text")
+ .attr("class", "box")
+ .attr("dy", ".3em")
+ .attr("dx", (d, i) => (i & 1 ? 6 : -6))
+ .attr("x", (d, i) => (i & 1 ? width : 0))
+ .attr("y", x0)
+ .attr("text-anchor", (d, i) => (i & 1 ? "start" : "end"))
+ .text(format)
+ .transition()
+ .duration(duration)
+ .attr("y", x1);
+
+ boxTick
+ .transition()
+ .duration(duration)
+ .text(format)
+ .attr("y", x1);
+
+ boxTick.exit().remove();
+
+ // Update whisker ticks. These are handled separately from the box
+ // ticks because they may or may not exist, and we want don't want
+ // to join box ticks pre-transition with whisker ticks post-.
+ const whiskerTick = g.selectAll("text.whisker").data(whiskerData || []);
+
+ whiskerTick
+ .enter()
+ .append("text")
+ .attr("class", "whisker")
+ .attr("dy", ".3em")
+ .attr("dx", 6)
+ .attr("x", width)
+ .attr("y", x0)
+ .text(format)
+ .style("opacity", 1e-6)
+ .transition()
+ .duration(duration)
+ .attr("y", x1)
+ .style("opacity", 1);
+
+ whiskerTick
+ .transition()
+ .duration(duration)
+ .text(format)
+ .attr("y", x1)
+ .style("opacity", 1);
+
+ whiskerTick
+ .exit()
+ .transition()
+ .duration(duration)
+ .attr("y", x1)
+ .style("opacity", 1e-6)
+ .remove();
+ });
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'flush' does not exist on type '(callback... Remove this comment to see the full error message
+ d3.timer.flush();
+ }
+
+ box.width = function(x: any) {
+ if (!arguments.length) return width;
+ width = x;
+ return box;
+ };
+
+ box.height = function(x: any) {
+ if (!arguments.length) return height;
+ height = x;
+ return box;
+ };
+
+ box.tickFormat = function(x: any) {
+ if (!arguments.length) return tickFormat;
+ tickFormat = x;
+ return box;
+ };
+
+ box.duration = function(x: any) {
+ if (!arguments.length) return duration;
+ duration = x;
+ return box;
+ };
+
+ box.domain = function(x: any) {
+ if (!arguments.length) return domain;
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'functor' does not exist on type 'typeof ... Remove this comment to see the full error message
+ domain = x == null ? x : d3.functor(x);
+ return box;
+ };
+
+ box.value = function(x: any) {
+ if (!arguments.length) return value;
+ value = x;
+ return box;
+ };
+
+ box.whiskers = function(x: any) {
+ if (!arguments.length) return whiskers;
+ whiskers = x;
+ return box;
+ };
+
+ box.quartiles = function(x: any) {
+ if (!arguments.length) return quartiles;
+ quartiles = x;
+ return box;
+ };
+
+ return box;
+}
+
+function boxWhiskers(d: any) {
+ return [0, d.length - 1];
+}
+
+function boxQuartiles(d: any) {
+ return [d3.quantile(d, 0.25), d3.quantile(d, 0.5), d3.quantile(d, 0.75)];
+}
+
+export default box;
diff --git a/viz-lib/src/visualizations/box-plot/index.ts b/viz-lib/src/visualizations/box-plot/index.ts
new file mode 100644
index 000000000..bbe30df7e
--- /dev/null
+++ b/viz-lib/src/visualizations/box-plot/index.ts
@@ -0,0 +1,16 @@
+import Renderer from "./Renderer";
+import Editor from "./Editor";
+
+export default {
+ type: "BOXPLOT",
+ name: "Boxplot (Deprecated)",
+ isDeprecated: true,
+ getOptions: (options: any) => ({
+ ...options,
+ }),
+ Renderer,
+ Editor,
+
+ defaultRows: 8,
+ minRows: 5,
+};
diff --git a/viz-lib/src/visualizations/box-plot/renderer.less b/viz-lib/src/visualizations/box-plot/renderer.less
new file mode 100644
index 000000000..385ca7b48
--- /dev/null
+++ b/viz-lib/src/visualizations/box-plot/renderer.less
@@ -0,0 +1,4 @@
+.box-plot-deprecated-visualization-container {
+ overflow: hidden;
+ height: 500px;
+}
diff --git a/viz-lib/src/visualizations/chart/Editor/AxisSettings.tsx b/viz-lib/src/visualizations/chart/Editor/AxisSettings.tsx
new file mode 100644
index 000000000..84c7de2b9
--- /dev/null
+++ b/viz-lib/src/visualizations/chart/Editor/AxisSettings.tsx
@@ -0,0 +1,125 @@
+import { isString, isObject, isFinite, isNumber, merge } from "lodash";
+import React from "react";
+import { useDebouncedCallback } from "use-debounce";
+import * as Grid from "antd/lib/grid";
+import { Section, Select, Input, InputNumber } from "@/components/visualizations/editor";
+
+function toNumber(value: any) {
+ value = isNumber(value) ? value : parseFloat(value);
+ return isFinite(value) ? value : null;
+}
+
+type OwnProps = {
+ id: string;
+ options: {
+ type: string;
+ title?: {
+ text?: string;
+ };
+ rangeMin?: number;
+ rangeMax?: number;
+ };
+ features?: {
+ autoDetectType?: boolean;
+ range?: boolean;
+ };
+ onChange?: (...args: any[]) => any;
+};
+
+type Props = OwnProps & typeof AxisSettings.defaultProps;
+
+export default function AxisSettings({ id, options, features, onChange }: Props) {
+ function optionsChanged(newOptions: any) {
+ onChange(merge({}, options, newOptions));
+ }
+
+ const [handleNameChange] = useDebouncedCallback(text => {
+ const title = isString(text) && text !== "" ? { text } : null;
+ optionsChanged({ title });
+ }, 200);
+
+ const [handleMinMaxChange] = useDebouncedCallback(opts => optionsChanged(opts), 200);
+
+ return (
+
+ {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
+
+ optionsChanged({ type })}>
+ {features.autoDetectType && (
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message
+
+ Auto Detect
+ {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+
+ )}
+ {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+
+ Datetime
+ {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+
+ {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+
+ Linear
+ {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+
+ {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+
+ Logarithmic
+ {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+
+ {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+
+ Category
+ {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+
+
+
+
+ {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
+
+
+ {features.range && (
+ // @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message
+
+ {/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element[]; gutter: number; type:... Remove this comment to see the full error message */}
+
+
+ handleMinMaxChange({ rangeMin: toNumber(value) })}
+ />
+
+
+ handleMinMaxChange({ rangeMax: toNumber(value) })}
+ />
+
+
+
+ )}
+
+ );
+}
+
+AxisSettings.defaultProps = {
+ features: {},
+ onChange: () => {},
+};
diff --git a/viz-lib/src/visualizations/chart/Editor/ChartTypeSelect.tsx b/viz-lib/src/visualizations/chart/Editor/ChartTypeSelect.tsx
new file mode 100644
index 000000000..e54f22964
--- /dev/null
+++ b/viz-lib/src/visualizations/chart/Editor/ChartTypeSelect.tsx
@@ -0,0 +1,54 @@
+import { filter, includes, map } from "lodash";
+import React, { useMemo } from "react";
+import { Select } from "@/components/visualizations/editor";
+import { visualizationsSettings } from "@/visualizations/visualizationsSettings";
+
+const allChartTypes = [
+ { type: "line", name: "Line", icon: "line-chart" },
+ { type: "column", name: "Bar", icon: "bar-chart" },
+ { type: "area", name: "Area", icon: "area-chart" },
+ { type: "pie", name: "Pie", icon: "pie-chart" },
+ { type: "scatter", name: "Scatter", icon: "circle-o" },
+ { type: "bubble", name: "Bubble", icon: "circle-o" },
+ { type: "heatmap", name: "Heatmap", icon: "th" },
+ { type: "box", name: "Box", icon: "square-o" },
+];
+
+type OwnProps = {
+ hiddenChartTypes?: any[]; // TODO: PropTypes.oneOf(map(allChartTypes, "type"))
+};
+
+type Props = OwnProps & typeof ChartTypeSelect.defaultProps;
+
+export default function ChartTypeSelect({ hiddenChartTypes, ...props }: Props) {
+ const chartTypes = useMemo(() => {
+ const result = [...allChartTypes];
+
+ if (visualizationsSettings.allowCustomJSVisualizations) {
+ result.push({ type: "custom", name: "Custom", icon: "code" });
+ }
+
+ if (hiddenChartTypes.length > 0) {
+ return filter(result, ({ type }) => !includes(hiddenChartTypes, type));
+ }
+
+ return result;
+ }, []);
+
+ return (
+
+ {map(chartTypes, ({ type, name, icon }) => (
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message
+
+
+ ))}
+
+ );
+}
+
+ChartTypeSelect.defaultProps = {
+ hiddenChartTypes: [],
+};
diff --git a/viz-lib/src/visualizations/chart/Editor/ColorsSettings.test.tsx b/viz-lib/src/visualizations/chart/Editor/ColorsSettings.test.tsx
new file mode 100644
index 000000000..393ae1bf3
--- /dev/null
+++ b/viz-lib/src/visualizations/chart/Editor/ColorsSettings.test.tsx
@@ -0,0 +1,124 @@
+import { after } from "lodash";
+import React from "react";
+import enzyme from "enzyme";
+
+import getOptions from "../getOptions";
+import ColorsSettings from "./ColorsSettings";
+
+function findByTestID(wrapper: any, testId: any) {
+ return wrapper.find(`[data-test="${testId}"]`);
+}
+
+function mount(options: any, done: any) {
+ options = getOptions(options);
+ return enzyme.mount(
+ {
+ expect(changedOptions).toMatchSnapshot();
+ done();
+ }}
+ />
+ );
+}
+
+describe("Visualizations -> Chart -> Editor -> Colors Settings", () => {
+ describe("for pie", () => {
+ test("Changes series color", done => {
+ const el = mount(
+ {
+ globalSeriesType: "pie",
+ columnMapping: { a: "x", b: "y" },
+ },
+ done
+ );
+
+ findByTestID(el, "Chart.Series.v.Color")
+ .find(".color-picker-trigger")
+ .last()
+ .simulate("click");
+ findByTestID(el, "ColorPicker")
+ .last()
+ .find("input")
+ .simulate("change", { target: { value: "red" } });
+ });
+ });
+
+ describe("for heatmap", () => {
+ test("Changes color scheme", done => {
+ const el = mount(
+ {
+ globalSeriesType: "heatmap",
+ columnMapping: { a: "x", b: "y" },
+ },
+ done
+ );
+
+ findByTestID(el, "Chart.Colors.Heatmap.ColorScheme")
+ .last()
+ .simulate("mouseDown");
+ findByTestID(el, "Chart.Colors.Heatmap.ColorScheme.Blues")
+ .last()
+ .simulate("click");
+ });
+
+ test("Sets custom color scheme", done => {
+ const el = mount(
+ {
+ globalSeriesType: "heatmap",
+ columnMapping: { a: "x", b: "y" },
+ colorScheme: "Custom...",
+ },
+ after(2, done)
+ ); // we will perform 2 actions, so call `done` after all of them completed
+
+ findByTestID(el, "Chart.Colors.Heatmap.MinColor")
+ .find(".color-picker-trigger")
+ .last()
+ .simulate("click");
+ findByTestID(el, "ColorPicker")
+ .last()
+ .find("input")
+ .simulate("change", { target: { value: "yellow" } });
+
+ findByTestID(el, "Chart.Colors.Heatmap.MaxColor")
+ .find(".color-picker-trigger")
+ .last()
+ .simulate("click");
+ findByTestID(el, "ColorPicker")
+ .last()
+ .find("input")
+ .simulate("change", { target: { value: "red" } });
+ });
+ });
+
+ describe("for all except of pie and heatmap", () => {
+ test("Changes series color", done => {
+ const el = mount(
+ {
+ globalSeriesType: "column",
+ columnMapping: { a: "x", b: "y" },
+ },
+ done
+ );
+
+ findByTestID(el, "Chart.Series.b.Color")
+ .find(".color-picker-trigger")
+ .last()
+ .simulate("click");
+
+ findByTestID(el, "ColorPicker")
+ .last()
+ .find("input")
+ .simulate("change", { target: { value: "red" } });
+ });
+ });
+});
diff --git a/viz-lib/src/visualizations/chart/Editor/ColorsSettings.tsx b/viz-lib/src/visualizations/chart/Editor/ColorsSettings.tsx
new file mode 100644
index 000000000..cf2acb66c
--- /dev/null
+++ b/viz-lib/src/visualizations/chart/Editor/ColorsSettings.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { EditorPropTypes } from "@/visualizations/prop-types";
+
+import PieColorsSettings from "./PieColorsSettings";
+import HeatmapColorsSettings from "./HeatmapColorsSettings";
+import DefaultColorsSettings from "./DefaultColorsSettings";
+
+const components = {
+ pie: PieColorsSettings,
+ heatmap: HeatmapColorsSettings,
+};
+
+export default function ColorsSettings({ options, ...props }: any) {
+ // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+ const Component = components[options.globalSeriesType] || DefaultColorsSettings;
+ return
+ onChange(column || null, type)}>
+ {map(options, c => (
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message
+
+ {c}
+ {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+
+ ))}
+
+
+ );
+}
+
+ColumnMappingSelect.defaultProps = {
+ value: null,
+ availableColumns: [],
+ type: null,
+ onChange: () => {},
+};
+
+ColumnMappingSelect.MappingTypes = MappingTypes;
diff --git a/viz-lib/src/visualizations/chart/Editor/CustomChartSettings.tsx b/viz-lib/src/visualizations/chart/Editor/CustomChartSettings.tsx
new file mode 100644
index 000000000..f1916b8ce
--- /dev/null
+++ b/viz-lib/src/visualizations/chart/Editor/CustomChartSettings.tsx
@@ -0,0 +1,60 @@
+import { isNil, trimStart } from "lodash";
+import React from "react";
+import { Section, Switch, TextArea } from "@/components/visualizations/editor";
+import { EditorPropTypes } from "@/visualizations/prop-types";
+
+const defaultCustomCode = trimStart(`
+// Available variables are x, ys, element, and Plotly
+// Type console.log(x, ys); for more info about x and ys
+// To plot your graph call Plotly.plot(element, ...)
+// Plotly examples and docs: https://plot.ly/javascript/
+`);
+
+export default function CustomChartSettings({ options, onOptionsChange }: any) {
+ return (
+
+ {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
+
+
+
+## Getting Started
+
+* [Setting up Redash instance](https://redash.io/help/open-source/setup) (includes links to ready-made AWS/GCE images).
+* [Documentation](https://redash.io/help/).
+
+## Supported Data Sources
+
+Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help/data-sources/supported-data-sources). It can also be extended to support more. Below is a list of built-in sources:
+
+- Amazon Athena
+- Amazon CloudWatch / Insights
+- Amazon DynamoDB
+- Amazon Redshift
+- ArangoDB
+- Axibase Time Series Database
+- Apache Cassandra
+- ClickHouse
+- CockroachDB
+- Couchbase
+- CSV
+- Databricks
+- DB2 by IBM
+- Dgraph
+- Apache Drill
+- Apache Druid
+- Eccenca Corporate Memory
+- Elasticsearch
+- Exasol
+- Microsoft Excel
+- Firebolt
+- Databend
+- Google Analytics
+- Google BigQuery
+- Google Spreadsheets
+- Graphite
+- Greenplum
+- Apache Hive
+- Apache Impala
+- InfluxDB
+- IBM Netezza Performance Server
+- JIRA (JQL)
+- JSON
+- Apache Kylin
+- OmniSciDB (Formerly MapD)
+- MariaDB
+- MemSQL
+- Microsoft Azure Data Warehouse / Synapse
+- Microsoft Azure SQL Database
+- Microsoft Azure Data Explorer / Kusto
+- Microsoft SQL Server
+- MongoDB
+- MySQL
+- Oracle
+- Apache Phoenix
+- Apache Pinot
+- PostgreSQL
+- Presto
+- Prometheus
+- Python
+- Qubole
+- Rockset
+- Salesforce
+- ScyllaDB
+- Shell Scripts
+- Snowflake
+- SPARQL
+- SQLite
+- TiDB
+- TreasureData
+- Trino
+- Uptycs
+- Vertica
+- Yandex AppMetrrica
+- Yandex Metrica
+
+## Getting Help
+
+* Issues: https://github.com/getredash/redash/issues
+* Discussion Forum: https://github.com/getredash/redash/discussions/
+
+## Reporting Bugs and Contributing Code
+
+* Want to report a bug or request a feature? Please open [an issue](https://github.com/getredash/redash/issues/new).
+* Want to help us build **_Redash_**? Fork the project, edit in a [dev environment](https://redash.io/help-onpremise/dev/guide.html) and make a pull request. We need all the help we can get!
+
+## Security
+
+Please email security@redash.io to report any security vulnerabilities. We will acknowledge receipt of your vulnerability and strive to send you regular updates about our progress. If you're curious about the status of your disclosure please feel free to email us again. If you want to encrypt your disclosure email, you can use [this PGP key](https://keybase.io/arikfr/key.asc).
+
+## License
+
+BSD-2-Clause.
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 000000000..2bfe8d534
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,5 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+Please email security@redash.io to report any security vulnerabilities. We will acknowledge receipt of your vulnerability and strive to send you regular updates about our progress. If you're curious about the status of your disclosure please feel free to email us again. If you want to encrypt your disclosure email, you can use [this PGP key](https://keybase.io/arikfr/key.asc).
diff --git a/client/.babelrc b/client/.babelrc
new file mode 100644
index 000000000..e8b6be2c9
--- /dev/null
+++ b/client/.babelrc
@@ -0,0 +1,29 @@
+{
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "exclude": ["@babel/plugin-transform-async-to-generator", "@babel/plugin-transform-arrow-functions"],
+ "corejs": "2",
+ "useBuiltIns": "usage"
+ }
+ ],
+ "@babel/preset-react",
+ "@babel/preset-typescript"
+ ],
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-transform-object-assign",
+ [
+ "babel-plugin-transform-builtin-extend",
+ {
+ "globals": ["Error"]
+ }
+ ]
+ ],
+ "env": {
+ "test": {
+ "plugins": ["istanbul"]
+ }
+ }
+}
diff --git a/client/.eslintignore b/client/.eslintignore
new file mode 100644
index 000000000..013f6ab6e
--- /dev/null
+++ b/client/.eslintignore
@@ -0,0 +1,4 @@
+build/*.js
+dist
+config/*.js
+client/dist
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
new file mode 100644
index 000000000..d1bb2599a
--- /dev/null
+++ b/client/.eslintrc.js
@@ -0,0 +1,71 @@
+module.exports = {
+ root: true,
+ parser: "@typescript-eslint/parser",
+ extends: [
+ "react-app",
+ "plugin:compat/recommended",
+ "prettier",
+ "plugin:jsx-a11y/recommended",
+ // Remove any typescript-eslint rules that would conflict with prettier
+ "prettier/@typescript-eslint",
+ ],
+ plugins: ["jest", "compat", "no-only-tests", "@typescript-eslint", "jsx-a11y"],
+ settings: {
+ "import/resolver": "webpack",
+ },
+ env: {
+ browser: true,
+ node: true,
+ },
+ rules: {
+ // allow debugger during development
+ "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
+ "jsx-a11y/anchor-is-valid": [
+ // TMP
+ "off",
+ {
+ components: ["Link"],
+ aspects: ["noHref", "invalidHref", "preferButton"],
+ },
+ ],
+ "jsx-a11y/no-redundant-roles": "error",
+ "jsx-a11y/no-autofocus": "off",
+ "jsx-a11y/click-events-have-key-events": "off", // TMP
+ "jsx-a11y/no-static-element-interactions": "off", // TMP
+ "jsx-a11y/no-noninteractive-element-interactions": "off", // TMP
+ "no-console": ["warn", { allow: ["warn", "error"] }],
+ "no-restricted-imports": [
+ "error",
+ {
+ paths: [
+ {
+ name: "antd",
+ message: "Please use 'import XXX from antd/lib/XXX' import instead.",
+ },
+ {
+ name: "antd/lib",
+ message: "Please use 'import XXX from antd/lib/XXX' import instead.",
+ },
+ ],
+ },
+ ],
+ },
+ overrides: [
+ {
+ // Only run typescript-eslint on TS files
+ files: ["*.ts", "*.tsx", ".*.ts", ".*.tsx"],
+ extends: ["plugin:@typescript-eslint/recommended"],
+ rules: {
+ // Do not require functions (especially react components) to have explicit returns
+ "@typescript-eslint/explicit-function-return-type": "off",
+ // Do not require to type every import from a JS file to speed up development
+ "@typescript-eslint/no-explicit-any": "off",
+ // Do not complain about useless contructors in declaration files
+ "no-useless-constructor": "off",
+ "@typescript-eslint/no-useless-constructor": "error",
+ // Many API fields and generated types use camelcase
+ "@typescript-eslint/camelcase": "off",
+ },
+ },
+ ],
+};
diff --git a/client/.gitignore b/client/.gitignore
new file mode 100644
index 000000000..1521c8b76
--- /dev/null
+++ b/client/.gitignore
@@ -0,0 +1 @@
+dist
diff --git a/client/app/.eslintrc.js b/client/app/.eslintrc.js
new file mode 100644
index 000000000..85a37b82a
--- /dev/null
+++ b/client/app/.eslintrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+ extends: ["plugin:jest/recommended"],
+ plugins: ["jest"],
+ env: {
+ "jest/globals": true,
+ },
+ rules: {
+ "jest/no-focused-tests": "off",
+ },
+};
diff --git a/client/app/__tests__/enzyme_setup.js b/client/app/__tests__/enzyme_setup.js
new file mode 100644
index 000000000..6f413a40b
--- /dev/null
+++ b/client/app/__tests__/enzyme_setup.js
@@ -0,0 +1,4 @@
+import { configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+configure({ adapter: new Adapter() });
diff --git a/client/app/__tests__/mocks.js b/client/app/__tests__/mocks.js
new file mode 100644
index 000000000..d4025fbe8
--- /dev/null
+++ b/client/app/__tests__/mocks.js
@@ -0,0 +1,5 @@
+import MockDate from "mockdate";
+
+const date = new Date("2000-01-01T02:00:00.000");
+
+MockDate.set(date);
diff --git a/client/app/assets/css/login.css b/client/app/assets/css/login.css
new file mode 100644
index 000000000..cf46eefb0
--- /dev/null
+++ b/client/app/assets/css/login.css
@@ -0,0 +1,69 @@
+body {
+ padding-top: 0px !important;
+ background-color: #FFFFFF;
+}
+
+.logo-container {
+ background-color: #668899;
+ display: table;
+ width: 100%;
+ padding: 10px;
+}
+
+.content-container {
+ background-color: white;
+ display: table;
+ width: 100%;
+ padding: 10px;
+ height: calc(100vh - 116px);
+}
+
+@media (min-width: 992px) {
+ .content-container {
+ height: 100%;
+ width: 60%;
+ float: left;
+ }
+
+ .logo-container {
+ height: 100%;
+ width: 40%;
+ float: right;
+ }
+}
+
+.login-or {
+ position: relative;
+ font-size: 18px;
+ color: #aaa;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.span-or {
+ display: block;
+ position: absolute;
+ left: 50%;
+ top: -2px;
+ margin-left: -25px;
+ background-color: #fff;
+ width: 50px;
+ text-align: center;
+}
+
+.hr-or {
+ background-color: #cdcdcd;
+ height: 1px;
+ margin-top: 0px !important;
+ margin-bottom: 0px !important;
+}
+
+img.login-button {
+ width: 250px;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
diff --git a/client/app/assets/fonts/roboto/Roboto-Bold-webfont.eot b/client/app/assets/fonts/roboto/Roboto-Bold-webfont.eot
new file mode 100755
index 000000000..b73776ee3
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Bold-webfont.eot differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Bold-webfont.svg b/client/app/assets/fonts/roboto/Roboto-Bold-webfont.svg
new file mode 100755
index 000000000..43b5ed222
--- /dev/null
+++ b/client/app/assets/fonts/roboto/Roboto-Bold-webfont.svg
@@ -0,0 +1,593 @@
+
+
+
\ No newline at end of file
diff --git a/client/app/assets/fonts/roboto/Roboto-Bold-webfont.ttf b/client/app/assets/fonts/roboto/Roboto-Bold-webfont.ttf
new file mode 100755
index 000000000..1da72769a
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Bold-webfont.ttf differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Bold-webfont.woff b/client/app/assets/fonts/roboto/Roboto-Bold-webfont.woff
new file mode 100755
index 000000000..0c6994871
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Bold-webfont.woff differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Light-webfont.eot b/client/app/assets/fonts/roboto/Roboto-Light-webfont.eot
new file mode 100755
index 000000000..072cdc480
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Light-webfont.eot differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Light-webfont.svg b/client/app/assets/fonts/roboto/Roboto-Light-webfont.svg
new file mode 100755
index 000000000..db6a6171e
--- /dev/null
+++ b/client/app/assets/fonts/roboto/Roboto-Light-webfont.svg
@@ -0,0 +1,641 @@
+
+
+
\ No newline at end of file
diff --git a/client/app/assets/fonts/roboto/Roboto-Light-webfont.ttf b/client/app/assets/fonts/roboto/Roboto-Light-webfont.ttf
new file mode 100755
index 000000000..3b2fea0ac
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Light-webfont.ttf differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Light-webfont.woff b/client/app/assets/fonts/roboto/Roboto-Light-webfont.woff
new file mode 100755
index 000000000..cc534a381
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Light-webfont.woff differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Medium-webfont.eot b/client/app/assets/fonts/roboto/Roboto-Medium-webfont.eot
new file mode 100755
index 000000000..f9ad99566
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Medium-webfont.eot differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Medium-webfont.svg b/client/app/assets/fonts/roboto/Roboto-Medium-webfont.svg
new file mode 100755
index 000000000..4ce289dfa
--- /dev/null
+++ b/client/app/assets/fonts/roboto/Roboto-Medium-webfont.svg
@@ -0,0 +1,593 @@
+
+
+
\ No newline at end of file
diff --git a/client/app/assets/fonts/roboto/Roboto-Medium-webfont.ttf b/client/app/assets/fonts/roboto/Roboto-Medium-webfont.ttf
new file mode 100755
index 000000000..8aa64d823
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Medium-webfont.ttf differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Medium-webfont.woff b/client/app/assets/fonts/roboto/Roboto-Medium-webfont.woff
new file mode 100755
index 000000000..cd810ef92
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Medium-webfont.woff differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Regular-webfont.eot b/client/app/assets/fonts/roboto/Roboto-Regular-webfont.eot
new file mode 100755
index 000000000..9b5e8e413
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Regular-webfont.eot differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Regular-webfont.svg b/client/app/assets/fonts/roboto/Roboto-Regular-webfont.svg
new file mode 100755
index 000000000..de7d77fea
--- /dev/null
+++ b/client/app/assets/fonts/roboto/Roboto-Regular-webfont.svg
@@ -0,0 +1,621 @@
+
+
+
\ No newline at end of file
diff --git a/client/app/assets/fonts/roboto/Roboto-Regular-webfont.ttf b/client/app/assets/fonts/roboto/Roboto-Regular-webfont.ttf
new file mode 100755
index 000000000..44dd78d5e
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Regular-webfont.ttf differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Regular-webfont.woff b/client/app/assets/fonts/roboto/Roboto-Regular-webfont.woff
new file mode 100755
index 000000000..bfa05d53f
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Regular-webfont.woff differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Thin-webfont.eot b/client/app/assets/fonts/roboto/Roboto-Thin-webfont.eot
new file mode 100755
index 000000000..2284a3b3e
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Thin-webfont.eot differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Thin-webfont.svg b/client/app/assets/fonts/roboto/Roboto-Thin-webfont.svg
new file mode 100755
index 000000000..7394e3d0a
--- /dev/null
+++ b/client/app/assets/fonts/roboto/Roboto-Thin-webfont.svg
@@ -0,0 +1,631 @@
+
+
+
\ No newline at end of file
diff --git a/client/app/assets/fonts/roboto/Roboto-Thin-webfont.ttf b/client/app/assets/fonts/roboto/Roboto-Thin-webfont.ttf
new file mode 100755
index 000000000..18919f7a9
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Thin-webfont.ttf differ
diff --git a/client/app/assets/fonts/roboto/Roboto-Thin-webfont.woff b/client/app/assets/fonts/roboto/Roboto-Thin-webfont.woff
new file mode 100755
index 000000000..f10b831e8
Binary files /dev/null and b/client/app/assets/fonts/roboto/Roboto-Thin-webfont.woff differ
diff --git a/client/app/assets/images/avatar.svg b/client/app/assets/images/avatar.svg
new file mode 100644
index 000000000..18f40d3cf
--- /dev/null
+++ b/client/app/assets/images/avatar.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/client/app/assets/images/db-logos/Cassandra.png b/client/app/assets/images/db-logos/Cassandra.png
new file mode 100644
index 000000000..aba290072
Binary files /dev/null and b/client/app/assets/images/db-logos/Cassandra.png differ
diff --git a/client/app/assets/images/db-logos/arangodb.png b/client/app/assets/images/db-logos/arangodb.png
new file mode 100644
index 000000000..1b2defd2d
Binary files /dev/null and b/client/app/assets/images/db-logos/arangodb.png differ
diff --git a/client/app/assets/images/db-logos/athena.png b/client/app/assets/images/db-logos/athena.png
new file mode 100644
index 000000000..83c3feb69
Binary files /dev/null and b/client/app/assets/images/db-logos/athena.png differ
diff --git a/client/app/assets/images/db-logos/aws_es.png b/client/app/assets/images/db-logos/aws_es.png
new file mode 100644
index 000000000..cbf84873f
Binary files /dev/null and b/client/app/assets/images/db-logos/aws_es.png differ
diff --git a/client/app/assets/images/db-logos/axibasetsd.png b/client/app/assets/images/db-logos/axibasetsd.png
new file mode 100644
index 000000000..819f0c047
Binary files /dev/null and b/client/app/assets/images/db-logos/axibasetsd.png differ
diff --git a/client/app/assets/images/db-logos/azure_kusto.png b/client/app/assets/images/db-logos/azure_kusto.png
new file mode 100644
index 000000000..9f24192c3
Binary files /dev/null and b/client/app/assets/images/db-logos/azure_kusto.png differ
diff --git a/client/app/assets/images/db-logos/bigquery.png b/client/app/assets/images/db-logos/bigquery.png
new file mode 100644
index 000000000..35d4cf8fa
Binary files /dev/null and b/client/app/assets/images/db-logos/bigquery.png differ
diff --git a/client/app/assets/images/db-logos/bigquery_gce.png b/client/app/assets/images/db-logos/bigquery_gce.png
new file mode 100644
index 000000000..35d4cf8fa
Binary files /dev/null and b/client/app/assets/images/db-logos/bigquery_gce.png differ
diff --git a/client/app/assets/images/db-logos/clickhouse.png b/client/app/assets/images/db-logos/clickhouse.png
new file mode 100644
index 000000000..67ef7fd96
Binary files /dev/null and b/client/app/assets/images/db-logos/clickhouse.png differ
diff --git a/client/app/assets/images/db-logos/cloudwatch.png b/client/app/assets/images/db-logos/cloudwatch.png
new file mode 100644
index 000000000..d0837bfe4
Binary files /dev/null and b/client/app/assets/images/db-logos/cloudwatch.png differ
diff --git a/client/app/assets/images/db-logos/cloudwatch_insights.png b/client/app/assets/images/db-logos/cloudwatch_insights.png
new file mode 100644
index 000000000..d0837bfe4
Binary files /dev/null and b/client/app/assets/images/db-logos/cloudwatch_insights.png differ
diff --git a/client/app/assets/images/db-logos/cockroach.png b/client/app/assets/images/db-logos/cockroach.png
new file mode 100644
index 000000000..078dd6784
Binary files /dev/null and b/client/app/assets/images/db-logos/cockroach.png differ
diff --git a/client/app/assets/images/db-logos/corporate_memory.png b/client/app/assets/images/db-logos/corporate_memory.png
new file mode 100644
index 000000000..f168b02ec
Binary files /dev/null and b/client/app/assets/images/db-logos/corporate_memory.png differ
diff --git a/client/app/assets/images/db-logos/couchbase.png b/client/app/assets/images/db-logos/couchbase.png
new file mode 100644
index 000000000..d8e444e96
Binary files /dev/null and b/client/app/assets/images/db-logos/couchbase.png differ
diff --git a/client/app/assets/images/db-logos/csv.png b/client/app/assets/images/db-logos/csv.png
new file mode 100644
index 000000000..6aad5b4a6
Binary files /dev/null and b/client/app/assets/images/db-logos/csv.png differ
diff --git a/client/app/assets/images/db-logos/databend.png b/client/app/assets/images/db-logos/databend.png
new file mode 100644
index 000000000..dec146f4c
Binary files /dev/null and b/client/app/assets/images/db-logos/databend.png differ
diff --git a/client/app/assets/images/db-logos/databricks.png b/client/app/assets/images/db-logos/databricks.png
new file mode 100644
index 000000000..e28eb9212
Binary files /dev/null and b/client/app/assets/images/db-logos/databricks.png differ
diff --git a/client/app/assets/images/db-logos/db2.png b/client/app/assets/images/db-logos/db2.png
new file mode 100644
index 000000000..b5995ce6a
Binary files /dev/null and b/client/app/assets/images/db-logos/db2.png differ
diff --git a/client/app/assets/images/db-logos/dgraph.png b/client/app/assets/images/db-logos/dgraph.png
new file mode 100644
index 000000000..a0d33ba22
Binary files /dev/null and b/client/app/assets/images/db-logos/dgraph.png differ
diff --git a/client/app/assets/images/db-logos/drill.png b/client/app/assets/images/db-logos/drill.png
new file mode 100644
index 000000000..a19d9385f
Binary files /dev/null and b/client/app/assets/images/db-logos/drill.png differ
diff --git a/client/app/assets/images/db-logos/druid.png b/client/app/assets/images/db-logos/druid.png
new file mode 100644
index 000000000..d5ded0fad
Binary files /dev/null and b/client/app/assets/images/db-logos/druid.png differ
diff --git a/client/app/assets/images/db-logos/dynamodb_sql.png b/client/app/assets/images/db-logos/dynamodb_sql.png
new file mode 100644
index 000000000..22d9e6430
Binary files /dev/null and b/client/app/assets/images/db-logos/dynamodb_sql.png differ
diff --git a/client/app/assets/images/db-logos/elasticsearch.png b/client/app/assets/images/db-logos/elasticsearch.png
new file mode 100644
index 000000000..e7cb9c834
Binary files /dev/null and b/client/app/assets/images/db-logos/elasticsearch.png differ
diff --git a/client/app/assets/images/db-logos/elasticsearch2.png b/client/app/assets/images/db-logos/elasticsearch2.png
new file mode 100644
index 000000000..e7cb9c834
Binary files /dev/null and b/client/app/assets/images/db-logos/elasticsearch2.png differ
diff --git a/client/app/assets/images/db-logos/elasticsearch2_OpenDistroSQLElasticSearch.png b/client/app/assets/images/db-logos/elasticsearch2_OpenDistroSQLElasticSearch.png
new file mode 100644
index 000000000..e7cb9c834
Binary files /dev/null and b/client/app/assets/images/db-logos/elasticsearch2_OpenDistroSQLElasticSearch.png differ
diff --git a/client/app/assets/images/db-logos/elasticsearch2_XPackSQLElasticSearch.png b/client/app/assets/images/db-logos/elasticsearch2_XPackSQLElasticSearch.png
new file mode 100644
index 000000000..e7cb9c834
Binary files /dev/null and b/client/app/assets/images/db-logos/elasticsearch2_XPackSQLElasticSearch.png differ
diff --git a/client/app/assets/images/db-logos/exasol.png b/client/app/assets/images/db-logos/exasol.png
new file mode 100644
index 000000000..227e1ba3c
Binary files /dev/null and b/client/app/assets/images/db-logos/exasol.png differ
diff --git a/client/app/assets/images/db-logos/excel.png b/client/app/assets/images/db-logos/excel.png
new file mode 100644
index 000000000..001504488
Binary files /dev/null and b/client/app/assets/images/db-logos/excel.png differ
diff --git a/client/app/assets/images/db-logos/firebolt.png b/client/app/assets/images/db-logos/firebolt.png
new file mode 100644
index 000000000..7b6c02a66
Binary files /dev/null and b/client/app/assets/images/db-logos/firebolt.png differ
diff --git a/client/app/assets/images/db-logos/google_analytics.png b/client/app/assets/images/db-logos/google_analytics.png
new file mode 100644
index 000000000..eaddd9d56
Binary files /dev/null and b/client/app/assets/images/db-logos/google_analytics.png differ
diff --git a/client/app/assets/images/db-logos/google_spreadsheets.png b/client/app/assets/images/db-logos/google_spreadsheets.png
new file mode 100644
index 000000000..d72a44f03
Binary files /dev/null and b/client/app/assets/images/db-logos/google_spreadsheets.png differ
diff --git a/client/app/assets/images/db-logos/graphite.png b/client/app/assets/images/db-logos/graphite.png
new file mode 100644
index 000000000..bfe26b24a
Binary files /dev/null and b/client/app/assets/images/db-logos/graphite.png differ
diff --git a/client/app/assets/images/db-logos/hive.png b/client/app/assets/images/db-logos/hive.png
new file mode 100644
index 000000000..c9a127db3
Binary files /dev/null and b/client/app/assets/images/db-logos/hive.png differ
diff --git a/client/app/assets/images/db-logos/hive_http.png b/client/app/assets/images/db-logos/hive_http.png
new file mode 100644
index 000000000..c9a127db3
Binary files /dev/null and b/client/app/assets/images/db-logos/hive_http.png differ
diff --git a/client/app/assets/images/db-logos/impala.png b/client/app/assets/images/db-logos/impala.png
new file mode 100644
index 000000000..4db2ba5b1
Binary files /dev/null and b/client/app/assets/images/db-logos/impala.png differ
diff --git a/client/app/assets/images/db-logos/influxdb.png b/client/app/assets/images/db-logos/influxdb.png
new file mode 100644
index 000000000..f3846cb19
Binary files /dev/null and b/client/app/assets/images/db-logos/influxdb.png differ
diff --git a/client/app/assets/images/db-logos/jirajql.png b/client/app/assets/images/db-logos/jirajql.png
new file mode 100644
index 000000000..26bbcf665
Binary files /dev/null and b/client/app/assets/images/db-logos/jirajql.png differ
diff --git a/client/app/assets/images/db-logos/json.png b/client/app/assets/images/db-logos/json.png
new file mode 100644
index 000000000..6d414aead
Binary files /dev/null and b/client/app/assets/images/db-logos/json.png differ
diff --git a/client/app/assets/images/db-logos/kibana.png b/client/app/assets/images/db-logos/kibana.png
new file mode 100644
index 000000000..7b7a69ab5
Binary files /dev/null and b/client/app/assets/images/db-logos/kibana.png differ
diff --git a/client/app/assets/images/db-logos/kylin.png b/client/app/assets/images/db-logos/kylin.png
new file mode 100644
index 000000000..914787a67
Binary files /dev/null and b/client/app/assets/images/db-logos/kylin.png differ
diff --git a/client/app/assets/images/db-logos/mapd.png b/client/app/assets/images/db-logos/mapd.png
new file mode 100644
index 000000000..8b73fd79f
Binary files /dev/null and b/client/app/assets/images/db-logos/mapd.png differ
diff --git a/client/app/assets/images/db-logos/memsql.png b/client/app/assets/images/db-logos/memsql.png
new file mode 100644
index 000000000..e61c4109f
Binary files /dev/null and b/client/app/assets/images/db-logos/memsql.png differ
diff --git a/client/app/assets/images/db-logos/mongodb.png b/client/app/assets/images/db-logos/mongodb.png
new file mode 100644
index 000000000..70f56999b
Binary files /dev/null and b/client/app/assets/images/db-logos/mongodb.png differ
diff --git a/client/app/assets/images/db-logos/mssql.png b/client/app/assets/images/db-logos/mssql.png
new file mode 100644
index 000000000..1af50db80
Binary files /dev/null and b/client/app/assets/images/db-logos/mssql.png differ
diff --git a/client/app/assets/images/db-logos/mssql_odbc.png b/client/app/assets/images/db-logos/mssql_odbc.png
new file mode 100644
index 000000000..1af50db80
Binary files /dev/null and b/client/app/assets/images/db-logos/mssql_odbc.png differ
diff --git a/client/app/assets/images/db-logos/mysql.png b/client/app/assets/images/db-logos/mysql.png
new file mode 100644
index 000000000..3df6bdfc3
Binary files /dev/null and b/client/app/assets/images/db-logos/mysql.png differ
diff --git a/client/app/assets/images/db-logos/nz.png b/client/app/assets/images/db-logos/nz.png
new file mode 100644
index 000000000..663687470
Binary files /dev/null and b/client/app/assets/images/db-logos/nz.png differ
diff --git a/client/app/assets/images/db-logos/oracle.png b/client/app/assets/images/db-logos/oracle.png
new file mode 100644
index 000000000..b3e77abd1
Binary files /dev/null and b/client/app/assets/images/db-logos/oracle.png differ
diff --git a/client/app/assets/images/db-logos/pg.png b/client/app/assets/images/db-logos/pg.png
new file mode 100644
index 000000000..01e420527
Binary files /dev/null and b/client/app/assets/images/db-logos/pg.png differ
diff --git a/client/app/assets/images/db-logos/phoenix.png b/client/app/assets/images/db-logos/phoenix.png
new file mode 100644
index 000000000..eb56de298
Binary files /dev/null and b/client/app/assets/images/db-logos/phoenix.png differ
diff --git a/client/app/assets/images/db-logos/pinot.png b/client/app/assets/images/db-logos/pinot.png
new file mode 100644
index 000000000..7527e7b15
Binary files /dev/null and b/client/app/assets/images/db-logos/pinot.png differ
diff --git a/client/app/assets/images/db-logos/presto.png b/client/app/assets/images/db-logos/presto.png
new file mode 100644
index 000000000..cf53bb427
Binary files /dev/null and b/client/app/assets/images/db-logos/presto.png differ
diff --git a/client/app/assets/images/db-logos/prometheus.png b/client/app/assets/images/db-logos/prometheus.png
new file mode 100644
index 000000000..254e2b6ba
Binary files /dev/null and b/client/app/assets/images/db-logos/prometheus.png differ
diff --git a/client/app/assets/images/db-logos/python.png b/client/app/assets/images/db-logos/python.png
new file mode 100644
index 000000000..7238d35e1
Binary files /dev/null and b/client/app/assets/images/db-logos/python.png differ
diff --git a/client/app/assets/images/db-logos/qubole.png b/client/app/assets/images/db-logos/qubole.png
new file mode 100644
index 000000000..dfdc2fa2e
Binary files /dev/null and b/client/app/assets/images/db-logos/qubole.png differ
diff --git a/client/app/assets/images/db-logos/rds_mysql.png b/client/app/assets/images/db-logos/rds_mysql.png
new file mode 100644
index 000000000..d93a8748a
Binary files /dev/null and b/client/app/assets/images/db-logos/rds_mysql.png differ
diff --git a/client/app/assets/images/db-logos/redshift.png b/client/app/assets/images/db-logos/redshift.png
new file mode 100644
index 000000000..efc87995d
Binary files /dev/null and b/client/app/assets/images/db-logos/redshift.png differ
diff --git a/client/app/assets/images/db-logos/redshift_iam.png b/client/app/assets/images/db-logos/redshift_iam.png
new file mode 100644
index 000000000..efc87995d
Binary files /dev/null and b/client/app/assets/images/db-logos/redshift_iam.png differ
diff --git a/client/app/assets/images/db-logos/results.png b/client/app/assets/images/db-logos/results.png
new file mode 100644
index 000000000..2d8c39dd6
Binary files /dev/null and b/client/app/assets/images/db-logos/results.png differ
diff --git a/client/app/assets/images/db-logos/rockset.png b/client/app/assets/images/db-logos/rockset.png
new file mode 100644
index 000000000..75c593061
Binary files /dev/null and b/client/app/assets/images/db-logos/rockset.png differ
diff --git a/client/app/assets/images/db-logos/salesforce.png b/client/app/assets/images/db-logos/salesforce.png
new file mode 100644
index 000000000..4a73bbcc5
Binary files /dev/null and b/client/app/assets/images/db-logos/salesforce.png differ
diff --git a/client/app/assets/images/db-logos/scylla.png b/client/app/assets/images/db-logos/scylla.png
new file mode 100644
index 000000000..886710a5b
Binary files /dev/null and b/client/app/assets/images/db-logos/scylla.png differ
diff --git a/client/app/assets/images/db-logos/snowflake.png b/client/app/assets/images/db-logos/snowflake.png
new file mode 100644
index 000000000..e287e5d27
Binary files /dev/null and b/client/app/assets/images/db-logos/snowflake.png differ
diff --git a/client/app/assets/images/db-logos/sparql_endpoint.png b/client/app/assets/images/db-logos/sparql_endpoint.png
new file mode 100644
index 000000000..31ac155d4
Binary files /dev/null and b/client/app/assets/images/db-logos/sparql_endpoint.png differ
diff --git a/client/app/assets/images/db-logos/sqlite.png b/client/app/assets/images/db-logos/sqlite.png
new file mode 100644
index 000000000..fb4c458ad
Binary files /dev/null and b/client/app/assets/images/db-logos/sqlite.png differ
diff --git a/client/app/assets/images/db-logos/treasuredata.png b/client/app/assets/images/db-logos/treasuredata.png
new file mode 100644
index 000000000..587418ca1
Binary files /dev/null and b/client/app/assets/images/db-logos/treasuredata.png differ
diff --git a/client/app/assets/images/db-logos/trino.png b/client/app/assets/images/db-logos/trino.png
new file mode 100644
index 000000000..904db40bb
Binary files /dev/null and b/client/app/assets/images/db-logos/trino.png differ
diff --git a/client/app/assets/images/db-logos/uptycs.png b/client/app/assets/images/db-logos/uptycs.png
new file mode 100644
index 000000000..3f9ead878
Binary files /dev/null and b/client/app/assets/images/db-logos/uptycs.png differ
diff --git a/client/app/assets/images/db-logos/url.png b/client/app/assets/images/db-logos/url.png
new file mode 100644
index 000000000..acdefbc1b
Binary files /dev/null and b/client/app/assets/images/db-logos/url.png differ
diff --git a/client/app/assets/images/db-logos/vertica.png b/client/app/assets/images/db-logos/vertica.png
new file mode 100644
index 000000000..90346bd36
Binary files /dev/null and b/client/app/assets/images/db-logos/vertica.png differ
diff --git a/client/app/assets/images/db-logos/yandex_appmetrika.png b/client/app/assets/images/db-logos/yandex_appmetrika.png
new file mode 100644
index 000000000..764e7cff2
Binary files /dev/null and b/client/app/assets/images/db-logos/yandex_appmetrika.png differ
diff --git a/client/app/assets/images/db-logos/yandex_metrika.png b/client/app/assets/images/db-logos/yandex_metrika.png
new file mode 100644
index 000000000..736e56051
Binary files /dev/null and b/client/app/assets/images/db-logos/yandex_metrika.png differ
diff --git a/client/app/assets/images/destinations/chatwork.png b/client/app/assets/images/destinations/chatwork.png
new file mode 100644
index 000000000..e54a31565
Binary files /dev/null and b/client/app/assets/images/destinations/chatwork.png differ
diff --git a/client/app/assets/images/destinations/email.png b/client/app/assets/images/destinations/email.png
new file mode 100644
index 000000000..4db3bcd97
Binary files /dev/null and b/client/app/assets/images/destinations/email.png differ
diff --git a/client/app/assets/images/destinations/hangouts_chat.png b/client/app/assets/images/destinations/hangouts_chat.png
new file mode 100644
index 000000000..530500c4c
Binary files /dev/null and b/client/app/assets/images/destinations/hangouts_chat.png differ
diff --git a/client/app/assets/images/destinations/hipchat.png b/client/app/assets/images/destinations/hipchat.png
new file mode 100644
index 000000000..88ac51210
Binary files /dev/null and b/client/app/assets/images/destinations/hipchat.png differ
diff --git a/client/app/assets/images/destinations/mattermost.png b/client/app/assets/images/destinations/mattermost.png
new file mode 100644
index 000000000..c6eaf73b4
Binary files /dev/null and b/client/app/assets/images/destinations/mattermost.png differ
diff --git a/client/app/assets/images/destinations/microsoft_teams_webhook.png b/client/app/assets/images/destinations/microsoft_teams_webhook.png
new file mode 100644
index 000000000..8ada5c8c6
Binary files /dev/null and b/client/app/assets/images/destinations/microsoft_teams_webhook.png differ
diff --git a/client/app/assets/images/destinations/pagerduty.png b/client/app/assets/images/destinations/pagerduty.png
new file mode 100644
index 000000000..5ea3c03e3
Binary files /dev/null and b/client/app/assets/images/destinations/pagerduty.png differ
diff --git a/client/app/assets/images/destinations/slack.png b/client/app/assets/images/destinations/slack.png
new file mode 100644
index 000000000..39c62a6e9
Binary files /dev/null and b/client/app/assets/images/destinations/slack.png differ
diff --git a/client/app/assets/images/destinations/webhook.png b/client/app/assets/images/destinations/webhook.png
new file mode 100644
index 000000000..848423380
Binary files /dev/null and b/client/app/assets/images/destinations/webhook.png differ
diff --git a/client/app/assets/images/favicon-16x16.png b/client/app/assets/images/favicon-16x16.png
new file mode 100755
index 000000000..2eb05945d
Binary files /dev/null and b/client/app/assets/images/favicon-16x16.png differ
diff --git a/client/app/assets/images/favicon-32x32.png b/client/app/assets/images/favicon-32x32.png
new file mode 100755
index 000000000..451b7c862
Binary files /dev/null and b/client/app/assets/images/favicon-32x32.png differ
diff --git a/client/app/assets/images/favicon-96x96.png b/client/app/assets/images/favicon-96x96.png
new file mode 100755
index 000000000..b9c5ac968
Binary files /dev/null and b/client/app/assets/images/favicon-96x96.png differ
diff --git a/client/app/assets/images/fixtures/map-tile.png b/client/app/assets/images/fixtures/map-tile.png
new file mode 100644
index 000000000..060626296
Binary files /dev/null and b/client/app/assets/images/fixtures/map-tile.png differ
diff --git a/client/app/assets/images/google_logo.svg b/client/app/assets/images/google_logo.svg
new file mode 100644
index 000000000..b518c5270
--- /dev/null
+++ b/client/app/assets/images/google_logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/client/app/assets/images/illustrations/alert.svg b/client/app/assets/images/illustrations/alert.svg
new file mode 100644
index 000000000..673557136
--- /dev/null
+++ b/client/app/assets/images/illustrations/alert.svg
@@ -0,0 +1,255 @@
+
+
\ No newline at end of file
diff --git a/client/app/assets/images/illustrations/dashboard.svg b/client/app/assets/images/illustrations/dashboard.svg
new file mode 100644
index 000000000..5b1bd682d
--- /dev/null
+++ b/client/app/assets/images/illustrations/dashboard.svg
@@ -0,0 +1,595 @@
+
+
\ No newline at end of file
diff --git a/client/app/assets/images/illustrations/no-query-results.svg b/client/app/assets/images/illustrations/no-query-results.svg
new file mode 100644
index 000000000..9b19012c5
--- /dev/null
+++ b/client/app/assets/images/illustrations/no-query-results.svg
@@ -0,0 +1,13 @@
+
diff --git a/client/app/assets/images/illustrations/query.svg b/client/app/assets/images/illustrations/query.svg
new file mode 100644
index 000000000..313fb2c7d
--- /dev/null
+++ b/client/app/assets/images/illustrations/query.svg
@@ -0,0 +1,197 @@
+
+
\ No newline at end of file
diff --git a/client/app/assets/images/illustrations/readme.md b/client/app/assets/images/illustrations/readme.md
new file mode 100644
index 000000000..408a06345
--- /dev/null
+++ b/client/app/assets/images/illustrations/readme.md
@@ -0,0 +1,3 @@
+The illustrations shared in this folder are covered by the CC-BY-SA-NC-ND License v4.0 (or newer). You are allowed to use them when using unmodified versions of the Redash source code for non-commercial purposes (meaning for yourself), but you are not allowed to use for any other use or to distribute them as part of your software or fork of Redash.
+
+For any questions, please contact us.
diff --git a/client/app/assets/images/logo.png b/client/app/assets/images/logo.png
new file mode 100644
index 000000000..42765d58f
Binary files /dev/null and b/client/app/assets/images/logo.png differ
diff --git a/client/app/assets/images/logo_white.png b/client/app/assets/images/logo_white.png
new file mode 100644
index 000000000..69e877271
Binary files /dev/null and b/client/app/assets/images/logo_white.png differ
diff --git a/client/app/assets/images/redash_icon_small.png b/client/app/assets/images/redash_icon_small.png
new file mode 100644
index 000000000..5e73cc6f6
Binary files /dev/null and b/client/app/assets/images/redash_icon_small.png differ
diff --git a/client/app/assets/less/STYLING-README.md b/client/app/assets/less/STYLING-README.md
new file mode 100644
index 000000000..fe9841c51
--- /dev/null
+++ b/client/app/assets/less/STYLING-README.md
@@ -0,0 +1,8 @@
+# Styling readme
+
+Some general rules before you add stuff.
+
+- Avoid using inline css
+- If possible, use classes that are already in place instead of adding new
+- Keep less/inc folder untouched, rewrite things in less/redash respectively
+- Try following BEM naming conventions: http://getbem.com/naming/
diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less
new file mode 100644
index 000000000..925840b2f
--- /dev/null
+++ b/client/app/assets/less/ant.less
@@ -0,0 +1,436 @@
+@import "~antd/lib/style/core/iconfont";
+@import "~antd/lib/style/core/motion";
+@import "~antd/lib/alert/style/index";
+@import "~antd/lib/input/style/index";
+@import "~antd/lib/input-number/style/index";
+@import "~antd/lib/date-picker/style/index";
+@import "~antd/lib/modal/style/index";
+@import "~antd/lib/tooltip/style/index";
+@import "~antd/lib/select/style/index";
+@import "~antd/lib/checkbox/style/index";
+@import "~antd/lib/upload/style/index";
+@import "~antd/lib/form/style/index";
+@import "~antd/lib/button/style/index";
+@import "~antd/lib/radio/style/index";
+@import "~antd/lib/time-picker/style/index";
+@import "~antd/lib/pagination/style/index";
+@import "~antd/lib/table/style/index";
+@import "~antd/lib/popover/style/index";
+@import "~antd/lib/tag/style/index";
+@import "~antd/lib/grid/style/index";
+@import "~antd/lib/switch/style/index";
+@import "~antd/lib/empty/style/index";
+@import "~antd/lib/drawer/style/index";
+@import "~antd/lib/card/style/index";
+@import "~antd/lib/steps/style/index";
+@import "~antd/lib/divider/style/index";
+@import "~antd/lib/dropdown/style/index";
+@import "~antd/lib/menu/style/index";
+@import "~antd/lib/list/style/index";
+@import "~antd/lib/badge/style/index";
+@import "~antd/lib/card/style/index";
+@import "~antd/lib/spin/style/index";
+@import "~antd/lib/skeleton/style/index";
+@import "~antd/lib/tabs/style/index";
+@import "~antd/lib/notification/style/index";
+@import "~antd/lib/collapse/style/index";
+@import "~antd/lib/progress/style/index";
+@import "~antd/lib/typography/style/index";
+@import "~antd/lib/descriptions/style/index";
+@import "inc/ant-variables";
+
+// Increase z-indexes to avoid conflicts with some other libraries (e.g. Plotly)
+@zindex-modal: 2000;
+@zindex-modal-mask: 2000;
+@zindex-message: 2010;
+@zindex-notification: 2010;
+@zindex-popover: 2030;
+@zindex-dropdown: 2050;
+@zindex-picker: 2050;
+@zindex-tooltip: 2060;
+@item-hover-bg: #e5f8ff;
+
+.@{drawer-prefix-cls} {
+ &.help-drawer {
+ z-index: @zindex-tooltip; // help drawer should be topmost
+ }
+}
+
+// Remove bold in labels for Ant checkboxes and radio buttons
+.ant-checkbox-wrapper,
+.ant-radio-wrapper {
+ font-weight: normal;
+}
+
+.ant-select-dropdown-menu-item em {
+ color: @input-color-placeholder;
+ font-size: 11px;
+}
+
+// Fix for disabled button styles inside Tooltip component.
+// Tooltip wraps disabled buttons with `
+ 
+ 
+ 
+ 
+ 
;
+}
+
+QuerySourceTypeIcon.propTypes = {
+ type: PropTypes.string,
+ alt: PropTypes.string,
+};
diff --git a/client/app/pages/queries/components/QueryViewButton.jsx b/client/app/pages/queries/components/QueryViewButton.jsx
new file mode 100644
index 000000000..69c8c56dc
--- /dev/null
+++ b/client/app/pages/queries/components/QueryViewButton.jsx
@@ -0,0 +1,67 @@
+import React, { useState, useMemo, useEffect } from "react";
+import PropTypes from "prop-types";
+import Button from "antd/lib/button";
+import KeyboardShortcuts from "@/services/KeyboardShortcuts";
+import { ButtonTooltip } from "@/components/queries/QueryEditor/QueryEditorControls";
+
+export default function QueryViewButton({ title, shortcut, disabled, children, onClick, ...props }) {
+ const [tooltipVisible, setTooltipVisible] = useState(false);
+
+ const eventHandlers = useMemo(
+ () => ({
+ onMouseEnter: () => setTooltipVisible(true),
+ onMouseLeave: () => setTooltipVisible(false),
+ }),
+ []
+ );
+
+ useEffect(() => {
+ if (disabled) {
+ setTooltipVisible(false);
+ }
+ }, [disabled]);
+
+ useEffect(() => {
+ if (shortcut) {
+ const shortcuts = {
+ [shortcut]: onClick,
+ };
+
+ KeyboardShortcuts.bind(shortcuts);
+ return () => {
+ KeyboardShortcuts.unbind(shortcuts);
+ };
+ }
+ }, [shortcut, onClick]);
+
+ return (
+ 
+ 
+ 