Redirecting to github for advanced customization

Author: davidjumani

source/installguide/primate.rst

@@ -138,8 +138,7 @@ Example nginx config:
 
 Basic Customization in CloudStack Primate
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-Users can now customize the CloudStack's user interface by means of a configutaion file - config.json found at
-https://github.com/apache/cloudstack-primate/tree/master/public. The public/config.json file (or correspondingly, the dist/config.json file, after build, which is available at /usr/share/cloudstack-management/webapp/primate/) can be used to modify the theme, logos, etc. to align to one's requirement.
+Users can now customize the CloudStack's user interface by means of a configutaion file at /usr/share/cloudstack-management/webapp/primate/config.json can be used to modify the theme, logos, etc. to align to one's requirement.
 
 To change the logo,login banner,error page icon, etc. the following details can be editted in config.json:
 
@@ -216,166 +215,14 @@ Some assorted primary theme colours:
 - Green: #52C41A
 - Purple: #722ED1
 
-Also, to add other properties, we can use the theme.config.js file which based on the Ant Design Vue Less variable. Refer: https://www.antdv.com/docs/vue/customize-theme/#Ant-Design-Vue-Less-variables
-These properties can then be modified or set in the config.json file. On refresh Vue's modify variable enables the run-time modification of Less variables. When called with new values, the Less file is recompiled without reloading.
-
-CloudStack Primate also supports adding custom plugins, which can be defined in config.json. These plugins are then implemented as iframes in Primate.
-
-.. parsed-literal ::
-
-    "plugins": [
-        {
-          "name": "ExamplePlugin",
-          "icon": "appstore",
-          "path": "example.html"
-        }
-    ]
-
 Advanced Customization
 ~~~~~~~~~~~~~~~~~~~~~~
 
-CloudStack Primate has been developed in a way that makes it easy for one to add new features/components with minimal effort as most of the complexity has been abstracted by means of auto-generation of basic forms.
-
-Defining a new Section
-~~~~~~~~~~~~~~~~~~~~~~
-
-A new section may be added by creating a javascript file in **src/config/section/** of the root directory. Correspondingly, this newly added configuration file (e.g., newSection.js), defining the section, needs to be imported in the **src/config/router.js** configuration file and rules need to be added to the *asyncRouterMap*, so as to render the matched component for the given path
-
-.. code-block :: javascript
-
-    import newSection from '@/config/section/newSection'
-
-    [ ... snipped ... ]
-
-    generateRouterMap(newSection),
-
-An existing or new section config/js file must export the following parameters:
-
-- name: unique path in URL
-- title: the name to be displayed in navigation and breadcrumb
-- icon: the icon to be displayed, from AntD's icon set https://vue.ant.design/components/icon/
-- children: (optional) array of resources sub-navigation under the parent group
-- permission: when children are not defined, the array of API to check against allowed auto-discovered APIs
-- columns: when children is not defined, list of column keys
-- component: when children is not defined, the custom component for rendering the route view
-
-For example, see src/config/section/compute.js and src/config/section/project.js.
-
-The children should have:
-
-- name: unique path in the URL
-- title: the name to be displayed in navigation and breadcrumb
-- icon: the icon to be displayed, from AntD's icon set https://vue.ant.design/components/icon/
-- permission: the array of API to check against auto-discovered APIs
-- columns: list of column keys for list view rendering
-- details: list of keys for detail list rendering for a resource
-- tabs: array of custom components that will get rendered as tabs in the resource view
-- component: the custom component for rendering the route view default list view (table)
-- actions: arrays of actions/buttons
-- related: a list of associated entitiy types that can be listed via passing the current resource's id as a parameter in their respective list api
-
-Action API
-~~~~~~~~~~
-
-If a user wants to add an action button to perform as the name implies a specific action, without having to implement a custom component, one may use the Action API in the correspondins section's javascript file. The sections are defined under src/config/section path of the root directory.
-The actions defined for a child shows up as a group of buttons on the default autogen view (that shows tables, actions etc.). Each action item should define:
-
-
-- api: The CloudStack API for the action
-- icon: the icon to be displayed from AntD's icon set https://vue.ant.design/components/icon/
-- label: The action button's name
-- message: The action button's confirmation message
-- docHelp: Allows to provide a link to a document to provide details on the action
-- listView: (boolean) whether to show the action button in list view (table)
-- dataView: (boolean) whether to show the action button in resource/data view
-- groupAction: Whether the button supports groupable actions when multiple items are selected in the table
-- args: list of API arguments to render/show on auto-generated action form
-- mapping: The relation of an arg to an api (from which it's id is used as a select-option) or a given hardcoded list of select-options
-- show: function that takes in a records and returns a boolean to control if the action button needs to be shown or hidden
-- popup: (boolean) when true, displays any custom component in a popup modal than in its separate route view
-- component: the custom component to render the action (in a separate route view)
-
-For example:
-
-.. code-block:: javascript
-
-        actions: [
-            {
-              api: 'updateVirtualMachine',
-              icon: 'edit',
-              label: 'label.action.edit.instance',
-              message: 'message.action.edit.instance',
-              docHelp: 'adminguide/virtual_machines.html#changing-the-vm-name-os-or-group',
-              dataView: true,
-              args: ['name', 'displayname', 'ostypeid', 'isdynamicallyscalable', 'haenable', 'group'],
-              show: (record) => { return ['Stopped'].includes(record.state) }
-            }
-        ]
-
-However, if one's requirement is to perform further operations as part of their form, then a custom Vue component must be defined under the src/views/<component> folder of the root directory and the defined component must them be imported in the corresponding section's javascript file. Examples of how to create such views are available in the cloudstack-primate repository
-
-For example:
-
-.. code-block:: javascript
-
-    actions: [
-        {
-          api: 'deployVirtualMachine',
-          icon: 'plus',
-          label: 'label.vm.add',
-          docHelp: 'adminguide/virtual_machines.html#creating-vms',
-          listView: true,
-          component: () => import('@/views/compute/DeployVM.vue')
-        }
-    ]
-
-Resource List View
-~~~~~~~~~~~~~~~~~~
-After having, defined a section and the actions that can be performed in the particular section; on navigating to the section, we can have a list of resources available, for example,On navigating to **Compute > Instances** section, we see a list of all the VM instances (each instance referred to as a resource).
-The columns that should be made available while displaying the list of resources can be defined in the section's configuration file under the columns attribute (as mentioned above). **columns** maybe defined as an array or a function in case we need to selectively (i.e., based on certain conditions) restrict the view of certain columns.
-For example:
-
-.. code-block :: javascript
-
-    ...
-    // columns defined as an array
-    columns: ['name', 'state', 'displaytext', 'account', 'domain'],
-
-    // columns can also be defined as a function, so as to conditionally restrict view of certain columns
-    columns: () => {
-        var fields = ['name', 'hypervisor', 'ostypename']
-        if (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype)) {
-          fields.push('account')
-        }
-        ...
-    }
-
-Resource Detail View Customization
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-From the List View of the resources, on can navigate to the individual resource's detail view, which in CloudStack Primate we refer to as the *Resource View* by click on the specific resource.
-The Resource View has 2 sections:
-- InfoCard to the left that has basic/ minimal details of that resource
-- and the tabs to the right that can be either defined as custom components or if we just want basic details of the resource to be displayed we may use the *DetailsTab* to render the required details of the resource. You can control what needs to be displayed by spcifying their names in the *details* array.
-The names specified in the details array should correspond to the api parameters
-
-For example,
-
-.. code-block :: javascript
-
-    ...
-    details: ['name', 'id', 'displaytext', 'projectaccountname', 'account', 'domain'],
-    ...
-
-    // To render the above mentioned details in the right section of the Resource View, we must import the DetailsTab
-    tabs: [
-    {
-      name: 'details',
-      component: () => import('@/components/view/DetailsTab.vue')
-    },
-    ...
-    ]
-
-Additional tabs can be defined by adding on to the tabs section.
+Users comfortable with development in JavaScript and VueJS can add / modify additional sections, actions and components
+by building primate from source available on the `cloudstack-primate
+<https://github.com/apache/cloudstack-primate>`_
+repository and following the guide available `here
+<https://github.com/apache/cloudstack-primate/blob/master/docs/development.md>`_
 
 Known Issues and Missing Features
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~