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

Commit

Permalink
Merge pull request #576 from hawkular/topology
Browse files Browse the repository at this point in the history 
HAWKULAR-676 - Topology view
  • Loading branch information
@pilhuhn
pilhuhn committed Oct 19, 2015
2 parents 11fadf4 + 4b5f6e2 commit 9fd18ff
Show file tree
Hide file tree
Showing 9 changed files with 917 additions and 0 deletions.
3 changes: 3 additions & 0 deletions console/src/main/scripts/plugins/directives/topbar/html/topbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,7 @@
<li ng-class="getClass('/hawkular-ui/app/')">
<a href="/hawkular-ui/app/app-list">Application Servers</a>
</li>
<li ng-class="getClass('/hawkular-ui/topology/')" ng-show="$rootScope.isExperimental">
<a href="/hawkular-ui/topology/view">Topology</a>
</li>
</ul>
89 changes: 89 additions & 0 deletions console/src/main/scripts/plugins/topology/directives/hawkularTopologyGraph.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
///
/// 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('hawkularTopologyGraph',
() => {
return {
restrict: 'E',
scope: {
items: '=',
relations: '=',
kinds: '=',
selection: '=',
force: '='
},
link: ($scope, element, attributes) => {
element.css('display', 'block');

var graph;
function notify(item) {
var event = $scope.$emit('select', item);
if (attributes['selection'] === undefined && !event.defaultPrevented) {
graph.select(item);
}
}

function icon(d) {
var text;
var kinds = $scope.kinds;
if (kinds) {
text = kinds[d.item.kind];
}
return text || '';
}

function weak(d) {
var status = d.item.status;
return status && status.phase && status.phase !== 'Running';
}

function title(d) {
return d.item.metadata.name;
}

function render(args) {
var vertices = args[0];
var added = args[1];
var event = $scope.$emit('render', vertices, added);
if (!event.defaultPrevented) {
added.attr('class', (d) => d.item.kind);
added.append('use').attr('xlink:href', icon);
added.append('title');
vertices.selectAll('title')
.text((d) => d.item.metadata.name);
vertices.classed('weak', weak);
}
}

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

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

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

$scope.$watch('selection', (item) => graph.select(item));

element.on('$destroy', () => graph.close());
}
};
}
);
}
51 changes: 51 additions & 0 deletions console/src/main/scripts/plugins/topology/directives/hawkularTopologyIcon.ts
View file
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();
});
}
};
});
}
72 changes: 72 additions & 0 deletions console/src/main/scripts/plugins/topology/html/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<div class="hk-application-servers" data-ng-controller="HawkularTopology.TopologyController as vm">

<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">
<hawkular-topology-icon kind="Server">
<svg class="hawkular-topology">
<use xlink:href="#vertex-Server" x="15" y="15"></use>
</svg>
</hawkular-topology-icon>
<label>Servers</label>
<br/>
</div>

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

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

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

<svg class="hawkular-topology" hidden>
<defs><!--
<g class="Database" id="vertex-Database">
<circle r="15"></circle>
<text y="6">&#xf1c0;</text>
</g>-->
<g class="Server" id="vertex-Server">
<circle r="15"></circle>
<!-- <text y="6" x="0.5">&#xf233;</text> -->
<text y="6" x="0.5">&#xf233;</text>
</g>
<g class="App" id="vertex-App">
<circle r="15"></circle>
<!-- <text y="10" x="1">&#xf135;</text> -->
<text y="7" x="0">&#xf135;</text>
</g>
<g class="DataSource" id="vertex-DataSource">
<circle r="15"></circle>
<!-- <text y="7.5">&#xf0ec;</text> -->
<text y="5">&#xf1c0;</text>
</g>
</defs>
</svg>
</div>
20 changes: 20 additions & 0 deletions console/src/main/scripts/plugins/topology/includes.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
///
/// 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="../../libs/hawtio-utilities/defs.d.ts"/>
/// <reference path="../../libs/hawtio-core-dts/defs.d.ts"/>

0 comments on commit 9fd18ff

Please sign in to comment.