This commit adds a new time series component

Adds a time series component for line and area charts.
Displays new charts in the dashboard.

- Use dynamic components for line/area swapping
- Add new line charts to dashboard in 2 panels

app/assets/javascripts/monitoring/components/charts/area.vue

@@ -12,6 +12,9 @@ import { graphDataValidatorForValues } from '../../utils';
 
 let debouncedResize;
 
+// TODO: Remove this component in favor of the more general time_series.vue
+// Please port all changes here to time_series.vue as well.
+
 export default {
   components: {
     GlAreaChart,

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -15,7 +15,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
-import MonitorAreaChart from './charts/area.vue';
+import MonitorTimeSeriesChart from './charts/time_series.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
@@ -26,7 +26,7 @@ let sidebarMutationObserver;
 
 export default {
   components: {
-    MonitorAreaChart,
+    MonitorTimeSeriesChart,
     MonitorSingleStatChart,
     PanelType,
     GraphGroup,
@@ -465,7 +465,7 @@ export default {
           />
         </template>
         <template v-else>
-          <monitor-area-chart
+          <monitor-time-series-chart
             v-for="(graphData, graphIndex) in chartsWithData(groupData.metrics)"
             :key="graphIndex"
             :graph-data="graphData"
@@ -473,7 +473,7 @@ export default {
             :thresholds="getGraphAlertValues(graphData.queries)"
             :container-width="elWidth"
             :project-path="projectPath"
-            group-id="monitor-area-chart"
+            group-id="monitor-time-series-chart"
           >
             <div class="d-flex align-items-center">
               <alert-widget
@@ -515,7 +515,7 @@ export default {
                 </gl-dropdown-item>
               </gl-dropdown>
             </div>
-          </monitor-area-chart>
+          </monitor-time-series-chart>
         </template>
       </graph-group>
     </div>

app/assets/javascripts/monitoring/constants.js

@@ -8,6 +8,10 @@ export const graphTypes = {
   deploymentData: 'scatter',
 };
 
+export const symbolSizes = {
+  default: 14,
+};
+
 export const lineTypes = {
   default: 'solid',
 };
@@ -21,6 +25,11 @@ export const timeWindows = {
   oneWeek: __('1 week'),
 };
 
+export const dateFormats = {
+  timeOfDay: 'h:MM TT',
+  default: 'dd mmm yyyy, h:MMTT',
+};
+
 export const secondsIn = {
   thirtyMinutes: 60 * 30,
   threeHours: 60 * 60 * 3,

changelogs/unreleased/65412-add-support-for-line-charts.yml

+---
+title: Create component to display area and line charts in monitor dashboards
+merge_request: 31639
+author:
+type: added

config/prometheus/common_metrics.yml

@@ -166,7 +166,7 @@ panel_groups:
       label: Total (cores)
       unit: "cores"
   - title: "Memory Usage (Pod average)"
-    type: "area-chart"
+    type: "line-chart"
     y_label: "Memory Used per Pod (MB)"
     weight: 2
     metrics:
@@ -175,7 +175,7 @@ panel_groups:
       label: Pod average (MB)
       unit: MB
   - title: "Canary: Memory Usage (Pod Average)"
-    type: "area-chart"
+    type: "line-chart"
     y_label: "Memory Used per Pod (MB)"
     weight: 2
     metrics:
@@ -185,7 +185,7 @@ panel_groups:
       unit: MB
       track: canary
   - title: "Core Usage (Pod Average)"
-    type: "area-chart"
+    type: "line-chart"
     y_label: "Cores per Pod"
     weight: 1
     metrics:
@@ -194,7 +194,7 @@ panel_groups:
       label: Pod average (cores)
       unit: "cores"
   - title: "Canary: Core Usage (Pod Average)"
-    type: "area-chart"
+    type: "line-chart"
     y_label: "Cores per Pod"
     weight: 1
     metrics:

db/migrate/20190814205640_import_common_metrics_line_charts.rb

+# frozen_string_literal: true
+
+class ImportCommonMetricsLineCharts < ActiveRecord::Migration[5.2]
+  DOWNTIME = false
+
+  def up
+    ::Gitlab::DatabaseImporters::CommonMetrics::Importer.new.execute
+  end
+
+  def down
+    # no-op
+  end
+end

spec/javascripts/monitoring/mock_data.js

 export const mockApiEndpoint = `${gl.TEST_HOST}/monitoring/mock`;
 
+export const mockProjectPath = '/frontend-fixtures/environments-project';
+
 export const metricsGroupsAPIResponse = {
   success: true,
   data: [
@@ -902,7 +904,7 @@ export const metricsDashboardResponse = {
           },
           {
             title: 'Memory Usage (Pod average)',
-            type: 'area-chart',
+            type: 'line-chart',
             y_label: 'Memory Used per Pod',
             weight: 2,
             metrics: [