Loki: Adds more options to make line filter UX better (#46324)

* Loki: Adds more options to make line filter UX better

* Sync wording

* Tweak width

* More tweaks

* Added descriptions as well

public/app/plugins/datasource/loki/querybuilder/operations.ts

@@ -48,7 +48,16 @@ export function getOperationDefintions(): QueryBuilderOperationDef[] {
     {
       id: LokiOperationId.LineContains,
       name: 'Line contains',
-      params: [{ name: 'String', type: 'string' }],
+      params: [
+        {
+          name: 'String',
+          type: 'string',
+          hideName: true,
+          placeholder: 'Text to find',
+          description: 'Find log lines that contains this text',
+          minWidth: 20,
+        },
+      ],
       defaultParams: [''],
       alternativesKey: 'line filter',
       category: LokiVisualQueryOperationCategory.LineFilters,
@@ -59,7 +68,16 @@ export function getOperationDefintions(): QueryBuilderOperationDef[] {
     {
       id: LokiOperationId.LineContainsNot,
       name: 'Line does not contain',
-      params: [{ name: 'String', type: 'string' }],
+      params: [
+        {
+          name: 'String',
+          type: 'string',
+          hideName: true,
+          placeholder: 'Text to exclude',
+          description: 'Find log lines that does not contain this text',
+          minWidth: 26,
+        },
+      ],
       defaultParams: [''],
       alternativesKey: 'line filter',
       category: LokiVisualQueryOperationCategory.LineFilters,
@@ -70,7 +88,16 @@ export function getOperationDefintions(): QueryBuilderOperationDef[] {
     {
       id: LokiOperationId.LineMatchesRegex,
       name: 'Line contains regex match',
-      params: [{ name: 'Regex', type: 'string' }],
+      params: [
+        {
+          name: 'Regex',
+          type: 'string',
+          hideName: true,
+          placeholder: 'Pattern to match',
+          description: 'Find log lines that match this regex pattern',
+          minWidth: 30,
+        },
+      ],
       defaultParams: [''],
       alternativesKey: 'line filter',
       category: LokiVisualQueryOperationCategory.LineFilters,
@@ -81,7 +108,16 @@ export function getOperationDefintions(): QueryBuilderOperationDef[] {
     {
       id: LokiOperationId.LineMatchesRegexNot,
       name: 'Line does not match regex',
-      params: [{ name: 'Regex', type: 'string' }],
+      params: [
+        {
+          name: 'Regex',
+          type: 'string',
+          hideName: true,
+          placeholder: 'Pattern to exclude',
+          description: 'Find log lines that does not match this regex pattern',
+          minWidth: 30,
+        },
+      ],
       defaultParams: [''],
       alternativesKey: 'line filter',
       category: LokiVisualQueryOperationCategory.LineFilters,
@@ -116,13 +152,15 @@ export function getOperationDefintions(): QueryBuilderOperationDef[] {
     {
       id: LokiOperationId.Unwrap,
       name: 'Unwrap',
-      params: [{ name: 'Identifier', type: 'string' }],
+      params: [{ name: 'Identifier', type: 'string', hideName: true, minWidth: 16, placeholder: 'Label key' }],
       defaultParams: [''],
       category: LokiVisualQueryOperationCategory.Formats,
       renderer: (op, def, innerExpr) => `${innerExpr} | unwrap ${op.params[0]}`,
       addOperationHandler: addLokiOperation,
-      explainHandler: (op) =>
+      explainHandler: (op) => {
-        `Use the extracted label \`${op.params[0]}\` as sample values instead of log lines for the subsequent range aggregation.`,
+        let label = String(op.params[0]).length > 0 ? op.params[0] : '<label>';
+        return `Use the extracted label \`${label}\` as sample values instead of log lines for the subsequent range aggregation.`;
+      },
     },
   ];
 

public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx

@@ -69,9 +69,11 @@ export function OperationEditor({
 
     operationElements.push(
       <div className={styles.paramRow} key={`${paramIndex}-1`}>
-        <label className={styles.paramName} htmlFor={getOperationParamId(index, paramIndex)}>
+        {!paramDef.hideName && (
-          {paramDef.name}
+          <label className={styles.paramName} htmlFor={getOperationParamId(index, paramIndex)}>
-        </label>
+            {paramDef.name}
+          </label>
+        )}
         <div className={styles.paramValue}>
           <Stack gap={0.5} direction="row" alignItems="center" wrap={false}>
             <Editor

public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx

@@ -24,6 +24,9 @@ function SimpleInputParamEditor(props: QueryBuilderOperationParamEditorProps) {
     <AutoSizeInput
       id={getOperationParamId(props.operationIndex, props.index)}
       defaultValue={props.value}
+      minWidth={props.paramDef.minWidth}
+      placeholder={props.paramDef.placeholder}
+      title={props.paramDef.description}
       onCommitChange={(evt) => {
         props.onChange(props.index, evt.currentTarget.value);
       }}
@@ -55,6 +58,7 @@ function SelectInputParamEditor({
       menuShouldPortal
       value={valueOption}
       options={selectOptions}
+      placeholder={paramDef.placeholder}
       onChange={(value) => onChange(index, value.value!)}
     />
   );

public/app/plugins/datasource/prometheus/querybuilder/shared/types.ts

@@ -58,8 +58,12 @@ export interface QueryBuilderOperationParamDef {
   name: string;
   type: string;
   options?: string[] | number[] | Array<SelectableValue<string>>;
+  hideName?: boolean;
   restParam?: boolean;
   optional?: boolean;
+  placeholder?: string;
+  description?: string;
+  minWidth?: number;
   editor?: ComponentType<QueryBuilderOperationParamEditorProps>;
 }