opensearch-project / OpenSearch-Dashboards

📊 Open source visualization dashboards for OpenSearch.
https://opensearch.org/docs/latest/dashboards/index/
Apache License 2.0
1.69k stars 894 forks source link

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

Open Julien-athstat opened 2 years ago

Julien-athstat commented 2 years ago

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 Screenshot 2022-07-12 at 19 03 06 Screenshot 2022-07-12 at 19 03 26

Host/Environment (please complete the following information):

ananzh commented 2 years ago

I can re-produce this issue.

Screen Shot 2022-07-15 at 12 09 25

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.

Screen Shot 2022-07-15 at 13 01 36 Screen Shot 2022-07-15 at 12 37 44

Issue code is at UrlFormatEditor component.

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

ananzh commented 1 year ago

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 commented 1 year ago

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

joshuarrrr commented 1 year ago

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

vvavdiya commented 1 year ago

@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