Open Julien-athstat opened 2 years ago
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.
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.
const baseUrl = escape(this.formatUrl(rawValue));
const url = basePath ? basePath.concat(baseUrl) : baseUrl;
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;
};
@ananzh I would like to look into issue. can please assign to me?
@vvavdiya Make sure you can first reproduce the issue locally - feel free to ask here if you need more help to reproduce it.
@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
Describe the bug Label Template not showing {{Value}} when changing field format to url-image
To Reproduce Steps to reproduce the behavior:
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):