Skip to content

Commit

Permalink
surrounding events functionally working
Browse files Browse the repository at this point in the history 
Signed-off-by: Paul Sebastian <paulstn@amazon.com>
  • Loading branch information
@paulstn
paulstn committed Oct 9, 2023
1 parent e642c64 commit 7329721
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 36 deletions.
8 changes: 7 additions & 1 deletion public/components/event_analytics/explorer/events_views/data_grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,13 @@ export function DataGrid(props: DataGridProps) {
explorerFields={explorerFields}
pplService={pplService}
rawQuery={rawQuery}
onFlyoutOpen={() => {}}
onFlyoutOpen={() => {}} // TODO: change this button to a minimize icon
dataGridColumns={dataGridColumns}
dataGridColumnVisibility={dataGridColumnVisibility}
selectedIndex={rowIndex}
sortingFields={sortingFields}
rowHeightsOptions={rowHeightsOptions}
rows={rows}
/>
);
},
Expand Down
18 changes: 18 additions & 0 deletions public/components/event_analytics/explorer/events_views/docViewRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@ interface FlyoutButtonProps {
pplService: PPLService;
rawQuery: string;
onFlyoutOpen: (docId: string) => void;
dataGridColumns: any;
dataGridColumnVisibility: any;
selectedIndex: any;
sortingFields: any;
rowHeightsOptions: any;
rows: any;
}

export const FlyoutButton = forwardRef((props: FlyoutButtonProps, ref) => {
Expand All @@ -47,6 +53,12 @@ export const FlyoutButton = forwardRef((props: FlyoutButtonProps, ref) => {
pplService,
rawQuery,
onFlyoutOpen,
dataGridColumns,
dataGridColumnVisibility,
selectedIndex,
sortingFields,
rowHeightsOptions,
rows,
} = props;

const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
Expand Down Expand Up @@ -237,6 +249,12 @@ export const FlyoutButton = forwardRef((props: FlyoutButtonProps, ref) => {
getTds={getTds}
toggleSize={flyoutToggleSize}
setToggleSize={setFlyoutToggleSize}
dataGridColumns={dataGridColumns}
dataGridColumnVisibility={dataGridColumnVisibility}
selectedIndex={selectedIndex}
sortingFields={sortingFields}
rowHeightsOptions={rowHeightsOptions}
rows={rows}
/>
);
}, [
Expand Down
108 changes: 75 additions & 33 deletions public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import './docView.scss';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, Fragment } from 'react';
import {
EuiButton,
EuiButtonEmpty,
Expand All @@ -19,25 +19,23 @@ import {
EuiSpacer,
EuiText,
EuiTitle,
EuiToolTip,
EuiDataGrid,
EuiDescriptionList,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
} from '@elastic/eui';
import moment from 'moment';
import { FlyoutContainers } from '../../../common/flyout_containers';
import { IDocType } from './docViewRow';
import { IExplorerFields, IField } from '../../../../../common/types/explorer';
import { getHeaders, fetchSurroundingData, rangeNumDocs, populateDataGrid } from '../../utils';
import { DEFAULT_COLUMNS } from '../../../../../common/constants/explorer';
import { HttpSetup } from '../../../../../../../src/core/public';
import { IField } from '../../../../../common/types/explorer';
import { fetchSurroundingData, rangeNumDocs } from '../../utils';
import { DATE_DISPLAY_FORMAT } from '../../../../../common/constants/explorer';
import PPLService from '../../../../services/requests/ppl';

interface Props {
http: HttpSetup;
detailsOpen: boolean;
setDetailsOpen: React.Dispatch<React.SetStateAction<boolean>>;
doc: IDocType;
timeStampField: string;
memorizedTds: JSX.Element[];
explorerFields: IExplorerFields;
openTraces: boolean;
setOpenTraces: React.Dispatch<React.SetStateAction<boolean>>;
setSurroundingEventsOpen: React.Dispatch<React.SetStateAction<boolean>>;
pplService: PPLService;
Expand All @@ -46,17 +44,17 @@ interface Props {
getTds: (doc: IDocType, selectedCols: IField[], isFlyout: boolean) => JSX.Element[];
toggleSize: boolean;
setToggleSize: React.Dispatch<React.SetStateAction<boolean>>;
dataGridColumns: any;
dataGridColumnVisibility: any;
sortingFields: any;
rowHeightsOptions: any;
rows: any;
}

export const SurroundingFlyout = ({
http,
detailsOpen,
setDetailsOpen,
doc,
timeStampField,
memorizedTds,
explorerFields,
openTraces,
setOpenTraces,
setSurroundingEventsOpen,
pplService,
Expand All @@ -65,15 +63,19 @@ export const SurroundingFlyout = ({
getTds,
toggleSize,
setToggleSize,
dataGridColumns,
dataGridColumnVisibility,
sortingFields,
rowHeightsOptions,
}: Props) => {
const [numNewEvents, setNumNewEvents] = useState(5);
const [valueOldEvents, setNumOldEvents] = useState(5);
const [loadingNewEvents, setLoadingNewEvents] = useState(false);
const [loadingOldEvents, setLoadingOldEvents] = useState(false);
const [oldEventsError, setOldEventsError] = useState('');
const [newEventsError, setNewEventsError] = useState('');
const [newEventsData, setNewEventsData] = useState<JSX.Element[][]>([[]]);
const [oldEventsData, setOldEventsData] = useState<JSX.Element[][]>([[]]);
const [newEventsData, setNewEventsData] = useState<any[]>([]);
const [oldEventsData, setOldEventsData] = useState<any[]>([]);

const closeFlyout = () => {
setDetailsOpen(false);
Expand Down Expand Up @@ -123,6 +125,46 @@ export const SurroundingFlyout = ({
}
};

const renderCells = ({ rowIndex, columnId }: { rowIndex: number; columnId: string }) => {
let actualIndex: number;
let rowDoc: any;

if (rowIndex < newEventsData.length) {
// within newEvents section of table, pull data from there
actualIndex = rowIndex;
rowDoc = newEventsData[rowIndex];
} else if (rowIndex === newEventsData.length) {
// is the selected row
actualIndex = rowIndex;
rowDoc = doc;
} else if (rowIndex > newEventsData.length) {
// within oldEvents section of table
actualIndex = rowIndex - (newEventsData.length + 1);
rowDoc = oldEventsData[actualIndex];
} else {
throw Error();
}

if (columnId === '_source') {
return (
<EuiDescriptionList type="inline" compressed>
{Object.keys(rowDoc).map((key) => (
<Fragment key={key}>
<EuiDescriptionListTitle className="osdDescriptionListFieldTitle">
{key}
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>{rowDoc[key]}</EuiDescriptionListDescription>
</Fragment>
))}
</EuiDescriptionList>
);
}
if (columnId === 'timestamp') {
return `${moment(rowDoc[columnId]).format(DATE_DISPLAY_FORMAT)}`;
}
return `${rowDoc[columnId]}`;
};

const loadButton = (typeOfDocs: 'new' | 'old') => {
if (typeOfDocs === 'new') {
loadData(typeOfDocs, numNewEvents + 5);
Expand Down Expand Up @@ -237,21 +279,21 @@ export const SurroundingFlyout = ({
<EuiCallOut iconType="bolt" title={newEventsError} color="warning" />
)}
</div>
{populateDataGrid(
explorerFields,
getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS.slice(1), true),
<>
{newEventsData}
<tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
{oldEventsData}
</>,
getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS.slice(1), true),
<>
{newEventsData}
<tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
{oldEventsData}
</>
)}
<EuiDataGrid
aria-labelledby="aria-labelledby"
data-test-subj="docTable"
columns={dataGridColumns}
columnVisibility={dataGridColumnVisibility}
rowCount={newEventsData.length + oldEventsData.length + 1}
renderCellValue={renderCells}
sorting={{
columns: sortingFields.current, // TODO: change this to only have timestamp from new to old
onSort: () => {},
}}
toolbarVisibility={false}
rowHeightsOptions={rowHeightsOptions}
height={800}
/>
<div>
{oldEventsError !== '' && (
<EuiCallOut iconType="bolt" title={oldEventsError} color="warning" />
Expand Down
4 changes: 2 additions & 2 deletions public/components/event_analytics/utils/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export const fetchSurroundingData = async (
eventTime: string,
numDocs: number,
typeOfDocs: 'new' | 'old',
setEventsData: React.Dispatch<React.SetStateAction<JSX.Element[][]>>,
setEventsData: React.Dispatch<React.SetStateAction<JSX.Element[]>>,
setIsError: React.Dispatch<React.SetStateAction<string>>,
setLoadingData: React.Dispatch<React.SetStateAction<boolean>>,
selectedCols: IField[],
Expand Down Expand Up @@ -123,7 +123,7 @@ export const fetchSurroundingData = async (
.then((res) => {
const resuleData = typeOfDocs === 'new' ? res.jsonData.reverse() : res.jsonData;
resultCount = resuleData.length;
setEventsData(createTds(resuleData, selectedCols, getTds));
setEventsData(resuleData);
})
.catch((error: Error) => {
setIsError(error.message);
Expand Down

0 comments on commit 7329721

Please sign in to comment.