diff --git a/public/app/core/components/sql_part/sql_part_editor.ts b/public/app/core/components/sql_part/sql_part_editor.ts
index 7799537b0fc..2793f575c28 100644
--- a/public/app/core/components/sql_part/sql_part_editor.ts
+++ b/public/app/core/components/sql_part/sql_part_editor.ts
@@ -172,7 +172,7 @@ export function sqlPartEditorDirective(templateSrv: any) {
}
const paramValue = templateSrv.highlightVariablesAsHtml(part.params[index]);
- const $paramLink = $('' + paramValue + '');
+ const $paramLink = $('' + paramValue + '');
const $input = $(paramTemplate);
$paramLink.appendTo($paramsContainer);
diff --git a/public/app/plugins/datasource/graphite/func_editor.ts b/public/app/plugins/datasource/graphite/func_editor.ts
index 2b681ebe00f..c2e0e5777bf 100644
--- a/public/app/plugins/datasource/graphite/func_editor.ts
+++ b/public/app/plugins/datasource/graphite/func_editor.ts
@@ -184,24 +184,27 @@ export function graphiteFuncEditor($compile: any, templateSrv: TemplateSrv) {
}
let paramValue = templateSrv.highlightVariablesAsHtml(func.params[index]);
- const hasValue = paramValue !== null && paramValue !== undefined;
-
+ const hasValue = paramValue !== null && paramValue !== undefined && paramValue !== '';
const last = index >= func.params.length - 1 && param.optional && !hasValue;
+ let linkClass = 'query-part__link';
+
+ if (last) {
+ linkClass += ' query-part__last';
+ }
+
if (last && param.multiple) {
paramValue = '+';
+ } else if (!hasValue) {
+ // for params with no value default to param name
+ paramValue = param.name;
+ linkClass += ' query-part__link--no-value';
}
if (index > 0) {
$(', ').appendTo(elem);
}
- const $paramLink = $(
- '' +
- (hasValue ? paramValue : ' ') +
- ''
- );
+ const $paramLink = $(`${paramValue}`);
const $input = $(paramTemplate);
$input.attr('placeholder', param.name);
@@ -232,7 +235,7 @@ export function graphiteFuncEditor($compile: any, templateSrv: TemplateSrv) {
$scope.func.added = false;
setTimeout(() => {
elem
- .find('.graphite-func-param-link')
+ .find('.query-part__link')
.first()
.click();
}, 10);
diff --git a/public/sass/components/_query_part.scss b/public/sass/components/_query_part.scss
index e5ad043788f..f22e21b319c 100644
--- a/public/sass/components/_query_part.scss
+++ b/public/sass/components/_query_part.scss
@@ -15,3 +15,11 @@
display: inline;
}
}
+
+.query-part__link {
+ cursor: pointer;
+
+ &--no-value {
+ color: $text-muted;
+ }
+}