Frontend Question for AppDynamics/Cisco

AppDynamics wants to show engineers a real-time dashboard widget that displays the health status of multiple microservices. Each service can be in one of three states: Healthy, Degraded, or Down.

You’re tasked with building a React component called <ServiceHealthGrid> that:

  • Accepts a list of services and their metadata
  • Displays each service in a responsive grid layout
  • Highlights each box with a color based on its status: