mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
7699451d94
* Refactor Explore query field - extract typeahead field that only contains logic for the typeahead mechanics - renamed QueryField to PromQueryField, a wrapper around TypeaheadField that deals with Prometheus-specific concepts - PromQueryField creates a promql typeahead by providing the handlers for producing suggestions, and for applying suggestions - The `refresher` promise is needed to trigger a render once an async action in the wrapper returns. This is prep work for a composable query field to be used by Explore, as well as editors in datasource plugins. * Added typeahead handling tests - extracted context-to-suggestion logic to make it testable - kept DOM-dependent parts in main onTypeahead funtion * simplified error handling in explore query field * Refactor query suggestions - use monaco's suggestion types (roughly), see https://github.com/Microsoft/monaco-editor/blob/f6fb545/monaco.d.ts#L4208 - suggest functions and metrics in empty field (ctrl+space) - copy and expand prometheus function docs from prometheus datasource (will be migrated back to the datasource in the future) * Added prop and state types, removed unused cwrp * Split up suggestion processing for code readability
153 lines
2.9 KiB
SCSS
153 lines
2.9 KiB
SCSS
.slate-query-field {
|
|
font-size: $font-size-root;
|
|
font-family: $font-family-monospace;
|
|
height: auto;
|
|
}
|
|
|
|
.slate-query-field-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 6px 7px 4px;
|
|
width: 100%;
|
|
cursor: text;
|
|
line-height: $line-height-base;
|
|
color: $text-color-weak;
|
|
background-color: $panel-bg;
|
|
background-image: none;
|
|
border: $panel-border;
|
|
border-radius: $border-radius;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.slate-typeahead {
|
|
.typeahead {
|
|
position: absolute;
|
|
z-index: auto;
|
|
top: -10000px;
|
|
left: -10000px;
|
|
opacity: 0;
|
|
border-radius: $border-radius;
|
|
transition: opacity 0.75s;
|
|
border: $panel-border;
|
|
max-height: calc(66vh);
|
|
overflow-y: scroll;
|
|
max-width: calc(66%);
|
|
overflow-x: hidden;
|
|
outline: none;
|
|
list-style: none;
|
|
background: $panel-bg;
|
|
color: $text-color;
|
|
transition: opacity 0.4s ease-out;
|
|
box-shadow: $typeahead-shadow;
|
|
}
|
|
|
|
.typeahead-group__title {
|
|
color: $text-color-weak;
|
|
font-size: $font-size-sm;
|
|
line-height: $line-height-base;
|
|
padding: $input-padding-y $input-padding-x;
|
|
}
|
|
|
|
.typeahead-item {
|
|
height: auto;
|
|
font-family: $font-family-monospace;
|
|
padding: $input-padding-y $input-padding-x;
|
|
padding-left: $input-padding-x-lg;
|
|
font-size: $font-size-sm;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
display: block;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
}
|
|
|
|
.typeahead-item__selected {
|
|
background-color: $typeahead-selected-bg;
|
|
color: $typeahead-selected-color;
|
|
|
|
.typeahead-item-hint {
|
|
font-size: $font-size-xs;
|
|
color: $text-color;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* SYNTAX */
|
|
|
|
.slate-query-field {
|
|
.token.comment,
|
|
.token.block-comment,
|
|
.token.prolog,
|
|
.token.doctype,
|
|
.token.cdata {
|
|
color: $text-color-weak;
|
|
}
|
|
|
|
.token.punctuation {
|
|
color: $text-color-weak;
|
|
}
|
|
|
|
.token.property,
|
|
.token.tag,
|
|
.token.boolean,
|
|
.token.number,
|
|
.token.function-name,
|
|
.token.constant,
|
|
.token.symbol,
|
|
.token.deleted {
|
|
color: $query-red;
|
|
}
|
|
|
|
.token.selector,
|
|
.token.attr-name,
|
|
.token.string,
|
|
.token.char,
|
|
.token.function,
|
|
.token.builtin,
|
|
.token.inserted {
|
|
color: $query-green;
|
|
}
|
|
|
|
.token.operator,
|
|
.token.entity,
|
|
.token.url,
|
|
.token.variable {
|
|
color: $query-purple;
|
|
}
|
|
|
|
.token.atrule,
|
|
.token.attr-value,
|
|
.token.keyword,
|
|
.token.class-name {
|
|
color: $blue;
|
|
}
|
|
|
|
.token.regex,
|
|
.token.important {
|
|
color: $query-orange;
|
|
}
|
|
|
|
.token.important {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.token.bold {
|
|
font-weight: bold;
|
|
}
|
|
.token.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.token.entity {
|
|
cursor: help;
|
|
}
|
|
|
|
.namespace {
|
|
opacity: 0.7;
|
|
}
|
|
}
|