Hi everyone, • I'm working on a top-level UI extension and was wondering — is it possible to create an API extension or backend extension to support it? If so, do you have any examples or documentation you could share? • Is there any way to get cluster list from Top-level product without token? currently I'm getting through (v3/clusters) api (which needs a token). • How can I access/create my token from Top-level product? TIA

you can. https://github.com/rancher/elemental-operator is the backend for Elemental. Since my area is frontend, I don’t know of any documentation about this part. As for the top level product, If you’re logged into Rancher and use: https://github.com/rancher/dashboard/blob/master/shell/pages/home.vue#L258-L260 you’ll get the list of clusters without the need for tokens, if I am not mistaken. Tokens can be managed via the UI on the

user menu

-

account and api keys

https://github.com/rancher/dashboard/blob/master/shell/edit/token.vue#L120-L124 it does a request to

v3/tokens

with the appropriate payload. Theoretically you could do something like:

this.$store.dispatch(`rancher/create`, {
        type:                NORMAN.TOKEN,
        .... where this the payload needed
      }));

just cross-check to what’s going on with the network request

@busy-ability-54059 Is it possible to write a golang http API server for the UI extensions?

the part that I technically know more of is the frontend, so I don’t know the reply to your question

@busy-ability-54059 Thanks for your support so far. Could you suggest some channels where I can ask questions or get help with my queries related to GoLang HTTP servers for UI extensions?

No worries. I wish I could help more. Try the #C3ASABBD1 channel, saying that you want to build a backend piece (operator) for a UI extension on Rancher. The folks from Elemental might also help, but that’s more of a long shot #C028DVCAYLD

Hey @busy-ability-54059, I’m running into a strange issue while installing a custom package from our GitHub repo (not from the npm registry). When I run

npm install

, it says the package is added successfully. However: • I don't see a `node_modules`folder in the project. • Despite that, I can import the package and use its functions (that function uses Vuex dispatch). • Ctrl+clicking on the import takes me only to the specific file I used—not the full package or structure. • The same goes for Axios, where I also don't see

node_modules

, but Ctrl+click takes me inside the Axios file. But I can use Axios without any issue. The real issue: A function from this custom package tries to dispatch a Vuex action, but I get this runtime error:

TypeError: Cannot read properties of undefined (reading 'dispatch')

It seems like something is off with the package resolution or context. Any idea what might be going wrong here and how to fix it? NB: The package from GitHub is widely used in our repos and well tested and working.

First, you should use

yarn

instead of

npm

as it’s the package manager that we use with Rancher Dashboard/Extensions. you can’t see

node_modules

folder because we hide it with

gitignore

: https://github.com/rancher/dashboard/blob/master/creators/extension/app/files/gitignore#L50 As for the

dispatch

, most likely is the context that is wrong… Meaning that’s not the correct way to use the vuex action

dispatch

given the context of the file in which you’re trying to use it. There are quite a few official extensions https://github.com/rancher/ui-plugin-charts/blob/main/manifest.json or https://github.com/rancher/ui-plugin-examples Take some time to browse through their code and get familiar with the patterns. Unless your really in a very unique situation, I am quite confident you’ll find your usecase/code already developed somewhere in these extensions

Hi @busy-ability-54059, Thank you for your response so far! I'm currently working on building an extension and would like to use your design system. However, I'm not sure how to properly integrate it. I’ve looked through your Storybook documentation, but it seems like it's not fully complete. Could you please share any available documentation or guidance on how to use your design system? Thanks in advance!

Best way to proceed: • Run rancher Dashboard project locally (you run it the same way as an extension) and browse through the UI and see the components we offer there. Look at the creation screen for everything under Workloads (Jobs, Deployments, etc). Those forms use a lot of different components. After you find something that is useful, search for it on the codebase and see the usage. Cross-check it with storybook because it might be there and explain it a bit better. That’s how I would do it