dd80909edf
There has been user/operator feedback that the new network topology satisfies different needs than the old did. The two are actually complimentary rather than mutually exclusive. This patch allows for both topologies to be visible on separate tabs. Both views share the same data model, but renders that data differently. One interesting inclusion is triggering a resize event if an HTML element with the d3-container CSS class is present. The reason for this is that the svg content in a non-visible tab is rendered into a container with 0 height and width. This causes the contents to all sit in the top left corner of the container. Without the resize event which is used to trigger a redo of the force layout. The plus side is now this d3 based network topology handles window resize events. I am open to suggestions so that a resize event is not necessary on the tab show event. An additional area for improvement is the inline CSS in _svg_element.html Implements blueprint: restore-old-net-topology Change-Id: Iba6e6ad07b9ff7705f62cdb0281904880df6e4ba
228 lines
4.1 KiB
SCSS
228 lines
4.1 KiB
SCSS
#topologyCanvasContainer, #flatTopologyCanvasContainer {
|
|
@include box-sizing(border-box);
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 25px;
|
|
padding-left: 50px;
|
|
background: #ffffff;
|
|
min-height: 400px;
|
|
cursor: grab;
|
|
cursor: -webkit-grab;
|
|
div.nodata {
|
|
font-size: 150%;
|
|
text-align: center;
|
|
padding-top: 150px;
|
|
display: none;
|
|
}
|
|
&.noinfo {
|
|
div.nodata {
|
|
display: block;
|
|
}
|
|
#topology_canvas {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topology-navi {
|
|
overflow: hidden;
|
|
margin: 10px 0;
|
|
.toggle-view {
|
|
float: left;
|
|
span.glyphicon {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
.launchButtons {
|
|
float: right;
|
|
text-align: right;
|
|
a.btn {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topologyBalloon {
|
|
display: none;
|
|
background: $body-bg;
|
|
@include box-shadow(0px 1px 6px #777);
|
|
position: absolute;
|
|
left:100px;
|
|
top:20px;
|
|
z-index: 600;
|
|
border-radius: 5px;
|
|
color:#333;
|
|
min-width: 200px;
|
|
&.on {
|
|
display: block;
|
|
}
|
|
line-height: 1.2;
|
|
.vnc_window {
|
|
margin-left: 10px;
|
|
}
|
|
.closeTopologyBalloon {
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
display: block;
|
|
position: absolute;
|
|
font-weight: bold;
|
|
right: 6px;
|
|
top: 0px;
|
|
cursor: pointer;
|
|
padding: 3px;
|
|
color:#aaa;
|
|
&:hover {
|
|
color:#777;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.contentBody {
|
|
padding: 8px 8px 0;
|
|
}
|
|
span.active, span.down {
|
|
&:before {
|
|
content: "";
|
|
width: 9px;
|
|
height: 9px;
|
|
display: inline-block;
|
|
background: $brand-success;
|
|
margin-right: 3px;
|
|
border-radius: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
span.down {
|
|
&:before {
|
|
background: $brand-danger;
|
|
}
|
|
}
|
|
.footer {
|
|
background: #efefef;
|
|
border-top: 1px solid $border-color;
|
|
padding: 8px;
|
|
border-radius: 0px 0px 7px 7px;
|
|
.footerInner {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
.cell {
|
|
display: table-cell;
|
|
padding-right: 10px;
|
|
}
|
|
.link {
|
|
font-size: 12px;
|
|
}
|
|
.delete {
|
|
padding-right: 0;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.portTableHeader {
|
|
border-top: 1px solid $gray-lighter;
|
|
padding-top: 5px;
|
|
margin: 5px 0;
|
|
display: table;
|
|
width: 100%;
|
|
.title {
|
|
display: table-cell;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
}
|
|
.action {
|
|
display: table-cell;
|
|
text-align: right;
|
|
}
|
|
}
|
|
table.detailInfoTable {
|
|
margin-bottom: 5px;
|
|
caption {
|
|
text-align: left;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
margin-bottom: 0px;
|
|
}
|
|
th,td {
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
padding-bottom: 3px;
|
|
background: transparent;
|
|
}
|
|
th {
|
|
color: $gray-light;
|
|
padding-right: 8px;
|
|
width: 80px;
|
|
span {
|
|
vertical-align: middle;
|
|
width:80px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: inline-block;
|
|
}
|
|
&.device {
|
|
text-align: right;
|
|
}
|
|
}
|
|
td {
|
|
padding-right: 5px;
|
|
white-space: nowrap;
|
|
}
|
|
td.delete {
|
|
padding-right: 0;
|
|
text-align: right;
|
|
}
|
|
.btn {
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
font-size: 11px;
|
|
&:before {
|
|
border-top: 7px solid transparent;
|
|
border-bottom: 7px solid transparent;
|
|
border-right: 9px solid $border-color;
|
|
display: block;
|
|
position: absolute;
|
|
top: 30px;
|
|
left: -9px;
|
|
width: 0;
|
|
height: 0;
|
|
content: "";
|
|
}
|
|
&:after {
|
|
border-top: 6px solid transparent;
|
|
border-bottom: 6px solid transparent;
|
|
border-right: 8px solid $body-bg;
|
|
display: block;
|
|
position: absolute;
|
|
top: 31px;
|
|
left: -8px;
|
|
width: 0;
|
|
height: 0;
|
|
content: "";
|
|
}
|
|
&.leftPosition {
|
|
&:before {
|
|
border-right: none;
|
|
border-left: 9px solid $border-color;
|
|
right: -9px;
|
|
top: 30px;
|
|
left:auto;
|
|
}
|
|
&:after {
|
|
border-right: none;
|
|
border-left: 8px solid $body-bg;
|
|
right: -8px;
|
|
top: 31px;
|
|
left:auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
#topologyMessages {
|
|
width:1px;
|
|
height:1px;
|
|
visibility: hidden;
|
|
position: absolute;
|
|
top: -100px;
|
|
}
|