Merge pull request #148 from ritza-co/358-navigating-the-ui

DOCS-358 update page, tutorial-navigating-the-device42-user-interface

docs/getstarted/tutorials/tutorial-navigating-the-device42-user-interface.mdx

@@ -0,0 +1,201 @@
+---
+title: "Tutorial:  Navigating the Device42 User Interface"
+sidebar_position: 3
+---
+
+import ThemedImage from '@theme/ThemedImage'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+
+## Prerequisites
+
+This tutorial uses sample data added to the Main Appliance from the [API tutorial](getstarted/tutorials/tutorial-loading-data-using-the-api.md). You can still follow along if you have at least one building record that includes a room with related rack CIs (Configuration Objects).
+
+## Dashboard View
+
+On the home page of the Main Appliance, you'll see your dashboard below the notification summary. The dashboard provides summary information and statistics for items added or discovered by Device42. Select a dashboard option that displays the most useful information for you from the dropdown menu.
+
+<ThemedImage
+    alt="Select dashboard"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/select-dashboard-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/select-dashboard-dark.png'),
+    }}
+/>
+
+If you've followed the [spreadsheets tutorial](/getstarted/tutorials/device42-tutorial.mdx), [API tutorial](getstarted/tutorials/tutorial-loading-data-using-the-api.md), or run an autodiscovery job, your dashboard statistics will reflect the new CIs. 
+
+<ThemedImage
+    alt="Classic Dashboard list view link"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/dashboard-stats-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/dashboard-stats-dark.png'),
+    }}
+/>
+
+Click on the building count, or navigate to **Infrastructure > DataCenter > Buildings** to go to the buildings list view. 
+
+<ThemedImage
+    alt="Buildings list view"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/buildings-list-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/buildings-list-dark.png'),
+    }}
+/>
+
+Click on the **New Haven DC** building, scroll down, and select the **NHDC1** room.
+
+<ThemedImage
+    alt="New Haven DC example"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/ellipsis-button-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/ellipsis-button-dark.png'),
+    }}
+/>
+
+
+Click the ellipsis button on the **NHDC1** room page and select **Room Layout**.
+
+<ThemedImage
+    alt="Room Layout button"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/new-haven-example-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/new-haven-example-dark.png'),
+    }}
+/>
+
+
+## Room Layout View 
+
+This is the room layout view. Here we can view the racks and their layout in a room.
+
+<ThemedImage
+    alt="Room Layout view"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/room-layout-example-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/room-layout-example-dark.png'),
+    }}
+/>
+
+
+Under **Display Options**, you can choose which text and color coding to apply to the layout:
+- **Rack Display:** Choose the text to include on the rack labels.
+- **Rack Color:** Choose between the usage or temperature heatmaps, or select a [custom field](/administration/custom-key-value-pairs-explained.mdx). 
+
+:::info
+See [Buildings and Rooms](/infrastructure-management/buildings-rooms-and-racks/buildings-and-rooms/#room-layout-view.mdx) for information on editing room layouts.
+:::
+
+If you have the **DCM Power Module**, you will also see options for power and temperature heat maps.
+
+Now hover over the rack **NH-DC1-04** example.
+
+<ThemedImage
+    alt="Room Layout view"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/nhdc1-hover-box-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/nhdc1-hover-box-dark.png'),
+    }}
+/>
+
+When you do this, you will see a hover box with detailed information about the rack. Now, click on the **View NH-DC1-04 Layout** link to go to the rack layout view.
+
+## Rack Layout View
+
+Here you see an image of the front of the rack on the left and the back of the rack on the right.
+
+:::tip
+If you want to add a new rack with the kind of information shown below, navigate to **Infrastructure > Racks** and click **+ Add Rack** on the right of the Racks list page.
+:::
+
+<ThemedImage
+    alt="Rack Layout view"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/rack-layout-view-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/rack-layout-view-dark.png'),
+    }}
+/>
+
+As with the room layout view, if you have the DCM Power Module, you will see options for power and temperature heat maps.
+
+While hovering over the "NHCTCC01" device, you can see details about the device itself, and because the device is a blade chassis, you also see hyperlinks that will take you to the details page for each of the individual blades in chassis NHCTCC01.
+
+Now click the **View Topology** link on the bottom right.
+
+## Topology Charts
+
+The topology impact chart is a diagram of the physical and virtual machines and the applications they support.
+
+<ThemedImage
+    alt="Topology example"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/topology-example-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/topology-example-dark.png'),
+    }}
+/>
+
+This is a fairly simple example but they can get quite complex. These impact charts are very useful for assessing the impact of losing a particular server. This can be helpful during business continuity planning or when trying to track down a root cause during a production outage.
+
+## The List View
+
+Go to **Resources > All Devices** to view all your devices. 
+
+All Device42 objects have a list view. The add, filter, search, and action tools are common to all Device42 objects.
+
+<ThemedImage
+    alt="Devices list view"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/devices-list-view-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/devices-list-view-dark.png'),
+    }}
+/>
+
+On the right side of the screen, you see a button to add a device (1). 
+
+You'll see several filters that can be applied to reduce the size of the list (2). You can filter by device type, hardware model, OS, and more. If you have hundreds or thousands of devices, these filters can be very useful. 
+
+Similarly, there is a search box for filtering the list (3). If you type "nh-demo" into the search box, the list will filter down to just the devices that contain the string "nh-demo". 
+
+There is an action bar for bulk operations, like deleting items (4).
+
+## Bulk Actions
+
+<ThemedImage
+    alt="Bulk actions dropdown"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/device-actions-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/device-actions-dark.png'),
+    }}
+    style={{ width: '70%' }} 
+/>
+
+Click the **Select and action** dropdown menu to see several bulk action choices. You can delete the selected devices or perform any of the actions in the dropdown on the selected devices. To execute the selected action, select one or more devices and click the **hammer icon**.
+
+You will find bulk actions on most Device42 objects, but the options will vary for each object.
+
+## Detail View
+
+All objects in Device42 have a list view, a detail view, and an edit view. Most objects also have a **History (Audit Logs)** button that shows a history of changes to the object.
+
+Click a device name to view its details.  
+
+<ThemedImage
+    alt="View device details"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/view-device-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/view-device-dark.png'),
+    }}
+/>
+
+Notice the set of buttons on the top right corner of the view. Click the **Edit** button to open up the fields for editing and additions. Click the **ellipsis icon** for related view options, including the **Impact Chart** option we saw above.
+
+Scroll down for tabs that open subpages of data for the device.
+
+<ThemedImage
+    alt="Device view tabs"
+    sources={{
+        light: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/device-tabs-light.png'),
+        dark: useBaseUrl('/assets/images/tutorial-navigating-the-device42-user-interface/device-tabs-dark.png'),
+    }}
+/>
+
+Browse through the documentation for more detailed information on the various Device42 features.