Dashboard design for agent monitoring in Agentic AI - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic dashboard header for agent monitoring.

Agentic AI

<header>
  <h1>[1]</h1>
</header>

Drag options to blanks, or click blank then click option'

AAgent Monitoring Dashboard

BAgent Status

CDashboard Header

DMonitoring Panel

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a vague or incomplete title.

Using a generic term like 'Dashboard Header' instead of a descriptive title.

The header should clearly state the purpose of the dashboard, so "Agent Monitoring Dashboard" is the best choice.

2fill in blank

medium

Complete the code to add a navigation bar with a link to the agent list.

Agentic AI

<nav>
  <ul>
    <li><a href="[1]">Agents</a></li>
  </ul>
</nav>

Drag options to blanks, or click blank then click option'

A/dashboard

B/settings

C/status

D/agents

Attempts:

3 left

💡 Hint

Common Mistakes

Using a URL that points to the dashboard or settings instead of agents.

Leaving the href empty or incorrect.

The link should point to the agents list page, so '/agents' is correct.

3fill in blank

hard

Fix the error in the code to correctly display the agent status with color coding.

Agentic AI

<span class="status [1]">Active</span>

Drag options to blanks, or click blank then click option'

Adisabled

Binactive

Cactive

Dpending

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class that does not match the status text.

Using a class for a different status.

The class should match the status text 'Active' to apply the correct color styling.

4fill in blank

hard

Fill both blanks to create a filter function that returns agents with status 'online'.

Agentic AI

def filter_agents(agents):
    return [agent for agent in agents if agent.[1] == '[2]']

Drag options to blanks, or click blank then click option'

Astatus

Bonline

Coffline

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong attribute name like 'state'.

Filtering for 'offline' instead of 'online'.

The agent's status attribute should be checked for the value 'online' to filter correctly.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that maps agent names to their CPU usage if usage is above 50%.

Agentic AI

high_usage = {agent.[1]: agent.[2] for agent in agents if agent.[3] > 50}

Drag options to blanks, or click blank then click option'

Aname

Bcpu_usage

Dmemory_usage

Attempts:

3 left

💡 Hint

Common Mistakes

Using memory usage instead of CPU usage.

Mixing attribute names incorrectly.

The dictionary keys are agent names, values are CPU usage, filtered for usage above 50%.

Practice

1. What is the main purpose of a dashboard in agent monitoring?

easy

A. To show agent information in one place for easy tracking

B. To write code for agents

C. To delete agents automatically

D. To store agent data permanently

Solution

1. Step 1: Understand dashboard role

   A dashboard collects and shows important info in one place.

2. Step 2: Identify main benefit

   This helps users track agent status quickly and easily.

3. Final Answer:

   To show agent information in one place for easy tracking -> Option A

4. Quick Check:

   Dashboard purpose = Show info in one place [OK]

Hint: Dashboards gather info visually for quick checks [OK]

Common Mistakes:

• Thinking dashboards write or delete agents
• Confusing storage with display
• Assuming dashboards automate agent tasks

2. Which of the following is the correct way to add a status widget in a dashboard configuration file?

easy

A. "widgets": [{"type": "status", "agentId": "agent_01"}]

B. "widgets": [{type: status, agentId: agent_01}]

C. "widgets": [{"type": status, "agentId": agent_01}]

D. widgets: [{"type": "status", "agentId": "agent_01"}]

Solution

1. Step 1: Check JSON syntax

   Correct JSON requires keys and string values in double quotes.

2. Step 2: Identify correct option

   "widgets": [{"type": "status", "agentId": "agent_01"}] uses proper JSON with quotes around keys and values.

3. Final Answer:

   "widgets": [{"type": "status", "agentId": "agent_01"}] -> Option A

4. Quick Check:

   Proper JSON syntax = "widgets": [{"type": "status", "agentId": "agent_01"}] [OK]

Hint: JSON keys and string values need double quotes [OK]

Common Mistakes:

• Missing quotes around keys or string values
• Using single quotes instead of double quotes
• Omitting commas between items

3. Given this dashboard widget code snippet:

{"type": "chart", "metric": "cpu_usage", "agentId": "agent_02"}

What will this widget display?

medium

A. A status indicator for agent_02

B. A log list for agent_02

C. A chart showing CPU usage for agent_02

D. An error message because of missing fields

Solution

1. Step 1: Identify widget type

   The type is "chart", so it shows a graph or chart.

2. Step 2: Check metric and agent

   Metric is "cpu_usage" for agent "agent_02", so it charts CPU usage for that agent.

3. Final Answer:

   A chart showing CPU usage for agent_02 -> Option C

4. Quick Check:

   Chart type + cpu_usage metric = CPU usage chart [OK]

Hint: Widget type 'chart' means graph display [OK]

Common Mistakes:

• Confusing chart with logs or status
• Assuming missing fields cause errors here
• Ignoring the metric field

4. You added a log widget but it shows no logs. Which fix is most likely correct?

medium

A. Remove the widget and add a status widget instead

B. Check if the agentId in the widget matches the actual agent ID

C. Restart the dashboard server without changing config

D. Change the widget type to "chart" without updating other fields

Solution

1. Step 1: Identify common cause of empty logs

   Logs show empty if the agentId is wrong or missing.

2. Step 2: Fix agentId in widget config

   Correcting agentId to match the real agent fixes log display.

3. Final Answer:

   Check if the agentId in the widget matches the actual agent ID -> Option B

4. Quick Check:

   Correct agentId fixes empty logs [OK]

Hint: Verify agentId matches actual agent for logs [OK]

Common Mistakes:

• Restarting server without config fix
• Changing widget type without reason
• Removing widget instead of fixing config

5. You want a dashboard that shows agent status, CPU charts, and recent logs all in one view. Which design approach is best?

hard

A. Create separate dashboards for each info type

B. Use a single widget that tries to show all info together

C. Only show status widgets to keep dashboard simple

D. Use multiple widgets: one status widget, one chart widget, and one log widget

Solution

1. Step 1: Understand dashboard modular design

   Dashboards use multiple widgets to show different info types clearly.

2. Step 2: Choose best approach for combined info

   Using separate widgets for status, charts, and logs keeps info organized and easy to read.

3. Final Answer:

   Use multiple widgets: one status widget, one chart widget, and one log widget -> Option D

4. Quick Check:

   Multiple widgets for different info = best design [OK]

Hint: Combine widgets for clear, organized dashboard [OK]

Common Mistakes:

• Trying to cram all info in one widget
• Splitting info into separate dashboards unnecessarily
• Showing only status and ignoring other data