Dashboards

Dashboards provide a live report about the status of the project and related activities. The user can configure multiple dashboards such as a team-level dashboard, a project-level dashboard, and a dashboard for communicating some other status. Each of the dashboards consists of set of widgets displaying textual data, graphs, charts, badges, and so on. Figure 7-1 shows a sample dashboard.

On top of the dashboard, there are options to select a different dashboard from the drop-down list of dashboards, to add a new dashboard, and to navigate to the list of available dashboards. Other options available are as follows:

• Add to Favorite: Use this option to mark the current dashboard as a favorite.

• Team Profile: Use this option to view the team profile, which lists the boards, backlogs, sprints, dashboards, and team members in the current team.

• Edit: Use this option to edit the current dashboard. The user can add new widgets from the Marketplace or realign the existing widgets. To realign the widgets in the dashboard, the user can drag each of them after selecting the Edit option and drop them in a target place. This will automatically realign the entire grid displaying the dashboard widgets. Edit opens the Add Widget list on the right side so the user can select from an existing list of widgets. The user can refer to the list of available widgets in the Visual Studio Marketplace (https://marketplace.visualstudio.com/).

• Refresh: Use this option to refresh the data displayed in each widget. Data refresh can be done automatically using the Settings option.

• Settings: Use this option to open the settings, which allows the user to change the name of the dashboard, provide a description, and control the security, as shown in Figure 7-2. Also, the user can set the automatic refresh of the dashboard to every five minutes.

Every widget has a list of options available to configure the widget, as shown in Figure 7-3. The “Copy to Dashboard” option allows you to copy an existing configured widget from one dashboard to another. “About this Widget” takes the user to the Microsoft document explaining the functionality of the widget. “Delete” removes the widget from the dashboard.

The “Configure” option opens the different configurations associated with a widget. Figure 7-4 shows the settings for the State of TestCases chart configuration.

This is a query-based widget, and the name of the query is listed in the configuration. Click the widget chart to open the associated query and resulting work items in list view, as shown in Figure 7-5.

Any modifications in the query will impact the dashboard automatically. Moreover, this view provides various options to export the query result, copy the query URL, and so on.

Another set of widgets is from the Marketplace; there won’t be any queries associated with these kinds of widgets. For example, the Burndown chart widget shown in Figure 7-6 is from the Marketplace, which shows the burndown of the project activities.

Even though the complete chart is not based on any specific defined query in the project, the user can navigate to a custom query by selecting one of the chart legends or blocks. This custom query will list the work items specific to that legend only.

Wiki

A wiki addresses the detailed documentation requirements of a project. A wiki can be used to capture the requirements in detail, architecture design documentations, coding standards, flow diagrams, minutes of meetings, new feature requirements, and so on. This collaboration platform enables users to collaborate on the wiki pages using the discussion boards.

A user can create a project wiki using one of the two options available: Create project wiki or Publish code as wiki.

Publishing Code as a Wiki

This option takes the Markdown pages from the selected repository and publishes them as a wiki. In Figure 7-7, the root folder is selected, which contains the Readme.md file. A new wiki will be constructed based on this file and then displayed.

Edits in the wiki will be reflected in the file, and vice versa. Once the wiki is published, the user can unpublish the wiki to remove it from the project. Also, the user has an option to rename a wiki to update the name.

Wiki pages are arranged in a hierarchical format, and the user can add subpages and main pages based on the requirements. See Figure 7-8.

The following options are available for each of the wiki pages:

• Add sub-page: Use this option to add a child page to the existing page.

• Copy page path: Use this option to copy the path of the wiki page, which can be shared over email and other mediums.

• Move page: Use this option to move the current page to another location.

• Edit: Use this option to edit the page.

• Delete: Use this option to delete the page.

• Open in new tab: Use this option to open the page in a new tab.

This view shows the selected page content on the right side along with the last edit detail. There is an option to add comments at the end of each page, where stakeholders can share their comments on the content and can have discussions about a specific point. Moreover, in addition to the content, there are options to edit the page, print the page, link work items, view revisions, and delete pages. If the wiki is linked to a requirement or is explaining a task, then the wiki page will be linked to the corresponding work items to establish proper traceability. Once they are linked, the corresponding work item details will appear on top of the wiki.

Editing a Wiki

Wiki pages are constructed using Markdown; you can learn about Markdown in the Microsoft documentation at https://docs.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops. As a user, it is not mandatory to learn Markdown; instead, users can use a browser-based editor, which supports the selection of styles available at the top of the editor. A live preview of the changes is available on the right side of the editor. See Figure 7-9.

The following are the styling options used in Figure 7-9:

• Headings: The first icon on top of the editor provides three heading options.

• Bold: Use this option to bold the selected text.

• Italics: Use this option to apply italics to the selected text.

• Link: Use this option to add a link to the text.

• Code: Use this option to insert code into the wiki page.

• Bulleted list: Use this option to create a list of items using bullets.

• Numbered list: Use this option to create a list of items using numbers.

• Task list: Use this option to create a list of tasks.

• Table: Use this option to add a table by selecting the columns and rows.

• Disable word wrap: Use this option to disable word wrap in the editor; this will add a horizontal scroller for the editor, if there are any long lines added.

• Disable synchronized scrolling: Use this option to sync the scrolling of the editor and preview the view in a synchronized manner.

• Add work item: Use this option to add a work item reference using a numbered work item ID.

• Insert a file: Use this option to insert a file. If the file is a picture file, it displays the image in the editor. In Figure 7-9, the user inserted an image of a business icon.

In addition to these basic options, there are multiple other options available in the editor, which are explained here:

• Paste as HTML: This option allows the user to copy and paste the content as HTML. By default, the editor converts all HTML content and renders the result in the wiki. If the user wants to display the HTML tags, then use this option. See Figure 7-10.

In Figure 7-10, the highlighted two lines of HTML are pasted without enabling the Paste as HTML option, and the following block of code shows the same two lines pasted by turning on this option. Observe the difference in the preview section.

• Insert Mermaid Diagram: Use this option to insert a diagram that explains the requirements in detail using a class diagram, sequence diagram, or flowchart. A Mermaid diagram supports a list of diagrams, which can be constructed using Mermaid Markdown; for more information, refer to https://mermaidjs.github.io.

Figure 7-11 shows one of the sample flowcharts using Mermaid markup.

• Table of Contents: Use this option to insert a table of contents based on the headings in the current wiki page. In Figure 7-12, there are two headings available on the page.

• Video: Use this option to insert a video into the wiki from YouTube or a Microsoft stream. Copy the iFrame tag from YouTube and insert it. See Figure 7-13.

• Insert YAML tag: This will insert the sample YAML tags at the beginning of the wiki, which the user can change. See Figure 7-14.

• Formulas: Use this option to insert formulas into the wiki page. See Figure 7-15.

• Mention: Use this option to add reference to a team member using @.

• Query results: Use this option to include the result of a selected query as part of the wiki. See Figure 7-16.

Using all these options, users can define some great content and collaborate over the wiki using the discussion option available on each page.

Discussions or Comments

At the bottom of all wiki pages, there is an area for discussion and comments. Team members can collaborate using this comment area, as shown in Figure 7-17.

Markdown supports various text styling options, and a subset of them is available in the wiki editor. Team members and groups can be added as part of the comment using @ and can add work items using the # symbol. In addition, users can provide feedback using the reaction option available at the top-right corner of the comments. See Figure 7-18.

User Settings

The “User settings” section supports the customization of the overall DevOps system based on the user selections. A user can open these settings using the “User settings” icon () at the top-right corner. See Figure 7-19.

Continuous Feedback

Continuous feedback is one of the most important phases in a DevOps implementation. Continuous feedback ensures the proper flow of feedback from different stages of the application execution life cycle. In the implementation time, based on the maturity of the unit test scripts and feedback, feedback is shared with the developer as part of unit test execution. The quality assurance team, which is part of the sprint team, plays an important role in identifying the defects associated with the sprint implementations at an early stage and providing feedback in the form of bugs. User acceptance testing (UAT) means testing the sprint deliverables or release deliverables by end users or business stakeholders; this provides another level of feedback.

Once the application moves to the production environment, it is important to set up continuous feedback on the overall environment in the execution life cycle to improve the application quality. Different monitoring tools such as Splunk, App Dynamic, and so on, are used to monitor the production systems. These tools capture the application issues as well as the environment issues. Moreover, most of these monitoring tools support customization in terms of analyzing the logs and deriving meaningful insights, setting up automatic notifications, logging tickets directly to an integrated ticketing tool with detailed information, and so on.

Azure Application Insights

Application Insights and Azure Monitors are used mainly to monitor Azure-hosted applications and other resources. Application Insights can be integrated into Azure DevOps to log the observations as tasks or bugs in the system.

Application Insights can be integrated from the Azure release pipeline using the default template: “Azure App Service deployment with continuous monitoring”.

This template internally will have three tasks to be configured for Azure connectivity. Figure 7-20 shows the three tasks that can be integrated into an existing release pipeline.

Another option is to configure the feedback mechanism in the Azure Portal. Open the Azure Portal and navigate to Application Insights. Navigate to the Work Items blade to configure the Azure DevOps connection. See Figure 7-21.

Summary

A wiki provides a collaboration platform for users to work together and drive new requirements and other documentations. Dashboards provide live updates about the project execution status. Continuous feedback plays an important role in fine-tuning the product quality. Azure DevOps provides a handful of features to support the collaboration, reporting, and integration needs as part of an Agile project execution.