Rename default to selected and use picked as an ephemeral ui value

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>
pull/10616/head
Delmer Reed 2018-06-27 17:11:48 -04:00
parent 4a75224acd
commit 97ec983572
16 changed files with 91 additions and 92 deletions

View File

@ -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
}

View File

@ -445,7 +445,7 @@ export const intervalValuesPoints = [
value: defaultIntervalValue,
type: TemplateValueType.Points,
selected: true,
default: true,
picked: true,
},
]

View File

@ -123,7 +123,7 @@ class CSVTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
type: TemplateValueType.CSV,
value,
selected: false,
default: false,
picked: false,
}
})

View File

@ -186,7 +186,7 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
type: templateValueType,
value,
selected: false,
default: false,
picked: false,
}
})

View File

@ -137,7 +137,7 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
type: TemplateValueType.MetaQuery,
value: result,
selected: false,
default: false,
picked: false,
}
})

View File

@ -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)}
/>

View File

@ -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 {

View File

@ -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)

View File

@ -73,7 +73,7 @@ export const DEFAULT_TEMPLATES: DefaultTemplates = {
value: '_internal',
type: TemplateValueType.Database,
selected: true,
default: true,
picked: true,
},
],
type: TemplateType.Databases,

View File

@ -17,7 +17,7 @@ export interface TemplateValue {
value: string
type: TemplateValueType
selected: boolean
default: boolean
picked: boolean
}
export interface TemplateQuery {

View File

@ -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,
},
],
},

View File

@ -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,
},
],
}

View File

@ -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: '',

View File

@ -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,
},
],
}

View File

@ -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,
},
],
}

View File

@ -19,7 +19,7 @@ const defaultProps = {
value: 'db0',
type: TemplateValueType.Database,
selected: true,
default: true,
picked: true,
},
],
},