Skip to content

Commit

Permalink
PR fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle-sammons
kyle-sammons committed Jan 12, 2024
1 parent c15b688 commit 4e003ed
Show file tree
Hide file tree
Showing 10 changed files with 95 additions and 145 deletions.
2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
"@types/enzyme": "3.10.5",
"@types/jest": "^29.5.0",
"@types/lodash": "^4.14.194",
"@types/luxon": "^3.4.0",
"@types/node": "^18.15.11",
"@types/prismjs": "1.16.5",
"@types/react": "17.0.14",
Expand Down Expand Up @@ -90,7 +89,6 @@
"@grafana/schema": "canary",
"@grafana/ui": "9.5.5",
"lodash": "4.17.21",
"luxon": "^3.4.4",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-use": "17.4.0",
Expand Down
28 changes: 13 additions & 15 deletions src/datasource/components/FieldValueFrequency.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React from 'react';
import { Field, ValueFrequency } from 'datasource/types';
import { Toggletip } from './Toggletip';
import { HorizontalGroup, VerticalGroup, Button } from '@grafana/ui';
Expand Down Expand Up @@ -51,17 +51,15 @@ function getValueCountsForField(unmappedFieldValuesArray: any): ValueFrequency[]

const InnerTitle = (field: Field) => {
return (
<div>
<span
style={{
fontFamily: 'monospace',
}}
>
<h5>
<b>{field.name}</b>
</h5>
</span>
</div>
<span
style={{
fontFamily: 'monospace',
}}
>
<h5>
<b>{field.name}</b>
</h5>
</span>
);
};

Expand All @@ -72,7 +70,7 @@ const InnerContent = (
) => {
let mostCommonValues = getValueCountsForField(field.unmappedFieldValuesArray)
return (
<div>
<>
<span>
<b>
Top {mostCommonValues.length} {mostCommonValues.length > 1 ? 'values' : 'value'}
Expand Down Expand Up @@ -117,7 +115,7 @@ const InnerContent = (
</VerticalGroup>
);
})}
</div>
</>
);
};

Expand All @@ -135,7 +133,7 @@ const InnerFooter = (field: Field) => {
const FieldValueFrequency = ({ field, children, onMinusClick, onPlusClick }: Props) => {
// This doesn't make sense for this field
if (field.name === '_source') {
return <div></div>;
return <></>;
}

return (
Expand Down
64 changes: 32 additions & 32 deletions src/datasource/components/Logs/LogsCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Log } from 'datasource/types'
import { LogColumnType, LogColumn } from 'datasource/components/Logs/types'
import getLogTableContext from 'datasource/components/Logs/context'
import { Button, useTheme2 } from '@grafana/ui'
import { getTimeZone } from '@grafana/data'
import { DateTime } from 'luxon'
import { dateTimeParse, getTimeZone } from '@grafana/data'
import { DARK_THEME_HIGHLIGHTED_BACKGROUND, DARK_THEME_OUTLINE, LIGHT_THEME_HIGHLIGHTED_BACKGROUND, LIGHT_THEME_OUTLINE } from './styles'


interface LogKeyValProps {
Expand All @@ -15,7 +15,14 @@ interface LogKeyValProps {

const LogKeyVal = ({ field, val }: LogKeyValProps) => {
return (<div style={{display:'inline-block', paddingRight: '10px'}}>
<div style={{backgroundColor: useTheme2().isDark ? '#343741' : '#e6f1fa', display: 'inline', borderRadius: '6px', marginRight: '3px', padding: '2px 4px'}}>
<div
style={{
backgroundColor: useTheme2().isDark ? DARK_THEME_HIGHLIGHTED_BACKGROUND : LIGHT_THEME_HIGHLIGHTED_BACKGROUND,
display: 'inline',
borderRadius: '6px',
marginRight: '3px',
padding: '2px 4px'
}}>
{field + ":"}

</div>
Expand Down Expand Up @@ -48,11 +55,12 @@ interface ExpandedDocumentProps {
log: Log,
index: number,
datasourceUid: string,
datasourceName: string
datasourceName: string,
datasourceField: string,
}


const ExpandedDocument = ({ log, index, datasourceUid, datasourceName, }: ExpandedDocumentProps) => {
const ExpandedDocument = ({ log, index, datasourceUid, datasourceName, datasourceField }: ExpandedDocumentProps) => {
const { setSize, windowWidth } = getLogTableContext();
const root = React.useRef<HTMLDivElement>();
React.useEffect(() => {
Expand All @@ -64,7 +72,7 @@ const ExpandedDocument = ({ log, index, datasourceUid, datasourceName, }: Expan
const link = {
datasource: datasourceUid,
queries: [{
query: log.get("trace_id"), // TODO: This should be user configurable
query: log.get(datasourceField),
refId: "A",
}],
range:{
Expand Down Expand Up @@ -117,8 +125,7 @@ const ExpandedDocument = ({ log, index, datasourceUid, datasourceName, }: Expan
}
</table>
{
// TODO: Should this value be configurable?
log.has('trace_id') && datasourceName && datasourceUid ?
log.has(datasourceField) && datasourceName && datasourceUid ?
(
<a href={formattedLink}>
<Button
Expand All @@ -137,7 +144,7 @@ const ExpandedDocument = ({ log, index, datasourceUid, datasourceName, }: Expan
}


const DocumentCell = (log: Log, style: any, rowIndex: number, expanded: boolean, datasourceUid: string, datasourceName: string) => (
const DocumentCell = (log: Log, style: any, rowIndex: number, expanded: boolean, datasourceUid: string, datasourceName: string, datasourceField: string) => (
<div
style={{
display: 'inline-block',
Expand Down Expand Up @@ -167,6 +174,7 @@ const DocumentCell = (log: Log, style: any, rowIndex: number, expanded: boolean,
index={rowIndex}
datasourceUid={datasourceUid}
datasourceName={datasourceName}
datasourceField={datasourceField}
/>)

: ''
Expand All @@ -182,17 +190,6 @@ const TimestampCell = (timestamp: number, style: any, rowIndex: number, expanded
return 'angle-right';
};

const userTimezone = getTimeZone();
let formattedTime: string | null = null;
if (timestamp) {
let datetime = DateTime.fromMillis(timestamp);
if (userTimezone !== 'browser') {
datetime = datetime.setZone(userTimezone);
}
formattedTime = datetime.toISO();
}


return (
<div style={
{
Expand All @@ -217,9 +214,9 @@ const TimestampCell = (timestamp: number, style: any, rowIndex: number, expanded
onClick={() => onClick(rowIndex)}
/>
</div>
<div>
{formattedTime}
</div>
<>
{dateTimeParse(timestamp, {timeZone: getTimeZone()}).format("YYYY-MM-DD @ HH:mm:ss:SSS Z").toString()}
</>
</div>
);
}
Expand Down Expand Up @@ -269,10 +266,11 @@ 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 = data.datasourceUid
const datasourceName = data.datasourceName
const setExpandedRowsAndReRender = data.setExpandedRowsAndReRender;
const expandedRows = data.expandedRows;
const datasourceUid: string = data.datasourceUid;
const datasourceName: string = data.datasourceName;
const datasourceField: string = data.datasourceField;
const { setSize } = getLogTableContext();
const darkModeEnabled = useTheme2().isDark ;

Expand All @@ -287,23 +285,25 @@ const LogCell = ({ columnIndex, rowIndex, style, data }) => {
setExpandedRowsAndReRender([...newExpandedRows], rowIndex);
}

const outline = darkModeEnabled ? DARK_THEME_OUTLINE : LIGHT_THEME_OUTLINE;

// Handle drawing the borders for the entire row
// Only draw a borderon the left if we're on the left-most cell
if (columnIndex === 0) {
style['borderLeft'] = darkModeEnabled ? '1px solid rgb(71, 71, 71)' : '1px solid rgba(36, 41, 46, 0.3)';
style['borderLeft'] = outline;
}

// Only draw a border on the top if we're on the top-most cell
if (rowIndex === 0) {
style['borderTop'] = darkModeEnabled ? '1px solid rgb(71, 71, 71)' : '1px solid rgba(36, 41, 46, 0.3)';
style['borderTop'] = outline;
}

// Only draw a border on the right if we're on the right-most cell
if (columnIndex === data.columns.length - 1) {
style['borderRight'] = darkModeEnabled ? '1px solid rgb(71, 71, 71)' : '1px solid rgba(36, 41, 46, 0.3)';
style['borderRight'] = outline;
}

style['borderBottom'] = darkModeEnabled ? '1px solid rgb(71, 71, 71)' : '1px solid rgba(36, 41, 46, 0.3)';
style['borderBottom'] = outline;



Expand All @@ -316,7 +316,7 @@ const LogCell = ({ columnIndex, rowIndex, style, data }) => {
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);
return DocumentCell(log, style, rowIndex, expandedRows[rowIndex], datasourceUid, datasourceName, datasourceField);
} 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 @@ -32,9 +32,10 @@ interface LogsTableProps {
datasourceName: string;
setExpandedRows: ((value: boolean[] | ((preVar: boolean[]) => boolean[])) => void);
setColumns: ((value: LogColumn[] | ((preVar: LogColumn[]) => LogColumn[])) => void);
datasourceField: string;
}

const LogsTable = ({ logs, timeField, columns, timestamps, expandedRows, setColumns, setExpandedRows, datasourceUid, datasourceName }: LogsTableProps) => {
const LogsTable = ({ logs, timeField, columns, timestamps, expandedRows, setColumns, setExpandedRows, datasourceUid, datasourceName, datasourceField }: 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 @@ -73,12 +74,12 @@ const LogsTable = ({ logs, timeField, columns, timestamps, expandedRows, setColu
<Grid
ref={gridRef}
columnCount={columns.length}
columnWidth={index => columns[index].logColumnType === LogColumnType.TIME ? 300 : width-300}
columnWidth={index => columns[index].logColumnType === LogColumnType.TIME ? 300 : width-310}
height={height}
rowCount={logs.length}
rowHeight={getSize}
width={width}
itemData={{logs, timestamps, columns, timeField, setColumns, setExpandedRowsAndReRender, expandedRows, datasourceUid, datasourceName}}
itemData={{logs, timestamps, columns, timeField, setColumns, setExpandedRowsAndReRender, expandedRows, datasourceUid, datasourceName, datasourceField}}
>
{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 @@ -10,9 +10,10 @@ interface LogsViewProps {
timestamps: number[];
datasourceUid: string;
datasourceName: string;
datasourceField: string;
}

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

Expand Down
7 changes: 7 additions & 0 deletions src/datasource/components/Logs/styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@

export const DARK_THEME_BACKGROUND = '';
export const DARK_THEME_HIGHLIGHTED_BACKGROUND = '#343741'
export const LIGHT_THEME_BACKGROUND = ''
export const LIGHT_THEME_HIGHLIGHTED_BACKGROUND = '#E6F1FA'
export const LIGHT_THEME_OUTLINE = '1px solid rgba(36, 41, 46, 0.12)';
export const DARK_THEME_OUTLINE = '1px solid rgba(204, 204, 220, 0.07)';
51 changes: 0 additions & 51 deletions src/datasource/components/LogsView.tsx
View file

This file was deleted.

40 changes: 19 additions & 21 deletions src/datasource/components/QueryEditor/PPLFormatEditor/HelpMessage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,24 @@ import React from 'react';

export const HelpMessage = () => (
<div className="gf-form grafana-info-box">
<div>
<h5>Table</h5>
<ul>
<li>return any set of columns</li>
</ul>
<br />
<h5>Logs</h5>
<ul>
<li>return any set of columns</li>
</ul>
<br />
<h5>Time series</h5>
<ul>
<li>return column as date, datetime, or timestamp</li>
<li>return column with numeric datatype as values</li>
</ul>
<br />
Example PPL query for time series:
<br />
<code>source=&lt;index&gt; | eval dateValue=timestamp(timestamp) | stats count(response) by dateValue</code>
</div>
<h5>Table</h5>
<ul>
<li>return any set of columns</li>
</ul>
<br />
<h5>Logs</h5>
<ul>
<li>return any set of columns</li>
</ul>
<br />
<h5>Time series</h5>
<ul>
<li>return column as date, datetime, or timestamp</li>
<li>return column with numeric datatype as values</li>
</ul>
<br />
Example PPL query for time series:
<br />
<code>source=&lt;index&gt; | eval dateValue=timestamp(timestamp) | stats count(response) by dateValue</code>
</div>
);
Loading

0 comments on commit 4e003ed

Please sign in to comment.