Skip to content

Commit

Permalink
Fix metadata field rendering and log off-by-one error (#51)
Browse files Browse the repository at this point in the history 
* Fix metadata fields accidentally being hidden

* Fix off-by-one error

* Moved from a hardcoded string to a dynamic one

* Refactor into a proper type, fix other instances of hardcoded values
  • Loading branch information
@kyle-sammons
kyle-sammons authored Feb 13, 2024
1 parent fa41ab3 commit dead011
Show file tree
Hide file tree
Showing 6 changed files with 128 additions and 46 deletions.
5 changes: 3 additions & 2 deletions src/datasource/components/FieldValueFrequency.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { HorizontalGroup, VerticalGroup, Button } from '@grafana/ui';
interface Props {
field: Field;
children: JSX.Element;
logMessageField: string;
onPlusClick?: (field: Field, value: string) => void;
onMinusClick?: (field: Field, value: string) => void;
}
Expand Down Expand Up @@ -130,9 +131,9 @@ const InnerFooter = (field: Field) => {
/**
* A component to show the FieldValueFrequency for a given field value in the app UI.
*/
const FieldValueFrequency = ({ field, children, onMinusClick, onPlusClick }: Props) => {
const FieldValueFrequency = ({ field, children, onMinusClick, onPlusClick, logMessageField }: Props) => {
// This doesn't make sense for this field
if (field.name === '_source') {
if (field.name === logMessageField) {
return <></>;
}

Expand Down
62 changes: 38 additions & 24 deletions src/datasource/components/Logs/LogsCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const LogKeyVal = ({ field, val }: LogKeyValProps) => {

</div>
<div style={{display: 'inline-block'}}>
{val}
{JSON.stringify(val)}
</div>
</div>);
}
Expand All @@ -45,7 +45,7 @@ const ExpandedLogKeyVal = ({ field, val }: ExpandedLogKeyValProps) => {

</td>
<td>
{val}
{JSON.stringify(val)}
</td>
</tr>);
}
Expand All @@ -56,10 +56,15 @@ interface ExpandedDocumentProps {
datasourceUid: string,
datasourceName: string,
datasourceField: string,
logMessageField: string,
}


const ExpandedDocument = ({ log, index, datasourceUid, datasourceName, datasourceField }: ExpandedDocumentProps) => {
const ExpandedDocument = ({ log, index, datasourceUid, datasourceName, datasourceField, logMessageField }: ExpandedDocumentProps) => {
// The index in the logs is off by one from the index in the table (due to the header row). In this
// case we care about the index in the table, so add one to it.
index += 1;

const { setSize, windowWidth } = getLogTableContext();
const root = React.useRef<HTMLDivElement>();
React.useEffect(() => {
Expand Down Expand Up @@ -115,11 +120,13 @@ const ExpandedDocument = ({ log, index, datasourceUid, datasourceName, datasour
</tr>
{
Array.from(log.keys()).map((key) => (
<ExpandedLogKeyVal
field={key}
val={log.get(key)}
key={key}
/>
key !== logMessageField ?
<ExpandedLogKeyVal
field={key}
val={log.get(key)}
key={key}
/>
: <></>
))
}
</table>
Expand All @@ -143,7 +150,7 @@ const ExpandedDocument = ({ log, index, datasourceUid, datasourceName, datasour
}


const DocumentCell = (log: Log, style: any, rowIndex: number, expanded: boolean, datasourceUid: string, datasourceName: string, datasourceField: string) => (
const DocumentCell = (log: Log, style: any, rowIndex: number, expanded: boolean, datasourceUid: string, datasourceName: string, datasourceField: string, logMessageField: string) => (
<div
style={{
display: 'inline-block',
Expand All @@ -158,11 +165,13 @@ const DocumentCell = (log: Log, style: any, rowIndex: number, expanded: boolean,
<div style={{maxHeight: '115px', overflow: 'hidden'}}>
{
Array.from(log.keys()).map((key) => (
<LogKeyVal
field={key}
val={log.get(key)}
key={key}
/>
key !== logMessageField ?
<LogKeyVal
field={key}
val={log.get(key)}
key={key}
/>
: <></>
))
}
</div>
Expand All @@ -174,6 +183,7 @@ const DocumentCell = (log: Log, style: any, rowIndex: number, expanded: boolean,
datasourceUid={datasourceUid}
datasourceName={datasourceName}
datasourceField={datasourceField}
logMessageField={logMessageField}
/>)

: ''
Expand Down Expand Up @@ -260,16 +270,14 @@ const shrinkRows = (expandedRows: boolean[], rowIndex: number, setSize: (index:
}



const LogCell = ({ columnIndex, rowIndex, style, data }) => {
const log = data.logs[rowIndex];
const timestamp = data.timestamps[rowIndex];
const column = data.columns[columnIndex];
const setExpandedRowsAndReRender = data.setExpandedRowsAndReRender;
const expandedRows = data.expandedRows;
const datasourceUid: string = data.datasourceUid;
const datasourceName: string = data.datasourceName;
const datasourceField: string = data.datasourceField;
const logMessageField: string = data.logMessageField;
const { setSize } = getLogTableContext();
const darkModeEnabled = useTheme2().isDark ;

Expand All @@ -278,12 +286,6 @@ const LogCell = ({ columnIndex, rowIndex, style, data }) => {
// const _timeField = data.timeField;
// const _setColumns = data.setColumns

const handleOnClick = (rowIndex: number): any => {
const newExpandedRows = invertRow(expandedRows, rowIndex);
shrinkRows(newExpandedRows, rowIndex, setSize);
setExpandedRowsAndReRender([...newExpandedRows], rowIndex);
}

const outline = darkModeEnabled ? DARK_THEME_OUTLINE : LIGHT_THEME_OUTLINE;

// Handle drawing the borders for the entire row
Expand All @@ -310,10 +312,22 @@ const LogCell = ({ columnIndex, rowIndex, style, data }) => {

}

// The 0th row is the header row, but we still need to render the data in
// row 0. Thus the rowIndex is technically 1 more than the log length
rowIndex -= 1;
const log = data.logs[rowIndex];
const timestamp = data.timestamps[rowIndex];

const handleOnClick = (rowIndex: number): any => {
const newExpandedRows = invertRow(expandedRows, rowIndex);
shrinkRows(newExpandedRows, rowIndex + 1, setSize);
setExpandedRowsAndReRender([...newExpandedRows], rowIndex);
}

if (column.logColumnType === LogColumnType.TIME) {
return TimestampCell(timestamp, style, rowIndex, expandedRows, handleOnClick);
} else if (column.logColumnType === LogColumnType.DOCUMENT) {
return DocumentCell(log, style, rowIndex, expandedRows[rowIndex], datasourceUid, datasourceName, datasourceField);
return DocumentCell(log, style, rowIndex, expandedRows[rowIndex], datasourceUid, datasourceName, datasourceField, logMessageField);
} else {
return FieldCell();
}
Expand Down
7 changes: 4 additions & 3 deletions src/datasource/components/Logs/LogsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,10 @@ interface LogsTableProps {
setExpandedRows: ((value: boolean[] | ((preVar: boolean[]) => boolean[])) => void);
setColumns: ((value: LogColumn[] | ((preVar: LogColumn[]) => LogColumn[])) => void);
datasourceField: string;
logMessageField: string;
}

const LogsTable = ({ logs, timeField, columns, timestamps, expandedRows, setColumns, setExpandedRows, datasourceUid, datasourceName, datasourceField }: LogsTableProps) => {
const LogsTable = ({ logs, timeField, columns, timestamps, expandedRows, setColumns, setExpandedRows, datasourceUid, datasourceName, datasourceField, logMessageField }: LogsTableProps) => {
let gridRef: React.RefObject<Grid> = React.createRef<Grid>();

// In order to get highly variable (and unknown at the time of rendering) row heights in a virtualized environment
Expand Down Expand Up @@ -76,10 +77,10 @@ const LogsTable = ({ logs, timeField, columns, timestamps, expandedRows, setColu
columnCount={columns.length}
columnWidth={index => columns[index].logColumnType === LogColumnType.TIME ? 300 : width-310}
height={height}
rowCount={logs.length}
rowCount={logs.length + 1}
rowHeight={getSize}
width={width}
itemData={{logs, timestamps, columns, timeField, setColumns, setExpandedRowsAndReRender, expandedRows, datasourceUid, datasourceName, datasourceField}}
itemData={{logs, timestamps, columns, timeField, setColumns, setExpandedRowsAndReRender, expandedRows, datasourceUid, datasourceName, datasourceField, logMessageField}}
>
{LogCell}
</Grid>
Expand Down
4 changes: 3 additions & 1 deletion src/datasource/components/Logs/LogsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ interface LogsViewProps {
datasourceUid: string;
datasourceName: string;
datasourceField: string;
logMessageField: string;
}

const LogsView = ({ logs, timeField, timestamps, datasourceUid, datasourceName, datasourceField }: LogsViewProps) => {
const LogsView = ({ logs, timeField, timestamps, datasourceUid, datasourceName, datasourceField, logMessageField }: LogsViewProps) => {
const [columns, setColumns] = React.useState<LogColumn[]>([
{
logColumnType: LogColumnType.TIME,
Expand Down Expand Up @@ -46,6 +47,7 @@ const LogsView = ({ logs, timeField, timestamps, datasourceUid, datasourceName,
datasourceUid={datasourceUid}
datasourceName={datasourceName}
datasourceField={datasourceField}
logMessageField={logMessageField}
/>
)

Expand Down
11 changes: 11 additions & 0 deletions src/datasource/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,14 @@ export interface Field {
}

export type Log = Map<string, any>;

export type DatasourceUserConfig = {
database: string;
flavor: string;
logLevelField: string;
logMessageField: string;
maxConcurrentShardRequests: number;
pplEnabled: boolean;
timeField: string;
version: string;
}
Loading

0 comments on commit dead011

Please sign in to comment.