vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Check in all new plan manager directive and add a nice donut chart for the repository usage by the user/org

Browse source
This commit is contained in:
Joseph Schorr 2013-11-06 17:30:20 -05:00
parent 934acce6d4
commit a6a225dd5f
6 changed files with 377 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

85
static/partials/org-admin.html
View file

@ -13,94 +13,17 @@
<!-- Side tabs -->
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#usage">Current Usage</a></li>
<li><a href="javascript:void(0)" data-toggle="tab" data-target="#plan">Plan/Billing</a></li>
<li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#plan">Plan and Usage</a></li>
<li><a href="javascript:void(0)" data-toggle="tab" data-target="#members">Members</a></li>
</ul>
</div>
<!-- Content -->
<div class="col-md-10">
<div class="tab-content">
<!-- Usage tab -->
<div id="usage" class="tab-pane active">
<div class="alert alert-danger" ng-show="overLimit">
You are using more private repositories than your plan allows, please
<a href="javascript:void(0)" data-toggle="tab" data-target="#plan">upgrade your subscription</a>
to avoid disruptions in your organization's service.
</div>
<div class="alert alert-warning" ng-show="nearLimit">
You are nearing the number of allowed private repositories. It might be time to think about
<a href="javascript:void(0)" data-toggle="tab" data-target="#plan">upgrading your subscription</a>
to avoid future disruptions in your organization's service.
</div>
<!-- Subscription -->
<i class="fa fa-spinner fa-spin fa-3x" ng-show="planLoading"></i>
<div class="row" ng-show="!planLoading && subscription">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
Current Usage
</div>
<div class="panel-body">
<div class="used-description">
<b>{{ subscription.usedPrivateRepos }}</b> of <b>{{ subscribedPlan.privateRepos }}</b> private repositories used
</div>
<div class="progress">
<div ng-class="'progress-bar ' + (planUsagePercent > 90 ? 'progress-bar-danger' : '')" role="progressbar" aria-valuenow="{{ subscription.usedPrivateRepos }}" aria-valuemin="0" aria-valuemax="{{ subscribedPlan.privateRepos }}" style="width: {{ planUsagePercent }}%;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-content">
<!-- Plans tab -->
<div id="plan" class="tab-pane">
<div class="alert alert-danger" ng-show="overLimit">
You are using more private repositories than your plan allows, please
upgrade your subscription to avoid disruptions in your organization's service.
</div>
<div class="alert alert-warning" ng-show="nearLimit">
You are nearing the number of allowed private repositories. It might be time to think about
upgrading your subscription to avoid future disruptions in your organization's service.
</div>
<i class="fa fa-spinner fa-spin fa-3x" ng-show="planChanging"></i>
<table class="table table-hover plans-table" ng-show="!planChanging">
<thead>
<td>Plan</td>
<td>Private Repositories</td>
<td style="min-width: 64px">Price</td>
<td></td>
</thead>
<tr ng-repeat="plan in plans" ng-class="(subscription.plan === plan.stripeId) ? getActiveSubClass() : ''">
<td>{{ plan.title }}</td>
<td>{{ plan.privateRepos }}</td>
<td><div class="plan-price">${{ plan.price / 100 }}</div></td>
<td class="controls">
<div ng-switch='plan.stripeId'>
<div ng-switch-when='bus-free'>
<button class="btn button-hidden">Hidden!</button>
</div>
<div ng-switch-default>
<button class="btn btn-primary" ng-show="subscription.plan === 'bus-free'" ng-click="subscribe(plan.stripeId)">Subscribe</button>
<button class="btn btn-default" ng-hide="subscription.plan === 'bus-free' || subscription.plan === plan.stripeId"
ng-click="changeSubscription(plan.stripeId)">
Change
</button>
<button class="btn btn-danger" ng-show="subscription.plan === plan.stripeId" ng-click="cancelSubscription()">Cancel</button>
</div>
</div>
</td>
</tr>
</table>
<div id="plan" class="tab-pane active">
<div class="plan-manager" organization="organization.name"></div>
</div>
<!-- Members tab -->