diff --git a/README.md b/README.md index 3cc55c6..bdb42a4 100644 --- a/README.md +++ b/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. \ No newline at end of file diff --git a/client/src/components/nodes/SwarmVizLabelParser.jsx b/client/src/components/nodes/SwarmVizLabelParser.jsx new file mode 100644 index 0000000..bbe4fdc --- /dev/null +++ b/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( + + {keyValue} + + ) + } + //Slicing off the "swarm-viz." to look neater + var keyLabel=props.keyLabel.slice(10); + return( + + {keyValue} + + ) +} + +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( +
+ { toBeParsed.length>= 1 && ( + +

Parsed Info

+ { toBeParsed.map((key) => ( +
+
+ ))} +
+
+ )} +
+ ) + } +} +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); \ No newline at end of file diff --git a/client/src/components/nodes/TaskInfoModal.jsx b/client/src/components/nodes/TaskInfoModal.jsx index 009ba15..b0d0b7a 100644 --- a/client/src/components/nodes/TaskInfoModal.jsx +++ b/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 {
+ + +

Container Details

{ task.Status.ContainerStatus.ContainerID }