mc-core/ui/assets/js/templates/dashboard.html

Deployments made simple

<h1>Dashboard</h1>

<hr>

<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                Active Pipeline Executions
            </div>
            <table class="table">
                <tr ng-if="activePipelines.length === 0">
                    <td class="text-center"><em class="text-muted">No active pipeline executions</em></td>
                </tr>
                <tr ng-repeat="pe in activePipelines">
                    <td>
                        <a ui-sref="pipeline-execution-details({id: pe.id})">Project Name » {{ pe.config_snapshot.pipeline.name }} » #{{ pe.id }}</a>
                        <br><small class="text-muted"></small>
                        <table class="stage-bar">
                            <tbody>
                            <tr>
                                <td ng-repeat="stage in pe.stages" ng-class="{'running pulse':stage.status === 'running', successful: stage.status === 'succeeded', failure: stage.status === 'failed'}">&nbsp;</td>
                            </tr>
                            </tbody>
                        </table>
                        <small class="text-muted"><span ng-if="!pe.current_stage_num">Starting</span><span ng-if="pe.current_stage_num">Stage {{ pe.current_stage_num }} of {{ pe.stages.length }} &ndash; {{ pe.current_stage_name }}</span></small>
                    </td>
                </tr>
            </table>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                Recent Pipeline Executions
            </div>
            <table class="table">
                <tbody>
                <tr ng-repeat="pe in pipelineExecutions">
                    <td class="text-center" style="vertical-align:middle;width: 30px;padding-right: 0;">
                        <i class="fa fa-circle text-info" ng-if="pe.status === 'created'"></i>
                        <i class="fa fa-circle text-info" ng-if="pe.status === 'queued'"></i>
                        <i class="fa fa-circle text-info pulse" ng-if="pe.status === 'running'"></i>
                        <i class="fa fa-circle text-warning" ng-if="pe.status === 'awaiting_confirmation'"></i>
                        <i class="fa fa-circle text-danger" ng-if="pe.status === 'failed'"></i>
                        <i class="fa fa-circle text-success" ng-if="pe.status === 'succeeded'"></i>
                    </td>
                    <td><a ui-sref="pipeline-execution-details({id: pe.id})">Execution #{{ pe.id }}<span ng-if="pe.status === 'awaiting_confirmation'"> &ndash; Awaiting Confirmation</span></a><br><small class="text-muted">{{ pe.pipeline_config_name }}</small></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <a ui-sref="pipeline-executions">View All</a>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>

    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                Monitoring Alerts
            </div>
            <table class="table">
                <tr>
                    <td class="text-center"><em class="text-muted">No alerts</em></td>
                </tr>
                <tr>
                    <td class="text-center">
                        <a ui-sref="health">View All Checks</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>