Add label parsing

README.md

@@ -60,3 +60,21 @@ At the moment there is no official node image for Windows. Therefore apply anoth
 ```
 docker build -t mikesir87/swarm-viz --build-arg node=stefanscherer/node-windows:1709 .
 ```
+
+## Label Parsing
+
+Swarm-viz will parse labels beginning with `swarm-viz.` and display them in an "Extra Info" section. It also supports templating.
+
+### Link handling
+
+A label starting with `swarm-viz.link.` will use any remaining text in the identifier as a label, and will turn the value of the label into a clickable link. (Example: `swarm-viz.link.foo:http://google.com` will create the entry `foo : http://google.com`.)
+
+Templating is taken into account before link parsing, allowing for dynamic links.
+
+### Templating
+
+Input          |          Output
+---------------|-----------------
+${containerid} | The container's unique id string.
+${imagename}   | The name of the image the container was made with. It is found by removing the extra info from the container name.
+${stackname}   | The name of the stack the container is a part of. It is found from subtracting the image name from the service name.

client/src/components/nodes/SwarmVizLabelParser.jsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import {connect} from "react-redux";
+import FormRow from "./FormRow";
+import actions from "../../actions";
+
+
+function ParseLabelOutput(props){
+  var keyValue=props.keyValue.replace("${containerid}", props.containerId);
+  keyValue=keyValue.replace("${imagename}", props.imageName);
+  keyValue=keyValue.replace("${stackname}", props.serviceName.slice(0,(props.serviceName.indexOf(props.imageName)-(props.serviceName.length + 1))));
+
+  if(props.keyLabel.indexOf("swarm-viz.link.")===0){
+    return(
+      <FormRow label={props.keyLabel.slice(15)}>
+        <a href={keyValue}> {keyValue} </a>
+      </FormRow>
+    )
+  }
+  //Slicing off the "swarm-viz." to look neater
+  var keyLabel=props.keyLabel.slice(10);
+  return(
+    <FormRow label={keyLabel}>
+      {keyValue}
+    </FormRow>
+  )
+}
+
+class SwarmVizLabelParser extends React.Component {
+  render(){
+    const { task, service } = this.props;
+    var toBeParsed = Object.keys(service.Spec.Labels).filter(function(label){
+      return label.indexOf("swarm-viz.")===0;
+    })
+    return(
+      <div>
+        { toBeParsed.length>= 1 && (
+          <span>
+            <h3>Parsed Info</h3>
+              { toBeParsed.map((key) => (
+                <div key={key}><ParseLabelOutput keyLabel={key} keyValue={ service.Spec.Labels[key] } 
+                    containerId={task.Status.ContainerStatus.ContainerID}
+                    imageName={task.Spec.ContainerSpec.Image.slice(0,-(task.Spec.ContainerSpec.Image.length)+(task.Spec.ContainerSpec.Image.indexOf(":")))}
+                    serviceName={service.Spec.Name}/>
+                </div>
+              ))}
+            <hr />
+          </span>
+        )}
+      </div>
+    )
+  }
+}
+const mapStateToProps = (state, props) => ({
+  task : state.swarmState.tasks.filter((task) => task.ID === props.taskId)[0],
+  service : state.swarmState.services.find((service) => service.ID === props.serviceId),
+});
+export default connect(mapStateToProps, actions)(SwarmVizLabelParser);

client/src/components/nodes/TaskInfoModal.jsx

@@ -3,6 +3,7 @@ import Modal from "react-bootstrap/es/Modal";
 import Button from "react-bootstrap/es/Button";
 import {connect} from "react-redux";
 import FormRow from "./FormRow";
+import SwarmVizLabelParser from "./SwarmVizLabelParser";
 import ServiceDetails from "./ServiceDetails";
 import actions from "../../actions";
 
@@ -16,6 +17,9 @@ class TaskInfoModal extends React.Component {
           </Modal.Header>
           <Modal.Body>
             <form className="form-horizontal">
+
+              <SwarmVizLabelParser taskId={this.props.taskId} serviceId={ task.ServiceID } />
+
               <h3>Container Details</h3>
               <FormRow label="Container ID">
                 { task.Status.ContainerStatus.ContainerID }