-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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.
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
Metrics time selection #6360
Metrics time selection #6360
Changes from 10 commits
e3fdf42
7c5081a
aabce6e
dc9985a
c8bfe87
698a771
a510958
803f72b
3c6dab3
4112d04
9368e74
df43f0e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,41 @@ | ||
.infra-container-card { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
} | ||
.infra-container-card-text { | ||
font-size: var(--font-size-sm); | ||
color: var(--text-vanilla-400); | ||
line-height: 20px; | ||
letter-spacing: -0.07px; | ||
width: 400px; | ||
font-family: 'Inter'; | ||
} | ||
.host-containers { | ||
max-width: 600px; | ||
margin: 150px auto; | ||
padding: 0 16px; | ||
|
||
.infra-container-card { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
} | ||
|
||
.infra-container-working-msg { | ||
display: flex; | ||
width: 400px; | ||
padding: 12px; | ||
align-items: flex-start; | ||
gap: 12px; | ||
border-radius: 4px; | ||
background: rgba(171, 189, 255, 0.04); | ||
.infra-container-card-text { | ||
font-size: var(--font-size-sm); | ||
color: var(--text-vanilla-400); | ||
line-height: 20px; | ||
letter-spacing: -0.07px; | ||
width: 400px; | ||
font-family: 'Inter'; | ||
} | ||
|
||
.ant-space { | ||
.infra-container-working-msg { | ||
display: flex; | ||
width: 400px; | ||
padding: 12px; | ||
align-items: flex-start; | ||
gap: 12px; | ||
border-radius: 4px; | ||
background: rgba(171, 189, 255, 0.04); | ||
|
||
.ant-space { | ||
align-items: flex-start; | ||
} | ||
} | ||
} | ||
|
||
.infra-container-contact-support-btn { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
margin: auto; | ||
.infra-container-contact-support-btn { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
margin: auto; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
.host-metric-traces { | ||
.ant-table { | ||
background: #121212; | ||
color: #fff; | ||
|
||
.ant-table-thead>tr>th { | ||
background: #121212; | ||
color: #fff; | ||
border-bottom: 1px solid #303030; | ||
} | ||
|
||
.ant-table-tbody>tr>td { | ||
background: #121212; | ||
color: #fff; | ||
border-bottom: 1px solid #303030; | ||
} | ||
|
||
.ant-table-tbody>tr:hover>td { | ||
background: #1a1a1a; | ||
} | ||
} | ||
|
||
.duration-cell { | ||
display: inline-block; | ||
padding: 2px 8px; | ||
background: #d64937; | ||
border-radius: 4px; | ||
color: #fff; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import './HostMetricTraces.styles.scss'; | ||
|
||
import { Skeleton } from 'antd'; | ||
import { ResizeTable } from 'components/ResizeTable'; | ||
import { DEFAULT_ENTITY_VERSION } from 'constants/app'; | ||
import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; | ||
import { useEffect, useMemo, useState } from 'react'; | ||
import { useQuery } from 'react-query'; | ||
|
||
import { columns, getHostTracesQueryPayload } from './constants'; | ||
|
||
interface Props { | ||
hostName: string; | ||
timeRange: { | ||
startTime: number; | ||
endTime: number; | ||
}; | ||
} | ||
|
||
function HostMetricTraces({ hostName, timeRange }: Props): JSX.Element { | ||
const [traces, setTraces] = useState<any[]>([]); | ||
const [offset] = useState<number>(0); | ||
|
||
const queryPayload = useMemo( | ||
() => | ||
getHostTracesQueryPayload( | ||
hostName, | ||
timeRange.startTime, | ||
timeRange.endTime, | ||
offset, | ||
), | ||
[hostName, timeRange.startTime, timeRange.endTime, offset], | ||
); | ||
|
||
const { data, isLoading } = useQuery({ | ||
queryKey: ['hostMetricTraces', queryPayload, DEFAULT_ENTITY_VERSION], | ||
queryFn: () => GetMetricQueryRange(queryPayload, DEFAULT_ENTITY_VERSION), | ||
}); | ||
|
||
useEffect(() => { | ||
if (data?.payload?.data?.newResult?.data?.result) { | ||
const currentData = data.payload.data.newResult.data.result; | ||
if (currentData.length > 0 && currentData[0].list) { | ||
if (offset === 0) { | ||
setTraces(currentData[0].list ?? []); | ||
} else { | ||
setTraces((prev) => [...prev, ...(currentData[0].list ?? [])]); | ||
} | ||
} | ||
} | ||
}, [data, offset]); | ||
|
||
if (isLoading && traces.length === 0) { | ||
return <Skeleton active />; | ||
} | ||
|
||
return ( | ||
<div className="host-metric-traces"> | ||
<ResizeTable | ||
tableLayout="fixed" | ||
pagination={false} | ||
scroll={{ x: true }} | ||
loading={isLoading && traces.length === 0} | ||
dataSource={traces} | ||
columns={columns} | ||
/> | ||
{isLoading && traces.length > 0 && ( | ||
<Skeleton | ||
style={{ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Avoid using inline styles. Consider using external stylesheets, CSS classes, or styled components instead. This also applies to the inline styles on lines 166 and 182 in There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. +1 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @SagarRajput-7 Let me add these changes of Traces in the new PR. |
||
height: '100%', | ||
padding: '16px', | ||
}} | ||
/> | ||
)} | ||
</div> | ||
); | ||
} | ||
|
||
export default HostMetricTraces; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,173 @@ | ||
import { PANEL_TYPES } from 'constants/queryBuilder'; | ||
import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults'; | ||
import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; | ||
import { EQueryType } from 'types/common/dashboard'; | ||
import { DataSource } from 'types/common/queryBuilder'; | ||
|
||
import { formatNanoToMS } from './utils'; | ||
|
||
export const columns = [ | ||
{ | ||
dataIndex: 'timestamp', | ||
key: 'timestamp', | ||
title: 'Timestamp', | ||
width: 145, | ||
render: (timestamp: string): string => new Date(timestamp).toLocaleString(), | ||
}, | ||
{ | ||
title: 'Service Name', | ||
dataIndex: ['data', 'serviceName'], | ||
key: 'serviceName-string-tag', | ||
width: 145, | ||
}, | ||
{ | ||
title: 'Name', | ||
dataIndex: ['data', 'name'], | ||
key: 'name-string-tag', | ||
width: 145, | ||
}, | ||
{ | ||
title: 'Duration', | ||
dataIndex: ['data', 'durationNano'], | ||
key: 'durationNano-float64-tag', | ||
width: 145, | ||
render: (duration: number): string => `${formatNanoToMS(duration)}`, | ||
}, | ||
{ | ||
title: 'HTTP Method', | ||
dataIndex: ['data', 'httpMethod'], | ||
key: 'httpMethod-string-tag', | ||
width: 145, | ||
}, | ||
{ | ||
title: 'Status Code', | ||
dataIndex: ['data', 'responseStatusCode'], | ||
key: 'responseStatusCode-string-tag', | ||
width: 145, | ||
}, | ||
]; | ||
|
||
export const getHostTracesQueryPayload = ( | ||
hostName: string, | ||
start: number, | ||
end: number, | ||
offset = 0, | ||
): GetQueryResultsProps => ({ | ||
query: { | ||
promql: [], | ||
clickhouse_sql: [], | ||
builder: { | ||
queryData: [ | ||
{ | ||
dataSource: DataSource.TRACES, | ||
queryName: 'A', | ||
aggregateOperator: 'noop', | ||
aggregateAttribute: { | ||
id: '------false', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. check if there's an id available - which includes key also, something like |
||
dataType: DataTypes.EMPTY, | ||
key: '', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. no key? |
||
isColumn: false, | ||
type: '', | ||
isJSON: false, | ||
}, | ||
timeAggregation: 'rate', | ||
spaceAggregation: 'sum', | ||
functions: [], | ||
filters: { | ||
items: [ | ||
{ | ||
id: 'host-filter', | ||
key: { | ||
key: 'host.name', | ||
dataType: DataTypes.String, | ||
type: 'resource', | ||
isColumn: false, | ||
isJSON: false, | ||
id: 'host.name--string--resource--false', | ||
}, | ||
op: '=', | ||
value: hostName, | ||
}, | ||
], | ||
op: 'AND', | ||
}, | ||
expression: 'A', | ||
disabled: false, | ||
stepInterval: 60, | ||
having: [], | ||
limit: null, | ||
orderBy: [ | ||
{ | ||
columnName: 'timestamp', | ||
order: 'desc', | ||
}, | ||
], | ||
groupBy: [], | ||
legend: '', | ||
reduceTo: 'avg', | ||
}, | ||
], | ||
queryFormulas: [], | ||
}, | ||
id: '572f1d91-6ac0-46c0-b726-c21488b34434', | ||
rahulkeswani101 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
queryType: EQueryType.QUERY_BUILDER, | ||
}, | ||
graphType: PANEL_TYPES.LIST, | ||
selectedTime: 'GLOBAL_TIME', | ||
params: { | ||
dataSource: DataSource.TRACES, | ||
}, | ||
tableParams: { | ||
pagination: { | ||
limit: 10, | ||
offset, | ||
}, | ||
selectColumns: [ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. check if we can use the constant - |
||
{ | ||
key: 'serviceName', | ||
dataType: 'string', | ||
type: 'tag', | ||
isColumn: true, | ||
isJSON: false, | ||
id: 'serviceName--string--tag--true', | ||
isIndexed: false, | ||
}, | ||
{ | ||
key: 'name', | ||
dataType: 'string', | ||
type: 'tag', | ||
isColumn: true, | ||
isJSON: false, | ||
id: 'name--string--tag--true', | ||
isIndexed: false, | ||
}, | ||
{ | ||
key: 'durationNano', | ||
dataType: 'float64', | ||
type: 'tag', | ||
isColumn: true, | ||
isJSON: false, | ||
id: 'durationNano--float64--tag--true', | ||
isIndexed: false, | ||
}, | ||
{ | ||
key: 'httpMethod', | ||
dataType: 'string', | ||
type: 'tag', | ||
isColumn: true, | ||
isJSON: false, | ||
id: 'httpMethod--string--tag--true', | ||
isIndexed: false, | ||
}, | ||
{ | ||
key: 'responseStatusCode', | ||
dataType: 'string', | ||
type: 'tag', | ||
isColumn: true, | ||
isJSON: false, | ||
id: 'responseStatusCode--string--tag--true', | ||
isIndexed: false, | ||
}, | ||
], | ||
}, | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export const formatNanoToMS = (nanoSeconds: number): string => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. +1 |
||
const milliseconds = nanoSeconds / 1_000_000; | ||
return `${milliseconds.toFixed(0)}ms`; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use design tokens or predefined color constants instead of hardcoding color values for
background
andcolor
. This applies to lines 3, 4, 7, 8, 9, 13, 14, 15, 19, and 26.