Merge remote-tracking branch 'upstream/main' into panel-fix

.github/workflows/backport.yml

@@ -22,7 +22,9 @@ jobs:
  installation_id: 22958780
 
  - name: Backport
- uses: VachaShah/backport@v1.1.4
+ uses: VachaShah/backport@v2.2.0
  with:
  github_token: ${{ steps.github_app_token.outputs.token }}
- branch_name: backport/backport-${{ github.event.number }}
+ head_template: backport/backport-<%= number %>-to-<%= base %>
+ labels_template: "<%= JSON.stringify([...labels, 'autocut']) %>"
+ failure_labels: "failed backport"

common/constants/metrics.ts

@@ -10,6 +10,8 @@ export const PPL_DATASOURCES_REQUEST =
  'show datasources | where CONNECTOR_TYPE="PROMETHEUS" | fields DATASOURCE_NAME';
 
 // redux
+
+export const OBSERVABILITY_CUSTOM_METRIC = 'CUSTOM_METRICS';
 export const REDUX_SLICE_METRICS = 'metrics';
 
 export const resolutionOptions = [
@@ -24,3 +26,11 @@ export const resolutionOptions = [
 
 export const DEFAULT_METRIC_HEIGHT = 2;
 export const DEFAULT_METRIC_WIDTH = 12;
+
+export const AGGREGATION_OPTIONS = [
+ { label: 'avg' },
+ { label: 'sum' },
+ { label: 'count' },
+ { label: 'min' },
+ { label: 'max' },
+];

public/components/custom_panels/helpers/utils.tsx

@@ -47,7 +47,7 @@ import { Visualization } from '../../visualizations/visualization';
 
 // Name validation 0>Name<=50
 export const isNameValid = (name: string) => {
- return name.length >= 50 || name.length === 0 ? false : true;
+ return !(name.length >= 50 || name.length === 0);
 };
 
 // DateTime convertor to required format
@@ -132,8 +132,7 @@ const queryAccumulator = (
  )}' and ${timestampField} <= '${convertDateTime(endTime, false)}'`;
  const pplFilterQuery = panelFilterQuery === '' ? '' : ` | ${panelFilterQuery}`;
 
- const finalQuery = indexPartOfQuery + timeQueryFilter + pplFilterQuery + filterPartOfQuery;
- return finalQuery;
+ return indexPartOfQuery + timeQueryFilter + pplFilterQuery + filterPartOfQuery;
 };
 
 // PPL Service requestor
@@ -241,7 +240,7 @@ export const renderSavedVisualization = async (
  setIsLoading(true);
  setIsError({} as VizContainerError);
 
- let visualization = {} as SavedVisualizationType;
+ let visualization: SavedVisualizationType = {};
  let updatedVisualizationQuery = '';
 
  visualization = await fetchVisualizationById(http, savedVisualizationId, setIsError);

public/components/metrics/index.tsx

@@ -5,7 +5,6 @@
 
 import './index.scss';
 import {
- EuiButtonIcon,
  EuiGlobalToastList,
  EuiPage,
  EuiPageBody,
@@ -15,12 +14,11 @@ import {
  ShortDate,
 } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
-import React, { useEffect, useState } from 'react';
+import React, { ReactChild, useEffect, useState } from 'react';
 import { HashRouter, Route, RouteComponentProps } from 'react-router-dom';
-import classNames from 'classnames';
 import { StaticContext } from 'react-router-dom';
 import { useSelector } from 'react-redux';
-import { ChromeBreadcrumb, CoreStart, Toast } from '../../../../../src/core/public';
+import { ChromeBreadcrumb, Toast } from '../../../../../src/core/public';
 import { onTimeChange } from './helpers/utils';
 import { Sidebar } from './sidebar/sidebar';
 import { EmptyMetricsView } from './view/empty_view';
@@ -34,23 +32,14 @@ import SavedObjects from '../../services/saved_objects/event_analytics/saved_obj
 import { observabilityLogsID } from '../../../common/constants/shared';
 
 interface MetricsProps {
- http: CoreStart['http'];
- chrome: CoreStart['chrome'];
  parentBreadcrumb: ChromeBreadcrumb;
  renderProps: RouteComponentProps<any, StaticContext, any>;
  pplService: PPLService;
  savedObjects: SavedObjects;
  setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
 }
 
-export const Home = ({
- http,
- chrome,
- parentBreadcrumb,
- renderProps,
- pplService,
- savedObjects,
-}: MetricsProps) => {
+export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
  // Redux tools
  const selectedMetrics = useSelector(selectedMetricsSelector);
  const metricsLayout = useSelector(metricsLayoutSelector);
@@ -70,21 +59,17 @@ export const Home = ({
  const resolutionSelectId = htmlIdGenerator('resolutionSelect')();
  const [toasts, setToasts] = useState<Toast[]>([]);
  const [toastRightSide, setToastRightSide] = useState<boolean>(true);
- const [search, setSearch] = useState<boolean>(false);
-
- // Side bar constants
- const [isSidebarClosed, setIsSidebarClosed] = useState(false);
 
  // Metrics constants
  const [panelVisualizations, setPanelVisualizations] = useState<MetricType[]>([]);
 
  const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => {
  if (!text) text = '';
- setToastRightSide(!side ? true : false);
+ setToastRightSide(!side);
  setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
  };
 
- const onRefreshFilters = (startTimeFilter: ShortDate, endTimeFilter: ShortDate) => {
+ const onRefreshFilters = () => {
  if (spanValue < 1) {
  setToast('Please add a valid span interval', 'danger');
  return;
@@ -101,22 +86,13 @@ export const Home = ({
  setStartTime,
  setEndTime
  );
- onRefreshFilters(props.start, props.end);
+ onRefreshFilters();
  };
 
  const onEditClick = (savedVisualizationId: string) => {
  window.location.assign(`${observabilityLogsID}#/explorer/${savedVisualizationId}`);
  };
 
- const onSideBarClick = () => {
- setIsSidebarClosed((staleState) => {
- return !staleState;
- });
- setTimeout(function () {
- window.dispatchEvent(new Event('resize'));
- }, 300);
- };
-
  useEffect(() => {
  chrome.setBreadcrumbs([
  parentBreadcrumb,
@@ -125,7 +101,7 @@ export const Home = ({
  href: `#/`,
  },
  ]);
- }, []);
+ }, [chrome, parentBreadcrumb]);
 
  useEffect(() => {
  if (!editMode) {
@@ -139,15 +115,6 @@ export const Home = ({
  setPanelVisualizations(metricsLayout);
  }, [metricsLayout]);
 
- const mainSectionClassName = classNames({
- 'col-md-10': !isSidebarClosed,
- 'col-md-12': isSidebarClosed,
- });
-
- const sidebarClassName = classNames({
- closed: isSidebarClosed,
- });
-
  return (
  <>
  <EuiGlobalToastList
@@ -162,12 +129,11 @@ export const Home = ({
  <Route
  exact
  path="/"
- render={(props) => (
+ render={() => (
  <div>
  <EuiPage>
  <EuiPageBody component="div">
  <TopMenu
- http={http}
  IsTopPanelDisabled={IsTopPanelDisabled}
  startTime={startTime}
  endTime={endTime}
@@ -183,29 +149,25 @@ export const Home = ({
  spanValue={spanValue}
  setSpanValue={setSpanValue}
  resolutionSelectId={resolutionSelectId}
- savedObjects={savedObjects}
  setToast={setToast}
- setSearch={setSearch}
  />
  <div className="dscAppContainer">
  <EuiResizableContainer>
  {(EuiResizablePanel, EuiResizableButton) => (
  <>
  <EuiResizablePanel mode="collapsible" initialSize={20} minSize="10%">
- <Sidebar http={http} pplService={pplService} search={search} />
+ <Sidebar />
  </EuiResizablePanel>
 
  <EuiResizableButton />
 
  <EuiResizablePanel mode="main" initialSize={80} minSize="50px">
  {selectedMetrics.length > 0 ? (
  <MetricsGrid
- http={http}
  chrome={chrome}
  panelVisualizations={panelVisualizations}
  setPanelVisualizations={setPanelVisualizations}
  editMode={editMode}
- pplService={pplService}
  startTime={startTime}
  endTime={endTime}
  moveToEvents={onEditClick}