From b8674a3f8c9b83b0fdd306567e63beb641ba37ca Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Thu, 20 Jan 2022 14:14:28 -0800
Subject: [PATCH] Use PF colors for nodes.

---
 awx/ui/src/screens/TopologyView/MeshGraph.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js
index fb4e9d4abb..90ba1ea2ed 100644
--- a/awx/ui/src/screens/TopologyView/MeshGraph.js
+++ b/awx/ui/src/screens/TopologyView/MeshGraph.js
@@ -141,7 +141,6 @@ function MeshGraph({ data }) {
       .attr('transform', `translate(${margin}, ${margin})`)
       .call(zoom);
 
-    const color = d3.scaleOrdinal(d3.schemeCategory10);
     const graph = data;
 
     const simulation = d3
@@ -215,7 +214,7 @@ function MeshGraph({ data }) {
       .attr('r', defaultRadius)
       .attr('class', (d) => d.node_type)
       .attr('class', (d) => `id-${d.id}`)
-      .attr('fill', (d) => color(d.node_type))
+      .attr('fill', (d) => renderNodeColor(d.node_type))
       .attr('stroke', 'white');
     svg.call(expandGlow);
 
@@ -233,7 +232,7 @@ function MeshGraph({ data }) {
       .attr('cy', (d, i) => 50 + i * 25)
       .attr('r', defaultRadius)
       .attr('class', (d) => d.node_type)
-      .style('fill', (d) => color(d.node_type));
+      .style('fill', (d) => renderNodeColor(d.node_type));
 
     // legend text
     svg
@@ -319,6 +318,17 @@ function MeshGraph({ data }) {
       return colorKey[nodeState];
     }
 
+    function renderNodeColor(nodeType) {
+      const colorKey = {
+        hop: '#C46100',
+        execution: '#F0AB00',
+        hybrid: '#0066CC',
+        control: '#005F60'
+      };
+
+      return colorKey[nodeType];
+    }
+
     function highlightSiblings(n) {
       setTimeout(() => {
         svg.selectAll(`id-${n.id}`).attr('r', highlightRadius);