Display port names in task view (#24)

Display port names in task view
criteo-forks · Jul 17, 2019 · c30acc6 · c30acc6
2 parents 276f74a + 4760286
commit c30acc6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/src/js/components/AppPageComponent.jsx b/src/js/components/AppPageComponent.jsx
@@ -348,6 +348,7 @@ var AppPageComponent = React.createClass({
             fetchState={state.fetchState}
             getTaskHealthMessage={this.getTaskHealthMessage}
             hasHealth={Object.keys(model.healthChecks).length > 0}
+            portDefinitions={model.portDefinitions}
             labels={model.labels}
             tasks={model.tasks} />
         </TabPaneComponent>

diff --git a/src/js/components/TaskListComponent.jsx b/src/js/components/TaskListComponent.jsx
@@ -19,6 +19,7 @@ var TaskListComponent = React.createClass({
     itemsPerPage: React.PropTypes.number.isRequired,
     labels: React.PropTypes.object.isRequired,
     onTaskToggle: React.PropTypes.func.isRequired,
+    portDefinitions: React.PropTypes.object.isRequired,
     selectedTasks: React.PropTypes.object.isRequired,
     tasks: React.PropTypes.array.isRequired,
     toggleAllTasks: React.PropTypes.func.isRequired
@@ -71,6 +72,7 @@ var TaskListComponent = React.createClass({
             onToggle={props.onTaskToggle}
             sortKey={sortKey}
             task={task}
+            portDefinitions={props.portDefinitions}
             labels={props.labels}
             taskHealthMessage={props.getTaskHealthMessage(task.id)} />
         );

diff --git a/src/js/components/TaskListItemComponent.jsx b/src/js/components/TaskListItemComponent.jsx
@@ -24,6 +24,18 @@ function joinNodes(nodes, separator = ", ") {
   });
 }
 
+function getPortDecoration(portDefinitions, index, port) {
+  const LABEL_NAME = "name";
+  if (portDefinitions == null || portDefinitions[index] == null) {
+    return port;
+  }
+  if (LABEL_NAME in portDefinitions[index]) {
+    return portDefinitions[index][LABEL_NAME];
+  } else {
+    return port;
+  }
+}
+
 var TaskListItemComponent = React.createClass({
   displayName: "TaskListItemComponent",
 
@@ -33,6 +45,7 @@ var TaskListItemComponent = React.createClass({
     isActive: React.PropTypes.bool.isRequired,
     labels: React.PropTypes.object.isRequired,
     onToggle: React.PropTypes.func.isRequired,
+    portDefinitions: React.PropTypes.object.isRequired,
     sortKey: React.PropTypes.string,
     task: React.PropTypes.object.isRequired,
     taskHealthMessage: React.PropTypes.string
@@ -50,11 +63,12 @@ var TaskListItemComponent = React.createClass({
     if (ports != null && ports.length === 1) {
       const scheme = ServiceSchemeUtil
         .getServiceSchemeFromLabels(props.labels, 0);
+      const name = getPortDecoration(props.portDefinitions, 0, ports[0]);
       return (
         <a className="text-muted"
             href={`${scheme}://${task.host}:${ports[0]}`}
             target="_blank">
-          {`${task.host}:${ports[0]}`}
+          {`${task.host}:${name}`}
         </a>
       );
     }
@@ -63,12 +77,13 @@ var TaskListItemComponent = React.createClass({
       let portNodes = ports.map(function (port, i) {
         const scheme = ServiceSchemeUtil
           .getServiceSchemeFromLabels(props.labels, i);
+        const name = getPortDecoration(props.portDefinitions, i, port);
         return (
           <a key={`${task.host}:${port}`}
               className="text-muted"
               href={`${scheme}://${task.host}:${port}`}
               target="_blank">
-            {port}
+            {name}
           </a>
         );
       });

diff --git a/src/js/components/TaskViewComponent.jsx b/src/js/components/TaskViewComponent.jsx
@@ -20,6 +20,7 @@ var TaskViewComponent = React.createClass({
     getTaskHealthMessage: React.PropTypes.func.isRequired,
     hasHealth: React.PropTypes.bool,
     labels: React.PropTypes.object.isRequired,
+    portDefinitions: React.PropTypes.object.isRequired,
     tasks: React.PropTypes.array.isRequired
   },
 
@@ -231,6 +232,7 @@ var TaskViewComponent = React.createClass({
           onTaskToggle={this.onTaskToggle}
           itemsPerPage={this.state.itemsPerPage}
           labels={this.props.labels}
+          portDefinitions={this.props.portDefinitions}
           selectedTasks={this.state.selectedTasks}
           tasks={this.props.tasks}
           toggleAllTasks={this.toggleAllTasks} />