Traces - Gantt chart / Span list rework

public/components/application_analytics/components/flyout_components/trace_detail_render.tsx

@@ -30,9 +30,8 @@
   openSpanFlyout,
   mode,
   dataSourceMDSId,
-
 }: TraceDetailRenderProps) => {
   const [fields, setFields] = useState<any>({});
   const [serviceBreakdownData, setServiceBreakdownData] = useState([]);
   const [payloadData, setPayloadData] = useState('');
   const [colorMap, setColorMap] = useState({});
@@ -78,6 +77,7 @@
           openSpanFlyout={openSpanFlyout}
           mode={mode}
           dataSourceMDSId={dataSourceMDSId}
+          isApplicationFlyout={true}
         />
         <EuiSpacer size="xs" />
         <EuiHorizontalRule margin="s" />
@@ -92,13 +92,13 @@
         ) : null}
       </>
     );
   }, [traceId, fields, serviceBreakdownData, colorMap, payloadData]);
 
   useEffect(() => {
     handleTraceViewRequest(traceId, http, fields, setFields, mode);
     handleServicesPieChartRequest(traceId, http, setServiceBreakdownData, setColorMap, mode);
     handlePayloadRequest(traceId, http, payloadData, setPayloadData, mode);
   }, [traceId]);
 
   return renderContent;
 };

public/components/trace_analytics/components/common/helper_functions.tsx

@@ -5,7 +5,14 @@
 /* eslint-disable radix */
 
 import dateMath from '@elastic/datemath';
-import { EuiEmptyPrompt, EuiSmallButtonEmpty, EuiSpacer, EuiText } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiEmptyPrompt,
+  EuiOverlayMask,
+  EuiSmallButtonEmpty,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
 import { SpacerSize } from '@elastic/eui/src/components/spacer/spacer';
 import { isEmpty, round } from 'lodash';
 import React from 'react';
@@ -329,7 +336,7 @@
   percentileMaps: Array<{ traceGroupName: string; durationFilter: { gte?: number; lte?: number } }>,
   conditionString: string // >= 95th, < 95th
 ): FilterType => {
   const DSL: any = {
     query: {
       bool: {
         must: [],
@@ -374,12 +381,12 @@
   mode: TraceAnalyticsMode,
   filters: FilterType[],
   query: string,
   startTime: any,
   endTime: any,
   page?: string,
   appConfigs: FilterType[] = []
 ) => {
   const DSL: any = {
     query: {
       bool: {
         must: [],
@@ -582,3 +589,33 @@
 
   return `${url}&datasourceId=`;
 };
+
+interface FullScreenWrapperProps {
+  children: React.ReactNode;
+  onClose: () => void;
+  isFullScreen: boolean;
+}
+
+// EUI Data grid full screen button is currently broken, this is a workaround
+export const FullScreenWrapper: React.FC<FullScreenWrapperProps> = ({
+  children,
+  onClose,
+  isFullScreen,
+}) => {
+  if (!isFullScreen) return <>{children}</>;
+
+  return (
+    <EuiOverlayMask>
+      <div className="full-screen-wrapper">
+        <EuiButtonIcon
+          iconType="cross"
+          aria-label="Close full screen"
+          onClick={onClose}
+          display="empty"
+          className="full-screen-close-icon"
+        />
+        <div className="full-screen-content">{children}</div>
+      </div>
+    </EuiOverlayMask>
+  );
+};

public/components/trace_analytics/components/services/services_content.tsx

@@ -56,7 +56,7 @@
   const [redirect, setRedirect] = useState(true);
   const [loading, setLoading] = useState(false);
   const [filteredService, setFilteredService] = useState('');
   const [selectedItems, setSelectedItems] = useState<any[]>([]);
   const [isServiceTrendEnabled, setIsServiceTrendEnabled] = useState(false);
   const [serviceTrends, setServiceTrends] = useState<ServiceTrends>({});
   const searchBarRef = useRef<{ updateQuery: (newQuery: string) => void }>(null);
@@ -100,6 +100,9 @@
     jaegerIndicesExist,
     dataPrepperIndicesExist,
     isServiceTrendEnabled,
+    startTime,
+    endTime,
+    props.dataSourceMDSId,
   ]);
 
   const refresh = async (currService?: string, overrideQuery?: string) => {
@@ -117,7 +120,7 @@
     // service map should not be filtered by service name
     const serviceMapDSL = cloneDeep(DSL);
     serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
       (must: any) => must?.term?.serviceName == null
     );
 
     if (isServiceTrendEnabled) {