This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a commit to branch simple-kilt
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
The following commit(s) were added to refs/heads/simple-kilt by this push:
new 5edadb8e tidy popup for kilt colors, and set simple to be the default
5edadb8e is described below
commit 5edadb8e98e10d8a2e9a689249be5ee61e233d2a
Author: Alex Heneveld <[email protected]>
AuthorDate: Fri Jun 28 15:43:56 2024 +0100
tidy popup for kilt colors, and set simple to be the default
---
.../task-sunburst/task-sunburst.directive.js | 4 +---
.../components/task-sunburst/task-sunburst.util.js | 19 ++++++++++++++++---
.../views/main/inspect/activities/activities.less | 15 ++++++++-------
.../main/inspect/activities/kilt-panel.directive.js | 13 ++++++++-----
.../main/inspect/activities/kilt-panel.template.html | 20 +++++++++++---------
5 files changed, 44 insertions(+), 27 deletions(-)
diff --git
a/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.directive.js
b/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.directive.js
index 78eeecea..a16bd378 100644
---
a/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.directive.js
+++
b/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.directive.js
@@ -29,8 +29,6 @@ angular.module(MODULE_NAME, [])
export default MODULE_NAME;
-export const STORAGE_KEY_COLOR_MODE = 'brooklyn.'+MODULE_NAME+'.color_mode';
-
export function taskSunburstDirective() {
return {
template: template,
@@ -47,7 +45,7 @@ export function taskSunburstDirective() {
function controller($scope, $element, $state, $window, $timeout) {
function lookupColorScheme() {
- $scope.colorScheme =
$window.localStorage.getItem(STORAGE_KEY_COLOR_MODE) || 'normal';
+ $scope.colorScheme = util.getSunburstColorMode($window);
}
lookupColorScheme();
diff --git
a/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.util.js
b/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.util.js
index 1fd8d620..39d32f2f 100644
---
a/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.util.js
+++
b/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.util.js
@@ -18,6 +18,10 @@
*/
import * as d3 from "d3";
+import MODULE_NAME from "./task-sunburst.directive";
+
+export const COLOR_MODES = [ 'simple', 'multi' ];
+export const DEFAULT_COLOR_MODE = COLOR_MODES[0];
export function isNewEntity(d) {
return d.data.task && d.parent && d.parent.data.task && d.data.task.entityId
&& d.data.task.entityId != d.parent.data.task.entityId;
@@ -76,7 +80,7 @@ colors = {
{
// build a palette to use, avoiding anything that looks like success
// (danger we don't avoid as it is usually bright)
- var palettes = ["normal", "simple"];
+ var palettes = COLOR_MODES;
for(var p of palettes) {
var hueToAvoid = d3.hsl(colors.ACTIVE_NORMAL).h;
var palette = [];
@@ -103,7 +107,7 @@ Object.assign(colors, colors, {
ACTIVE_BRIGHT: colors.ACTIVE_NORMAL.brighter(0.2),
scale:
function(x, scheme) {
- const palette = colors.PALETTES[scheme||"normal"];
+ const palette = colors.PALETTES[scheme||DEFAULT_COLOR_MODE];
return palette[((hash(x) %
palette.length)+palette.length)%palette.length];
},
nodeToUseForHue: function(x) {
@@ -186,4 +190,13 @@ export function arcF(options) {
export function taskId(d) { return findTask(d).id; }
export function id(x) { return x; }
-
+
+const STORAGE_KEY_COLOR_MODE = 'brooklyn.'+MODULE_NAME+'.color_mode';
+
+export function getSunburstColorMode($window) {
+ return $window.localStorage.getItem(STORAGE_KEY_COLOR_MODE) ||
DEFAULT_COLOR_MODE;
+}
+export function toggleSunburstColorMode($window) {
+ const m = getSunburstColorMode($window);
+ $window.localStorage.setItem(STORAGE_KEY_COLOR_MODE, COLOR_MODES[
(COLOR_MODES.findIndex(x => x == m) + 1) % COLOR_MODES.length ]);
+}
diff --git
a/ui-modules/app-inspector/app/views/main/inspect/activities/activities.less
b/ui-modules/app-inspector/app/views/main/inspect/activities/activities.less
index 9a02dfa2..6de05c46 100644
--- a/ui-modules/app-inspector/app/views/main/inspect/activities/activities.less
+++ b/ui-modules/app-inspector/app/views/main/inspect/activities/activities.less
@@ -58,16 +58,17 @@
.kilt-settings-popover {
margin-left: 10px; //needed to budge it right to line up with settings icon,
oddly
- width: 500px;
- max-width: 500px;
- min-width: 500px;
+ width: 540px;
+ max-width: 540px;
+ min-width: 540px;
.swatch-square {
- width: 10px;
- height: 10px;
+ width: 1em;
+ height: 1em;
float: left;
- margin-right: 1ex;
- margin-top: 4px;
+ margin-right: 1em;
+ margin-top: 2px;
+ margin-left: 1em;
}
}
\ No newline at end of file
diff --git
a/ui-modules/app-inspector/app/views/main/inspect/activities/kilt-panel.directive.js
b/ui-modules/app-inspector/app/views/main/inspect/activities/kilt-panel.directive.js
index 68675d02..acdb2d37 100644
---
a/ui-modules/app-inspector/app/views/main/inspect/activities/kilt-panel.directive.js
+++
b/ui-modules/app-inspector/app/views/main/inspect/activities/kilt-panel.directive.js
@@ -20,8 +20,11 @@ import angular from "angular";
import {HIDE_INTERSTITIAL_SPINNER_EVENT} from
'brooklyn-ui-utils/interstitial-spinner/interstitial-spinner';
import template from './kilt-panel.template.html';
import modalTemplate from './kilt.modal.template.html';
-import {STORAGE_KEY_COLOR_MODE} from
"../../../../components/task-sunburst/task-sunburst.directive";
-import {colors} from "../../../../components/task-sunburst/task-sunburst.util";
+import {
+ colors,
+ getSunburstColorMode,
+ toggleSunburstColorMode
+} from "../../../../components/task-sunburst/task-sunburst.util";
const MODULE_NAME = 'activities.kilt-panel';
@@ -58,10 +61,10 @@ export function activitiesListAndKiltPanelDirective() {
vm.wideKilt = newValue;
};
- vm.simpleColors =
window.localStorage.getItem(STORAGE_KEY_COLOR_MODE)=='simple';
+ vm.colorMode = getSunburstColorMode($window);
vm.toggleColorScheme = function () {
- vm.simpleColors = !vm.simpleColors;
- $window.localStorage.setItem(STORAGE_KEY_COLOR_MODE,
vm.simpleColors ? 'simple' : 'normal');
+ toggleSunburstColorMode($window);
+ vm.colorMode = getSunburstColorMode($window);
$timeout(function () {
$scope.$broadcast('changedKiltColorScheme')
}, 0);
diff --git
a/ui-modules/app-inspector/app/views/main/inspect/activities/kilt-panel.template.html
b/ui-modules/app-inspector/app/views/main/inspect/activities/kilt-panel.template.html
index e88ec925..12c0d124 100644
---
a/ui-modules/app-inspector/app/views/main/inspect/activities/kilt-panel.template.html
+++
b/ui-modules/app-inspector/app/views/main/inspect/activities/kilt-panel.template.html
@@ -40,8 +40,9 @@
<div>
<p>
The progress map shows task progress and completion.
+ </p><p>
Tasks are shown chronologically left-to-right based on start
time,
- and hierarchically (subtasks) top-to-bottom.
+ and hierarchically top-to-bottom with sub-tasks under their
submitter.
</p><p>
<span style="background-color: {{vm.colors.ACTIVE_BRIGHT}};"
class="swatch-square"></span>
Active tasks are shown in bright, pulsing green.
@@ -49,28 +50,29 @@
<span style="background-color: {{vm.colors.ERROR}};"
class="swatch-square"></span>
Failed tasks are shown in red.
</p><p>
- <span style="background-color:
{{vm.colors.unstartedFn('sample','simple')}};" class="swatch-square"></span>
+ <span style="background-color:
{{vm.colors.unstartedFn('sample',vm.colorMode)}};" class="swatch-square"></span>
Unstarted tasks are shown as pale.
</p><p>
- <span style="background-color:
{{vm.colors.succeededFn('sample','simple')}};" class="swatch-square"></span>
+ <span style="background-color:
{{vm.colors.succeededFn('sample',vm.colorMode)}};" class="swatch-square"></span>
Completed tasks are shown as dark.
</p>
- <div style="display: flex;">
+ <hr></hr>
+ <div style="display: flex; margin-bottom: 16px;">
<div style="flex: 0 0 auto; padding-left: 1em; padding-right:
1em;">
- <button class="btn btn-link title-toolbar-item"
ng-click="vm.toggleColorScheme()" style="margin-left: 0">
- <i class="fa" ng-class="{ 'fa-toggle-off':
vm.simpleColors, 'fa-toggle-on': !vm.simpleColors }"></i></button>
+ <button class="btn btn-link title-toolbar-item"
ng-click="vm.toggleColorScheme()" style="margin-left: 0; width: 1em;
padding-top: 0;">
+ <i class="fa" ng-class="{ 'fa-toggle-off':
vm.colorMode=='simple', 'fa-toggle-on': vm.colorMode!='simple' }"></i></button>
</div>
<div style="flex: 1 1 auto;">
<b>Enable multi-colored mode</b> <br/>
- <span ng-if="vm.simpleColors">
+ <span ng-if="vm.colorMode=='simple'">
Currently "simple-colored mode" is selected.
Unstarted and completed tasks are shown in pale and
dark green.
</span>
- <span ng-if="!vm.simpleColors">
+ <span ng-if="vm.colorMode!='simple'">
Currently "multi-colored mode" is selected.
Unstarted and completed tasks use a color computed
from a hash of the task name.
This means the colors for tasks vary, but are
consistent for a given task name,
- so the color can be used to find it more quickly.
+ allowing the color to be used to find known tasks more
quickly.
</span>
</div>
</div>
