[checkmk-commits] Add nice label input fields

Module: check_mk Branch: master Commit: d4ab367896869dbdfe47c0a220f0e3f816f7778c URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=d4ab367896869d… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Fri Apr 5 12:21:25 2019 +0200 Add nice label input fields CMK-1934 Change-Id: Ic9c3b0c0d5cfe2e1089117e4bcea9b1742702e32 --- cmk/gui/plugins/wato/check_mk_configuration.py | 10 ++++++++-- cmk/gui/valuespec.py | 18 +++++++++++++++--- package-lock.json | 5 +++++ package.json | 1 + web/htdocs/js/index.js | 2 +- web/htdocs/js/modules/forms.js | 21 ++++++++++++++++++++- web/htdocs/js/modules/valuespecs.js | 2 +- web/htdocs/themes/classic/scss/_pages.scss | 7 +++++++ web/htdocs/themes/classic/theme.scss | 1 + web/htdocs/themes/facelift/scss/_pages.scss | 7 +++++++ web/htdocs/themes/facelift/theme.scss | 1 + 11 files changed, 67 insertions(+), 8 deletions(-) diff --git a/cmk/gui/plugins/wato/check_mk_configuration.py b/cmk/gui/plugins/wato/check_mk_configuration.py index 297a045..f99d9a6 100644 --- a/cmk/gui/plugins/wato/check_mk_configuration.py +++ b/cmk/gui/plugins/wato/check_mk_configuration.py @@ -1342,7 +1342,10 @@ class RulespecServiceLabels(ServiceRulespec): @property def valuespec(self): - return Labels(title=_("Service labels")) + return Labels( + title=_("Service labels"), + help=_("Use this ruleset to assign labels to service of your choice."), + ) @rulespec_registry.register @@ -1361,7 +1364,10 @@ class RulespecHostLabels(HostRulespec): @property def valuespec(self): - return Labels(title=_("Host labels")) + return Labels( + title=_("Host labels"), + help=_("Use this ruleset to assign labels to hosts of your choice."), + ) @config_variable_registry.register diff --git a/cmk/gui/valuespec.py b/cmk/gui/valuespec.py index b9c5490..4a7251a 100644 --- a/cmk/gui/valuespec.py +++ b/cmk/gui/valuespec.py @@ -4232,11 +4232,17 @@ class TextOrRegExpUnicode(TextOrRegExp): class Labels(ValueSpec): """Valuespec to render and input a collection of object labels""" + def __init__(self, *args, **kwargs): + kwargs.setdefault("help", "") + kwargs["help"] += _("Labels need to be in the format <tt>[KEY]:[VALUE]</tt>. " + "For example <tt>os:windows</tt>.") + super(Labels, self).__init__(*args, **kwargs) + def canonical_value(self): return {} def from_html_vars(self, varprefix): - return json.loads(html.get_unicode_input(varprefix)) + return dict(e["value"].split(":", 1) for e in json.loads(html.get_unicode_input(varprefix))) def value_to_text(self, value): # TODO: Find a better place for this function and rename it @@ -4244,8 +4250,14 @@ class Labels(ValueSpec): return render_tag_groups(value, "host", with_links=False) def render_input(self, varprefix, value): - # TODO: Add a nice label input mechanism - html.text_input(varprefix, default_value=json.dumps(value)) + html.help(self.help()) + html.text_input( + varprefix, + default_value=json.dumps(["%s:%s" % e for e in value.items()]), + cssclass="labels", + attrs={ + "placeholder": _("Add some tag"), + }) class IconSelector(ValueSpec): diff --git a/package-lock.json b/package-lock.json index 914ce39..21d4f9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -906,6 +906,11 @@ "integrity": "sha512-FZdkNBDqBRHKQ2MEbSC17xnPFOhZxeJ2YGSfr2BKf3sujG49Qe3bB+rGCwQfIaA7WHnGeGkSijX4FuBCdrzW/g==", "dev": true }, + "@yaireo/tagify": { + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/@yaireo/tagify/-/tagify-2.15.1.tgz", + "integrity": "sha512-fi8EAna+Z6HWISbkWEEydToMgCJtdNiLWN5zzFMLCBPCGw4PCcnS0FHRY44dDCr7dDiP9CYbHzceC6rl4JZBpw==" + }, "abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", diff --git a/package.json b/package.json index 9470299..dbe3821 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "webpack-fix-style-only-entries": "^0.2.0" }, "dependencies": { + "@yaireo/tagify": "^2.15.1", "jquery": "^3.3.1", "select2": "^4.0.6-rc.1" } diff --git a/web/htdocs/js/index.js b/web/htdocs/js/index.js index eb174de..d685be6 100644 --- a/web/htdocs/js/index.js +++ b/web/htdocs/js/index.js @@ -62,7 +62,7 @@ try { $(() => { utils.update_header_timer(); - forms.enable_select2(); + forms.enable_dynamic_form_elements(); // TODO: only register when needed? element_dragging.register_event_handlers(); }); diff --git a/web/htdocs/js/modules/forms.js b/web/htdocs/js/modules/forms.js index 8050c1c..1520eb3 100644 --- a/web/htdocs/js/modules/forms.js +++ b/web/htdocs/js/modules/forms.js @@ -24,11 +24,18 @@ import $ from "jquery"; import "select2"; +import Tagify from "@yaireo/tagify"; + import * as utils from "utils"; +export function enable_dynamic_form_elements(container=null) { + enable_select2_dropdowns(container); + enable_label_input_fields(container); +} + // html.dropdown() adds the .select2-enable class for all dropdowns // that should use the select2 powered dropdowns -export function enable_select2(container=null) { +function enable_select2_dropdowns(container) { let elements; if (container) elements = $(container).find(".select2-enable:visible"); @@ -41,6 +48,18 @@ export function enable_select2(container=null) { }); } +function enable_label_input_fields(container) { + if (!container) + container = document; + + let elements = container.querySelectorAll("input.labels"); + elements.forEach(element => { + let tagify = new Tagify(element, { + pattern: /^[^:]+:[^:]+$/, + }); + }); +} + // Handle Enter key in textfields export function textinput_enter_submit(e, submit) { if (!e) diff --git a/web/htdocs/js/modules/valuespecs.js b/web/htdocs/js/modules/valuespecs.js index 57d9318..6434f6c 100644 --- a/web/htdocs/js/modules/valuespecs.js +++ b/web/htdocs/js/modules/valuespecs.js @@ -210,7 +210,7 @@ export function listof_add(varprefix, magic, style) container.appendChild(new_child); utils.execute_javascript_by_object(new_child); - forms.enable_select2(new_child); + forms.enable_dynamic_form_elements(new_child); listof_update_indices(varprefix); } diff --git a/web/htdocs/themes/classic/scss/_pages.scss b/web/htdocs/themes/classic/scss/_pages.scss index 893d0c4..58b3612 100644 --- a/web/htdocs/themes/classic/scss/_pages.scss +++ b/web/htdocs/themes/classic/scss/_pages.scss @@ -1549,3 +1549,10 @@ span.tag_group { border: 1px solid #ccc; border-radius: 3px; } + +.tagify { + border: 0; + tag x { + font-size: 8pt; + } +} diff --git a/web/htdocs/themes/classic/theme.scss b/web/htdocs/themes/classic/theme.scss index 7a749cd..4c00782 100644 --- a/web/htdocs/themes/classic/theme.scss +++ b/web/htdocs/themes/classic/theme.scss @@ -1,4 +1,5 @@ @import "~select2/dist/css/select2"; +@import "~@yaireo/tagify/dist/tagify"; @import "scss/_check_mk.scss"; @import "scss/_pages.scss"; diff --git a/web/htdocs/themes/facelift/scss/_pages.scss b/web/htdocs/themes/facelift/scss/_pages.scss index 7bcd394..5ccf0a0 100644 --- a/web/htdocs/themes/facelift/scss/_pages.scss +++ b/web/htdocs/themes/facelift/scss/_pages.scss @@ -44,3 +44,10 @@ span.tag_group { border: 1px solid #ccc; border-radius: 3px; } + +.tagify { + border: 0; + tag x { + font-size: 8pt; + } +} diff --git a/web/htdocs/themes/facelift/theme.scss b/web/htdocs/themes/facelift/theme.scss index aff46fb..c4e609d 100644 --- a/web/htdocs/themes/facelift/theme.scss +++ b/web/htdocs/themes/facelift/theme.scss @@ -6,6 +6,7 @@ _main.scss */ @import "~select2/dist/css/select2"; +@import "~@yaireo/tagify/dist/tagify"; @import "../classic/scss/_check_mk.scss"; @import "../classic/scss/_pages.scss";