Finish mobilification of org view
This commit is contained in:
parent
531ddadb8a
commit
f1ea20315a
10 changed files with 153 additions and 112 deletions
|
@ -10,6 +10,7 @@ from auth.permissions import AdministerOrganizationPermission, AdministerOrganiz
|
||||||
from auth.auth_context import get_authenticated_user
|
from auth.auth_context import get_authenticated_user
|
||||||
from data import model
|
from data import model
|
||||||
from auth import scopes
|
from auth import scopes
|
||||||
|
from app import avatar
|
||||||
|
|
||||||
|
|
||||||
def log_view(log):
|
def log_view(log):
|
||||||
|
@ -25,6 +26,7 @@ def log_view(log):
|
||||||
'kind': 'user',
|
'kind': 'user',
|
||||||
'name': log.performer.username,
|
'name': log.performer.username,
|
||||||
'is_robot': log.performer.robot,
|
'is_robot': log.performer.robot,
|
||||||
|
'avatar': avatar.get_data_for_user(log.performer)
|
||||||
}
|
}
|
||||||
|
|
||||||
return view
|
return view
|
||||||
|
|
100
static/css/directives/ui/logs-view.css
Normal file
100
static/css/directives/ui/logs-view.css
Normal file
|
@ -0,0 +1,100 @@
|
||||||
|
.logs-view-element .header {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.logs-view-element {
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element #bar-chart {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .date-line {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .date-line-caption {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .manager-header {
|
||||||
|
padding-bottom: 72px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .table-container {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .manager-header .header-text {
|
||||||
|
font-size: 24px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .manager-header .header-text .mini {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .logs-date-picker {
|
||||||
|
width: 122px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .manager-header input {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .manager-header .right {
|
||||||
|
float: right;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .log i.fa {
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .log .circle {
|
||||||
|
display: inline-block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-top: 6px;
|
||||||
|
vertical-align: middle;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .log .log-description {
|
||||||
|
margin-left: 20px;
|
||||||
|
display: block;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .log .log-description code {
|
||||||
|
max-width: 300px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .log-performer {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-view-element .side-controls {
|
||||||
|
text-align: right;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
|
@ -40,7 +40,7 @@
|
||||||
right: 0px;
|
right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.manager-header .manager-header-side-controls .btn {
|
.manager-header .manager-header-side-controls .btn, .manager-header .manager-header-side-controls .popup-input-button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,6 +12,13 @@
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.teams-manager .control-col {
|
||||||
|
padding-left: 55px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.teams-manager .header-col .info-icon {
|
.teams-manager .header-col .info-icon {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -501,71 +501,6 @@ i.toggle-icon:hover {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logs-view-element .header {
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logs-view-element .header .header-text {
|
|
||||||
font-size: 24px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logs-view-element .header .header-text .mini {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #999;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logs-view-element .logs-date-picker {
|
|
||||||
width: 122px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logs-view-element .header input {
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logs-view-element .header .right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logs-view-element .log i.fa {
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logs-view-element .log .circle {
|
|
||||||
display: inline-block;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 6px;
|
|
||||||
margin-top: 6px;
|
|
||||||
vertical-align: middle;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logs-view-element .log .log-description {
|
|
||||||
margin-left: 20px;
|
|
||||||
display: block;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logs-view-element .log .log-description code {
|
|
||||||
max-width: 300px;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logs-view-element .log-performer {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.billing-options-element .current-card {
|
.billing-options-element .current-card {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
|
@ -1,17 +1,14 @@
|
||||||
<div class="application-manager-element">
|
<div class="application-manager-element">
|
||||||
<div class="cor-loader" ng-show="loading"></div>
|
<div class="cor-loader" ng-show="loading"></div>
|
||||||
<div ng-show="!loading">
|
<div ng-show="!loading">
|
||||||
<div class="manager-header">
|
<div class="manager-header" header-title="OAuth Applications">
|
||||||
<div class="side-controls">
|
<span class="popup-input-button" placeholder="'Application Name'"
|
||||||
<span class="popup-input-button" placeholder="'Application Name'"
|
submitted="createApplication(value)">
|
||||||
submitted="createApplication(value)">
|
<i class="fa fa-plus"></i> Create New Application
|
||||||
<i class="fa fa-plus"></i> Create New Application
|
</span>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<h3>OAuth Applications</h3>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="manager-header section-description-header">
|
<div class="section-description-header">
|
||||||
The OAuth Applications panel allows organizations to define custom OAuth applications that can be used by internal or external customers to access <span class="registry-name"></span> data on behalf of the customers. More information about the <span class="registry-name"></span> API can be found by contacting support.
|
The OAuth Applications panel allows organizations to define custom OAuth applications that can be used by internal or external customers to access <span class="registry-name"></span> data on behalf of the customers. More information about the <span class="registry-name"></span> API can be found by contacting support.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -23,7 +20,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table class="co-table" ng-show="applications.length">
|
<table class="cor-table" ng-show="applications.length">
|
||||||
<thead>
|
<thead>
|
||||||
<td>Application Name</td>
|
<td>Application Name</td>
|
||||||
<td>Application URI</td>
|
<td>Application URI</td>
|
||||||
|
|
|
@ -1,16 +1,17 @@
|
||||||
<div class="logs-view-element">
|
<div class="logs-view-element">
|
||||||
<div class="header">
|
<div class="manager-header" header-title="Usage Logs">
|
||||||
<span class="header-text">
|
<span id="logs-range" class="mini">
|
||||||
<span ng-show="!performer">Usage Logs</span>
|
<span class="date-line">
|
||||||
<span class="entity-reference" entity="performer" ng-show="performer"></span>
|
<span class="date-line-caption">From</span>
|
||||||
<span id="logs-range" class="mini">
|
|
||||||
From
|
|
||||||
<input type="text" class="logs-date-picker input-sm" name="start" ng-model="logStartDate" data-max-date="{{ logEndDate }}" data-container="body" bs-datepicker/>
|
<input type="text" class="logs-date-picker input-sm" name="start" ng-model="logStartDate" data-max-date="{{ logEndDate }}" data-container="body" bs-datepicker/>
|
||||||
<span class="add-on">to</span>
|
</span>
|
||||||
|
|
||||||
|
<span class="date-line">
|
||||||
|
<span class="date-line-caption add-on">to</span>
|
||||||
<input type="text" class="logs-date-picker input-sm" name="end" ng-model="logEndDate" data-min-date="{{ logStartDate }}" bs-datepicker/>
|
<input type="text" class="logs-date-picker input-sm" name="end" ng-model="logEndDate" data-min-date="{{ logStartDate }}" bs-datepicker/>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="right">
|
<span class="hidden-xs right">
|
||||||
<i class="fa fa-bar-chart-o toggle-icon" ng-class="chartVisible ? 'active' : ''"
|
<i class="fa fa-bar-chart-o toggle-icon" ng-class="chartVisible ? 'active' : ''"
|
||||||
ng-click="toggleChart()" data-title="Toggle Chart" bs-tooltip="tooltip.title"></i>
|
ng-click="toggleChart()" data-title="Toggle Chart" bs-tooltip="tooltip.title"></i>
|
||||||
<a href="{{ logsPath }}" download="usage-log.json" target="_new">
|
<a href="{{ logsPath }}" download="usage-log.json" target="_new">
|
||||||
|
@ -19,13 +20,12 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cor-loader-inline" ng-show="loading"></div>
|
<div>
|
||||||
<div ng-show="!loading">
|
|
||||||
<div id="bar-chart" style="width: 800px; height: 500px;" ng-show="chartVisible">
|
<div id="bar-chart" style="width: 800px; height: 500px;" ng-show="chartVisible">
|
||||||
<svg style="width: 800px; height: 500px;"></svg>
|
<svg style="width: 800px; height: 500px;"></svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="side-controls">
|
<div class="hidden-xs side-controls">
|
||||||
<div class="result-count">
|
<div class="result-count">
|
||||||
Showing {{(logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150).length}} of
|
Showing {{(logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150).length}} of
|
||||||
{{(logs | visibleLogFilter:kindsAllowed | filter:search).length}} matching logs
|
{{(logs | visibleLogFilter:kindsAllowed | filter:search).length}} matching logs
|
||||||
|
@ -36,14 +36,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
<table class="table">
|
<div class="cor-loader" ng-show="loading"></div>
|
||||||
<thead>
|
<table class="cor-table">
|
||||||
<th>Description</th>
|
<thead>
|
||||||
<th style="min-width: 226px">Date/Time</th>
|
<td>Description</td>
|
||||||
<th>User/Token/App</th>
|
<td style="min-width: 226px">Date/Time</td>
|
||||||
</thead>
|
<td>User/Token/App</td>
|
||||||
|
</thead>
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr class="log" ng-repeat="log in (logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150)">
|
<tr class="log" ng-repeat="log in (logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150)">
|
||||||
<td>
|
<td>
|
||||||
<span class="circle" style="{{ 'background: ' + getColor(log.kind) }}"></span>
|
<span class="circle" style="{{ 'background: ' + getColor(log.kind) }}"></span>
|
||||||
|
@ -74,8 +74,7 @@
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</table>
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,17 +1,14 @@
|
||||||
<div class="prototype-manager-element">
|
<div class="prototype-manager-element">
|
||||||
<div class="cor-loader" ng-show="loading"></div>
|
<div class="cor-loader" ng-show="loading"></div>
|
||||||
<div ng-show="!loading">
|
<div ng-show="!loading">
|
||||||
<div class="manager-header">
|
<div class="manager-header" header-title="Default Permissions">
|
||||||
<div class="side-controls">
|
<button class="btn btn-primary" ng-click="showAddDialog()">
|
||||||
<button class="btn btn-primary" ng-click="showAddDialog()">
|
<i class="fa fa-plus"></i>
|
||||||
<i class="fa fa-plus"></i>
|
Create Default Permission
|
||||||
Create Default Permission
|
</button>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<h3>Default Permissions</h3>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="manager-header section-description-header">
|
<div class="section-description-header">
|
||||||
The Default permissions panel defines permissions that should be granted automatically to a repository when it is created, in addition to the default of the repository's
|
The Default permissions panel defines permissions that should be granted automatically to a repository when it is created, in addition to the default of the repository's
|
||||||
creator. Permissions are assigned based on the user who created the repository.
|
creator. Permissions are assigned based on the user who created the repository.
|
||||||
<br><br>
|
<br><br>
|
||||||
|
@ -26,7 +23,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table class="co-table" ng-show="prototypes.length">
|
<table class="cor-table" ng-show="prototypes.length">
|
||||||
<thead>
|
<thead>
|
||||||
<td>
|
<td>
|
||||||
<span class="context-tooltip"
|
<span class="context-tooltip"
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
<div class="teams-manager-element">
|
<div class="teams-manager-element">
|
||||||
<div class="manager-header">
|
<div class="manager-header" header-title="Teams">
|
||||||
<span class="popup-input-button" pattern="TEAM_PATTERN" placeholder="'Team Name'"
|
<span class="popup-input-button" pattern="TEAM_PATTERN" placeholder="'Team Name'"
|
||||||
submitted="createTeam(value)" ng-show="organization.is_admin">
|
submitted="createTeam(value)" ng-show="organization.is_admin">
|
||||||
<i class="fa fa-plus" style="margin-right: 6px;"></i> Create New Team
|
<i class="fa fa-plus" style="margin-right: 6px;"></i> Create New Team
|
||||||
</span>
|
</span>
|
||||||
<h3>Teams</h3>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row hidden-xs">
|
<div class="row hidden-xs">
|
||||||
|
@ -33,7 +32,7 @@
|
||||||
|
|
||||||
<div class="team-description markdown-view" content="team.description" first-line-only="true"></div>
|
<div class="team-description markdown-view" content="team.description" first-line-only="true"></div>
|
||||||
|
|
||||||
<div class="team-member-list" ng-if="members[team.name]">
|
<div class="team-member-list hidden-xs" ng-if="members[team.name]">
|
||||||
<div class="cor-loader" ng-if="!members[team.name].members"></div>
|
<div class="cor-loader" ng-if="!members[team.name].members"></div>
|
||||||
<span class="team-member"
|
<span class="team-member"
|
||||||
ng-repeat="member in members[team.name].members | orderBy:'is_robot' | limitTo: 20">
|
ng-repeat="member in members[team.name].members | orderBy:'is_robot' | limitTo: 20">
|
||||||
|
|
|
@ -745,10 +745,15 @@ angular.module("core-ui", [])
|
||||||
return clone;
|
return clone;
|
||||||
};
|
};
|
||||||
|
|
||||||
var appendRepeater = function(div, tr, headers) {
|
var appendRepeater = function(div, tr, headers, includeRepeat) {
|
||||||
// Find all the tds directly under the tr and convert into a header + value span.
|
// Find all the tds directly under the tr and convert into a header + value span.
|
||||||
tr.children('td').each(function(idx, td) {
|
tr.children('td').each(function(idx, td) {
|
||||||
var displayer = cloneWithAttr(tr, 'div');
|
var displayer = cloneWithAttr(tr, 'div');
|
||||||
|
|
||||||
|
if (!includeRepeat) {
|
||||||
|
displayer.removeAttr('ng-repeat');
|
||||||
|
}
|
||||||
|
|
||||||
displayer.append(headers[idx].clone(true).addClass('mobile-col-header'));
|
displayer.append(headers[idx].clone(true).addClass('mobile-col-header'));
|
||||||
displayer.append(cloneWithAttr(td, 'div', true).addClass('mobile-col-value'));
|
displayer.append(cloneWithAttr(td, 'div', true).addClass('mobile-col-value'));
|
||||||
div.append(displayer);
|
div.append(displayer);
|
||||||
|
@ -771,10 +776,10 @@ angular.module("core-ui", [])
|
||||||
// itself should be a tr.
|
// itself should be a tr.
|
||||||
if (repeater.nodeName.toLowerCase() == 'tbody') {
|
if (repeater.nodeName.toLowerCase() == 'tbody') {
|
||||||
$(repeater).children().each(function(idx, tr) {
|
$(repeater).children().each(function(idx, tr) {
|
||||||
appendRepeater(divRepeater, $(tr), headers);
|
appendRepeater(divRepeater, $(tr), headers, true);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
appendRepeater(divRepeater, $(repeater), headers);
|
appendRepeater(divRepeater, $(repeater), headers, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
var repeaterBody = $(document.createElement('tbody'));
|
var repeaterBody = $(document.createElement('tbody'));
|
||||||
|
|
Reference in a new issue