beevelop/corci-monitor

View on GitHub
www/index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Cordova Build UI</title>

        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />

        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>

    </head>
    <body>
        <div id="wrapper">
            <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">            
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">
                        <img src="img/logo.png" height="40" alt="Logo" />
                        Cordova Build UI
                    </a>
                    <a href="#server_logs" data-toggle="collapse" data-target="#server_logs" class="pull-left navbar-brand">
                        <i class="fa fa-file-text-o"></i> Logs 
                        <span class="badge badge-info" data-bind="text: unwrap($data.logs).length"></span>
                    </a>
                </div>
                <div class="collapse navbar-collapse navbar-ex1-collapse">

                    <div class="nav navbar-nav side-nav">
                        <ul data-bind="template: { name: 'tplBuildListItem', foreach: $data && $data.builds }" class="builds nav">
                            <li class="list-group-item-warning list-group-item" data-bind="visible: !$data || !(unwrap($data.builds).length)">
                                No builds have been done yet.
                            </li>
                        </ul>

                        <script type="text/html" id="tplBuildListItem">

                            <li data-bind="with: $data, css: { 'active': unwrap($parent.selectedBuild) && unwrap($parent.selectedBuild).id == $data.id }" class="build">
                                <a data-bind="
                                    attr: {
                                        href: ['#view/', unwrap(id), $data.platform ? '/' : '', $data.platform ? unwrap($data.platform) : ''].join(''),
                                    },
                                    click: function (build) { $parents[1].selectedBuild(build.master || build); $parents[1].selectedBuild.tab('#' + build.platform()); }">
                                    <img data-bind="
                                        css: { grayscale: status() != 'success', spin: status() == 'building' || status() == 'uploading' },
                                        attr: {
                                            alt: $data.platform,
                                            rel: (unwrap(qr) || '').indexOf('data:') + 1 ? qr : null,
                                            title: $('#encoder').text([unwrap($data.platform), ' #', $data.conf && $data.conf.number || unwrap(id), ' ', unwrap(status) == 'success' ? '' : unwrap(status)].join('')).html(),
                                            src: ('img/platforms/' + ($data.platforms().length > 1 ? 'cordova' : unwrap($data && $data.platform || $data)) + '.png'),
                                            alt: $data.platform
                                        }" class="platform" />
                                </a>

                                <dl class="specs report">
                                    <dd class="name">
                                        <a data-bind="
                                            click: function (build) { $parents[1].selectedBuild(build.master || build); $parents[1].selectedBuild.tab('#info'); },
                                            attr: {
                                                href: '#view/' + unwrap(id) + '/' + unwrap($data.platform),
                                            },">
                                            <span data-bind="text: '#'+(unwrap(conf.number) || unwrap(id))" class="build-id"></span>
                                        </a>
                                    </dd>
                                    <dd class="since">
                                        <span datetime-format="{0} ago" data-bind="
                                            text: '{0} ago{1}'.format(unwrap($data && $data.started) && unwrap($data && $data.started).elapsed() || 'moments', unwrap($data && $data.duration) && (', ('+ unwrap($data.duration) + ')')),
                                            attr: {
                                            datetime: $data && $data.started,
                                            title: [(unwrap($data && $data.started) && unwrap($data && $data.started).format
                                                && ('Started:       ' + unwrap($data && $data.started).format('DD MMM YYYY hh:mm:ss'))),
                                                (unwrap($data && $data.completed) && unwrap($data && $data.completed).format
                                                && ('\nCompleted: ' + unwrap($data && $data.completed).format('DD MMM YYYY hh:mm:ss'))),
                                                (unwrap($data && $data.duration)
                                                && ('\nDuration: ' + unwrap($data && $data.duration))),
                                            ].join('')
                                        }">
                                        </span>
                                    </dd>
                                    <dd class="status">
                                        <label>Status:</label>
                                        <span data-bind="css: 'label-' + unwrap($data.status), text: unwrap($data.statusText) || unwrap($data.status)" class="label"></span>
                                    </dd>
                                </dl>
                            </li>
                            </script>

                            <!-- <ul class="nav navbar-nav side-nav">
                                <li class="active"><a href="index.html"><i class="fa fa-bullseye"></i> Dashboard</a></li>
                                <li><a href="portfolio.html"><i class="fa fa-tasks"></i> Portfolio</a></li>                    
                                <li><a href="blog.html"><i class="fa fa-globe"></i> Blog</a></li>
                                <li><a href="forms.html"><i class="fa fa-list-ol"></i> Forms</a></li>
                                <li><a href="typography.html"><i class="fa fa-font"></i> Typography</a></li>
                                <li><a href="bootstrap-elements.html"><i class="fa fa-list-ul"></i> Bootstrap Elements</a></li>
                                <li><a href="bootstrap-grid.html"><i class="fa fa-table"></i > Bootstrap Grid</a></li>                    
                            </ul>-->
                        </div>
                    
                        <ul class="nav navbar-nav navbar-right navbar-user">
                            <li data-bind="visible: status() == 'disconnected'" class="connection alert alert-warning">
                                <strong>Disconnected!</strong> We are attempting to automatically reconnect to the server...
                                <span data-bind="attr: { datetime: disconnectedSince, title: disconnectedSince() && disconnectedSince().format('DD MMM YYYY hh:mm:ss') }, text: disconnectedSince() && disconnectedSince().elapsed()"
                                      datetime-format="since {0} ago"></span>
                            </li>
                            <li data-bind="visible: status() == 'connecting'" class="connection alert alert-info">
                                <strong>Connecting...</strong>
                            </li>
                            
                            <!-- Connected Agents -->
                            <li data-bind="visible: !$data || !(unwrap($data.agents).length)" class="connection alert alert-info">
                                No build agents are connected.
                            </li>
                            <ul data-bind="template: { name: 'tplAgentItem', foreach: $data && $data.agents }" class="agents"></ul>
                            <script type="text/html" id="tplAgentItem">
                                <li data-bind="with: $data" class="agent">
                                    <!--<a href="#">-->
                                    <!--ko foreach: platforms-->
                                    <img data-bind="
                                        css: {
                                            spin: unwrap($parent.buildingPlatform) == unwrap($data && $data.platform || $data)
                                        },
                                        attr: {
                                            alt: $data.platform || $data, src: $data.qr || ('img/platforms/' + ($data.platform || $data) + '.png')
                                        }"
                                        class="agent_img" width="40">
                                    <!--/ko-->
                                    <!--</a>-->
                                    <span class="agent_meta">
                                        <span data-bind="text: unwrap($data.conf && $data.conf.name || $data.name) || id"></span>
                                        <span class="label label-success"
                                              data-bind="cls: 'label-' + unwrap($data.status), text: unwrap($data.statusText || $data.status)"></span>
                                        <br />
                                        <span datetime-format="{0} ago"
                                              data-bind="attr: {
                                                    datetime: $data.since,
                                                    title: unwrap($data.since) &&
                                                        new Date(unwrap($data.since)).format('DD MMM YYYY hh:mm:ss') || $data.since
                                                }, text: unwrap($data.since) && (new Date(unwrap($data.since)).elapsed())"></span>
                                    </span>
                                </li>
                            </script>
                            <!-- /Connected Agents -->

                            <!--<li class="dropdown messages-dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> Messages <span class="badge">2</span> <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-header">2 New Messages</li>
                                    <li class="message-preview">
                                        <a href="#">
                                            <span class="avatar"><i class="fa fa-bell"></i></span>
                                            <span class="message">Security alert</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li class="message-preview">
                                        <a href="#">
                                            <span class="avatar"><i class="fa fa-bell"></i></span>
                                            <span class="message">Security alert</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a href="#">Go to Inbox <span class="badge">2</span></a></li>
                                </ul>
                            </li>
                            <li class="dropdown user-dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Steve Miller<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                                    <li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
                                </ul>
                            </li>-->
                        </ul>
                    </div>
                </nav>

                <div id="page-wrapper">
                    <!--<div class="row">
                        <div class="col-lg-12">
                            <h1>Dashboard <small>Dashboard Home</small></h1>
                            <div class="alert alert-success alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                Welcome to the admin dashboard! Feel free to review all pages and modify the layout to your needs. 
                                For the purpose of data visualization, additional widgets are used, so make sure you review all provided information.
                            </div>
                        </div>
                    </div>-->

                    <!-- Logs -->
                    <div class="logs collapse" id="server_logs">
                        <h1><i class="fa fa-file-text-o"></i> Server-Logs</h1>
                        <script id="tplLog" type="text/html">
                            <span data-bind="
                            text: unwrap($data && $data.date) && !isNaN(new Date(unwrap($data && $data.date)).getTime()) && new Date(unwrap($data && $data.date)).format('mm:ss.SS ') || '          ',
                            attr: {
                                title: unwrap($data && $data.date) && new Date(unwrap($data && $data.date)).format('hh:mm:ss.S, DD MMM YYYY')
                            }" class="time"></span>
                            <span class="br" data-bind="
                            css: 'p' + priority,
                            text: ($data && $data.toString(true) || '').replace(/\n/g, '\n          ')"></span>
                        </script>
                        <div class="log col-lg-12" data-bind="
                            hidden: !$data || !unwrap($data.logs).length,
                            template: { foreach: $data && $data.logs, name: 'tplLog' }">
                        </div>
                        <p>&nbsp;</p>
                    </div>
                    <!-- /Logs -->
                    
                    <div class="row">
                        <div>

                            <ul class="nav nav-tabs" id="selectedBuildTab">
                                <li class="active" data-bind="hidden: !selectedBuild() ? selectedBuild.tab('#noBuild')
                                        && false : (selectedBuild.tab() == '#noBuild' && selectedBuild.tab(initialTab) || true), css: {
                                        active:
                                        selectedBuild.tab() == '#noBuild'
                                        }">
                                    <a data-bind="click: function (data) {selectedBuild.tab('#noBuild');},"
                                       href="#noBuild">General</a>
                                </li>
                                <li data-bind="visible: selectedBuild, css: {active: selectedBuild.tab() == '#info'}"
                                    class="active" style="display: none">
                                    <a data-bind="click: function (data) {selectedBuild.tab('#info');}" href="#info">General</a>
                                </li>
                                <!-- ko foreach: selectedBuild() && selectedBuild().platforms-->
                                <li data-bind="
                                    attr: {
                                    title: [unwrap($data.platform), ' #', conf && conf.number || unwrap(id), ' &lt;span class=\'label label-{0}\'&gt;{0}&lt;/label&gt;'.format(unwrap(status) == 'success' ? '' : unwrap(status))].join(''),
                                    },
                                    css: { active: $parent.selectedBuild.tab() == '#' + unwrap($data && $data.platform) }"
                                    class="tab-icon preview">
                                    <a data-bind=" click: function (data) {
                                        $parent.selectedBuild.tab('#'
                                        + unwrap($data && $data.platform));
                                        }, attr: { href: '#' + unwrap($data && $data.platform) }">
                                        <img class="platform pull-left" height="24" data-bind="
                                                attr: {
                                                src: 'img/platforms/' + unwrap($data && $data.platform) + '.png',
                                                title: $data && $data.platform,
                                                }" />&nbsp;
                                        
                                        <span data-bind="text: $root.platformNames[unwrap($data.platform)]"></span>
                                        <i data-bind="visible: unwrap($data && $data.status) == 'success'" class="fa fa-check"></i>
                                        <i data-bind="visible: unwrap($data && $data.status) == 'failed'" class="fa fa-cross"></i>
                                        <i data-bind="visible: unwrap($data && $data.status) == 'queued'" class="fa fa-times-circle"></i>
                                        <i data-bind="visible: unwrap($data && $data.status) == 'building'" class="fa fa-repeat fa-spin"></i>
                                        <i data-bind="visible: unwrap($data && $data.status) == 'uploading'" class="fa fa-upload"></i>
                                    </a>
                                </li>
                                <!-- /ko-->
                            </ul>

                            <div id="selectedBuildTabContent" class="tab-content">
                                <div data-bind="hidden: selectedBuild" class="tab-pane active" id="noBuild">
                                    <img class="no-build" alt="no-build" src="img/platforms/no-build.png" />
                                    <span data-bind="visible: $root.status() == 'connecting'">Connecting and loading data</span>
                                    <span data-bind="visible: $root.status() == 'connected'">No build has been run yet</span>
                                </div>
                                <script id="tplLastBuild" type="text/html">
                                    <ul class="build-actions pull-right">
                                        <li data-bind="visible: status() == 'cancelled' || status() == 'failed' || status() == 'success',">
                                            <button
                                                data-bind="click: $root.rebuild.bind($root)" 
                                                class="btn btn-small btn-primary">
                                                Rebuild?
                                            </button>
                                        </li>
                                        <li data-bind="visible: status() != 'cancelled' && status() != 'failed' && status() != 'success',">
                                            <button 
                                                data-bind="click: $root.cancel.bind($root)" 
                                                class="btn btn-small btn-danger">
                                                Cancel?
                                            </button>
                                        </li>
                                        <li data-bind="visible: status() == 'success' && $root.conf.promote,">
                                            <a data-bind="attr: {href: $root.promote($data),}" 
                                               class="btn btn-small btn-success" 
                                               target="_blank">
                                                Promote?
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="row-fluid">
                                        <div class="build-qr">
                                            <a style="display: block;" data-bind="
                                                attr: {
                                                href: unwrap($data && $data.status) == 'success' ? ['/download/', unwrap(id), typeof unwrap($data.platform) == 'string' ? '/' : '', typeof unwrap($data.platform) == 'string' ? unwrap($data.platform) : ''].join('') : null,
                                                },
                                               ">
                                                <img data-bind="attr: {src: unwrap(qr)}" class="qr pull-left" alt="QR" width="124" />
                                            </a>
                                            <a style="display: block;" data-bind="
                                                visible: typeof unwrap($data.platform) == 'string',
                                                attr: {
                                                href: unwrap($data && $data.status) == 'success' ? encodeURIComponent(['/download/', unwrap(id), typeof unwrap($data.platform) == 'string' ? '/' : '', typeof unwrap($data.platform) == 'string' ? unwrap(platform) : '', '/qr'].join('')) : null,
                                                },
                                               ">
                                            </a>
                                        </div>
                                        <div class="span2 build-report no-gutter build-info">
                                            <dl class="build-status report">
                                                <dd class="name">

                                                    <b><h3 data-bind="
attr: {
title: ($data.conf.number && $data.conf.number && ('Release number: ' + $data.conf.number && $data.conf.number + '\n') || '')
+ 'Build id: #' + ($data.id || $parent && $parent.id || $parents[1]
    && $parents[1].id || $parents[2] && $parents[2].id)
},
text: '#' + ($data.conf && $data.conf.number || $data.id || $parent && $parent.id || $parents[1]
                                && $parents[1].id || $parents[2] && $parents[2].id)"
                                                           href="#"></h3></b>
                                                </dd>
                                                <dd class="status">
                                                    <label>Status:</label>
                                                    <span class="label"
                                                          data-bind="css: 'label-'+ unwrap($data.status), text: unwrap($data.statusText) || unwrap($data.status)">
                                                    </span>
                                                </dd>

                                                <dd class="started">

                                                    <label>Started:</label>
                                                    <span datetime-format="{0} ago" data-bind="
                                                        text: '{0} ago'.format(unwrap($data && $data.started) && unwrap($data && $data.started).elapsed()),
                                                        attr: {
                                                        datetime: $data && $data.started,
                                                        title: (unwrap($data && $data.started) && unwrap($data && $data.started).format
                                                        && ('Started:       ' + unwrap($data && $data.started).format('DD MMM YYYY hh:mm:ss'))) +
                                                        (unwrap($data && $data.completed) && unwrap($data && $data.completed).format
                                                        && ('\nCompleted: ' + unwrap($data && $data.completed).format('DD MMM YYYY hh:mm:ss')))
                                                    }"></span>
                                                </dd>
                                                <dd data-bind="visible: $data && $data.duration" class="duration">

                                                    <label>Duration:</label><span
                                                        data-bind="text: $data && $data.duration"></span>
                                                </dd>
                                            </dl>
                                        </div>
                                        
                                        <div data-bind="template: { foreach: $data && $data.logs, name: 'tplLog' }"
                                             class="log">
                                        </div>
                                    </div>
                                    </script>
                                    <div data-bind="visible: selectedBuild, css: { active: selectedBuild.tab() == '#info' }"
                                         class="tab-pane"
                                         id="info">
                                        <!--ko with: selectedBuild-->
                                        <!--ko template: { name: 'tplLastBuild', data: $data }-->
                                        <!--/ko-->
                                        <!--/ko-->
                                    </div>
                                    <!--ko with: selectedBuild-->
                                    <!--ko foreach: platforms-->
                                    <div class="tab-pane" 
                                         data-bind="attr: { id: $data.platform }, 
                                                    css: {active: $parents[1].selectedBuild.tab() == '#' + unwrap(platform)}">
                                        <!--ko template: { name: 'tplLastBuild', data: $data} -->
                                        <!--/ko-->
                                    </div>
                                    <!--/ko-->
                                    <!--/ko-->
                                </div>
                            </div>
                        </div>

                        <!-- <div class="row">
                            <div class="col-lg-3">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"><i class="fa fa-clock-o"></i>Alerts</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="row alert-success">
                                            <div class="col-xs-5">
                                                <i class="fa fa-thumbs-o-up fa-5x"></i>
                                            </div>
                                            <div class="col-xs-5 text-right">
                                                <p class="alerts-heading">343</p>
                                                <p class="alerts-text">New Orders</p>
                                            </div>
                                        </div>
                                        <div class="row alert-success">
                                            <div class="col-xs-5">
                                                <i class="fa fa-thumbs-o-up fa-5x"></i>
                                            </div>
                                            <div class="col-xs-5 text-right">
                                                <p class="alerts-heading">1256</p>
                                                <p class="alerts-text">Registrations</p>
                                            </div>
                                        </div>
                                        <div class="row alert-danger">
                                            <div class="col-xs-5">
                                                <i class="fa fa-thumbs-o-down fa-5x"></i>
                                            </div>
                                            <div class="col-xs-5 text-right">
                                                <p class="alerts-heading">4</p>
                                                <p class="alerts-text">Errors</p>
                                            </div>
                                        </div>
                                        <div class="row alert-success">
                                            <div class="col-xs-5">
                                                <i class="fa fa-thumbs-o-up fa-5x"></i>
                                            </div>
                                            <div class="col-xs-5 text-right">
                                                <p class="alerts-heading">11</p>
                                                <p class="alerts-text">Mentions</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-9">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Traffic Estimations for last 30 days</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="shieldui-chart1"></div>
                                    </div>
                                </div>
                            </div>
                        </div>-->
                    </div>
                    <!-- /#page-wrapper -->
                </div>
                <!-- /#wrapper -->

                <!-- <script src="js/jquery-2.1.1.min.js"></script> -->
                <script src="js/jquery.cookie.js"></script>
                <script src="js/qr-js/qr.min.js"></script>
                <script src="js/bundle.js"></script>

                <script id="start"></script>
        <!-- var serverBrowser = new ServerBrowser({"protocol":"http://", "host":"localhost", "port":8300});-->

            </body>
        </html>