Refactored topology to fit diagnostic
diff --git a/views/ngXosViews/diagnostic/src/css/serviceTopology.css b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
new file mode 100644
index 0000000..54beba3
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
@@ -0,0 +1,155 @@
+/* CONTAINER */
+diagnostic .half-height {
+ position: relative;
+ height: 50%;
+}
+
+service-topology {
+ height: 100%;
+ width: 100%;
+ display: block;
+}
+
+/* LEGEND */
+
+.legend {
+ fill: #fff;
+ stroke: #ccc;
+ stroke-width: 1px;
+ position: relative;
+}
+
+.legend text {
+ stroke: #000;
+}
+
+.node {
+ cursor: pointer;
+}
+
+.node circle,
+.node rect{
+ fill: #fff;
+ stroke: steelblue;
+ stroke-width: 1px;
+}
+
+.node.subscriber circle,
+.node.internet circle {
+ stroke: #05ffcb;
+}
+
+.node.slice rect {
+ stroke: #b01dff;
+}
+
+.node.instance rect {
+ stroke: #ccc;
+}
+
+.node.instance rect.active {
+ stroke: #ff8b00;
+}
+
+.node rect.slice-detail{
+ fill: #fff;
+ stroke: steelblue;
+ stroke-width: 3px;
+}
+
+.node text {
+ font: 12px sans-serif;
+}
+
+.link {
+ fill: none;
+ stroke: #ccc;
+ stroke-width: 2px;
+}
+
+.link.slice {
+ stroke: rgba(157, 4, 183, 0.29);
+}
+.link.instance{
+ stroke: #ccc;
+}
+
+.link.instance.active{
+ stroke: rgba(255, 138, 0, 0.65);
+}
+
+.service-details{
+ width: 200px;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+}
+
+/* when showing the thing */
+
+.animate.ng-hide-remove {
+ animation:0.5s bounceInRight ease;
+}
+
+/* when hiding the picture */
+.animate.ng-hide-add {
+ animation:0.5s bounceOutRight ease;
+}
+
+/* ANIMATIONS */
+
+@keyframes bounceInRight {
+ from, 60%, 75%, 90%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ from {
+ opacity: 0;
+ transform: translate3d(3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: translate3d(-25px, 0, 0);
+ }
+
+ 75% {
+ transform: translate3d(10px, 0, 0);
+ }
+
+ 90% {
+ transform: translate3d(-5px, 0, 0);
+ }
+
+ to {
+ transform: none;
+ }
+}
+
+@keyframes bounceInLeft {
+ from, 60%, 75%, 90%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ 0% {
+ opacity: 0;
+ transform: translate3d(-3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: translate3d(25px, 0, 0);
+ }
+
+ 75% {
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 90% {
+ transform: translate3d(5px, 0, 0);
+ }
+
+ to {
+ transform: none;
+ }
+}
\ No newline at end of file