Skip to content

Commit 399e91e

Browse files
davidwatkins73davidwatkins73
committed
Added pies to
- groups - people - capabilities #86
1 parent c22af26 commit 399e91e

21 files changed

Lines changed: 555 additions & 125 deletions

‎waltz-ng/client/app-groups/app-group-view.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
complexity="ctrl.complexity"
2929
server-stats="ctrl.serverStats"
3030
app-group="ctrl.groupDetail.appGroup"
31+
flows="ctrl.dataFlows.flows"
3132
editable="ctrl.isGroupEditable()">
3233
</waltz-app-group-summary>
3334

‎waltz-ng/client/app-groups/directives/app-group-summary.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,27 @@ <h3 style="margin-top: 10px; padding-bottom: 4px; border-bottom: 1px solid #eee;
1616
{{ ctrl.appGroup.description }}
1717
</div>
1818

19+
20+
<div class="row">
21+
<div class="col-sm-4">
22+
<waltz-apps-by-investment-pie applications="ctrl.applications"
23+
size="80">
24+
</waltz-apps-by-investment-pie>
25+
</div>
26+
27+
<div class="col-sm-4">
28+
<waltz-apps-by-lifecycle-phase-pie applications="ctrl.applications"
29+
size="80">
30+
</waltz-apps-by-lifecycle-phase-pie>
31+
</div>
32+
33+
<div class="col-sm-4">
34+
<waltz-data-flows-by-direction-pie applications='ctrl.applications'
35+
flows="ctrl.flows"
36+
size="80">
37+
</waltz-data-flows-by-direction-pie>
38+
</div>
39+
</div>
1940
<div class="row">
2041
<div class="col-sm-3">
2142
<waltz-basic-info-tile name="Portfolio Cost"

‎waltz-ng/client/app-groups/directives/app-group-summary.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ const BINDINGS = {
2727
assetCosts: '=',
2828
complexity: '=',
2929
serverStats: '=',
30-
editable: '='
30+
editable: '=',
31+
flows: '='
3132
};
3233

3334

‎waltz-ng/client/applications/directives/apps-by-investment-pie.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div>
2+
<waltz-pie-table data="ctrl.data"
3+
config="ctrl.config"
4+
class="clickable"
5+
waltz-jump-to="apps-section"
6+
icon="money"
7+
title="Apps By Investment Status">
8+
</waltz-pie-table>
9+
</div>

‎waltz-ng/client/applications/directives/apps-by-investment-pie.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
2+
/*
3+
* This file is part of Waltz.
4+
*
5+
* Waltz is free software: you can redistribute it and/or modify
6+
* it under the terms of the GNU General Public License as published by
7+
* the Free Software Foundation, either version 3 of the License, or
8+
* (at your option) any later version.
9+
*
10+
* Waltz is distributed in the hope that it will be useful,
11+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
* GNU General Public License for more details.
14+
*
15+
* You should have received a copy of the GNU General Public License
16+
* along with Waltz. If not, see <http://www.gnu.org/licenses/>.
17+
*
18+
*/
19+
20+
import {
21+
lifecyclePhaseColorScale,
22+
ragColorScale } from '../../common/colors';
23+
24+
25+
const BINDINGS = {
26+
applications: '=',
27+
size: '='
28+
};
29+
30+
31+
const investmentLabels = {
32+
'R' : 'Disinvest',
33+
'A' : 'Maintain',
34+
'G' : 'Invest'
35+
};
36+
37+
38+
const config = {
39+
colorProvider: (d) => ragColorScale(d.data.key),
40+
size: 80,
41+
labelProvider: (k) => investmentLabels[k] || 'Unknown'
42+
};
43+
44+
45+
function calcAppInvestmentPieStats(apps) {
46+
return _.chain(apps)
47+
.countBy('overallRating')
48+
.map((v, k) => ({ key: k, count: v }))
49+
.value();
50+
}
51+
52+
53+
function controller($scope) {
54+
const vm = this;
55+
56+
vm.config = config;
57+
vm.data = [];
58+
59+
$scope.$watch('ctrl.size', sz => vm.config.size = sz ? sz : 80);
60+
61+
$scope.$watch('ctrl.applications', apps => {
62+
if (!apps) return;
63+
vm.data = calcAppInvestmentPieStats(apps);
64+
});
65+
66+
}
67+
68+
controller.$inject = ['$scope'];
69+
70+
71+
export default () => {
72+
return {
73+
restrict: 'E',
74+
replace: true,
75+
template: require('./apps-by-investment-pie.html'),
76+
scope: {},
77+
bindToController: BINDINGS,
78+
controllerAs: 'ctrl',
79+
controller
80+
};
81+
};

‎waltz-ng/client/applications/directives/apps-by-lifecycle-phase-pie.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div>
2+
<waltz-pie-table data="ctrl.data"
3+
config="ctrl.config"
4+
class="clickable"
5+
waltz-jump-to="apps-section"
6+
icon="desktop"
7+
title="Apps By Lifecycle Phase">
8+
</waltz-pie-table>
9+
</div>

‎waltz-ng/client/applications/directives/apps-by-lifecycle-phase-pie.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
2+
/*
3+
* This file is part of Waltz.
4+
*
5+
* Waltz is free software: you can redistribute it and/or modify
6+
* it under the terms of the GNU General Public License as published by
7+
* the Free Software Foundation, either version 3 of the License, or
8+
* (at your option) any later version.
9+
*
10+
* Waltz is distributed in the hope that it will be useful,
11+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
* GNU General Public License for more details.
14+
*
15+
* You should have received a copy of the GNU General Public License
16+
* along with Waltz. If not, see <http://www.gnu.org/licenses/>.
17+
*
18+
*/
19+
20+
import {
21+
lifecyclePhaseColorScale,
22+
ragColorScale } from '../../common/colors';
23+
24+
25+
const BINDINGS = {
26+
applications: '=',
27+
size: '='
28+
};
29+
30+
31+
const config = {
32+
colorProvider: (d) => lifecyclePhaseColorScale(d.data.key),
33+
size: 80
34+
};
35+
36+
37+
38+
function calcAppPhasePieStats(apps) {
39+
return _.chain(apps)
40+
.countBy('lifecyclePhase')
41+
.map((v, k) => ({ key: k, count: v }))
42+
.value();
43+
}
44+
45+
46+
function controller($scope) {
47+
const vm = this;
48+
49+
vm.config = config;
50+
vm.data = [];
51+
52+
$scope.$watch('ctrl.size', sz => vm.config.size = sz ? sz : 80);
53+
54+
$scope.$watch('ctrl.applications', apps => {
55+
if (!apps) return;
56+
vm.data = calcAppPhasePieStats(apps);
57+
});
58+
59+
}
60+
61+
controller.$inject = ['$scope'];
62+
63+
64+
export default () => {
65+
return {
66+
restrict: 'E',
67+
replace: true,
68+
template: require('./apps-by-lifecycle-phase-pie.html'),
69+
scope: {},
70+
bindToController: BINDINGS,
71+
controllerAs: 'ctrl',
72+
controller
73+
};
74+
};

‎waltz-ng/client/applications/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,7 @@ export default (module) => {
3333
module.directive('waltzAppSelector', require('./directives/app-selector'));
3434
module.directive('waltzAssetCodeExplorer', require('./directives/asset-code-explorer'));
3535
module.directive('waltzAppTable', require('./directives/app-table'));
36+
module.directive('waltzAppsByInvestmentPie', require('./directives/apps-by-investment-pie'));
37+
module.directive('waltzAppsByLifecyclePhasePie', require('./directives/apps-by-lifecycle-phase-pie'));
3638

3739
};

‎waltz-ng/client/capabilities/capability-view.html‎

Lines changed: 2 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -10,71 +10,17 @@
1010
</waltz-page-header>
1111

1212

13-
<div class="row no-overflow"
14-
ng-if="ctrl.capability.parent"
15-
style="padding: 1em">
16-
17-
<div class="col-md-12">
18-
<span class="text-muted">
19-
<waltz-icon name="level-up"></waltz-icon>
20-
Parent:
21-
</span>
22-
<a ui-sref="main.capabilities.view ({ id: ctrl.capability.parent.id })">
23-
{{ ctrl.capability.parent.name }}
24-
</a>
25-
<span class="text-muted small ">
26-
{{ ctrl.capability.parent.description }}
27-
</span>
28-
</div>
29-
30-
</div>
3113

3214
<waltz-capability-summary capability="ctrl.capability"
15+
applications="ctrl.apps"
3316
server-stats="ctrl.serverStats"
3417
complexity="ctrl.complexity"
18+
flows="ctrl.dataFlows"
3519
asset-costs="ctrl.assetCosts">
3620

3721
</waltz-capability-summary>
3822

3923

40-
41-
<br>
42-
43-
<!-- CHILDREN -->
44-
<div class="row"
45-
ng-if="ctrl.capability.children.length > 0">
46-
<div class="col-md-offset-1 col-md-10">
47-
<table class="table table-condensed small">
48-
<colgroup>
49-
<col width="20%">
50-
<col width="80%">
51-
</colgroup>
52-
<thead>
53-
<tr>
54-
<th colspan="2">
55-
Sub-Capabilities
56-
</th>
57-
</tr>
58-
</thead>
59-
<tbody>
60-
<tr ng-repeat="child in ctrl.capability.children | orderBy:'name'">
61-
<td>
62-
<a ui-sref="main.capabilities.view ({ id: child.id })">
63-
{{ child.name }}
64-
</a>
65-
</td>
66-
<td>
67-
<span class="text-muted">
68-
{{ child.description }}
69-
</span>
70-
</td>
71-
</tr>
72-
</tbody>
73-
</table>
74-
</div>
75-
</div>
76-
77-
7824
<!-- RATINGS -->
7925
<waltz-section name="Application Capability Ratings">
8026

‎waltz-ng/client/capabilities/directives/capability-scorecard.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<div>
2+
<div class="waltz-page-summary">
3+
<!-- BASICS -->
4+
<div class="row">
5+
<div class="col-md-12">
6+
<h3 style="margin-top: 10px; padding-bottom: 4px; border-bottom: 1px solid #eee;">
7+
{{ ctrl.capability.name }}
8+
</h3>
9+
<div style="border-bottom: 2px dotted #eee; padding: 6px"
10+
class="waltz-paragraph">
11+
{{ ctrl.capability.description }}
12+
</div>
13+
</div>
14+
</div>
15+
16+
17+
18+
<div class="row">
19+
<div class="col-sm-4">
20+
<waltz-apps-by-investment-pie applications="ctrl.applications"
21+
size="80">
22+
</waltz-apps-by-investment-pie>
23+
</div>
24+
25+
<div class="col-sm-4">
26+
<waltz-apps-by-lifecycle-phase-pie applications="ctrl.applications"
27+
size="80">
28+
</waltz-apps-by-lifecycle-phase-pie>
29+
</div>
30+
31+
<div class="col-sm-4">
32+
<waltz-data-flows-by-direction-pie applications='ctrl.applications'
33+
flows="ctrl.flows"
34+
size="80">
35+
</waltz-data-flows-by-direction-pie>
36+
</div>
37+
</div>
38+
39+
40+
<div class="row">
41+
42+
<!-- PORTFOLIO COST -->
43+
<div class="col-sm-4">
44+
<waltz-basic-info-tile name="Portfolio Cost"
45+
description="Cumulative value of infra and app dev costs"
46+
waltz-jump-to="costs-section"
47+
icon="money">
48+
<span style="font-size: xx-large;">
49+
{{ ctrl.portfolioCostStr }}
50+
</span>
51+
</waltz-basic-info-tile>
52+
</div>
53+
54+
55+
<!-- COMPLEXITY -->
56+
<div class="col-sm-4">
57+
<waltz-basic-info-tile name="Complexity"
58+
description="Derived from capabilities, connections and servers"
59+
class="clickable"
60+
waltz-jump-to="complexity-section"
61+
icon="rocket">
62+
<div style="font-size: xx-large;">
63+
&Sigma; {{ ctrl.complexitySummary.cumulativeScore | toFixed:1 }}
64+
</div>
65+
<div class="small text-muted">
66+
{{ ctrl.complexitySummary.averageScore | toFixed:2 }} per app
67+
</div>
68+
</waltz-basic-info-tile>
69+
70+
</div>
71+
72+
<!-- SERVERS -->
73+
<div class="col-sm-4">
74+
<waltz-basic-info-tile name="Servers"
75+
description="Number of servers supporting this group"
76+
icon="server">
77+
<div>
78+
<div style="font-size: xx-large;">
79+
# {{ ctrl.serverStats.total }}
80+
</div>
81+
<div class="small text-muted">
82+
{{ ctrl.serverStats.virtualPercentage }}% virtual
83+
</div>
84+
</div>
85+
</waltz-basic-info-tile>
86+
</div>
87+
88+
</div>
89+
90+
91+
</div>
92+
</div>

0 commit comments

Comments
 (0)