Skip to content

Commit

Permalink
Fix events flyout bugs and Styling (#510)
Browse files Browse the repository at this point in the history 
* updated eents flyout styling, added back button

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

* disabled surroundings events w/o time, updated PPL time format

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

* updated docViewer jest snapshot

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

* removed repeated function

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
  • Loading branch information
@ps48
ps48 authored Feb 28, 2022
1 parent 3c9cc27 commit 41d2071
Show file tree
Hide file tree
Showing 11 changed files with 163 additions and 46 deletions.
2 changes: 1 addition & 1 deletion common/constants/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const SQL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-
export const PPL_DOCUMENTATION_URL =
'https://opensearch.org/docs/latest/observability/ppl/commands/';
export const UI_DATE_FORMAT = 'MM/DD/YYYY hh:mm A';
export const PPL_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
export const PPL_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSSSSS';
export const PPL_SPAN_REGEX = /by\s*span/i;
export const PPL_STATS_REGEX = /\|\s*stats/i;
export const PPL_INDEX_INSERT_POINT_REGEX = /(search source|source|index)\s*=\s*([^\s]+)(.*)/i;
Expand Down
2 changes: 1 addition & 1 deletion public/components/explorer/data_grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,7 @@ discover-app {

.dscCollapsibleSidebar {
position: relative;
z-index: $euiZLevel1;
z-index: 1;

.dscCollapsibleSidebar__collapseButton {
position: absolute;
Expand Down
45 changes: 29 additions & 16 deletions public/components/explorer/docTable/__tests__/__snapshots__/docViewer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,13 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
"avg(FlightDelayMin)": "45.957544288332315",
}
}
logTraceId=""
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>,
"id": "doc_viewer_tab_2",
"id": "doc_viewer_tab_5",
"name": "Table",
}
}
Expand All @@ -53,12 +54,13 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
"avg(FlightDelayMin)": "45.957544288332315",
}
}
logTraceId=""
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>,
"id": "doc_viewer_tab_2",
"id": "doc_viewer_tab_5",
"name": "Table",
},
Object {
Expand All @@ -74,12 +76,13 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
"avg(FlightDelayMin)": "45.957544288332315",
}
}
logTraceId=""
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>,
"id": "doc_viewer_tab_3",
"id": "doc_viewer_tab_6",
"name": "JSON",
},
Object {
Expand All @@ -95,13 +98,19 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
"avg(FlightDelayMin)": "45.957544288332315",
}
}
logTraceId=""
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>,
"id": "doc_viewer_tab_4",
"name": "Traces",
"id": "doc_viewer_tab_7",
"name": <React.Fragment>
<span>
Traces
</span>
<React.Fragment />
</React.Fragment>,
},
]
}
Expand All @@ -117,17 +126,17 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
>
<EuiTab
aria-controls="random_html_id"
id="doc_viewer_tab_2"
id="doc_viewer_tab_5"
isSelected={true}
key="doc_viewer_tab_2"
key="doc_viewer_tab_5"
onClick={[Function]}
>
<button
aria-controls="random_html_id"
aria-selected={true}
className="euiTab euiTab-isSelected"
disabled={false}
id="doc_viewer_tab_2"
id="doc_viewer_tab_5"
onClick={[Function]}
role="tab"
type="button"
Expand All @@ -141,17 +150,17 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
</EuiTab>
<EuiTab
aria-controls="random_html_id"
id="doc_viewer_tab_3"
id="doc_viewer_tab_6"
isSelected={false}
key="doc_viewer_tab_3"
key="doc_viewer_tab_6"
onClick={[Function]}
>
<button
aria-controls="random_html_id"
aria-selected={false}
className="euiTab"
disabled={false}
id="doc_viewer_tab_3"
id="doc_viewer_tab_6"
onClick={[Function]}
role="tab"
type="button"
Expand All @@ -165,32 +174,34 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
</EuiTab>
<EuiTab
aria-controls="random_html_id"
id="doc_viewer_tab_4"
id="doc_viewer_tab_7"
isSelected={false}
key="doc_viewer_tab_4"
key="doc_viewer_tab_7"
onClick={[Function]}
>
<button
aria-controls="random_html_id"
aria-selected={false}
className="euiTab"
disabled={false}
id="doc_viewer_tab_4"
id="doc_viewer_tab_7"
onClick={[Function]}
role="tab"
type="button"
>
<span
className="euiTab__content"
>
Traces
<span>
Traces
</span>
</span>
</button>
</EuiTab>
</div>
</EuiTabs>
<div
aria-labelledby="doc_viewer_tab_2"
aria-labelledby="doc_viewer_tab_5"
id="random_html_id"
role="tabpanel"
>
Expand All @@ -215,6 +226,7 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
"avg(FlightDelayMin)": "45.957544288332315",
}
}
logTraceId=""
>
<DocViewTable
filter={[Function]}
Expand All @@ -224,6 +236,7 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
"avg(FlightDelayMin)": "45.957544288332315",
}
}
logTraceId=""
onAddColumn={[Function]}
onRemoveColumn={[Function]}
>
Expand Down
8 changes: 8 additions & 0 deletions public/components/explorer/docTable/docView.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,11 @@
top: 17px;
z-index: 3;
}

.vertical-center {
margin-top: auto;
}

.trace-link {
margin-left: 5px;
}
8 changes: 7 additions & 1 deletion public/components/explorer/docTable/docViewRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ import { IExplorerFields, IField } from '../../../../common/types/explorer';
import { DocFlyout } from './doc_flyout';
import { HttpStart } from '../../../../../../src/core/public';
import { OTEL_TRACE_ID } from '../../../../common/constants/explorer';
import { isValidTraceId } from './trace_block/trace_block';
import { useEffect } from 'react';
import { SurroundingFlyout } from './surrounding_flyout';
import PPLService from '../../../services/requests/ppl';
import { isValidTraceId } from '../utils';

export interface IDocType {
[key: string]: string;
Expand All @@ -36,6 +36,7 @@ export const DocViewRow = (props: IDocViewRowProps) => {
const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
const [surroundingEventsOpen, setSurroundingEventsOpen] = useState<boolean>(false);
const [openTraces, setOpenTraces] = useState<boolean>(false);
const [flyoutToggleSize, setFlyoutToggleSize] = useState(true);

const getTdTmpl = (conf: { clsName: string; content: React.ReactDOM | string }) => {
const { clsName, content } = conf;
Expand Down Expand Up @@ -174,6 +175,9 @@ export const DocViewRow = (props: IDocViewRowProps) => {
memorizedTds={getTds(doc, selectedCols, true).slice(1)}
explorerFields={explorerFields}
openTraces={openTraces}
rawQuery={rawQuery}
toggleSize={flyoutToggleSize}
setToggleSize={setFlyoutToggleSize}
setOpenTraces={setOpenTraces}
setSurroundingEventsOpen={setSurroundingEventsOpen}
></DocFlyout>
Expand All @@ -197,6 +201,8 @@ export const DocViewRow = (props: IDocViewRowProps) => {
rawQuery={rawQuery}
selectedCols={selectedCols}
getTds={getTds}
toggleSize={flyoutToggleSize}
setToggleSize={setFlyoutToggleSize}
/>
);
}
Expand Down
31 changes: 28 additions & 3 deletions public/components/explorer/docTable/docViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import _ from 'lodash';
import {
EuiFlexGroup,
EuiFlexItem,
EuiLink,
EuiPanel,
EuiTabbedContent,
EuiTabbedContentTab,
Expand All @@ -17,6 +18,9 @@ import { JsonCodeBlock } from './json_code_block/json_code_block';
import { IDocType } from './docViewRow';
import { HttpSetup } from '../../../../../../src/core/public';
import { TraceBlock } from './trace_block/trace_block';
import { OTEL_TRACE_ID } from '../../../../common/constants/explorer';
import { isValidTraceId } from '../utils';
import { log } from 'util';

interface IDocViewerProps {
http: HttpSetup;
Expand All @@ -26,6 +30,8 @@ interface IDocViewerProps {

export function DocViewer(props: IDocViewerProps) {
const [curSelectedTab, setCurSelectedTab] = useState<EuiTabbedContentTab | null>(null);
const [logTraceId, setLogTraceId] = useState('');
const [tracesLink, setTracesLink] = useState(<></>);

// can be passed in later
const getTabList = () => {
Expand All @@ -51,7 +57,13 @@ export function DocViewer(props: IDocViewerProps) {
},
{
id: _.uniqueId('doc_viewer_tab_'),
name: 'Traces',
name: (
<>
<span>Traces</span>
{tracesLink}
</>
),

component: (tabProps: any) => <TraceBlock http={props.http} {...tabProps} />,
otherProps: {},
},
Expand All @@ -64,25 +76,38 @@ export function DocViewer(props: IDocViewerProps) {
return {
id: tab.id,
name: tab.name,

content: (
<EuiPanel paddingSize="s">
<EuiFlexGroup>
<EuiFlexItem>
<Component hit={props.hit} {...tab.otherProps} />{' '}
<Component hit={props.hit} logTraceId={logTraceId} {...tab.otherProps} />{' '}
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
),
};
});
}, [props.hit]);
}, [props.hit, logTraceId, tracesLink]);

if (!tabs.length) {
// There there's a minimum of 2 tabs active in Discover.
// This condition takes care of unit tests with 0 tabs.
return null;
}

useEffect(() => {
const traceId = props.hit.hasOwnProperty(OTEL_TRACE_ID) ? props.hit[OTEL_TRACE_ID] : '';
setLogTraceId(traceId);
setTracesLink(
traceId !== '' && isValidTraceId(traceId) ? (
<EuiLink className="trace-link" href={`#/trace_analytics/traces/${traceId}`} external />
) : (
<></>
)
);
}, []);

return (
<div className="osdDocViewer">
<EuiTabbedContent
Expand Down
Loading

0 comments on commit 41d2071

Please sign in to comment.