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
commit 40bcc605a389349514e483d051703d98b7e4ab2e Author: Alex Heneveld <[email protected]> AuthorDate: Fri Jun 28 14:57:29 2024 +0100 put kilt multi-colored toggle into a settings popover --- .../task-sunburst/task-sunburst.template.html | 2 +- .../views/main/inspect/activities/activities.less | 16 +++++++ .../inspect/activities/kilt-panel.directive.js | 3 ++ .../inspect/activities/kilt-panel.template.html | 49 ++++++++++++++++++++-- 4 files changed, 65 insertions(+), 5 deletions(-) diff --git a/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.template.html b/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.template.html index 5c8ebff6..abfff55a 100644 --- a/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.template.html +++ b/ui-modules/app-inspector/app/components/task-sunburst/task-sunburst.template.html @@ -17,7 +17,7 @@ under the License. --> <div class="detail detail-block" > - <div id="detail1" uib-popover-template="'Colors.html'"> + <div id="detail1"> <strong class="value"></strong> </div> <div id="detail2" class="detail-line"> 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 3987a78a..9a02dfa2 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 @@ -54,4 +54,20 @@ } } } +} + +.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; + + .swatch-square { + width: 10px; + height: 10px; + + float: left; + margin-right: 1ex; + margin-top: 4px; + } } \ 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 8baf14e3..68675d02 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 @@ -21,6 +21,7 @@ import {HIDE_INTERSTITIAL_SPINNER_EVENT} from 'brooklyn-ui-utils/interstitial-sp 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"; const MODULE_NAME = 'activities.kilt-panel'; @@ -50,6 +51,8 @@ export function activitiesListAndKiltPanelDirective() { vm.isNonEmpty = Utils.isNonEmpty; vm.modalTemplate = modalTemplate; + vm.colors = colors; + vm.wideKilt = false; vm.setWideKilt = function (newValue) { vm.wideKilt = newValue; 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 07ccd273..e88ec925 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 @@ -22,11 +22,11 @@ <div ng-class="{ 'col-md-12': true, 'col-lg-4': !vm.wideKilt, 'col-lg-12': vm.wideKilt }" ng-if="vm.isNonEmpty(activities)"> <expandable-panel expandable-template="vm.modalTemplate" class="panel-table"> - <heading uib-popover-template="'Colors.html'">Progress Map</heading> + <heading>Progress Map</heading> <extra-buttons> - <button class="btn btn-link title-toolbar-item" ng-click="vm.toggleColorScheme()" - uib-tooltip="{{vm.simpleColors ? 'Color activities by task id' : 'All finished activities have the same color' }}"> - <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" uib-popover-template="'Settings.html'" popover-placement="auto top-right" popover-title="Progress Map Overview and Settings" + popover-class="kilt-settings-popover"> + <i class="fa fa-gear"></i></button> <button class="visible-lg-inline-block btn btn-link title-toolbar-item" ng-click="vm.setWideKilt(!vm.wideKilt)" uib-tooltip="{{ vm.wideKilt ? 'Side-by-side' : 'Full-width' }}" tooltip-placement="top" tooltip-popup-delay="500" tooltip-append-to-body="true"> <i class="fa" ng-class="{ 'fa-indent': vm.wideKilt, 'fa-outdent': !vm.wideKilt }"></i></button> @@ -36,5 +36,46 @@ </expandable-panel> </div> + <script type="text/ng-template" id="Settings.html"> + <div> + <p> + The progress map shows task progress and completion. + Tasks are shown chronologically left-to-right based on start time, + and hierarchically (subtasks) top-to-bottom. + </p><p> + <span style="background-color: {{vm.colors.ACTIVE_BRIGHT}};" class="swatch-square"></span> + Active tasks are shown in bright, pulsing green. + </p><p> + <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> + Unstarted tasks are shown as pale. + </p><p> + <span style="background-color: {{vm.colors.succeededFn('sample','simple')}};" class="swatch-square"></span> + Completed tasks are shown as dark. + </p> + <div style="display: flex;"> + <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> + </div> + <div style="flex: 1 1 auto;"> + <b>Enable multi-colored mode</b> <br/> + <span ng-if="vm.simpleColors"> + Currently "simple-colored mode" is selected. + Unstarted and completed tasks are shown in pale and dark green. + </span> + <span ng-if="!vm.simpleColors"> + 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. + </span> + </div> + </div> + </div> + </script> + </div>
