From 3b823542109e4a0dac27d4c5fe8a82cb81b071f3 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Fri, 27 Sep 2019 11:07:10 +0530
Subject: [PATCH] docs: add docs on router config management

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/docs/README.md |  6 +++++
 ui/docs/config.md | 61 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 ui/docs/README.md
 create mode 100644 ui/docs/config.md

diff --git a/ui/docs/README.md b/ui/docs/README.md
new file mode 100644
index 00000000000..2f770953999
--- /dev/null
+++ b/ui/docs/README.md
@@ -0,0 +1,6 @@
+# Documentation
+
+- Router [Configuration](docs/config.md)
+- Custom Component
+- Styling
+- Testing
diff --git a/ui/docs/config.md b/ui/docs/config.md
new file mode 100644
index 00000000000..0d386d987b0
--- /dev/null
+++ b/ui/docs/config.md
@@ -0,0 +1,61 @@
+## Configuration
+
+### Section Config Definition
+
+A new section may be added in `src/config/section` and in `src/config/router.js`
+import the new section (newconfig.js as example) configuration file and rules to
+`asyncRouterMap` as:
+
+    import newconfig from '@/config/section/newconfig'
+
+    [ ... snipped ... ]
+
+      generateRouterMap(newSection),
+
+
+### API
+
+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
+
+See `src/config/section/compute.js` and `src/config/section/project.js` for example.
+
+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
+- `component`: the custom component for rendering the route view
+- `viewComponent`: the custom component for rendering a resource from the
+  default list view (table)
+- `actions`: arrays of actions/buttons
+
+### Action API
+
+The actions defined for a children show up as 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 name label
+- `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
+- `options`: list of API arguments to render/show on auto-generated action form
+- `hidden`: function that takes in a records and returns a boolean to control if
+  the action button needs to be disabled/hidden
+- `component`: the custom component to render the action (in a separate route view)
+- `popup`: (boolean) when true, displays any custom component in a popup modal
+  than in its separate route view