diff --git a/ui/src/shared/copy/notifications.ts b/ui/src/shared/copy/notifications.ts index 36b2894eb0..859431fcd4 100644 --- a/ui/src/shared/copy/notifications.ts +++ b/ui/src/shared/copy/notifications.ts @@ -798,12 +798,12 @@ export const importFailed = (): Notification => ({ }) // Templates -export const addTemplatLabelFailed = (): Notification => ({ +export const addTemplateLabelFailed = (): Notification => ({ ...defaultErrorNotification, message: 'Failed to add label to template', }) -export const removedTemplateLabelFailed = (): Notification => ({ +export const removeTemplateLabelFailed = (): Notification => ({ ...defaultErrorNotification, message: 'Failed to remove label from template', }) diff --git a/ui/src/tasks/actions/index.ts b/ui/src/tasks/actions/index.ts index 5d799516fe..b82c60146f 100644 --- a/ui/src/tasks/actions/index.ts +++ b/ui/src/tasks/actions/index.ts @@ -263,7 +263,7 @@ export const addTaskLabelsAsync = (taskID: string, labels: Label[]) => async ( dispatch(updateTask(task)) } catch (error) { console.error(error) - dispatch(copy.addTaskLabelFailed()) + dispatch(notify(copy.addTaskLabelFailed())) } } @@ -278,7 +278,7 @@ export const removeTaskLabelsAsync = ( dispatch(updateTask(task)) } catch (error) { console.error(error) - dispatch(copy.removeTaskLabelFailed()) + dispatch(notify(copy.removeTaskLabelFailed())) } } diff --git a/ui/src/telegrafs/actions/index.ts b/ui/src/telegrafs/actions/index.ts index 21df5d04f8..343a46cc29 100644 --- a/ui/src/telegrafs/actions/index.ts +++ b/ui/src/telegrafs/actions/index.ts @@ -158,7 +158,7 @@ export const addTelelgrafLabelsAsync = ( dispatch(editTelegraf(telegraf)) } catch (error) { console.error(error) - dispatch(addTelelgrafLabelFailed()) + dispatch(notify(addTelelgrafLabelFailed())) } } @@ -173,7 +173,7 @@ export const removeTelelgrafLabelsAsync = ( dispatch(editTelegraf(telegraf)) } catch (error) { console.error(error) - dispatch(removeTelelgrafLabelFailed()) + dispatch(notify(removeTelelgrafLabelFailed())) } } diff --git a/ui/src/templates/actions/index.ts b/ui/src/templates/actions/index.ts index ad8201f538..2277aba642 100644 --- a/ui/src/templates/actions/index.ts +++ b/ui/src/templates/actions/index.ts @@ -9,6 +9,8 @@ import { DocumentCreate, ITaskTemplate, TemplateType, + ITemplate, + ILabel as Label, } from '@influxdata/influx' import { RemoteDataState, @@ -273,3 +275,39 @@ export const createResourceFromTemplate = (templateID: string) => async ( dispatch(notify(copy.createResourceFromTemplateFailed(e))) } } + +export const addTemplateLabelsAsync = ( + templateID: string, + labels: Label[] +) => async (dispatch): Promise => { + try { + await client.templates.addLabels(templateID, labels.map(l => l.id)) + const template = await client.templates.get(templateID) + + dispatch(setTemplateSummary(templateID, templateToSummary(template))) + } catch (error) { + console.error(error) + dispatch(notify(copy.addTemplateLabelFailed())) + } +} + +export const removeTemplateLabelsAsync = ( + templateID: string, + labels: Label[] +) => async (dispatch): Promise => { + try { + await client.templates.removeLabels(templateID, labels.map(l => l.id)) + const template = await client.templates.get(templateID) + + dispatch(setTemplateSummary(templateID, templateToSummary(template))) + } catch (error) { + console.error(error) + dispatch(notify(copy.removeTemplateLabelFailed())) + } +} + +const templateToSummary = (template: ITemplate): TemplateSummary => ({ + id: template.id, + meta: template.meta, + labels: template.labels, +}) diff --git a/ui/src/templates/components/TemplateCard.tsx b/ui/src/templates/components/TemplateCard.tsx index e2313b517f..50b3a90049 100644 --- a/ui/src/templates/components/TemplateCard.tsx +++ b/ui/src/templates/components/TemplateCard.tsx @@ -12,9 +12,7 @@ import { // Components import {ResourceList, Context, IconFont} from 'src/clockface' -import InlineLabels, { - LabelsEditMode, -} from 'src/shared/components/inlineLabels/InlineLabels' +import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels' // Actions import { @@ -22,7 +20,11 @@ import { cloneTemplate, updateTemplate, createResourceFromTemplate, + removeTemplateLabelsAsync, + addTemplateLabelsAsync, } from 'src/templates/actions' +import {createLabel as createLabelAsync} from 'src/labels/actions' + // Selectors import {viewableLabels} from 'src/labels/selectors' @@ -44,6 +46,9 @@ interface DispatchProps { onClone: typeof cloneTemplate onUpdate: typeof updateTemplate onCreateFromTemplate: typeof createResourceFromTemplate + onAddTemplateLabels: typeof addTemplateLabelsAsync + onRemoveTemplateLabels: typeof removeTemplateLabelsAsync + onCreateLabel: typeof createLabelAsync } interface StateProps { @@ -77,7 +82,9 @@ class TemplateCard extends PureComponent { selectedLabels={template.labels} labels={labels} onFilterChange={onFilterChange} - editMode={LabelsEditMode.Readonly} + onAddLabel={this.handleAddLabel} + onRemoveLabel={this.handleRemoveLabel} + onCreateLabel={this.handleCreateLabel} /> )} /> @@ -157,6 +164,22 @@ class TemplateCard extends PureComponent { const {router, template, org} = this.props router.push(`/orgs/${org.id}/templates/${template.id}/view`) } + + private handleAddLabel = (label: ILabel): void => { + const {template, onAddTemplateLabels} = this.props + + onAddTemplateLabels(template.id, [label]) + } + + private handleRemoveLabel = (label: ILabel): void => { + const {template, onRemoveTemplateLabels} = this.props + + onRemoveTemplateLabels(template.id, [label]) + } + + private handleCreateLabel = async (label: ILabel): Promise => { + await this.props.onCreateLabel(label.name, label.properties) + } } const mstp = ({labels, orgs: {org}}: AppState): StateProps => { @@ -171,6 +194,9 @@ const mdtp: DispatchProps = { onClone: cloneTemplate, onUpdate: updateTemplate, onCreateFromTemplate: createResourceFromTemplate, + onAddTemplateLabels: addTemplateLabelsAsync, + onRemoveTemplateLabels: removeTemplateLabelsAsync, + onCreateLabel: createLabelAsync, } export default connect( diff --git a/ui/src/templates/reducers/index.ts b/ui/src/templates/reducers/index.ts index 58a19cd551..cda87538ac 100644 --- a/ui/src/templates/reducers/index.ts +++ b/ui/src/templates/reducers/index.ts @@ -42,11 +42,15 @@ export const templatesReducer = ( } case ActionTypes.SetTemplateSummary: { - const filtered = draftState.items.filter(t => { - return t.id !== action.payload.id + const updated = draftState.items.map(t => { + if (t.id === action.payload.id) { + return action.payload.templateSummary + } + + return t }) - draftState.items = [...filtered, action.payload.templateSummary] + draftState.items = updated return } diff --git a/ui/src/variables/actions/index.ts b/ui/src/variables/actions/index.ts index 06a614ee87..327219a2c6 100644 --- a/ui/src/variables/actions/index.ts +++ b/ui/src/variables/actions/index.ts @@ -328,7 +328,7 @@ export const addVariableLabelsAsync = ( dispatch(setVariable(variableID, RemoteDataState.Done, variable)) } catch (error) { console.error(error) - dispatch(addVariableLabelFailed()) + dispatch(notify(addVariableLabelFailed())) } } @@ -343,6 +343,6 @@ export const removeVariableLabelsAsync = ( dispatch(setVariable(variableID, RemoteDataState.Done, variable)) } catch (error) { console.error(error) - dispatch(removeVariableLabelFailed()) + dispatch(notify(removeVariableLabelFailed())) } }