Merge pull request #395 from dgutride/create-topology-graph

Create topology graph component

Author: jeff-phillips-18

src/charts/charts.less

@@ -186,3 +186,121 @@ pf-c3-chart {
 .camelcase {
   text-transform: capitalize;
 }
+
+pf-topology {
+  display: block;
+  user-select: none;
+}
+
+.container-topology pf-topology {
+  height: 500px;
+  position: relative;
+}
+.container-topology .canvas {
+  position: absolute;
+}
+
+.container-topology .popup {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: #fff;
+  width: 180px;
+  border: 1px #ccc solid;
+  border-radius: 6px;
+  box-shadow: #333 2px 2px 4px;
+  padding: 6px;
+  font-size: 14px;
+}
+
+.container-topology .popup h5 {
+  font-weight: bold;
+}
+
+.container-topology .popup p {
+  margin: 0 0 4px;
+}
+
+.container-topology .popup p:hover {
+  color : #0099cc;
+  cursor: pointer;
+}
+
+
+.container-topology label.checkbox-inline {
+  font-size: 14px;
+}
+
+.pf-topology-svg g {
+  font-family: PatternFlyIcons-webfont;
+  font-size: 18px;
+  text-anchor: middle;
+  cursor: pointer;
+}
+
+.pf-topology-svg g text {
+  stroke: none;
+  stroke-width: 0px;
+}
+
+.pf-topology-svg g.weak use {
+  opacity: .6;
+}
+
+.pf-topology-svg g circle {
+  stroke: #aaa;
+  fill: #fff;
+}
+
+.pf-topology-svg g.fixed use {
+  stroke-width: 2px;
+}
+
+.pf-topology-svg g.selected use,
+.pf-topology-svg g.selected circle {
+  stroke-width: 4px;
+}
+
+.pf-topology-svg line {
+  stroke: #aaa;
+  stroke-width: 1;
+}
+
+.pf-topology-svg g text.attached-label {
+  display: none;
+}
+
+.pf-topology-svg g text.attached-label.visible {
+  font-size: 12px;
+  fill: black;
+  display: block;
+}
+
+.pf-topology-svg g.selected {
+  stroke-width: 4px;
+}
+
+.pf-topology-svg g circle {
+  stroke-width: 2px;
+}
+
+.pf-topology-svg g circle.success {
+  stroke: #3F9C35;
+}
+
+.pf-topology-svg g circle.error {
+  stroke: #CC0000;
+}
+
+.pf-topology-svg g circle.warning {
+  stroke: #EC7A08;
+}
+
+.pf-topology-svg g circle.unknown {
+  stroke: #bbb;
+}
+
+.pf-topology-svg g text.glyph {
+  font-size: 20px;
+  fill: #1186C1;
+}