ui-modules/app-inspector/app/views/main/inspect/activities/kilt-panel.template.html

<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you 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.
-->
<div class="row">
    <div ng-class="{ 'col-md-12': true, 'col-lg-8': !vm.wideKilt && vm.isNonEmpty(activities), 'col-lg-12': vm.wideKilt || !vm.isNonEmpty(activities)}" ng-transclude>
    </div>

    <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>Progress Map</heading>
            <extra-buttons>
                <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>
            </extra-buttons>
            <h4 class="text-center" ng-if="!vm.isNonEmpty(activities)">No tasks</h4>
            <task-sunburst task-type="activity" tasks="activities" filtered-to="focusedActivities" ng-if="vm.isNonEmpty(activities)" exclude-transient="globalFilters && globalFilters.transient && !globalFilters.transient.include"></task-sunburst>
        </expandable-panel>
    </div>

    <script type="text/ng-template" id="Settings.html">
        <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 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.
            </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',vm.colorMode)}};" class="swatch-square"></span>
                Unstarted tasks are shown as pale.
            </p><p>
                <span style="background-color: {{vm.colors.succeededFn('sample',vm.colorMode)}};" class="swatch-square"></span>
                Completed tasks are shown as dark.
            </p>
            <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; 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.colorMode=='simple'">
                        Currently "simple-colored mode" is selected.
                        Unstarted and completed tasks are shown in pale and dark green.
                    </span>
                    <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,
                        allowing the color to be used to find known tasks more quickly.
                    </span>
                </div>
            </div>
        </div>
    </script>

</div>