-
-
Notifications
You must be signed in to change notification settings - Fork 193
Extending Mission Control
The plugin index file is the right place to register additional functionalities in pre-determined regions of the application
To add an item to the top menu bar
plug(
'menu',
null,
{
id: 'plugin-manager',
label: 'Plugins',
url: '/plugins',
permission: 'admins'
}
);
This will add the item Plugins to the top bar that will redirect the browser to the page /plugins
(you will have to register the page with plug('pages', ...)
.
The available options for a menu item
Option | Type | Required | Description |
---|---|---|---|
id | string | yes | The unique id of the menu item |
label | string | yes | The label item |
url | string | yes | The URL to redirect the browser to, if it's an internal link, a page must be registered with plug('pages', ...)
|
permission | string/[string] | no | A permission or a list of permission this link is visibile to (a user can have one or more permission). If empty it will be visible to anyone. Use plug('permissions', ...) to register a new permission |
To add items and subitems to the sidebar of Mission Control
plug(
'sidebar',
null,
{
id: 'myuniqueid',
label: 'My Items',
url: '/mycustompage',
icon: 'file-text',
options: [
{ label: 'Item 1', url: '/my-custom-1', id: 'item-1' },
{ label: 'Item 2', url: '/my-custom-2', id: 'item-2' }
]
}
);
TBC
To register a new permission that will be available in the permissions drop down of the admin modal (and can be used in any permission
option while registering views)
plug(
'permissions',
null,
{
permission: 'plugins',
name: 'Manage plugings',
description: `Add, remove and manage plugins in Mission Control`,
group: 'General'
}
);
TBC
To register a custom page in Mission Control
plug(
'pages',
MyCustomPage, {
url: '/mypage',
title: 'A custom page',
id: 'custom-page',
permission: 'plugins'
}
);
TBC
To add a footer button in the user's modal
plug(
'user-button',
MyButton
);
An example of the React view
import { Button } from 'rsuite';
const MyButton = ({ user }) => (
<Button onClick={() => alert(user.first_name)}>Click Me!</Button>
);
The React view receives the following properties from the user modal view
Property | Type | Description |
---|---|---|
user | user | A user object |
To add a widget to the home page dashboard
plug(
'widgets',
MyWidget,
{ x: 0, y: 0, w: 2, h: 6, isResizable: true, id: 1 }
);
The available options
Option | Required | Type | Description |
---|---|---|---|
x | yes | integer | The initial x position of the widget |
y | yes | integer | The initial y position of the widget |
w | yes | integer | The initial width of the widget |
h | yes | integer | The initial height of the widget |
isResizable | yes | boolean | If the widget can be resized |
id | yes | integer/string | A unique id of the widget |
To add an header in the general information of the device detail page
plug(
'device-header',
({ device }) => {
return <span>{device.payload.network.apn.name}</span>
},
{
label: 'A label',
edit: '/network/my_config',
id: 'my-id',
tooltip: 'Edit this param'
}
);
The available options
Option | Required | Type | Description |
---|---|---|---|
id | yes | string | The device id |
label | yes | string | A descriptive label |
tooltip | no | string | Tooltip text for the edit button |
edit | no | string | The path of the portion of json schema to edit (i.e. /network/my_config |
And example of React view
({ device }) => {
return <span>{device.payload.my_param}</span>
}
The React view receives the following properties from the device detail view
Property | Type | Description |
---|---|---|
device | device | A device object |
The code below will add a tab to the content modal
import { plug } from 'code-plug';
plug('content-tabs', MyTab, {
id: 'content-configuration',
label: 'Configuration'
});
The available options
Option | Required | Type | Description |
---|---|---|---|
id | yes | string | The unique id of the tab |
label | yes | string | The tab label |
namespace | no | string/[string] | List of content namespaces for which the table is visible. Empty array or null means it's always visible |
permission | no | [string] | In order to show the tab, user must have one of these permissions |
An example of custom tab
const MyTab = ({ formValue = {}, onChange = () => {}, disabled = false }) => (
<div className="my-tab">
<input
value={formValue.my_field}
onChange={e => onChange({ ...formValue, my_field: e.target.value }}
/>
</div>
);
It's important to remember that a tab is only able to change the payload
key of the content, which is space where all custom plugins store the extension to the contents, it's important to preserve the content of payload without overwriting other plugin's extension.
The React view receives the following properties by the modal view
Property | Type | Description |
---|---|---|
formValue | object | The hash of the payload field of the current content |
onChange | function | Propagate the change, always send all the payload value with onChange({ ...formValue, my_field: ... }) otherwise other's plugin value will be overwritten |
disabled | boolean | Disable the form (for example while saving) |
User
Name | Type | Description |
---|---|---|
id | integer | The internal id of the user (it's the unique key in the database) |
userId | string | The unique userId of the platform, it's generally the user id of the chat platform the user is using |
first_name | string | |
last_name | string | |
language | string | The default language of the user (not all platforms provide this value). Two letters ISO format |
username | string | The user nickname (not all platforms provide this value) |
createdAt | date | |
payload | json | The user's payload. It's a json object where plugins stores additional values about this user |