Refactor of Trace analytics to imrpove readability by reducing duplic…

…ated checks Signed-off-by: Adam Tackett <[email protected]>
TackAdam · Jun 21, 2024 · 27fc14c · 27fc14c
1 parent cc193f6
commit 27fc14c
Show file tree

Hide file tree

Showing 13 changed files with 203 additions and 203 deletions.
diff --git a/public/components/trace_analytics/components/common/helper_functions.tsx b/public/components/trace_analytics/components/common/helper_functions.tsx
@@ -371,6 +371,8 @@ export const filtersToDsl = (
   page?: string,
   appConfigs: FilterType[] = []
 ) => {
+  const isDataPrepper = mode === 'data_prepper';
+  const isJaeger = mode === 'jaeger';
   const DSL: any = {
     query: {
       bool: {
@@ -429,15 +431,15 @@ export const filtersToDsl = (
       let filterQuery = {};
       let field = filter.field;
       if (field === 'latency') {
-        if (mode === 'data_prepper') {
+        if (isDataPrepper) {
           field = 'traceGroupFields.durationInNanos';
-        } else if (mode === 'jaeger') {
+        } else if (isJaeger) {
           field = 'duration';
         }
       } else if (field === 'error') {
-        if (mode === 'data_prepper') {
+        if (isDataPrepper) {
           field = 'traceGroupFields.statusCode';
-        } else if (mode === 'jaeger') {
+        } else if (isJaeger) {
           field = 'tag.error';
         }
       }

diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -64,6 +64,8 @@ export function DashboardContent(props: DashboardProps) {
   const [loading, setLoading] = useState(false);
   const [showTimeoutToast, setShowTimeoutToast] = useState(false);
   const { setToast } = useToast();
+  const isDataPrepper = mode === 'data_prepper';
+  const isJaeger = mode === 'jaeger';
 
   useEffect(() => {
     if (showTimeoutToast === true && (!toasts || toasts.length === 0)) {
@@ -91,8 +93,7 @@ export function DashboardContent(props: DashboardProps) {
   useEffect(() => {
     if (
       !redirect &&
-      ((mode === 'data_prepper' && dataPrepperIndicesExist) ||
-        (mode === 'jaeger' && jaegerIndicesExist))
+      ((isDataPrepper && dataPrepperIndicesExist) || (isJaeger && jaegerIndicesExist))
     )
       refresh();
   }, [
@@ -140,7 +141,7 @@ export function DashboardContent(props: DashboardProps) {
       appConfigs
     );
     const fixedInterval = minFixedInterval(startTime, endTime);
-    if (mode === 'jaeger') {
+    if (isJaeger) {
       handleJaegerDashboardRequest(
         http,
         DSL,
@@ -175,7 +176,7 @@ export function DashboardContent(props: DashboardProps) {
         dataSourceMDSId[0].id,
         setPercentileMap
       ).finally(() => setLoading(false));
-    } else if (mode === 'data_prepper') {
+    } else if (isDataPrepper) {
       handleDashboardRequest(
         http,
         DSL,
@@ -276,10 +277,9 @@ export function DashboardContent(props: DashboardProps) {
 
   return (
     <>
-      {(mode === 'data_prepper' && dataPrepperIndicesExist) ||
-      (mode === 'jaeger' && jaegerIndicesExist) ? (
+      {(isDataPrepper && dataPrepperIndicesExist) || (isJaeger && jaegerIndicesExist) ? (
         <div>
-          {mode === 'data_prepper' ? (
+          {isDataPrepper ? (
             <>
               <DashboardTable
                 items={tableItems}

diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
@@ -70,6 +70,8 @@ export function ServiceView(props: ServiceViewProps) {
   >('latency');
   const [redirect, setRedirect] = useState(false);
   const [actionsMenuPopover, setActionsMenuPopover] = useState(false);
+  const isDataPrepper = mode === 'data_prepper';
+  const isJaeger = mode === 'jaeger';
 
   const refresh = () => {
     const DSL = filtersToDsl(
@@ -87,7 +89,7 @@ export function ServiceView(props: ServiceViewProps) {
       mode,
       props.dataSourceMDSId[0].id
     );
-    if (mode === 'data_prepper') {
+    if (isDataPrepper) {
       handleServiceMapRequest(
         props.http,
         DSL,
@@ -132,7 +134,7 @@ export function ServiceView(props: ServiceViewProps) {
   const redirectToServiceTraces = () => {
     if (setCurrentSelectedService) setCurrentSelectedService('');
     setRedirect(true);
-    const filterField = mode === 'data_prepper' ? 'serviceName' : 'process.serviceName';
+    const filterField = isDataPrepper ? 'serviceName' : 'process.serviceName';
     props.addFilter({
       field: filterField,
       operator: 'is',
@@ -162,7 +164,7 @@ export function ServiceView(props: ServiceViewProps) {
     {
       id: 0,
       items: [
-        ...(mode === 'data_prepper'
+        ...(isDataPrepper
           ? [
               {
                 name: 'View logs',
@@ -272,7 +274,7 @@ export function ServiceView(props: ServiceViewProps) {
                     {props.serviceName || '-'}
                   </EuiText>
                 </EuiFlexItem>
-                {mode === 'data_prepper' ? (
+                {isDataPrepper ? (
                   <EuiFlexItem grow={false}>
                     <EuiText className="overview-title">Number of connected services</EuiText>
                     <EuiText size="s" className="overview-content">
@@ -284,7 +286,7 @@ export function ServiceView(props: ServiceViewProps) {
                 ) : (
                   <EuiFlexItem />
                 )}
-                {mode === 'data_prepper' ? (
+                {isDataPrepper ? (
                   <EuiFlexItem grow={false}>
                     <EuiText className="overview-title">Connected services</EuiText>
                     <EuiText size="s" className="overview-content">
@@ -397,13 +399,13 @@ export function ServiceView(props: ServiceViewProps) {
       processTimeStamp(props.startTime, mode),
       processTimeStamp(props.endTime, mode)
     );
-    if (mode === 'data_prepper') {
+    if (isDataPrepper) {
       spanDSL.query.bool.must.push({
         term: {
           serviceName: props.serviceName,
         },
       });
-    } else if (mode === 'jaeger') {
+    } else if (isJaeger) {
       spanDSL.query.bool.must.push({
         term: {
           'process.serviceName': props.serviceName,
@@ -483,7 +485,7 @@ export function ServiceView(props: ServiceViewProps) {
       <EuiSpacer size="xl" />
       {overview}
 
-      {mode === 'data_prepper' ? (
+      {isDataPrepper ? (
         <>
           <EuiSpacer />
           <ServiceMetrics

diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
@@ -58,6 +58,8 @@ export function ServicesContent(props: ServicesProps) {
   const [isServiceTrendEnabled, setIsServiceTrendEnabled] = useState(false);
   const [serviceTrends, setServiceTrends] = useState<ServiceTrends>({});
   const searchBarRef = useRef<{ updateQuery: (newQuery: string) => void }>(null);
+  const isDataPrepper = mode === 'data_prepper';
+  const isJaeger = mode === 'jaeger';
 
   useEffect(() => {
     chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]);
@@ -83,8 +85,7 @@ export function ServicesContent(props: ServicesProps) {
     setFilteredService(newFilteredService);
     if (
       !redirect &&
-      ((mode === 'data_prepper' && dataPrepperIndicesExist) ||
-        (mode === 'jaeger' && jaegerIndicesExist))
+      ((isDataPrepper && dataPrepperIndicesExist) || (isJaeger && jaegerIndicesExist))
     )
       refresh(newFilteredService);
   }, [
@@ -163,7 +164,7 @@ export function ServicesContent(props: ServicesProps) {
 
   const addServicesGroupFilter = () => {
     const groupFilter = selectedItems.map(
-      (row) => (mode === 'jaeger' ? 'process.serviceName: ' : 'serviceName: ') + row.name
+      (row) => (isJaeger ? 'process.serviceName: ' : 'serviceName: ') + row.name
     );
     const filterQuery = groupFilter.join(' OR ');
     const newQuery = query ? `(${query}) AND (${filterQuery})` : `(${filterQuery})`;
@@ -207,7 +208,7 @@ export function ServicesContent(props: ServicesProps) {
         serviceTrends={serviceTrends}
       />
       <EuiSpacer size="m" />
-      {mode === 'data_prepper' && dataPrepperIndicesExist ? (
+      {isDataPrepper && dataPrepperIndicesExist ? (
         <ServiceMap
           addFilter={addFilter}
           serviceMap={serviceMap}

diff --git a/public/components/trace_analytics/components/services/services_table.tsx b/public/components/trace_analytics/components/services/services_table.tsx
@@ -67,14 +67,16 @@ export function ServicesTable(props: ServicesTableProps) {
     setIsServiceTrendEnabled,
     serviceTrends,
   } = props;
+  const isDataPrepper = mode === 'data_prepper';
+  const isJaeger = mode === 'jaeger';
 
   const selectionValue = {
     onSelectionChange: (selections: any[]) => setSelectedItems(selections),
   };
 
   const nameColumnAction = (serviceName: string) => {
     addFilter({
-      field: mode === 'jaeger' ? 'process.serviceName' : 'serviceName',
+      field: isJaeger ? 'process.serviceName' : 'serviceName',
       operator: 'is',
       value: serviceName,
       inverted: false,
@@ -101,7 +103,7 @@ export function ServicesTable(props: ServicesTableProps) {
                 </EuiButtonEmpty>
               </EuiToolTip>
             </EuiFlexItem>
-            {mode === 'data_prepper' && (
+            {isDataPrepper && (
               <EuiFlexItem>
                 <EuiButtonEmpty
                   size="xs"
@@ -177,7 +179,7 @@ export function ServicesTable(props: ServicesTableProps) {
             />
           ),
         },
-        ...(mode === 'data_prepper'
+        ...(isDataPrepper
           ? [
               {
                 field: 'number_of_connected_services',
@@ -190,7 +192,7 @@ export function ServicesTable(props: ServicesTableProps) {
               },
             ]
           : []),
-        ...(mode === 'data_prepper'
+        ...(isDataPrepper
           ? [
               {
                 field: 'connected_services',
@@ -221,7 +223,7 @@ export function ServicesTable(props: ServicesTableProps) {
                   onClick={() => {
                     setRedirect(true);
                     addFilter({
-                      field: mode === 'jaeger' ? 'process.serviceName' : 'serviceName',
+                      field: isJaeger ? 'process.serviceName' : 'serviceName',
                       operator: 'is',
                       value: row.name,
                       inverted: false,
@@ -268,10 +270,7 @@ export function ServicesTable(props: ServicesTableProps) {
         {titleBar}
         <EuiSpacer size="m" />
         <EuiHorizontalRule margin="none" />
-        {!(
-          (mode === 'data_prepper' && dataPrepperIndicesExist) ||
-          (mode === 'jaeger' && jaegerIndicesExist)
-        ) ? (
+        {!((isDataPrepper && dataPrepperIndicesExist) || (isJaeger && jaegerIndicesExist)) ? (
           <MissingConfigurationMessage mode={mode} />
         ) : items?.length > 0 ? (
           <EuiInMemoryTable

diff --git a/public/components/trace_analytics/components/traces/span_detail_flyout.tsx b/public/components/trace_analytics/components/traces/span_detail_flyout.tsx
@@ -83,6 +83,7 @@ export function SpanDetailFlyout(props: {
   setCurrentSpan?: React.Dispatch<React.SetStateAction<string>>;
 }) {
   const { mode } = props;
+  const isDataPrepper = mode === 'data_prepper';
   const [span, setSpan] = useState<any>({});
 
   useEffect(() => {
@@ -141,16 +142,14 @@ export function SpanDetailFlyout(props: {
         getSpanValue(span, mode, 'PARENT_SPAN_ID') ? (
           <EuiFlexGroup gutterSize="xs" style={{ marginTop: -4, marginBottom: -4 }}>
             <EuiFlexItem grow={false}>
-              <EuiCopy
-                textToCopy={mode === 'data_prepper' ? span.parentSpanId : span.references[0].spanID}
-              >
+              <EuiCopy textToCopy={isDataPrepper ? span.parentSpanId : span.references[0].spanID}>
                 {(copy) => (
                   <EuiButtonIcon aria-label="copy-button" onClick={copy} iconType="copyClipboard" />
                 )}
               </EuiCopy>
             </EuiFlexItem>
             <EuiFlexItem data-test-subj="parentSpanId">
-              {mode === 'data_prepper' ? span.parentSpanId : span.references[0].spanID}
+              {isDataPrepper ? span.parentSpanId : span.references[0].spanID}
             </EuiFlexItem>
           </EuiFlexGroup>
         ) : (
@@ -171,15 +170,15 @@ export function SpanDetailFlyout(props: {
         getSpanFieldKey(mode, 'DURATION'),
         'Duration',
         `${
-          mode === 'data_prepper'
+          isDataPrepper
             ? round(nanoToMilliSec(Math.max(0, span.durationInNanos)), 2)
             : round(microToMilliSec(Math.max(0, span.duration)), 2)
         } ms`
       ),
       getListItem(
         getSpanFieldKey(mode, 'START_TIME'),
         'Start time',
-        mode === 'data_prepper'
+        isDataPrepper
           ? moment(span.startTime).format(TRACE_ANALYTICS_DATE_FORMAT)
           : moment(round(microToMilliSec(Math.max(0, span.startTime)), 2)).format(
               TRACE_ANALYTICS_DATE_FORMAT
@@ -188,7 +187,7 @@ export function SpanDetailFlyout(props: {
       getListItem(
         getSpanFieldKey(mode, 'END_TIME'),
         'End time',
-        mode === 'data_prepper'
+        isDataPrepper
           ? moment(span.endTime).format(TRACE_ANALYTICS_DATE_FORMAT)
           : moment(round(microToMilliSec(Math.max(0, span.startTime + span.duration)), 2)).format(
               TRACE_ANALYTICS_DATE_FORMAT
@@ -197,7 +196,7 @@ export function SpanDetailFlyout(props: {
       getListItem(
         getSpanFieldKey(mode, 'ERRORS'),
         'Errors',
-        (mode === 'data_prepper' ? span['status.code'] === 2 : span.tag?.error) ? (
+        (isDataPrepper ? span['status.code'] === 2 : span.tag?.error) ? (
           <EuiText color="danger" size="s" style={{ fontWeight: 700 }}>
             Yes
           </EuiText>
@@ -310,7 +309,7 @@ export function SpanDetailFlyout(props: {
                 <h2>Span detail</h2>
               </EuiTitle>
             </EuiFlexItem>
-            {mode === 'data_prepper' && (
+            {isDataPrepper && (
               <EuiFlexItem>
                 <EuiButtonEmpty size="xs" onClick={redirectToExplorer}>
                   View associated logs