use css truncate, resolve comments

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

public/components/application_analytics/components/application.tsx

@@ -326,6 +326,9 @@ export function Application(props: AppDetailProps) {
  setStartTime={setStartTimeForApp}
  setEndTime={setEndTimeForApp}
  dataSourceMDSId={[{ id: '', label: '' }]}
+ setCurrentSelectedService={() => {}}
+ tracesTableMode="traces"
+ setTracesTableMode={() => {}}
  />
  <EuiPanel>
  <PanelTitle title="Spans" totalItems={totalSpans} />

public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap

@@ -907,10 +907,10 @@ exports[`Added Integration View Test Renders added integration view using dummy
  </EuiFlexGroup>
  </EuiSearchBar>
  <EuiSpacer
- size="l"
+ size="m"
  >
  <div
- className="euiSpacer euiSpacer--l"
+ className="euiSpacer euiSpacer--m"
  />
  </EuiSpacer>
  <EuiBasicTable

public/components/trace_analytics/components/traces/trace_table_helpers.tsx

@@ -13,7 +13,7 @@ import {
  EuiText,
  EuiToolTip,
 } from '@elastic/eui';
-import { round, truncate } from 'lodash';
+import { round } from 'lodash';
 import moment from 'moment';
 import React from 'react';
 import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../../common/constants/trace_analytics';
@@ -40,8 +40,8 @@ export const fetchDynamicColumns = (columnItems: string[]) => {
  item ? (
  <EuiText>
  <EuiToolTip content={item}>
- <EuiText size="s">
- {item.length < 36 ? item : <div title={item}>{truncate(item, { length: 36 })}</div>}
+ <EuiText size="s" className="attributes-column" title={item}>
+ {item}
  </EuiText>
  </EuiToolTip>
  </EuiText>
@@ -64,8 +64,8 @@ export const getTableColumns = (
  item ? (
  <EuiText>
  <EuiToolTip content={item}>
- <EuiText size="s">
- {item.length < 36 ? item : <div title={item}>{truncate(item, { length: 36 })}</div>}
+ <EuiText size="s" className="traces-table traces-table-trace-id" title={item}>
+ {item}
  </EuiText>
  </EuiToolTip>
  </EuiText>
@@ -166,6 +166,7 @@ export const getTableColumns = (
  align: 'right',
  sortable: true,
  render: renderDateField,
+ className: 'span-group-column',
  },
  ...(showAttributes ? fetchDynamicColumns(columnItems) : []),
  ] as Array<EuiTableFieldDataColumnType<any>>;
@@ -209,7 +210,13 @@ export const getTableColumns = (
  sortable: true,
  render: renderErrorsField,
  },
- { field: 'last_updated', name: 'Last updated', align: 'left', sortable: true },
+ {
+ field: 'last_updated',
+ name: 'Last updated',
+ align: 'left',
+ sortable: true,
+ className: 'span-group-column',
+ },
  ] as Array<EuiTableFieldDataColumnType<any>>;
  }
 
@@ -230,6 +237,12 @@ export const getTableColumns = (
  sortable: true,
  render: renderErrorsField,
  },
- { field: 'last_updated', name: 'Last updated', align: 'left', sortable: true },
+ {
+ field: 'last_updated',
+ name: 'Last updated',
+ align: 'left',
+ sortable: true,
+ className: 'span-group-column',
+ },
  ] as Array<EuiTableFieldDataColumnType<any>>;
 };

public/components/trace_analytics/components/traces/traces.tsx

@@ -7,6 +7,7 @@ import { EuiBreadcrumb } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import React from 'react';
 import { DataSourceOption } from '../../../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
+import { TraceQueryMode } from '../../../../../common/types/trace_analytics';
 import { TraceAnalyticsComponentDeps } from '../../home';
 import { TracesContent } from './traces_content';
 
@@ -18,6 +19,8 @@ export interface TracesProps extends TraceAnalyticsComponentDeps {
  openTraceFlyout?: (traceId: string) => void;
  toasts: Toast[];
  dataSourceMDSId: DataSourceOption[];
+ tracesTableMode: TraceQueryMode;
+ setTracesTableMode: React.Dispatch<React.SetStateAction<TraceQueryMode>>;
 }
 
 export function Traces(props: TracesProps) {

public/components/trace_analytics/components/traces/traces_content.tsx

@@ -16,8 +16,6 @@ import {
 } from '@elastic/eui';
 import cloneDeep from 'lodash/cloneDeep';
 import React, { useEffect, useState } from 'react';
-import { TRACE_TABLE_TYPE_KEY } from '../../../../../common/constants/trace_analytics';
-import { TraceQueryMode } from '../../../../../common/types/trace_analytics';
 import { coreRefs } from '../../../../framework/core_refs';
 import { handleServiceMapRequest } from '../../requests/services_request_handler';
 import {
@@ -58,6 +56,8 @@ export function TracesContent(props: TracesProps) {
  jaegerIndicesExist,
  attributesFilterFields,
  setCurrentSelectedService,
+ tracesTableMode,
+ setTracesTableMode,
  } = props;
  const [tableItems, setTableItems] = useState([]);
  const [columns, setColumns] = useState([]);
@@ -70,9 +70,6 @@ export function TracesContent(props: TracesProps) {
  'latency' | 'error_rate' | 'throughput'
  >('');
  const [includeMetrics, setIncludeMetrics] = useState(false);
- const [tracesTableMode, setTracesTableMode] = useState<TraceQueryMode>(
- (sessionStorage.getItem(TRACE_TABLE_TYPE_KEY) as TraceQueryMode) || 'all_spans'
- );
  const isNavGroupEnabled = coreRefs?.chrome?.navGroup.getNavGroupEnabled();
 
  useEffect(() => {

public/components/trace_analytics/components/traces/traces_custom_indices_table.tsx

@@ -53,7 +53,7 @@ export function TracesCustomIndicesTable(props: TracesLandingTableProps) {
  const { columnItems, items, refresh, mode, loading, getTraceViewUri, openTraceFlyout } = props;
  const [showAttributes, setShowAttributes] = useState(false);
  const [isTitlePopoverOpen, setIsTitlePopoverOpen] = useState(false);
- const [tableOptions, setTableOptions] = useState<EuiSelectableOption[]>(
+ const [tableOptions, setTableOptions] = useState<EuiSelectableOption[]>(() =>
  TRACE_TABLE_OPTIONS.map((obj) =>
  obj.key === props.tracesTableMode ? { ...obj, checked: 'on' } : obj
  )

public/components/trace_analytics/home.tsx

@@ -5,7 +5,7 @@
 
 import { EuiGlobalToastList } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
-import React, { ReactChild, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { HashRouter, Redirect, Route, RouteComponentProps } from 'react-router-dom';
 import {
  ChromeBreadcrumb,
@@ -19,7 +19,8 @@ import {
  DataSourceManagementPluginSetup,
  DataSourceSelectableConfig,
 } from '../../../../../src/plugins/data_source_management/public';
-import { TraceAnalyticsMode } from '../../../common/types/trace_analytics';
+import { TRACE_TABLE_TYPE_KEY } from '../../../common/constants/trace_analytics';
+import { TraceAnalyticsMode, TraceQueryMode } from '../../../common/types/trace_analytics';
 import { dataSourceFilterFn } from '../../../common/utils/shared';
 import { coreRefs } from '../../framework/core_refs';
 import { FilterType } from './components/common/filters/filters';
@@ -111,11 +112,9 @@ export const Home = (props: HomeProps) => {
  };
  const [toasts, setToasts] = useState<Toast[]>([]);
 
- const _setToast = (title: string, color = 'success', text?: ReactChild, _side?: string) => {
- if (!text) text = '';
- setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
- };
-
+ const [tracesTableMode, setTracesTableMode] = useState<TraceQueryMode>(
+ (sessionStorage.getItem(TRACE_TABLE_TYPE_KEY) as TraceQueryMode) || 'all_spans'
+ );
  const [dataSourceMDSId, setDataSourceMDSId] = useState([{ id: '', label: '' }]);
  const [currentSelectedService, setCurrentSelectedService] = useState('');
 
@@ -230,7 +229,11 @@ export const Home = (props: HomeProps) => {
  },
  ];
 
- const traceColumnAction = () => location.assign('#/traces');
+ const traceColumnAction = () => {
+ location.assign('#/traces');
+ setTracesTableMode('traces');
+ sessionStorage.setItem(TRACE_TABLE_TYPE_KEY, 'traces');
+ };
 
  const getTraceViewUri = (traceId: string) => `#/traces/${encodeURIComponent(traceId)}`;
 
@@ -329,6 +332,8 @@ export const Home = (props: HomeProps) => {
  setCurrentSelectedService={setCurrentSelectedService}
  toasts={toasts}
  dataSourceMDSId={dataSourceMDSId}
+ tracesTableMode={tracesTableMode}
+ setTracesTableMode={setTracesTableMode}
  {...commonProps}
  />
  </TraceSideBar>
@@ -343,6 +348,8 @@ export const Home = (props: HomeProps) => {
  setCurrentSelectedService={setCurrentSelectedService}
  toasts={toasts}
  dataSourceMDSId={dataSourceMDSId}
+ tracesTableMode={tracesTableMode}
+ setTracesTableMode={setTracesTableMode}
  {...commonProps}
  />
  </>

public/components/trace_analytics/index.scss

@@ -97,6 +97,10 @@ th[data-test-subj^='tableHeaderCell_dashboard_latency_variance'] {
 .attributes-column-header,
 .attributes-column {
  max-width: 200px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-left: 8px;
 }
 
 .trace-group-column {