IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Tracing: Span filters UI enhancements (#72245)

Browse Source 
* Update margin between inputs

* Updated spacing between toggle and text

* Add more spacing
This commit is contained in:
Joey 2023-07-25 13:31:44 +01:00 committed by GitHub
parent 1f742fcf93
commit c1c8b4d368
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx
View File

@ -135,13 +135,12 @@ export const getStyles = (theme: GrafanaTheme2) => {
`,
matchesOnly: css`
display: inline-flex;
margin: 0 0 0 10px;
margin: 0 0 0 25px;
vertical-align: middle;
align-items: center;
span {
cursor: pointer;
margin: 0 0 0 5px;
}
`,
clearMatchesButton: css`

28
public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx
View File

@ -348,15 +348,17 @@ export const SpanFilters = memo((props: SpanFilterProps) => {
options={[toOption('>'), toOption('>=')]}
value={search.fromOperator}
/>
<IntervalInput
ariaLabel="Select min span duration"
onChange={(val) => setSpanFiltersSearch({ ...search, from: val })}
isInvalidError="Invalid duration"
placeholder="e.g. 100ms, 1.2s"
width={18}
value={search.from || ''}
validationRegex={durationRegex}
/>
<div className={styles.intervalInput}>
<IntervalInput
ariaLabel="Select min span duration"
onChange={(val) => setSpanFiltersSearch({ ...search, from: val })}
isInvalidError="Invalid duration"
placeholder="e.g. 100ms, 1.2s"
width={18}
value={search.from || ''}
validationRegex={durationRegex}
/>
</div>
<Select
aria-label="Select max span operator"
onChange={(v) => setSpanFiltersSearch({ ...search, toOperator: v.value! })}
@ -375,7 +377,7 @@ export const SpanFilters = memo((props: SpanFilterProps) => {
</HorizontalGroup>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineFieldRow className={styles.tagsRow}>
<InlineField label="Tags" labelWidth={16} tooltip="Filter by tags, process tags or log fields in your spans.">
<div>
{search.tags.map((tag, i) => (
@ -487,6 +489,12 @@ const getStyles = (theme: GrafanaTheme2) => {
addTag: css`
margin: 0 0 0 10px;
`,
intervalInput: css`
margin: 0 -4px 0 0;
`,
tagsRow: css`
margin: -4px 0 0 0;
`,
tagValues: css`
max-width: 200px;
`,