Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix metadata field rendering and log off-by-one error #51

Merged
merged 4 commits into from
Feb 13, 2024
Merged

Fix metadata field rendering and log off-by-one error #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f6ece0d
Fix metadata fields accidentally being hidden
kyle-sammons Feb 12, 2024
4d02fc9
Fix off-by-one error
kyle-sammons Feb 13, 2024
2a6fbbd
Moved from a hardcoded string to a dynamic one
kyle-sammons Feb 13, 2024
689ca36
Refactor into a proper type, fix other instances of hardcoded values
kyle-sammons Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/datasource/components/FieldValueFrequency.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading