2020-03-13 15:44:24 +05:30
|
|
|
import { queryToObject, mergeUrlParams, removeParams } from '~/lib/utils/url_utility';
|
|
|
|
import {
|
|
|
|
timeRangeParamNames,
|
|
|
|
timeRangeFromParams,
|
|
|
|
timeRangeToParams,
|
|
|
|
} from '~/lib/utils/datetime_range';
|
2019-10-12 21:52:04 +05:30
|
|
|
|
2019-09-30 21:07:59 +05:30
|
|
|
/**
|
|
|
|
* This method is used to validate if the graph data format for a chart component
|
2020-04-08 14:13:33 +05:30
|
|
|
* that needs a time series as a response from a prometheus query (queryRange) is
|
2019-09-30 21:07:59 +05:30
|
|
|
* of a valid format or not.
|
|
|
|
* @param {Object} graphData the graph data response from a prometheus request
|
|
|
|
* @returns {boolean} whether the graphData format is correct
|
|
|
|
*/
|
|
|
|
export const graphDataValidatorForValues = (isValues, graphData) => {
|
|
|
|
const responseValueKeyName = isValues ? 'value' : 'values';
|
|
|
|
return (
|
2020-01-01 13:55:28 +05:30
|
|
|
Array.isArray(graphData.metrics) &&
|
|
|
|
graphData.metrics.filter(query => {
|
2019-09-30 21:07:59 +05:30
|
|
|
if (Array.isArray(query.result)) {
|
|
|
|
return (
|
|
|
|
query.result.filter(res => Array.isArray(res[responseValueKeyName])).length ===
|
|
|
|
query.result.length
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return false;
|
2020-01-01 13:55:28 +05:30
|
|
|
}).length === graphData.metrics.filter(query => query.result).length
|
2019-09-30 21:07:59 +05:30
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2019-12-21 20:55:43 +05:30
|
|
|
/* eslint-disable @gitlab/i18n/no-non-i18n-strings */
|
|
|
|
/**
|
|
|
|
* Checks that element that triggered event is located on cluster health check dashboard
|
|
|
|
* @param {HTMLElement} element to check against
|
|
|
|
* @returns {boolean}
|
|
|
|
*/
|
|
|
|
const isClusterHealthBoard = () => (document.body.dataset.page || '').includes(':clusters:show');
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Tracks snowplow event when user generates link to metric chart
|
|
|
|
* @param {String} chart link that will be sent as a property for the event
|
|
|
|
* @return {Object} config object for event tracking
|
|
|
|
*/
|
|
|
|
export const generateLinkToChartOptions = chartLink => {
|
|
|
|
const isCLusterHealthBoard = isClusterHealthBoard();
|
|
|
|
|
|
|
|
const category = isCLusterHealthBoard
|
|
|
|
? 'Cluster Monitoring'
|
|
|
|
: 'Incident Management::Embedded metrics';
|
|
|
|
const action = isCLusterHealthBoard
|
|
|
|
? 'generate_link_to_cluster_metric_chart'
|
|
|
|
: 'generate_link_to_metrics_chart';
|
|
|
|
|
|
|
|
return { category, action, label: 'Chart link', property: chartLink };
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Tracks snowplow event when user downloads CSV of cluster metric
|
|
|
|
* @param {String} chart title that will be sent as a property for the event
|
2020-01-01 13:55:28 +05:30
|
|
|
* @return {Object} config object for event tracking
|
2019-12-21 20:55:43 +05:30
|
|
|
*/
|
|
|
|
export const downloadCSVOptions = title => {
|
|
|
|
const isCLusterHealthBoard = isClusterHealthBoard();
|
|
|
|
|
|
|
|
const category = isCLusterHealthBoard
|
|
|
|
? 'Cluster Monitoring'
|
|
|
|
: 'Incident Management::Embedded metrics';
|
|
|
|
const action = isCLusterHealthBoard
|
|
|
|
? 'download_csv_of_cluster_metric_chart'
|
|
|
|
: 'download_csv_of_metrics_dashboard_chart';
|
|
|
|
|
|
|
|
return { category, action, label: 'Chart title', property: title };
|
|
|
|
};
|
|
|
|
|
2019-12-26 22:10:19 +05:30
|
|
|
/**
|
2020-01-01 13:55:28 +05:30
|
|
|
* Generate options for snowplow to track adding a new metric via the dashboard
|
|
|
|
* custom metric modal
|
|
|
|
* @return {Object} config object for event tracking
|
|
|
|
*/
|
|
|
|
export const getAddMetricTrackingOptions = () => ({
|
|
|
|
category: document.body.dataset.page,
|
|
|
|
action: 'click_button',
|
|
|
|
label: 'add_new_metric',
|
|
|
|
property: 'modal',
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* This function validates the graph data contains exactly 3 metrics plus
|
2019-12-26 22:10:19 +05:30
|
|
|
* value validations from graphDataValidatorForValues.
|
|
|
|
* @param {Object} isValues
|
|
|
|
* @param {Object} graphData the graph data response from a prometheus request
|
|
|
|
* @returns {boolean} true if the data is valid
|
|
|
|
*/
|
|
|
|
export const graphDataValidatorForAnomalyValues = graphData => {
|
|
|
|
const anomalySeriesCount = 3; // metric, upper, lower
|
|
|
|
return (
|
2020-01-01 13:55:28 +05:30
|
|
|
graphData.metrics &&
|
|
|
|
graphData.metrics.length === anomalySeriesCount &&
|
2019-12-26 22:10:19 +05:30
|
|
|
graphDataValidatorForValues(false, graphData)
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
/**
|
|
|
|
* Returns a time range from the current URL params
|
|
|
|
*
|
|
|
|
* @returns {Object|null} The time range defined by the
|
|
|
|
* current URL, reading from search query or `window.location.search`.
|
|
|
|
* Returns `null` if no parameters form a time range.
|
|
|
|
*/
|
|
|
|
export const timeRangeFromUrl = (search = window.location.search) => {
|
|
|
|
const params = queryToObject(search);
|
|
|
|
return timeRangeFromParams(params);
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns a URL with no time range based on the current URL.
|
|
|
|
*
|
|
|
|
* @param {String} New URL
|
|
|
|
*/
|
|
|
|
export const removeTimeRangeParams = (url = window.location.href) =>
|
|
|
|
removeParams(timeRangeParamNames, url);
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns a URL for the a different time range based on the
|
|
|
|
* current URL and a time range.
|
|
|
|
*
|
|
|
|
* @param {String} New URL
|
|
|
|
*/
|
|
|
|
export const timeRangeToUrl = (timeRange, url = window.location.href) => {
|
|
|
|
const toUrl = removeTimeRangeParams(url);
|
|
|
|
const params = timeRangeToParams(timeRange);
|
|
|
|
return mergeUrlParams(params, toUrl);
|
|
|
|
};
|
|
|
|
|
2019-07-07 11:18:12 +05:30
|
|
|
export default {};
|