.. Copyright (c) 2023, Xgrid Inc, https://xgrid.co .. Licensed under the Apache License, Version 2.0 (the "License"); .. you may not use this file except in compliance with the License. .. You may obtain a copy of the License at .. http://www.apache.org/licenses/LICENSE-2.0 .. Unless required by applicable law or agreed to in writing, software .. distributed under the License is distributed on an "AS IS" BASIS, .. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. .. See the License for the specific language governing permissions and .. limitations under the License. UI Overview =========== Before using the SD-WAN Conversion Tool, it is essential to familiarize yourself with various UI components of this tool. Based on the user categories, it is divided into two different views to ensure an interactive user experience. A list of various available tabs is shared below. Click on your desired option to jump directly to the details of that tab. * :ref:`Navigation Bar` * :ref:`Dashboard Tab` * :ref:`Convert Tab` .. _navigation_bar: Navigation Bar ++++++++++++++ The navigation bar is located at the top right corner of the UI as shown in the figure below. .. figure:: images/navigation_bar_ui.png :align: center Figure 1. Navigation bar overview The navigation bar contains three options as listed below: * **Help**: It is the first option in the navigation bar. Clicking on it will open a context menu with the following three options: * **Documentation**: Clicking this option will direct the user to the product documentation for the SD-WAN Conversion Tool. * **Password Policy**: Clicking this option will display a pop up about password policy managed by CISCO SD-WAN. * **Contact Support**: Clicking this option will open a dialog box where the user can view the contact support form. Users can fill out the form and send an email to the support team of SD-WAN Conversion Tool. For further details refer to the :ref:`Contact Support ` section. * **FAQs**: Clicking this option will direct the user to the general queries related to SD-WAN Conversion Tool. * **Video Walk-through**: Clicking this option will direct the user to a video walk-through of the SD-WAN Conversion Tool. * **About**: It is positioned on the right of the Help option. Clicking on it will display a brief description of the tool and its version number. * **Username**: It is the last option in the navigation bar and essentially displays the username of the logged-in user. Clicking on it will open a context menu with the following three options: * **Profile**: Clicking this option opens up a dialog box where the user can view their details. * **Collect Logs**: Clicking this option will download logs for the SD-WAN Conversion Tool. * **Logout**: Clicking this option will log out the user from the ongoing active session. However, if the user is in the middle of a workflow, they can continue from the point where they left upon their next login. .. _dashboard_tab: Dashboard Tab +++++++++++++ Dashboard tab allows the admin user to view user logs and manage registered users. To view this tab, select the **Dashboard** option located on the navigation bar of the SD-WAN Conversion Tool UI. A default view of this tab is shown in the figure below. .. figure:: images/navigation_bar_ui.png :align: center Figure 2. Dashboard tab overview .. note:: Dashboard tab can be viewed by the admin user only. A brief description of the various UI components in the Dashboard tab is shared below: .. list-table:: :widths: 8 20 :header-rows: 1 * - Field Name - Description * - User Logs - This tab is located at the top left corner of the activity window. It displays all the activities of all the users. * - Registered Users - This tab is located at the top left corner of the activity window. It displays a list of the users who are registered with the SD-WAN Conversion Tool. * - Calendar Filter |calendar| - It is located at the top right corner of the activity window. Clicking on it will open up a calendar. The user can use the calendar to enter the start date and end date for a defined time period. All the conversion workflows that took place within the specified duration for all users will be listed in the table below. Clicking on |cross| will clear the search results. * - Search Tool |search| - It is located at the top right corner of the activity window. Clicking on it will open up a search bar that allows the user to search through the data displayed in the table. * - Results - It is located at the bottom of the activity window and displays the number of entries listed in the table in various formats. These formats are mentioned below: * **Range of Results**: It displays the range of results listed in the table in **Showing [range] of [total] results** format. * **Page Numbers**: It displays the current page number of the table results. The user can also move to another page using the navigation arrows or jump to the specified page using the dropdown menu. * **Records per page**: It allows the user to specify the number of records that should be displayed on the screen at a time. This number can either be 25, 50 or 100. User Logs --------- User Logs tab is located on the navigation menu of the activity window displaying an overview of all the conversion workflows performed by the users. Click on this tab to view it. .. figure:: images/navigation_bar_ui.png :align: center Figure 3. User Logs view on admin dashboard A brief description of various components of this tab is shared in the table below: .. list-table:: :widths: 8 20 :header-rows: 1 * - Field Name - Description * - Workflow Type Selection - It is a dropdown located below the User Logs tab and allows the user to select what type of workflow they want to view the logs for. * - Delete Button - It allows the user to delete workflow logs selected from the activity table. A brief description of this feature can be found in the :ref:`Logs Deletion ` section. * - Activity Table - It is located in the center of the activity window and displays a list of all the activities related to conversion workflows performed by the users. A brief description of the fields in this table is given below: * **ID:** This is a unique identity number associated with every conversion workflow. * **Email:** Displays the email address of the user who performed a conversion workflow. * **Workflow Type:** Displays the type of conversion workflow performed by a user. * **Updated at:** Displays the timestamp when a specific event took place in the conversion process. The format for this timestamp is **yyyy:mm:dd hh:mm** * **Status:** It displays the current stage of the conversion workflow. A circle beside the status represents the status of the action as mentioned below: * Grey - Pending action * Green - Successful action * Red - Unsuccessful action Clicking on |dotted| (more info) in the status column will list down all the stages in a conversion workflow along with the status of each stage. Any artifacts generated on a stage can be downloaded by clicking on |download| against the corresponding stage. * - Workflow Information - The Workflow Information pane is located on the right of the activity table. On selection of an entry from the activity table, this pane displays details around the source and target for the selected conversion workflow. By default, it displays details for the first conversion workflow appearing in the activity table. Registered Users ---------------- The Registered Users tab is located on the navigation menu of the activity window. It displays a list of the users who are registered with the SD-WAN Conversion Tool. Click on this tab to view it. .. figure:: images/registered_users.png :align: center Figure 4. Registered Users view on admin dashboard .. list-table:: :widths: 8 20 :header-rows: 1 * - Field Name - Description * - Email - Displays the email addresses of the registered users. * - Name - Displays the list of user names. * - Privilege Level - Displays the privilege level defined for the particular user by the admin user. * - Registered At - Displays the date when the user was registered. The format followed for this is **mm/dd/yyyy**. * - Options - Provides the admin with an option of editing the user rights. .. _upload_tab: Convert Tab +++++++++++ The Convert tab provides the user with a wizard-based interface that allows conversion workflows on configurations and policies for Cisco's SD-WAN product. To view this tab, click the **Convert** option located on the navigation menu of SD-WAN Conversion Tool UI. A default view of this tab can also be seen in the figure below. .. figure:: images/workflow_selection.png :align: center Figure 5. Convert tab UI The Convert tab is primarily composed of the activity window. The activity window is located in the middle of the screen and covers the major section of the UI. It is an interactive window that, after the selection of workflow type, guides the user through all the required steps for the conversion workflow. .. seealso:: To know more about the functionalities associated with the Convert tab, click :ref:`here`. .. .. _history_tab: History Tab +++++++++++ The History tab provides the user with a summary of the events that took place in the process of performing conversion workflows. To view this tab, select the **History** option located on the navigation menu of SD-WAN Conversion Tool UI. A default view of this tab can also be seen in the figure below. .. figure:: images/history_tab_ui.png :align: center Figure 6. History tab UI .. note:: History tab can be viewed by the normal users only. A brief description of various UI components from this tab is shared below: .. list-table:: :widths: 8 20 :header-rows: 1 * - Field Name - Description * - Calendar Filter - It is located at the top right corner of the activity window. Clicking on it will open up a calendar. The user can use the calendar to enter the start date and end date for a defined time period. All the conversion workflows that took place within the specified duration will be listed in the table below. Clicking on |cross| will clear the search results. * - Search Tool - It is located at the top right corner of the activity window. Clicking on it will open up a search bar that allows the user to search through the data displayed in the table. * - Workflow Type Selection - It is a dropdown located on the top left corner of the activity window and allows the user to select what type of workflow they want to view the logs for. * - Delete Button - It allows the user to delete workflow logs selected from the activity table. A brief description of this feature can be found in the :ref:`Logs Deletion ` section. * - Activity Table - It is located in the center of the activity window and displays a list of all the activities related to conversion workflows. A brief description of the fields in this table is given below: * **ID:** This is a unique identity number associated with every conversion workflow. * **Email:** Displays the email address of the user who performed a conversion workflow. * **Workflow Type:** Displays the type of conversion workflow performed by a user. * **Updated at:** Displays the timestamp when a specific event took place in the conversion process. The format for this timestamp is **yyyy:mm:dd hh:mm** * **Status:** It displays the current stage of the conversion workflow. A circle beside the status represents the status of the action as mentioned below: * Grey - Pending action. * Green - Successful action * Red - Unsuccessful action. Clicking on |dotted| (more info) in the status column will list down all the stages in a conversion workflow along with the status of each stage. Any artifacts generated on a stage can be downloaded by clicking on |download| against the corresponding stage. * - Results - It is located at the bottom of the activity window and displays the number of entries listed in the table in various formats. These formats are mentioned below: * **Range of Results**: It displays the range of results listed in the table in **Showing [range] of [total] results** format. * **Page Numbers**: It displays the current page number of the table results. The user can also move to another page using the navigation arrows or jump to the specified page using the dropdown menu. * **Records per page**: It allows the user to specify the number of records that should be displayed on the screen at a time. This number can either be 25, 50 or 100. * - Workflow Information - The Workflow Information pane is located on the right of the activity table. On selection of an entry from the activity table, this pane displays details around the source and target for the selected conversion workflow. By default, it displays details for the first conversion workflow appearing in the activity table. .. .. _logs_deletion: Logs Deletion ---------------- Users can delete logs for the workflows they have executed. Admin users have the privilege to delete logs for all registered users as well. Please note that the workflow logs can not be restored once they have been deleted. A brief description of various UI components involved in this feature is shared below: - **Delete Button:** It is located on the right side of workflow type selection dropdown and allows the user to delete workflows selected from the activity table. .. note:: The delete button will remain disabled unless a workflow is selected for deletion. - **Checkboxes:** Checkboxes beside the workflow ID associated with each conversion workflow allows the users to select workflow logs for deletion. .. note:: Checkbox for active workflow(s) will be disabled and it must be cancelled or completed before attempting to delete it. When clicked on the delete button, a confirmation dialog will popup showing the count of selected workflows which are going to be deleted as shown in the figure below. .. figure:: images/confirm_dialog.png :align: center :width: 700px Figure 7. Confirm dialog Upon successful deletion of selected workflows a notification of successful logs deletion will appear on the top right corner of the UI as shown in the figure below. .. figure:: images/success_toast.png :align: center :width: 700px Figure 8. Success notification .. |cross| image:: images/cross.png :width: 15px .. |dotted| image:: images/dotted_icon.png :width: 5px .. |download| image:: images/download_icon.png :width: 15px .. |calendar| image:: images/calendar.png :width: 20px .. |search| image:: images/search.png :width: 20px