From 0bddeac28fafc0ac2e14fe8ef38ac09c13413b69 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Thu, 28 Jun 2018 10:17:09 -0700 Subject: [PATCH] WIP pick instead of select tempvars Co-authored-by: Delmer Reed --- ui/src/dashboards/actions/index.ts | 12 ++--- .../dashboards/containers/DashboardPage.tsx | 10 ++-- ui/src/dashboards/reducers/ui.js | 47 +++++++++++-------- ui/src/dashboards/utils/tempVars.ts | 8 ++-- .../components/TemplateControlBar.tsx | 6 +-- .../components/TemplateControlDropdown.tsx | 6 +-- ui/src/types/actions/dashboards.ts | 10 ++-- ui/test/dashboards/reducers/ui.test.ts | 4 +- .../components/TemplateControlBar.test.tsx | 2 +- .../TemplateControlDropdown.test.tsx | 2 +- 10 files changed, 57 insertions(+), 50 deletions(-) diff --git a/ui/src/dashboards/actions/index.ts b/ui/src/dashboards/actions/index.ts index 1c0bd0cc91..a4687883be 100644 --- a/ui/src/dashboards/actions/index.ts +++ b/ui/src/dashboards/actions/index.ts @@ -206,12 +206,12 @@ export const editCellQueryStatus: DashboardsActions.EditCellQueryStatusActionCre }, }) -export const templateVariableSelected: DashboardsActions.TemplateVariableSelectedActionCreator = ( +export const templateVariablePicked: DashboardsActions.TemplateVariablePickedActionCreator = ( dashboardID: number, templateID: string, values -): DashboardsActions.TemplateVariableSelectedAction => ({ - type: 'TEMPLATE_VARIABLE_SELECTED', +): DashboardsActions.TemplateVariablePickedAction => ({ + type: 'TEMPLATE_VARIABLE_PICKED', payload: { dashboardID, templateID, @@ -659,7 +659,7 @@ const syncDashboardTempVarsFromURLQueryParams = ( ): DashboardsActions.SyncDashboardTempVarsFromURLQueryParamsDispatcher => ( dispatch: Dispatch< | NotificationsActions.PublishNotificationActionCreator - | DashboardsActions.TemplateVariableSelectedAction + | DashboardsActions.TemplateVariablePickedAction >, getState: () => DashboardsReducers.Dashboards & AuthReducers.Auth ): void => { @@ -794,12 +794,12 @@ export const getDashboardWithHydratedAndSyncedTempVarsAsync: DashboardsActions.G } await bindActionCreators(hydrateTempVarValuesAsync, dispatch)( - +dashboardID, + dashboardID, source ) bindActionCreators(syncDashboardFromURLQueryParams, dispatch)( - +dashboardID, + dashboardID, location ) } diff --git a/ui/src/dashboards/containers/DashboardPage.tsx b/ui/src/dashboards/containers/DashboardPage.tsx index 107e7fb505..cb3b0d47b0 100644 --- a/ui/src/dashboards/containers/DashboardPage.tsx +++ b/ui/src/dashboards/containers/DashboardPage.tsx @@ -67,7 +67,7 @@ interface DashboardActions { updateDashboardCell: DashboardsActions.UpdateDashboardCellDispatcher cloneDashboardCellAsync: DashboardsActions.CloneDashboardCellDispatcher deleteDashboardCellAsync: DashboardsActions.DeleteDashboardCellDispatcher - templateVariableSelected: DashboardsActions.TemplateVariableSelectedActionCreator + templateVariablePicked: DashboardsActions.TemplateVariablePickedActionCreator syncURLQueryFromTempVars: DashboardsActions.SyncURLQueryFromTempVarsDispatcher setZoomedTimeRangeAsync: DashboardsActions.SetZoomedTimeRangeDispatcher } @@ -320,7 +320,7 @@ class DashboardPage extends Component { meRole={meRole} isUsingAuth={isUsingAuth} onSaveTemplates={this.handleSaveTemplateVariables} - onSelectTemplate={this.handleSelectTemplate} + onPickTemplate={this.handlePickTemplate} isOpen={showTemplateControlBar} source={source} /> @@ -470,7 +470,7 @@ class DashboardPage extends Component { this.props.deleteDashboardCellAsync(dashboard, cell) } - private handleSelectTemplate = ( + private handlePickTemplate = ( templateID: string ): ((value: TempVarsModels.TemplateValue) => void) => ( value: TempVarsModels.TemplateValue @@ -492,8 +492,8 @@ class DashboardPage extends Component { updatedQueryParam ) } - this.props.templateVariableSelected(dashboard.id, templateID, [value]) - this.props.putDashboardByID(dashboardID) + this.props.templateVariablePicked(dashboard.id, templateID, [value]) + // this.props.putDashboardByID(dashboardID) } private handleSaveTemplateVariables = async ( diff --git a/ui/src/dashboards/reducers/ui.js b/ui/src/dashboards/reducers/ui.js index acdb672e6d..e5b31fe1a0 100644 --- a/ui/src/dashboards/reducers/ui.js +++ b/ui/src/dashboards/reducers/ui.js @@ -1,5 +1,5 @@ import _ from 'lodash' -import {timeRanges} from 'shared/data/timeRanges' +import {timeRanges} from 'src/shared/data/timeRanges' import {NULL_HOVER_TIME} from 'src/shared/constants/tableGraph' import {applyDashboardTempVarOverrides} from 'src/dashboards/utils/tempVars' @@ -141,25 +141,26 @@ const ui = (state = initialState, action) => { return {...state, cellQueryStatus: {queryID, status}} } - case 'TEMPLATE_VARIABLE_SELECTED': { + case 'TEMPLATE_VARIABLE_PICKED': { const { dashboardID, templateID, values: updatedSelectedValues, } = action.payload + const newDashboards = state.dashboards.map(dashboard => { if (dashboard.id === dashboardID) { const newTemplates = dashboard.templates.map(staleTemplate => { if (staleTemplate.id === templateID) { const newValues = staleTemplate.values.map(staleValue => { - let selected = false + let picked = false for (let i = 0; i < updatedSelectedValues.length; i++) { if (updatedSelectedValues[i].value === staleValue.value) { - selected = true + picked = true break } } - return {...staleValue, selected} + return {...staleValue, picked} }) return {...staleTemplate, values: newValues} } @@ -174,7 +175,6 @@ const ui = (state = initialState, action) => { case 'TEMPLATE_VARIABLES_SELECTED_BY_NAME': { const {dashboardID, queryParams} = action.payload - const newDashboards = state.dashboards.map( oldDashboard => oldDashboard.id === dashboardID @@ -192,25 +192,34 @@ const ui = (state = initialState, action) => { if (dashboard.id !== dashboardID) { return dashboard } - const templates = dashboard.templates.map(template => { - if (template.id !== templateID || template.type === 'csv') { + if (template.id !== templateID) { return template } - - const selectedValue = _.get(template, 'values', []).find( - v => v.selected - ) - - const v = values.map(value => ({ - selected: _.get(selectedValue, 'value') === value, - value, - type: TEMPLATE_VARIABLE_TYPES[template.type], - })) + // || template.type === 'csv' + // get this to run for csvs? + const pickedValue = _.get(template, 'values', []).find(v => v.picked) + let val + if (pickedValue) { + val = values.map(value => ({ + picked: _.get(pickedValue, 'value') === value, + value, + type: TEMPLATE_VARIABLE_TYPES[template.type], + })) + } else { + const selectedValue = _.get(template, 'values', []).find( + v => v.selected + ) + val = values.map(value => ({ + picked: _.get(selectedValue, 'value') === value, + value, + type: TEMPLATE_VARIABLE_TYPES[template.type], + })) + } return { ...template, - values: v, + values: val, } }) diff --git a/ui/src/dashboards/utils/tempVars.ts b/ui/src/dashboards/utils/tempVars.ts index 4ff427e538..78777bfdfc 100644 --- a/ui/src/dashboards/utils/tempVars.ts +++ b/ui/src/dashboards/utils/tempVars.ts @@ -55,21 +55,19 @@ const reconcileTempVarsWithOverrides = ( const {tempVar: name, values} = tempVar const strippedTempVar = stripTempVar(name) const overrideValue = tempVarOverrides[strippedTempVar] - if (overrideValue) { const isValid = isValidTempVarOverride(values, overrideValue) - if (isValid) { const overriddenValues = values.map(tempVarValue => { const {value} = tempVarValue if (value === overrideValue) { - return {...tempVarValue, selected: true} + return {...tempVarValue, picked: true} } - return {...tempVarValue, selected: false} + return {...tempVarValue, picked: false} }) return {...tempVar, values: overriddenValues} } - + // or pick selected value. return tempVar } diff --git a/ui/src/tempVars/components/TemplateControlBar.tsx b/ui/src/tempVars/components/TemplateControlBar.tsx index f8e202f4d0..825ee43273 100644 --- a/ui/src/tempVars/components/TemplateControlBar.tsx +++ b/ui/src/tempVars/components/TemplateControlBar.tsx @@ -14,7 +14,7 @@ interface Props { templates: Template[] isOpen: boolean source: Source - onSelectTemplate: (id: string) => void + onPickTemplate: (id: string) => void onSaveTemplates: (templates: Template[]) => void } @@ -33,7 +33,7 @@ class TemplateControlBar extends Component { const { isOpen, templates, - onSelectTemplate, + onPickTemplate, meRole, isUsingAuth, source, @@ -52,7 +52,7 @@ class TemplateControlBar extends Component { isUsingAuth={isUsingAuth} template={template} source={source} - onSelectTemplate={onSelectTemplate} + onPickTemplate={onPickTemplate} onCreateTemplate={this.handleCreateTemplate} onUpdateTemplate={this.handleUpdateTemplate} onDeleteTemplate={this.handleDeleteTemplate} diff --git a/ui/src/tempVars/components/TemplateControlDropdown.tsx b/ui/src/tempVars/components/TemplateControlDropdown.tsx index 4a716bd67c..a43634405c 100644 --- a/ui/src/tempVars/components/TemplateControlDropdown.tsx +++ b/ui/src/tempVars/components/TemplateControlDropdown.tsx @@ -13,7 +13,7 @@ interface Props { meRole: string isUsingAuth: boolean source: Source - onSelectTemplate: (id: string) => void + onPickTemplate: (id: string) => void onCreateTemplate: (template: Template) => Promise onUpdateTemplate: (template: Template) => Promise onDeleteTemplate: (template: Template) => Promise @@ -38,7 +38,7 @@ class TemplateControlDropdown extends PureComponent { isUsingAuth, meRole, source, - onSelectTemplate, + onPickTemplate, onCreateTemplate, } = this.props const {isEditing} = this.state @@ -64,7 +64,7 @@ class TemplateControlDropdown extends PureComponent { useAutoComplete={true} selected={pickedItem.text} disabled={isUsingAuth && !isUserAuthorized(meRole, EDITOR_ROLE)} - onChoose={onSelectTemplate(template.id)} + onChoose={onPickTemplate(template.id)} />