https://www.gooddata.com/ logo
Join Slack
Powered by
Hi GoodData team, I wanted to ask how I can develo...
# gooddata-cn
u
Hi GoodData team, I wanted to ask how I can develop plugins and use them on our GoodData.CN account? is this possible. We are looking to get this specific plugin working, I get part of developing the plugin, but how does it connect to the GoodData.CN account that we have? Plugin we want to use: https://github.com/gooddata/gooddata-dashboard-plugins/tree/master/tooltip_plugin
m
Hi Umer, Dashboard plugins are implemented via GoodData UI SDK. For GoodData CN you will first need to Set up hosting for your plugins and then Update the Content Security Policy of your GoodData.CN installation’s gateway to enable loading plugins from the hosting location. I understand these are oversimplified instructions so please feel free to take a look at our documentation for more details on the implementation: Dashboard Plugins · GoodData.UI
u
Hi Moises, quick questions, how would i set up hosting for the plugins, is there any guide for that?
Also, once im done with hosting, you mentioned updating the CSP of my goodData CN installation gateway, but where is that located. The documentation doesn’t go into detail nor does it provide any screenshots indicating where we have to go
j
Hi Umer. One thing: You’re not using GoodData Cloud Native, but GoodData Cloud 🙂 Cloud Native is the self-hosted solution.
Regarding the plugins, it basically has to be any publicly accessible hosting. We usually recommend an S3 bucket.
I will find out a concrete example of how to set-up the CSP.
Assume that I have an S3 bucket at 
<http://janrehanek-public.s3.amazonaws.com|janrehanek-public.s3.amazonaws.com>
If I hosted my plugin there, I would have to include the following CSP for script-src:
You can modify it in the UI or via API:
u
Hey Jan, thanks for the update. Also just to clarify, the folder to be uploaded to s3 would be only the build folder, for example in the example link i sent above This will build plugin artifacts under 
dist/dashboardPlugin
?
and this would make the component available in our GD Cloud dashboards?
j
About the folder - yes, exactly. Once you build the plugin, 
dist/dashboardPlugin
will be created with some 54 files, give or take. That folder you upload to the S3 bucket. You need to make sure it is accessible to the public. Once you have it there, you need to get the URL, but not to the folder, but to the 
.js
file which shares the name of your plugin. For example, if I name my plugin 
first-plugin
, there’ll be a 
dp_first_plugin.js
in that folder.
After that, you need to create the plugin object using POST for 
{{baseUrl}}/api/v1/entities/workspaces/:workspaceId/dashboardPlugins
. You don’t have to do that manually; if you check the plugin toolkit’s README.md file, you’ll see there is a ``npm run add-plugin -- <url>`` command you can use for that. If you do want to do that manually, you can refer to our API reference where that endpoint is described.
Finally, once you’ve done that, you need to link the plugin to the specific dashboard that you want to use it in. Again, you can use ``npm run link-plugin -- <plugin-object-id>`` from the toolkit or the`{{baseUrl}}/api/v1/entities/workspaces/workspaceId/analyticalDashboards/objectId` endpoint. If you set it up for a dashboard in a parent workspace, child workspaces inheriting that dashboard will also have the plugin.
If you encounter any errors in the UI, be sure to check your browser’s console - it usually contains a lot of useful information to help you diagnose the problem.
u
Hey Jan, i’ve cloned the repo, built the plugin, hosted it on aws s3
but im getting the following error, when trying to add-plugin \
I think the backend url is wrong, what should be the backend url here?
j
That BACKEND_URL looks correct to me, but the URL in the error does not. 
/api/profile
is definitely wrong, as it should be versioned: 
/api/v1/profile
u
yes, but im not setting the api/profile anywhere
i assume this is set internally? i just changed the env and env secrets file
j
I will check how this concrete plugin works.
u
Yes please, we're trying to get this working, and our ceo is kind of getting annoyed due to the lack of documentation, thanks again!!
http://shared-web.s3.amazonaws.com/umer_test/tooltip/dp_tooltip_plugin.js This is the built plugin file, hosted on aws, and im trying to run
Copy code
npm run gdc-plugins dashboard-plugin add --plugin-url <http://shared-web.s3.amazonaws.com/umer_test/tooltip/dp_tooltip_plugin.js>
j
Yes, I understand. I’ll quickly try to do the same thing on my environment and maybe it’ll help me understand what’s going wrong.
🙌 1
It is a versioning issue. At the time the plugin was built, it was done with 8.9.0 SDK. Once I’ve updated it to 8.12.0, the error went away and I was able to run 
npm run add-plugin
successfully.
Bumping up 
@gooddata/sdk-backend-tiger
alone may be enough.
8.9.0 is quite old, so I am not sure it would work even if that script ran successfully. I definitely recommend updating it.
u
The plugin examples should be updated as well then, someone should work on pushing that, it gives off a very bad impression
But yes, ive upgraded the backend tiger to 8.12.0, trying now, will let you know how it goes
do i have to build the plugin again after upgrading?
also do i have to update the peer dependencies too?
is this fine or do i have to update all of them
j
I’m not sure. I’ll need to check in with the engineers responsible for the SDK. Regarding the repo itself: According to the main FAQ for 
gooddata-dashboard-plugins
, that gallery is primarily meant to be used as a starting point for you to develop your own plugins or to see what plugins are capable of in general. You’re definitely right that we should take a look at it, though I’ll let the SDK team know about it and see what can be done.
🙌 1
p
I would update even the peer dependencies.
j
@Umer Nasir Petr is one of our developers, so I would follow his lead.
u
Hi Jan and Petr, so i’ve built, added and linked the plugin to my dashboard, the tooltip one in this case
and added it in the CSP, now how would I use it, and when i click on Edit on the dashboard, it shows me this
How would i add a tooltip to a single insight, or in general use this plugin?
j
Hi Umer. A couple of things. 1. I’ve discussed the versioning issue with the team responsible for the repository. We’ll work on creating a systematic way to keep the plugins there updated as the SDK is developed. I’d like to thank you for this feedback, because it is definitely something worth improving. 2. Plugins are based in code, offer a lot of freedom and customization, but can also be quite complicated and require some programming fundamentals. Generally, you need to look into the 
src
folder and edit the relevant TypeScript/JSX code to make it do exactly what you’ve designed. 3. I don’t know 100% what you want to use the plugin for. Generally, users want to produce some sort special feature or customization that’s ordinarily not possible with the existing UI. If it is about simply adding tooltips to insights with no added flair, that’s possible without any plugins; that feature has been productized some time ago. See attached pictures:
u
So, the provided example of tooltip in the examples gallery does not work, the starter guide you’re providing your clients is wrong on so many levels. I am glad tooltip works without the plugin, because the plugin for sure doesnt work anymore
j
If there’s something wrong with the starter guide, please let me know what, and I’ll make sure it gets adjusted. Regarding the 
gooddata-dashboard-plugins
repo and the versioning issue you’ve run into, I’ve already done everything I can to get that resolved as well.
u
the tooltip plugin has a guide, and screenshot of how it would look, but when u try it, and follow the guide, it doesnt work
I would consider that an issue with the starter guide, as one of the most basic example isnt working, nor is it updated
thanks
j
The tooltip-plugin will be looked into and either updated or moved to a legacy section, as the basic feature has been productized. Just as a general note, dashboard plugins are a fairly advanced topic that requires development time and reading of the plugin’s actual code. For completeness’ sake, see that the tooltip-plugin itself is further annotated by comments in the src folder: https://github.com/gooddata/gooddata-dashboard-plugins/blob/master/tooltip_plugin/src/dp_tooltip_plugin/Plugin.tsx The fixtures folder then contains the hashmap, which is a rudimentary way of linking concrete insights/KPIs to their tooltips: https://github.com/gooddata/gooddata-dashboard-plugins/blob/master/tooltip_plugin/src/dp_tooltip_plugin/fixtures/fixtures.ts
Open in Slack
PreviousNext
Powered by