https://rancher.com/ logo
Join Slack
Powered by
This message was deleted.
# extensions
a
This message was deleted.
b
Hi @abundant-account-84261 . Due to some changes on Rancher UI (Dashboard) the above example doesn’t work. It’s missing the routes definition. Here’s the most basic definition of a top-level-product (getting started): 
index.ts
Copy code
import { importTypes } from '@rancher/auto-import';
import { IPlugin } from '@shell/core/types';
import routing from './routing';

// Init the package
export default function(plugin: IPlugin) {
  // Auto-import model, detail, edit from the folders
  importTypes(plugin);

  // Provide extension metadata from package.json
  plugin.metadata = require('./package.json');

  // Load a product
  plugin.addProduct(require('./product'));

  // Add Vue Routes
  plugin.addRoutes(routing);
}
product.ts
 (for the 
addProduct
method in 
index.ts
)
Copy code
import { IPlugin } from '@shell/core/types';

export function init($plugin: IPlugin, store: any) {
  const YOUR_PRODUCT_NAME = 'myProductName';
  const BLANK_CLUSTER = '_';

  const { product } = $plugin.DSL(store, YOUR_PRODUCT_NAME);

  product({
    icon:    'gear',
    inStore: 'management',
    weight:  100,
    to:      {
      name:      `${ YOUR_PRODUCT_NAME }-c-cluster`,
      path:      `/${ YOUR_PRODUCT_NAME }/c/:cluster/dashboard`,
      params:      {
        product: YOUR_PRODUCT_NAME,
        cluster: BLANK_CLUSTER,
        pkg:     YOUR_PRODUCT_NAME
      }
    }
  });
}
routing.js
 (for the 
addRoutes
method in 
index.ts
)
Copy code
import Dashboard from './pages/index.vue';

const BLANK_CLUSTER = '_';
const YOUR_PRODUCT_NAME = 'myProductName';

const routes = [
  {
    name:      `${ YOUR_PRODUCT_NAME }-c-cluster`,
    path:      `/${ YOUR_PRODUCT_NAME }/c/:cluster`,
    component: Dashboard,
    meta:      {
      product: YOUR_PRODUCT_NAME,
      cluster: BLANK_CLUSTER,
      pkg:     YOUR_PRODUCT_NAME
    }
  }
];

export default routes;
on 
routing.js
note that we are importing Dashboard. It’s just a basic Vue page. You’ll need to create the 
pages
folder and there a file called 
index.vue
. That should do it. We are going to update the docs https://rancher.github.io/dashboard/extensions/extensions-getting-started as soon as possible 🙏
a
Thank you @busy-ability-54059 for the response. Let me try this out. Will let you know how it goes.
Could you please comment on the missing options for yarn 
build-pkg
and 
serve-pkgs
?
Thank you @busy-ability-54059 for your detailed response. With the new changes that you suggested, the extension is working now. In the video you had mentioned you may be able to share a link to a github repo for the code. When possible for you, can you please share this as well?
b
https://rancher-users.slack.com/archives/C04PPGWAWNR/p1696900054396099?thread_ts=1696732634.224429&cid=C04PPGWAWNR So, I’ve been diving into this since I am in the process of updating the docs and I don’t know how you created your skeleton app and generated the boilerplate for your extension, but you should follow the steps in our getting started section: Yarn command to create a skeleton app -> https://rancher.github.io/dashboard/extensions/extensions-getting-started#creating-the-skeleton-app This won’t come with the scripts in the main package.json yet…. You’ll need to generate your first extension on your skeleton app Yarn command to generate an extension -> https://rancher.github.io/dashboard/extensions/extensions-getting-started#creating-an-extension After doing this, the main package.json get’s updated with the scripts you mentioned. Give this a try 🙏
a
Hello @busy-ability-54059, sorry for the misdirection there. I am now seeing the 
build-pkg
and 
serve-pkgs
commands available. I am guessing that may be because of 
vue
not being installed. Even though it may be obvious for a seasoned developer may be a good idea to include that in the pre-reqs?
I was also trying to "Developer Load" option mentioned in the documentation. However somehow even after setting the 
EXCLUDES_PKG='test'
option in the 
.env
file and even doing 
source .env
to include the env vars, I am seeing that the UI still has the pkg as 
BUILT-IN
and the extension link available in the left side menu (and working) as well. The docs says put the 
.env
file in the 
test-app
folder. Seems like a typo to me as there is no such folder referred to earlier. I put in the 
my-app
(did not work). Then put in also in the 
pkg
folders and it still did not work. My goal is to be able to get to the point of creating a helm chart for my extension (as the documentation also directs towards) that can be installed/loaded on any rancher UI.
Thanks in advance for all your help and time. This has been very helpful and the rancher extensions is a very neat idea in my opinion.
🙏 1
🫡 1
b
https://rancher-users.slack.com/archives/C04PPGWAWNR/p1696960184690229?thread_ts=1696732634.224429&cid=C04PPGWAWNR Hi @abundant-account-84261. You have been quite helpful in reviewing the extensions docs. I indeed checked this part of the Getting Started and this (again, sorry) was out of date. If you want to exclude you extension, just edit the 
vue.config.js
file in the root of 
my-app
and add to the 
excludes
array there the name of pkg: 
['test']
. Restart your dev app again. The next step would be to do a Developer Load. Remember to enable the feature on the UI side + run on your terminal 
yarn serve-pkgs
. This will spin up a web server to serve whatever is in 
dist-pkg
(output of 
build-pkg
). Use the URL of the 
yarn serve-pkgs
in the developer load URL box in the UI and your built extension should load. Will update the docs. Thanks 🙏
@abundant-account-84261 docs updated 🙏 https://rancher.github.io/dashboard/extensions/home
2 Views
Open in Slack
PreviousNext
Powered by