ui-modules/home/app/views/about/about.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="container">
    <div class="row">
        <div class="col-md-6">
            <h2>About {{ getBrandedText('product.name') }}</h2>
            <p>This is the {{ getBrandedText('product.name') }} JavaScript web client for the REST API.</p>
            <p>
                Some useful references include:
                <ul>
                    <li><a href="http://brooklyn.apache.org">Brooklyn project website</a></li>
                    <li><a href="http://github.com/apache/brooklyn">Brooklyn code @ GitHub</a></li>
                </ul>
                <small><em>Note you can observe the REST requests made by the Javascript GUI through the developers console in many browsers.</em></small>
            </p>

            <h2>Version Information</h2>
            <ul class="list-group">
                <li class="list-group-item" ng-if="getBrandedText('product.name')!='Brooklyn'">
                    <span class="badge">
                        {{buildInfo.buildVersion || 'EXT'}}
                    </span>
                    <h4 class="list-group-item-heading">{{ getBrandedText('product.name') }}</h4>
                </li>
                <li class="list-group-item">
                    <span class="badge" ng-attr-title="{{ 
                            'brooklyn-server' + 
                            (brooklynServerVersion.buildBranch && brooklynServerVersion.buildBranch!=='UNKNOWN' 
                              ? '\n  branch='+brooklynServerVersion.buildBranch : '') +
                            (brooklynServerVersion.buildSha1 ? '\n  commit=' + (brooklynServerVersion.buildSha1 | limitTo: 8) : '') +
                            (buildInfo.buildBranch && buildInfo.buildBranch !== brooklynServerVersion.buildBranch 
                              ? '\nbrooklyn-ui' + 
                                (buildInfo.buildBranch && buildInfo.buildBranch !== 'UNKNOWN'
                                  ? '\n  branch='+buildInfo.buildBranch : '') +
                                (buildInfo.buildSha1 ? '\n  commit='+(buildInfo.buildSha1 | limitTo: 8) : '')+'\n'
                              : '') 
                        }}">
                        {{brooklynServerVersion.version}}</span>
                    <h4 class="list-group-item-heading">Apache Brooklyn</h4>
                </li>
            </ul>

            <h2>
                Persistence State Management
            </h2>

            <a ng-click="importPersistence()"
               class="btn btn-default"
               uib-tooltip="Imports new persistence data">Import</a>
            <a ng-href="/v1/server/ha/persist/export?origin=AUTO" role="button"
               class="btn btn-default" ng-class="type" download
               uib-tooltip="Downloads the current persistence state into a zip archive">Export</a>

            <h2>
                HA status
                <button ng-if="states.nodes[states.ownId].status === 'MASTER'"
                        ng-click="removeAllTerminatedNodes()" class="btn btn-sm btn-default"
                        style="float: right;">{{operations.REMOVE_ALL_TERMINATED_NODES}}</button>
            </h2>

            <script type="text/ng-template" id="haManageErrorsModal.html">
                <div class="modal-header">
                    <h3 class="node-management-title">Node Management Error</h3>
                </div>
                <div class="modal-body">
                    The following errors occurred while attempting to edit the node's properties:
                    <table ng-if="(errors | filter: {configName:'!!'}).length > 0" class="table table-responsive table-bordered table-hover">
                        <thead>
                            <tr>
                                <th scope="col">Property name</th>
                                <th scope="col">Error message</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="error in errors | filter: {configName: '!!'} track by error.configName">
                                <td><code>{{error.configName}}</code></td>
                                <td><em>{{error.message}}</em></td>
                            </tr>
                        </tbody>
                    </table>
                    <table ng-if="(errors | filter: {operationName:'!!'}).length > 0" class="table table-responsive table-bordered table-hover">
                        <thead>
                        <tr>
                            <th scope="col">Operation name</th>
                            <th scope="col">Error message</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="error in errors | filter: {operationName: '!!'} track by error.operationName">
                            <td><code>{{error.operationName}}</code></td>
                            <td><em>{{error.message}}</em></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-lg btn-success" type="button" ng-click="okClicked()">OK</button>
                </div>
            </script>

            <ng-include src="template"></ng-include>

            <script type="text/ng-template" id="haStatusTemplate">

                <table class="table table-responsive table-bordered table-hover">
                    <thead>
                    <tr>
                        <th class="server-status-node-id">Node ID</th>
                        <th>Information</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="node in states.nodes track by node.nodeId"
                        ng-class="{success: node.state === 'online', danger: node.state === 'offline'}"
                        ng-mouseover="row = $index" ng-mouseleave="row = -1">
                        <td>
                            {{node.nodeId}}
                            <button class="btn btn-sm btn-default" style="float: right;"
                                    ng-if="node.nodeId === states.ownId"
                                    ng-click="openDialog(states, container)"
                                    ng-show="row == $index">Manage</button>
                            <button class="btn btn-sm btn-default" style="float: right;"
                                    ng-if="(node.status === 'TERMINATED') && (states.nodes[states.ownId].status === 'MASTER')"
                                    ng-click="removeNode(node.nodeId)" ng-show="row == $index">{{operations.REMOVE_TERMINATED_NODE}}</button>
                            <span ng-if="node.nodeId === states.ownId" class="label label-info">current</span>
                            <span ng-if="node.status === 'MASTER'" class="label label-success">master</span><br>
                        </td>
                        <td>
                            <span class="text-left">Status: {{node.status | lowercase}}</span><br>
                            <span class="text-left">Last active: {{node.remoteTimestamp | timeAgoFilter}}</span><br>
                            <span class="text-left">Priority: {{node.priority}}</span><br>
                            <a ng-if="node.state === 'online'" class="btn btn-xs btn-success pull-right"
                               class="text-right" ng-class="{disabled: node.nodeUri === null}">Open</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </script>

            <script type="text/ng-template" id="spinnerTemplate">
                <br-interstitial-spinner event-count="1" remove-after="0" max-wait="120000">
                    <style>
                        ${require('brooklyn-shared/partials/interstitial.less')}
                    </style>

                    <div class="spinner-area" style="height: 100px">
                        <div class="spinner">
                            <div class="svg-container">
                                <svg viewBox="20 20 60 60">
                                    <circle r="25" cx="50" cy="50" class="background"/>
                                    <circle r="25" cx="50" cy="50" class="foreground"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </br-interstitial-spinner>
            </script>
        </div>

        <div class="col-md-6">
            <h2>Feature Information</h2>
            <p>This distribution includes the following features:</p>
            <ul class="list-group">
                <li ng-repeat="feature in brooklynServerVersion.features track by $index" class="list-group-item">
                    <span class="badge" ng-attr-title="{{ 
                      (feature.lastModified ? (feature.lastModified | date: 'yyyy-MM-dd HH:mm')+'\n' : '') + 
                      (feature.buildSha1 ? 'commit='+(feature.buildSha1 | limitTo: 8)+'\n' : '') }}">{{feature.version}}</span>
                    <h4 class="list-group-item-heading">{{feature.name}}</h4>
                    <small class="list-group-item-text">{{feature.symbolicName}}</small>
                </li>
            </ul>
        </div>
    </div>

    <h2>Logbook</h2>
    <br-logbook></br-logbook>
</div>