Rename default to selected and use picked as an ephemeral ui value
Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>pull/10616/head
parent
4a75224acd
commit
97ec983572
|
@ -142,7 +142,7 @@ export const findInvalidTempVarsInURLQuery = (
|
|||
return urlQueryParamsTempVarsWithInvalidValues
|
||||
}
|
||||
|
||||
const makeDefault = (template: Template, value: string): Template => {
|
||||
const makeSelected = (template: Template, value: string): Template => {
|
||||
const found = template.values.find(v => v.value === value)
|
||||
|
||||
let valueToChoose
|
||||
|
@ -152,39 +152,7 @@ const makeDefault = (template: Template, value: string): Template => {
|
|||
valueToChoose = getDeep<string>(template, 'values.0.value', '')
|
||||
}
|
||||
|
||||
const valuesWithDefault = template.values.map(v => {
|
||||
if (v.value === valueToChoose) {
|
||||
return {...v, default: true}
|
||||
} else {
|
||||
return {...v, default: false}
|
||||
}
|
||||
})
|
||||
|
||||
return {...template, values: valuesWithDefault}
|
||||
}
|
||||
|
||||
export const selectDefault = (template: Template): Template => {
|
||||
const defaultValue = ''
|
||||
|
||||
return makeSelected(template, defaultValue)
|
||||
}
|
||||
|
||||
export const makeSelected = (template: Template, value: string): Template => {
|
||||
const found = template.values.find(v => v.value === value)
|
||||
const defaultValue = template.values.find(v => v.default)
|
||||
|
||||
let valueToChoose: string
|
||||
if (found) {
|
||||
valueToChoose = found.value
|
||||
} else if (defaultValue) {
|
||||
valueToChoose = defaultValue.value
|
||||
} else {
|
||||
valueToChoose = getDeep<string>(template, 'values.0.value', '')
|
||||
}
|
||||
|
||||
console.log('Value to choose', valueToChoose)
|
||||
|
||||
const valuesWithDefault = template.values.map(v => {
|
||||
const valuesWithSelected = template.values.map(v => {
|
||||
if (v.value === valueToChoose) {
|
||||
return {...v, selected: true}
|
||||
} else {
|
||||
|
@ -192,24 +160,55 @@ export const makeSelected = (template: Template, value: string): Template => {
|
|||
}
|
||||
})
|
||||
|
||||
return {...template, values: valuesWithDefault}
|
||||
return {...template, values: valuesWithSelected}
|
||||
}
|
||||
|
||||
export const reconcileDefaultAndSelectedValues = (
|
||||
export const pickSelected = (template: Template): Template => {
|
||||
const selectedValue = ''
|
||||
|
||||
return makePicked(template, selectedValue)
|
||||
}
|
||||
|
||||
export const makePicked = (template: Template, value: string): Template => {
|
||||
const found = template.values.find(v => v.value === value)
|
||||
const selectedValue = template.values.find(v => v.selected)
|
||||
|
||||
let valueToChoose: string
|
||||
if (found) {
|
||||
valueToChoose = found.value
|
||||
} else if (selectedValue) {
|
||||
valueToChoose = selectedValue.value
|
||||
} else {
|
||||
valueToChoose = getDeep<string>(template, 'values.0.value', '')
|
||||
}
|
||||
|
||||
const valuesWithPicked = template.values.map(v => {
|
||||
if (v.value === valueToChoose) {
|
||||
return {...v, picked: true}
|
||||
} else {
|
||||
return {...v, picked: false}
|
||||
}
|
||||
})
|
||||
|
||||
return {...template, values: valuesWithPicked}
|
||||
}
|
||||
|
||||
export const reconcileSelectedAndPickedValues = (
|
||||
nextTemplate: Template,
|
||||
nextNextTemplate: Template
|
||||
): Template => {
|
||||
const pickedValue = nextTemplate.values.find(v => v.picked)
|
||||
const selectedValue = nextTemplate.values.find(v => v.selected)
|
||||
const defaultValue = nextTemplate.values.find(v => v.default)
|
||||
// make selected from default
|
||||
const TemplateWithDefault = makeDefault(
|
||||
// make picked from selected
|
||||
const TemplateWithPicked = makeSelected(
|
||||
nextNextTemplate,
|
||||
getDeep<string>(defaultValue, 'value', '')
|
||||
)
|
||||
|
||||
const TemplateWithDefaultAndSelected = makeSelected(
|
||||
TemplateWithDefault,
|
||||
getDeep<string>(selectedValue, 'value', '')
|
||||
)
|
||||
return TemplateWithDefaultAndSelected
|
||||
|
||||
const TemplateWithPickedAndSelected = makePicked(
|
||||
TemplateWithPicked,
|
||||
getDeep<string>(pickedValue, 'value', '')
|
||||
)
|
||||
|
||||
return TemplateWithPickedAndSelected
|
||||
}
|
||||
|
|
|
@ -445,7 +445,7 @@ export const intervalValuesPoints = [
|
|||
value: defaultIntervalValue,
|
||||
type: TemplateValueType.Points,
|
||||
selected: true,
|
||||
default: true,
|
||||
picked: true,
|
||||
},
|
||||
]
|
||||
|
||||
|
|
|
@ -123,7 +123,7 @@ class CSVTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
|
|||
type: TemplateValueType.CSV,
|
||||
value,
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
@ -186,7 +186,7 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
|
|||
type: templateValueType,
|
||||
value,
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
@ -137,7 +137,7 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
|
|||
type: TemplateValueType.MetaQuery,
|
||||
value: result,
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
@ -52,7 +52,7 @@ class TemplateControlDropdown extends PureComponent<Props, State> {
|
|||
? {minWidth: calculateDropdownWidth(template.values)}
|
||||
: null
|
||||
|
||||
const selectedItem = dropdownItems.find(item => item.selected) ||
|
||||
const pickedItem = dropdownItems.find(item => item.picked) ||
|
||||
dropdownItems[0] || {text: '(No values)'}
|
||||
|
||||
return (
|
||||
|
@ -62,7 +62,7 @@ class TemplateControlDropdown extends PureComponent<Props, State> {
|
|||
buttonSize="btn-xs"
|
||||
menuClass="dropdown-astronaut"
|
||||
useAutoComplete={true}
|
||||
selected={selectedItem.text}
|
||||
selected={pickedItem.text}
|
||||
disabled={isUsingAuth && !isUserAuthorized(meRole, EDITOR_ROLE)}
|
||||
onChoose={onSelectTemplate(template.id)}
|
||||
/>
|
||||
|
|
|
@ -28,7 +28,7 @@ class TemplatePreviewListItem extends PureComponent<Props> {
|
|||
}
|
||||
|
||||
private get isDefault(): boolean {
|
||||
return this.props.item.default
|
||||
return this.props.item.selected
|
||||
}
|
||||
|
||||
private renderIndicator(): JSX.Element {
|
||||
|
|
|
@ -14,8 +14,8 @@ import {getDeep} from 'src/utils/wrappers'
|
|||
import {notify as notifyActionCreator} from 'src/shared/actions/notifications'
|
||||
|
||||
import {
|
||||
reconcileDefaultAndSelectedValues,
|
||||
selectDefault,
|
||||
reconcileSelectedAndPickedValues,
|
||||
pickSelected,
|
||||
} from 'src/dashboards/utils/tempVars'
|
||||
|
||||
import DatabasesTemplateBuilder from 'src/tempVars/components/DatabasesTemplateBuilder'
|
||||
|
@ -160,7 +160,7 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
|
|||
onUpdateTemplate={this.handleUpdateTemplate}
|
||||
notify={notify}
|
||||
onUpdateDefaultTemplateValue={
|
||||
this.handleUpdateDefaultTemplateValue
|
||||
this.handleUpdateSelectedTemplateValue
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
@ -191,7 +191,7 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
|
|||
return component
|
||||
}
|
||||
|
||||
private handleUpdateDefaultTemplateValue = (
|
||||
private handleUpdateSelectedTemplateValue = (
|
||||
selected: TemplateValue
|
||||
): void => {
|
||||
const {
|
||||
|
@ -201,9 +201,9 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
|
|||
|
||||
const nextValues = values.map(v => {
|
||||
if (v.value === selected.value) {
|
||||
return {...v, default: true}
|
||||
return {...v, selected: true}
|
||||
} else {
|
||||
return {...v, default: false}
|
||||
return {...v, selected: false}
|
||||
}
|
||||
})
|
||||
|
||||
|
@ -213,7 +213,7 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
|
|||
private handleUpdateTemplate = (nextNextTemplate: Template): void => {
|
||||
const {nextTemplate} = this.state
|
||||
|
||||
const TemplateWithDefaultAndSelected = reconcileDefaultAndSelectedValues(
|
||||
const TemplateWithDefaultAndSelected = reconcileSelectedAndPickedValues(
|
||||
nextTemplate,
|
||||
nextNextTemplate
|
||||
)
|
||||
|
@ -272,7 +272,7 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
|
|||
|
||||
try {
|
||||
if (isNew) {
|
||||
const updatedTemplate = selectDefault(nextTemplate)
|
||||
const updatedTemplate = pickSelected(nextTemplate)
|
||||
await onCreate(updatedTemplate)
|
||||
} else {
|
||||
await onUpdate(nextTemplate)
|
||||
|
|
|
@ -73,7 +73,7 @@ export const DEFAULT_TEMPLATES: DefaultTemplates = {
|
|||
value: '_internal',
|
||||
type: TemplateValueType.Database,
|
||||
selected: true,
|
||||
default: true,
|
||||
picked: true,
|
||||
},
|
||||
],
|
||||
type: TemplateType.Databases,
|
||||
|
|
|
@ -17,7 +17,7 @@ export interface TemplateValue {
|
|||
value: string
|
||||
type: TemplateValueType
|
||||
selected: boolean
|
||||
default: boolean
|
||||
picked: boolean
|
||||
}
|
||||
|
||||
export interface TemplateQuery {
|
||||
|
|
|
@ -11,7 +11,7 @@ export const generateForHosts = (source: Source): Template[] => [
|
|||
value: source.telegraf,
|
||||
type: TemplateValueType.Constant,
|
||||
selected: true,
|
||||
default: true,
|
||||
picked: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
@ -25,7 +25,7 @@ export const generateForHosts = (source: Source): Template[] => [
|
|||
value: source.defaultRP,
|
||||
type: TemplateValueType.Constant,
|
||||
selected: true,
|
||||
default: true,
|
||||
picked: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
@ -30,19 +30,19 @@ const t2 = {
|
|||
value: '98.7',
|
||||
type: TemplateValueType.Measurement,
|
||||
selected: false,
|
||||
default: true,
|
||||
picked: true,
|
||||
},
|
||||
{
|
||||
value: '99.1',
|
||||
type: TemplateValueType.Measurement,
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
},
|
||||
{
|
||||
value: '101.3',
|
||||
type: TemplateValueType.Measurement,
|
||||
selected: true,
|
||||
default: false,
|
||||
picked: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
|
@ -208,61 +208,61 @@ export const userDefinedTemplateVariables: Template[] = [
|
|||
values: [
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.FieldKey,
|
||||
value: 'usage_guest',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.FieldKey,
|
||||
value: 'usage_guest_nice',
|
||||
},
|
||||
{
|
||||
selected: true,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.FieldKey,
|
||||
value: 'usage_idle',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: true,
|
||||
picked: true,
|
||||
type: TemplateValueType.FieldKey,
|
||||
value: 'usage_iowait',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.FieldKey,
|
||||
value: 'usage_irq',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.FieldKey,
|
||||
value: 'usage_nice',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.FieldKey,
|
||||
value: 'usage_softirq',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.FieldKey,
|
||||
value: 'usage_steal',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.FieldKey,
|
||||
value: 'usage_system',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.FieldKey,
|
||||
value: 'usage_user',
|
||||
},
|
||||
|
@ -276,43 +276,43 @@ export const userDefinedTemplateVariables: Template[] = [
|
|||
values: [
|
||||
{
|
||||
selected: true,
|
||||
default: true,
|
||||
picked: true,
|
||||
type: TemplateValueType.Measurement,
|
||||
value: 'cpu',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.Measurement,
|
||||
value: 'disk',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.Measurement,
|
||||
value: 'diskio',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.Measurement,
|
||||
value: 'mem',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.Measurement,
|
||||
value: 'processes',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.Measurement,
|
||||
value: 'swap',
|
||||
},
|
||||
{
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
type: TemplateValueType.Measurement,
|
||||
value: 'system',
|
||||
},
|
||||
|
@ -330,7 +330,7 @@ const dashtimeTempVar: Template = {
|
|||
value: 'now() - 5m',
|
||||
type: TemplateValueType.Constant,
|
||||
selected: true,
|
||||
default: true,
|
||||
picked: true,
|
||||
},
|
||||
],
|
||||
label: '',
|
||||
|
@ -344,7 +344,7 @@ const upperdashtimeTempVar: Template = {
|
|||
value: 'now()',
|
||||
type: TemplateValueType.Constant,
|
||||
selected: true,
|
||||
default: true,
|
||||
picked: true,
|
||||
},
|
||||
],
|
||||
label: '',
|
||||
|
|
|
@ -606,19 +606,19 @@ export const template: Template = {
|
|||
value: 'us-west',
|
||||
type: TemplateValueType.TagKey,
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
},
|
||||
{
|
||||
value: 'us-east',
|
||||
type: TemplateValueType.TagKey,
|
||||
selected: true,
|
||||
default: true,
|
||||
picked: true,
|
||||
},
|
||||
{
|
||||
value: 'us-mount',
|
||||
type: TemplateValueType.TagKey,
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
|
@ -32,13 +32,13 @@ describe('TemplateControlBar', () => {
|
|||
value: 'firstValue',
|
||||
type: TemplateValueType.Constant,
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
},
|
||||
{
|
||||
value: 'secondValue',
|
||||
type: TemplateValueType.Constant,
|
||||
selected: false,
|
||||
default: false,
|
||||
picked: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
|
@ -19,7 +19,7 @@ const defaultProps = {
|
|||
value: 'db0',
|
||||
type: TemplateValueType.Database,
|
||||
selected: true,
|
||||
default: true,
|
||||
picked: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue