All files / app/assets/javascripts/monitoring constants.js

100% Statements 26/26
100% Branches 0/0
100% Functions 0/0
100% Lines 26/26

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 28438x   38x                   38x                                                                                                     38x                                                                                             38x 38x   38x       38x         38x       38x           38x       38x               38x                       38x                       38x                             38x         38x           38x                         38x                       38x               38x   38x                                     38x                             38x               38x               38x        
export const PROMETHEUS_TIMEOUT = 120000; // TWO_MINUTES
 
export const dashboardEmptyStates = {
  GETTING_STARTED: 'gettingStarted',
  LOADING: 'loading',
  NO_DATA: 'noData',
  UNABLE_TO_CONNECT: 'unableToConnect',
};
 
/**
 * States and error states in Prometheus Queries (PromQL) for metrics
 */
export const metricStates = {
  /**
   * Metric data is available
   */
  OK: 'OK',
 
  /**
   * Metric data is being fetched for the first time.
   *
   * Not used during data refresh, if data is available in
   * the metric, the recommneded state is OK.
   */
  LOADING: 'LOADING',
 
  /**
   * Connection timed out to prometheus server
   * the timeout is set to PROMETHEUS_TIMEOUT
   *
   */
  TIMEOUT: 'TIMEOUT',
 
  /**
   * The prometheus server replies with an empty data set
   */
  NO_DATA: 'NO_DATA',
 
  /**
   * The prometheus server cannot be reached
   */
  CONNECTION_FAILED: 'CONNECTION_FAILED',
 
  /**
   * The prometheus server was reached but it cannot process
   * the query. This can happen for several reasons:
   * - PromQL syntax is incorrect
   * - An operator is not supported
   */
  BAD_QUERY: 'BAD_QUERY',
 
  /**
   * No specific reason found for error
   */
  UNKNOWN_ERROR: 'UNKNOWN_ERROR',
};
 
/**
 * Supported panel types in dashboards, values of `panel.type`.
 *
 * Values should not be changed as they correspond to
 * values in users the `.yml` dashboard definition.
 */
export const panelTypes = {
  /**
   * Area Chart
   *
   * Time Series chart with an area
   */
  AREA_CHART: 'area-chart',
  /**
   * Line Chart
   *
   * Time Series chart with a line
   */
  LINE_CHART: 'line-chart',
  /**
   * Anomaly Chart
   *
   * Time Series chart with 3 metrics
   */
  ANOMALY_CHART: 'anomaly-chart',
  /**
   * Single Stat
   *
   * Single data point visualization
   */
  SINGLE_STAT: 'single-stat',
  /**
   * Gauge
   */
  GAUGE_CHART: 'gauge',
  /**
   * Heatmap
   */
  HEATMAP: 'heatmap',
  /**
   * Bar chart
   */
  BAR: 'bar',
  /**
   * Column chart
   */
  COLUMN: 'column',
  /**
   * Stacked column chart
   */
  STACKED_COLUMN: 'stacked-column',
};
 
export const sidebarAnimationDuration = 300; // milliseconds.
export const chartHeight = 300;
 
export const graphTypes = {
  annotationsData: 'scatter',
};
 
export const symbolSizes = {
  anomaly: 8,
  default: 14,
};
 
export const areaOpacityValues = {
  default: 0.2,
};
 
export const colorValues = {
  primaryColor: '#1f78d1', // $blue-500 (see variables.scss)
  anomalySymbol: '#db3b21',
  anomalyAreaColor: '#1f78d1',
};
 
export const lineTypes = {
  default: 'solid',
};
 
export const lineWidths = {
  default: 2,
};
 
/**
 * User-defined links can be passed in dashboard yml file.
 * These are the supported type of links.
 */
export const linkTypes = {
  GRAFANA: 'grafana',
};
 
/**
 * These are the supported values for the GitLab-UI
 * chart legend layout.
 *
 * Currently defined in
 * https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/utils/charts/constants.js
 *
 */
export const legendLayoutTypes = {
  inline: 'inline',
  table: 'table',
};
 
/**
 * These Vuex store properties are allowed to be
 * replaced dynamically after component has been created
 * and initial state has been set.
 *
 * Currently used in `receiveMetricsDashboardSuccess` action.
 */
export const endpointKeys = [
  'deploymentsEndpoint',
  'dashboardEndpoint',
  'dashboardsEndpoint',
  'currentDashboard',
  'projectPath',
  'logsPath',
];
 
/**
 * These Vuex store properties are set as soon as the
 * dashboard component has been created. The values are
 * passed as data-* attributes and received by dashboard
 * as Vue props.
 */
export const initialStateKeys = [...endpointKeys, 'currentEnvironmentName'];
 
/**
 * Constant to indicate if a metric exists in the database
 */
export const NOT_IN_DB_PREFIX = 'NO_DB';
 
/**
 * graphQL environments API value for active environments.
 * Used as a value for the 'states' query filter
 */
export const ENVIRONMENT_AVAILABLE_STATE = 'available';
 
/**
 * As of %12.10, the svg icon library does not have an annotation
 * arrow icon yet. In order to deliver annotations feature, the icon
 * is hard coded until the icon is added. The below issue is
 * to track the icon.
 *
 * https://gitlab.com/gitlab-org/gitlab-svgs/-/issues/118
 *
 * Once the icon is merged this can be removed.
 * https://gitlab.com/gitlab-org/gitlab/-/issues/214540
 */
export const annotationsSymbolIcon = 'path://m5 229 5 8h-10z';
 
/**
 * As of %12.10, dashboard path is required to create annotation.
 * The FE gets the dashboard name from the URL params. It is not
 * ideal to store the path this way but there is no other way to
 * get this path unless annotations fetch is delayed. This could
 * potentially be removed and have the backend send this to the FE.
 *
 * This technical debt is being tracked here
 * https://gitlab.com/gitlab-org/gitlab/-/issues/214671
 */
export const OVERVIEW_DASHBOARD_PATH = 'config/prometheus/common_metrics.yml';
 
/**
 * GitLab provide metrics dashboards that are available to a user once
 * the Prometheus managed app has been installed, without any extra setup
 * required. These "out of the box" dashboards are defined under the
 * `config/prometheus` path.
 */
export const OUT_OF_THE_BOX_DASHBOARDS_PATH_PREFIX = 'config/prometheus/';
 
export const OPERATORS = {
  greaterThan: '>',
  equalTo: '==',
  lessThan: '<',
};
 
/**
 * Dashboard yml files support custom user-defined variables that
 * are rendered as input elements in the monitoring dashboard.
 * These values can be edited by the user and are passed on to the
 * the backend and eventually to Prometheus API proxy.
 *
 * As of 13.0, the supported types are:
 * simple custom -> dropdown elements
 * advanced custom -> dropdown elements
 * text -> text input elements
 *
 * Custom variables have a simple and a advanced variant.
 */
export const VARIABLE_TYPES = {
  custom: 'custom',
  text: 'text',
  metric_label_values: 'metric_label_values',
};
 
/**
 * The names of templating variables defined in the dashboard yml
 * file are prefixed with a constant so that it doesn't collide with
 * other URL params that the monitoring dashboard relies on for
 * features like panel fullscreen etc.
 *
 * The prefix is added before it is appended to the URL and removed
 * before passing the data to the backend.
 */
export const VARIABLE_PREFIX = 'var-';
 
/**
 * All of the actions inside each panel dropdown can be accessed
 * via keyboard shortcuts than can be activated via mouse hovers
 * and or focus via tabs.
 */
 
export const keyboardShortcutKeys = {
  EXPAND: 'e',
  VISIT_LOGS: 'l',
  SHOW_ALERT: 'a',
  DOWNLOAD_CSV: 'd',
  CHART_COPY: 'c',
};
 
export const thresholdModeTypes = {
  ABSOLUTE: 'absolute',
  PERCENTAGE: 'percentage',
};