[BUG] label template not showing value for url-image

[Julien-athstat]

Describe the bug
Label Template not showing {{Value}} when changing field format to url-image

To Reproduce
Steps to reproduce the behavior:

1. Go to '[Stack Management]
   [Index patterns]'
2. Click on 'Edit' to edit a string field
3. Set "URL template" and "Label template"
4. Sample will show expected behavior
5. Go to Discover or a sample table with that field; ONLY the image will show NOT the Label

Expected behavior
That edited field should show the url-image and the field {{value}} as label next to the image

OpenSearch Version
1.2.0
Dashboards Version
1.2.0

Screenshots

Host/Environment (please complete the following information):

• OS: macOS Monterey
• Browser and version: Chrome Version 103.0.5060.114 (Official Build) (x86_64)

[ananzh]

I can re-produce this issue.

The reason is that the icons loaded are missing basePath, so the path is not correct and img can't be found. By adding the basePath in the browser, the problem is solved.

Issue code is at UrlFormatEditor component.

I will keep research on how to add basePath to this component.

[ananzh]

This is because in url format htmlConverter (https://github.com/opensearch-project/OpenSearch-Dashboards/blob/7f7c7449e8fcf3a3ad58bd8f009cc7830131758b/src/plugins/data/common/field_formats/converters/url.ts#L158)](https://github.com/opensearch-project/OpenSearch-Dashboards/blob/808129bcf077912c2ed4af5aea517c32ec1315a5/src/plugins/data/common/field_formats/converters/url.ts#L160)

const baseUrl = escape(this.formatUrl(rawValue));

the baseUrl doesn't have the basePath (the random 3 letters, like rtl). I think there are two ways to fix this.

Add the basePath in url.ts

const baseUrl = escape(this.formatUrl(rawValue));
const url = basePath ? basePath.concat(baseUrl) : baseUrl;

change urlTemplate

We could also modify this from formatUrl(rawValue) method

private formatUrl(value: string): string {
    const template = this.param('urlTemplate');
    if (!template) return value;

    return this.compileTemplate(template)({
      value: encodeURIComponent(value),
      rawValue: value,
    });
}

we could see it is compile the urlTemplate. urlTemplate for img is created here. The default value is null. Once the url format img type is chosen, it will be set in indexPattern. An index pattern is constructed like

- id: "90943e30-9a47-11e8-b64d-95841ca0b247"
- title: "opensearch_dashboards_sample_data_logs"
- Fields (FldList(41)) // contains all field definitions
For example, for clientip, an IndexPatternField object will be
displayName: clientip
spec:
   aggregatable: true
   name: "clientip"
   type: "ip"
   format: DecoratedFieldFormat
       _params
           parsedUrl
               	basePath: "/jxv"
                 
                origin: "http://localhost:5603"
                 
                pathname: "/jxv/app/home"
           **urlTemplate: undefined // it will be reset**
           type: "img"

- fieldFormats (FieldFormatsRegistry object which register about 15 format types)

Currently it is set to a fixed value

/plugins/indexPatternManagement/assets/icons/{{value}}.png

To fix, we could change it to a func to fetch basePath and prepend it to the original path

private getIconPath = () => {
    const iconPath = `/plugins/indexPatternManagement/assets/icons/{{value}}.png`;
    return this.context?.services.http
      ? this.context.services.http.basePath.prepend(iconPath)
      : iconPath;
};

[vvavdiya]

@ananzh
I would like to look into issue. can please assign to me?

[joshuarrrr]

@vvavdiya Make sure you can first reproduce the issue locally - feel free to ask here if you need more help to reproduce it.

[vvavdiya]

@ananzh
I am trying to reproduce the issue. I have created dashboard with sample ecommerce data.
Can you please help how I can reach/navigate to Label template page?
steps or screen record would be helpful to reproduce the issue.

Thanks