Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
HAWKULAR-676 - Showing more metadata for servers in tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
jkremser committed Oct 19, 2015
1 parent bc16ce5 commit d4af53c
Show file tree
Hide file tree
Showing 8 changed files with 143 additions and 2,928 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ module HawkularMetrics {
//disable debug info
//NOTE: tools like Batarang and Protractor may not work properly with this debug info off
//However, this can be turned back on at runtime in the js console by typing: angular.reloadWithDebugInfo()
$compileProvider.debugInfoEnabled(false);
$compileProvider.debugInfoEnabled(true);
}]);

_module.config(['$httpProvider', '$locationProvider', '$routeProvider',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,10 @@
///

/// <reference path='../../includes.ts'/>
/// <reference path='topologyGlobals.ts'/>
/// <reference path='../ts/topologyGlobals.ts'/>

module HawkularTopology {

_module.directive('kubernetesTopologyGraph', [
_module.directive('hawkularTopologyGraph',
() => {
return {
restrict: 'E',
Expand All @@ -44,7 +43,7 @@ module HawkularTopology {

function icon(d) {
var text;
var kinds = $scope.$root.kinds;
var kinds = $scope.kinds;
if (kinds) {
text = kinds[d.item.kind];
}
Expand Down Expand Up @@ -74,9 +73,9 @@ module HawkularTopology {
}
}

graph = window['topology_graph'](element[0], $scope.force, notify);
graph = HawkularTopology.initGraph(element[0], $scope.force, notify);

$scope.$root.$watchCollection('kinds', (value) => render(graph.kinds(value)));
$scope.$watchCollection('kinds', (value) => render(graph.kinds(value)));

$scope.$watchGroup(['items', 'relations'], (values) => render(graph.data(values[0], values[1])));

Expand All @@ -86,35 +85,5 @@ module HawkularTopology {
}
};
}
])

.directive('kubernetesTopologyIcon', () => {
return {
restrict: 'E',
transclude: true,
template: '<ng-transclude></ng-transclude>',
link: ($scope, element, attrs) => {
var kind = attrs.kind;
var value = $scope.kinds[kind];

$scope.$root.$watchCollection('kinds', () => element.toggleClass('active', kind in $scope.$root.kinds));

element.on('click', () => {
if (kind in $scope.$root.kinds) {
value = $scope.$root.kinds[kind];
delete $scope.$root.kinds[kind];
} else {
$scope.$root.kinds[kind] = value;
}
if ($scope.$parent) {
$scope.$parent.$digest();
}
if ($scope.$root) {
$scope.$root.$digest();
}
$scope.$digest();
});
}
};
});
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
///
/// Copyright 2015 Red Hat, Inc. and/or its affiliates
/// and other contributors as indicated by the @author tags.
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
/// http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///

/// <reference path='../../includes.ts'/>
/// <reference path='../ts/topologyGlobals.ts'/>

module HawkularTopology {
_module.directive('hawkularTopologyIcon', () => {
return {
restrict: 'E',
transclude: true,
template: '<ng-transclude></ng-transclude>',
link: ($scope, element, attrs) => {
var kind = attrs.kind;
var value = $scope.vm.kinds[kind];

$scope.$watchCollection('kinds', () => element.toggleClass('active', kind in $scope.vm.kinds));

element.on('click', () => {
if (kind in $scope.vm.kinds) {
value = $scope.vm.kinds[kind];
delete $scope.vm.kinds[kind];
} else {
$scope.vm.kinds[kind] = value;
}
if ($scope.$parent) {
$scope.$parent.$digest();
}
if ($scope.$root) {
$scope.$root.$digest();
}
$scope.$digest();
});
}
};
});
}
30 changes: 15 additions & 15 deletions console/src/main/scripts/plugins/topology/html/index.html
Original file line number Diff line number Diff line change
@@ -1,52 +1,52 @@
<div class="hk-application-servers" data-ng-controller="HawkularTopology.TopologyController as vm">

<kubernetes-topology-graph items="vm.data.items" relations="vm.data.relations" kinds="vm.kinds">
</kubernetes-topology-graph>
<hawkular-topology-graph items="vm.data.items" relations="vm.data.relations" kinds="vm.kinds">
</hawkular-topology-graph>

<div class="controls">
<label id="selected"></label>
<!--<button ng-click="vm.poke()" >Random Data</button>-->
<!--<button ng-click="vm.testClick()">test</button>-->

<div class="iconWithLabel">
<kubernetes-topology-icon kind="Server">
<svg class="kube-topology">
<hawkular-topology-icon kind="Server">
<svg class="hawkular-topology">
<use xlink:href="#vertex-Server" x="15" y="15"></use>
</svg>
</kubernetes-topology-icon>
</hawkular-topology-icon>
<label>Servers</label>
<br/>
</div>

<div class="iconWithLabel">
<kubernetes-topology-icon kind="App">
<svg class="kube-topology">
<hawkular-topology-icon kind="App">
<svg class="hawkular-topology">
<use xlink:href="#vertex-App" x="15" y="15"></use>
</svg>
</kubernetes-topology-icon>
</hawkular-topology-icon>
<label>Apps</label>
<br/>
</div>

<!--<kubernetes-topology-icon kind="Database">
<svg class="kube-topology">
<!--<hawkular-topology-icon kind="Database">
<svg class="hawkular-topology">
<use xlink:href="#vertex-Database" x="15" y="15"></use>
</svg>
</kubernetes-topology-icon>
</hawkular-topology-icon>
<label>Databases</label>-->

<div class="iconWithLabel">
<kubernetes-topology-icon kind="DataSource">
<svg class="kube-topology">
<hawkular-topology-icon kind="DataSource">
<svg class="hawkular-topology">
<use xlink:href="#vertex-DataSource" x="15" y="15"></use>
</svg>
</kubernetes-topology-icon>
</hawkular-topology-icon>
<label>Datasources</label>
<br/>
</div>
</div>

<svg class="kube-topology" hidden>
<svg class="hawkular-topology" hidden>
<defs><!--
<g class="Database" id="vertex-Database">
<circle r="15"></circle>
Expand Down
54 changes: 23 additions & 31 deletions console/src/main/scripts/plugins/topology/less/topology.less
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ body {
margin: 0px;
font-family: sans-serif;
}
kubernetes-topology-graph {
hawkular-topology-graph {
position: fixed;
height: 100%;
width: 100%;
Expand All @@ -65,106 +65,106 @@ kubernetes-topology-graph {
}


// kube-topology specific
kubernetes-topology-graph {
// hawkular-topology specific
hawkular-topology-graph {
display: block;
user-select: none;
}

.kube-topology g {
.hawkular-topology g {
font-family: PatternFlyIcons-webfont;
font-size: 18px;
text-anchor: middle;
cursor: pointer;
}

.kube-topology g text {
.hawkular-topology g text {
stroke: none;
stroke-width: 0px;
}

.kube-topology g.weak use {
.hawkular-topology g.weak use {
opacity: .6;
}

.kube-topology g.Server text {
.hawkular-topology g.Server text {
font-family: FontAwesome;
fill: #4C4C4C;
font-size: 16px;
}

.kube-topology g.Database text {
.hawkular-topology g.Database text {
font-family: FontAwesome;
fill: #056A9E;
font-size: 16px;
}

.kube-topology g.App text {
.hawkular-topology g.App text {
font-family: FontAwesome;
fill: #4FA638;
font-size: 19px;
}

.kube-topology g.DataSource text {
.hawkular-topology g.DataSource text {
font-family: FontAwesome;
fill: #84CCEE;
font-size: 14px;
fill: #056A9E;
font-size: 16px;
}

.kube-topology g circle {
.hawkular-topology g circle {
stroke: #bbb;
fill: #fff;
}

.kube-topology g.fixed use {
.hawkular-topology g.fixed use {
stroke-width: 2px;
}

.kube-topology g.selected use,
.kube-topology g.selected circle {
.hawkular-topology g.selected use,
.hawkular-topology g.selected circle {
stroke-width: 4px;
}

.kube-topology line {
.hawkular-topology line {
stroke: #bbb;
stroke-width: 1;
}

.kube-topology line.DatasourceServer {
.hawkular-topology line.DatasourceServer {
stroke-linecap: round;
stroke-dasharray: 1, 2;
}

kubernetes-topology-icon {
hawkular-topology-icon {
display: inline-block;
vertical-align: middle;
cursor: pointer;
padding: 10px;
user-select: none;
}

kubernetes-topology-icon svg {
hawkular-topology-icon svg {
width: 32px;
height: 32px;
display: block;
}

kubernetes-topology-icon use {
hawkular-topology-icon use {
opacity: 0.4;
}

kubernetes-topology-icon.active use {
hawkular-topology-icon.active use {
opacity: 1;
}

kubernetes-topology-icon:hover use {
hawkular-topology-icon:hover use {
opacity: 0.7;
}

.iconWithLabel {
> kubernetes-topology-icon {
> hawkular-topology-icon {
float: left;
}

Expand All @@ -175,14 +175,6 @@ kubernetes-topology-icon:hover use {
}
}

div.tooltip {
position: absolute;
text-align: center;
.topologyHoverLabel {
width: 140px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}

0 comments on commit d4af53c

Please sign in to comment.