DOCSP-1842 - Charts Dashboards documentation (#2)

Author: jeff-allen-mongo

Makefile

@@ -9,7 +9,7 @@ PRODUCTION_BUCKET=
 
 PROJECT=charts
 
-.PHONY: help html stage publish  deploy-search-index publish 
+.PHONY: help html stage publish  deploy-search-index publish
 
 help: ## Show this help message
 	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
@@ -30,12 +30,13 @@ publish: ## Builds this branch's publishable HTML and other artifacts under buil
 
 deploy-search-index: ## Update the search index for this branch
 	@echo "Building search index"
-	mut-index upload build/public -o ${PROJECT}-${GIT_BRANCH}.json -u ${PRODUCTION_URL}/${PROJECT} -g -s 
+	mut-index upload build/public -o ${PROJECT}-${GIT_BRANCH}.json -u ${PRODUCTION_URL}/${PROJECT} -g -s
 
 screenshots:
 	giza generate assets
 	@echo "Running screenshot tool"
 	-rm -r screenshots-temp/charts/
 	mkdir -p screenshots-temp/charts/
 	cd build/docs-tools/tools/screenshot-tool && npm install
+	node build/docs-tools/tools/screenshot-tool/screenshots.js `pwd`/screenshot-scripts/dashboard-landing.js
 	node build/docs-tools/tools/screenshot-tool/screenshots.js `pwd`/screenshot-scripts/data-sources.js

screenshot-scripts/dashboard-landing.js

@@ -0,0 +1,32 @@
+'use strict'
+
+const screenshotNames = ['charts-dashboard-landing.png'];
+const screenshotDir = './screenshots-temp';
+const origImageDir = './source/images/charts';
+
+exports.run = async function (options) {
+  const nightmare = options.nightmare;
+  const originalPath = `${origImageDir}/${screenshotNames[0]}`;
+  const screenshotPath = `${screenshotDir}/${screenshotNames[0]}`;
+
+  await nightmare.goto('http://charts.mongodb.parts');
+  await nightmare.wait('.Charts_dashboard-overview_list---QP2c0');
+  await nightmare.wait(1000);
+
+  // take a screenshot
+  await nightmare.screenshot(screenshotPath);
+  await nightmare.wait(500);
+  await nightmare.end();
+
+  return [[originalPath, screenshotPath]];
+}
+
+exports.nightmare_props = {
+    show: true,
+    typeInterval: 20,
+    height: 1000,
+    width: 1100,
+    webPreferences: {
+      zoomFactor: 1.0
+    }
+}

source/dashboards.txt

@@ -0,0 +1,166 @@
+==========
+Dashboards
+==========
+
+.. default-domain:: mongodb
+
+.. contents:: On this page
+   :local:
+   :backlinks: none
+   :depth: 2
+   :class: singlecol
+
+Dashboards are a collection of charts assembled to create a single
+unified display of your data. Each chart shows data from a
+single MongoDB collection or view, so dashboards are essential to
+attain insight into multiple focal points of your data in a single
+display.
+
+Dashboards Tab
+--------------
+
+The :guilabel:`Dashboards` tab shows all dashboards you have access to
+view. For more information on user permissions in MongoDB Charts,
+see :doc:`Permission Model <permission-model>`.
+
+.. figure:: /images/charts/charts-dashboard-landing.png
+   :figwidth: 750px
+   :alt: Charts Dashboard Tab
+
+Each dashboard shows the following information:
+
+- Title
+
+- Description
+
+- A preview of the first three charts in the dashboard, including the
+  chart title and type
+
+- When the dashboard was last modified
+
+By default, the most recently modified dashboards are shown first in
+the list. You can change the sort order by using the
+:guilabel:`Sort By` dropdown menu.
+
+Create a New Dashboard
+----------------------
+
+To create a new dashboard:
+
+1. From the :guilabel:`Dashboards` tab, click the
+   :guilabel:`New Dashboard` button.
+
+2. In the :guilabel:`New Dashboard` dialog, enter a title for your
+   dashboard.
+
+3. (Optional) Enter a :guilabel:`description` for your dashboard.
+
+4. Click :guilabel:`Create`.
+
+After after clicking the :guilabel:`Create` button you are taken
+to the page for your newly created dashboard, where you are prompted to
+add the first chart to your dashboard:
+
+.. figure:: /images/charts/charts-dashboard-new.png
+   :figwidth: 750px
+   :alt: Charts New Dashboard Example
+
+Manage Existing Dashboards
+--------------------------
+
+You can manage existing dashboards by adding charts, removing charts,
+and changing the size and position of the charts on the dashboard. To
+begin modifying a dashboard, enter the :guilabel:`dashboard view` by
+clicking the desired dashboard from the :guilabel:`Dashboards` tab.
+
+.. note::
+
+   You can search for dashboards by title by using the search bar
+   in the top-right corner of the page.
+
+Add a Chart
+~~~~~~~~~~~
+
+To add a chart to your dashboard, click the :guilabel:`Add Chart`
+button at the top-right of your dashboard. For detailed instructions on
+creating charts, see :doc:`Building Charts <building-charts>`.
+
+Edit a Chart
+~~~~~~~~~~~~
+
+To edit a chart, hover over the desired chart and click the
+:guilabel:`Edit` button. For details on the available editing options,
+see :doc:`Building Charts <building-charts>`.
+
+Remove a Chart
+~~~~~~~~~~~~~~
+
+.. important::
+
+   Removing a chart from a dashboard is a permanent operation. There
+   is no way to recover a chart once it has been deleted, although
+   the underlying data in the collection the chart was created
+   from will continue to exist.
+
+To remove a chart from your dashboard, hover over the desired chart
+and click the red :guilabel:`trash can icon` at the top-right of the
+chart. Then, click :guilabel:`Delete Chart` to confirm the chart
+deletion.
+
+Resize a Chart
+~~~~~~~~~~~~~~
+
+To resize a chart, hover over the chart and drag the *bottom-right*
+corner until the appearing blue rectangle reaches the deired size.
+
+.. figure:: /images/charts/resize-chart.gif
+   :figwidth: 750px
+   :alt: Resize Chart Example
+
+Rearrange Charts
+~~~~~~~~~~~~~~~~
+
+To rearrange charts in your dashboard, hover over the chart and drag
+the top-left corner until the appearing blue rectangle is in the
+desired location. You can also see how moving the chart will affect the
+position of other charts in your dashboard, as illustrated in the
+following example:
+
+.. figure:: /images/charts/rearrange-charts.gif
+   :figwidth: 750px
+   :alt: Rearrange Charts Example
+
+Rename a Dashboard and Edit its Description
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+To edit a dashboard's title and description:
+
+1. In the top-left corner of the desired dashboard view, hover over
+   the dashboard title or description and click the
+   :guilabel:`pencil icon`.
+
+2. In the :guilabel:`New Dashboard` dialog, update the
+   :guilabel:`Title` and :guilabel:`Description` of your dashboard.
+
+3. Click :guilabel:`Update` to save your changes.
+
+Delete a Dashboard
+~~~~~~~~~~~~~~~~~~
+
+.. important::
+
+   Deleting a dashboard is a permanent operation. There is no way to
+   recover a dashboard once it has been deleted, although the
+   underlying data in the collections used in the dashboard will
+   continue to exist.
+
+To delete a dashboard:
+
+1. In the :guilabel:`Dashboards` tab, find the dashboard you wish to
+   delete.
+
+2. Hover over the dashboard and click the red :guilabel:`Trash Can`
+   icon.
+
+3. Click :guilabel:`Delete` in the :guilabel:`Delete Dashboard` dialog
+   to confirm deletion.

source/images/charts/charts-dashboard-landing.png

@@ -15,4 +15,5 @@ Until the confusing drop down goes away, see
       :titlesonly:
 
       /installation
+      /dashboards
       /data-sources

source/images/charts/charts-dashboard-new.png

@@ -63,7 +63,7 @@ Installing MongoDB Charts Beta
 
 2. On your target server, sign in to Docker with the Docker ID you used
    to register for |charts|:
-   
+
    .. code-block:: sh
 
       docker login