Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table Empty States V2 #497

Closed
wants to merge 1 commit into from
+167 −168
Closed

Table Empty States V2 #497

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 38 additions & 36 deletions app/views/browse/build-config.html
View file
Original file line number Diff line number Diff line change
@@ -149,44 +149,46 @@ <h2>No builds.</h2>

<build-trends-chart builds="builds"></build-trends-chart>
</div>
<div class="empty-state-message text-center" ng-if="(builds | hashSize) == 0">
<h2>{{emptyMessage}}</h2>
</div>
<div ng-if="loaded && (unfilteredBuilds | hashSize) > 0">
<div class="table-filter-wrapper">
<project-filter></project-filter>
<div ng-if="(builds | hashSize) !== 0">
<div class="table-filter-wrapper">
<project-filter></project-filter>
</div>
<table ng-if="!(buildConfig | isJenkinsPipelineStrategy)" class="table table-bordered table-hover table-mobile">
<thead>
<tr>
<th>Build</th>
<th>Status</th>
<th>Created</th>
</tr>
</thead>
<tbody ng-repeat="build in orderedBuilds">
<tr>
<td data-title="Build">
<!-- Build number and link -->
<span ng-if="build | annotation : 'buildNumber'">
<a ng-href="{{build | navigateResourceURL}}">#{{build | annotation : 'buildNumber'}}</a>
</span>
<span ng-if="!(build | annotation : 'buildNumber')">
<a ng-href="{{build | navigateResourceURL}}">{{build.metadata.name}}</a>
</span>
<span ng-if="build.status.message" class="pficon pficon-warning-triangle-o" style="cursor: help;" data-toggle="popover" data-trigger="hover" dynamic-content="{{build.status.message}}"></span>
</td>
<td data-title="Status">
<div row class="status">
<build-status build="build"></build-status>
</div>
</td>
<td data-title="Created">
<relative-timestamp timestamp="build.metadata.creationTimestamp"></relative-timestamp>
</td>
</tr>
</tbody>
</table>
</div>
<table ng-if="!(buildConfig | isJenkinsPipelineStrategy)" class="table table-bordered table-hover table-mobile">
<thead>
<tr>
<th>Build</th>
<th>Status</th>
<th>Created</th>
</tr>
</thead>
<tbody ng-if="(builds | hashSize) == 0">
<tr><td colspan="3"><em>{{emptyMessage}}</em></td></tr>
</tbody>
<tbody ng-repeat="build in orderedBuilds">
<tr>
<td data-title="Build">
<!-- Build number and link -->
<span ng-if="build | annotation : 'buildNumber'">
<a ng-href="{{build | navigateResourceURL}}">#{{build | annotation : 'buildNumber'}}</a>
</span>
<span ng-if="!(build | annotation : 'buildNumber')">
<a ng-href="{{build | navigateResourceURL}}">{{build.metadata.name}}</a>
</span>
<span ng-if="build.status.message" class="pficon pficon-warning-triangle-o" style="cursor: help;" data-toggle="popover" data-trigger="hover" dynamic-content="{{build.status.message}}"></span>
</td>
<td data-title="Status">
<div row class="status">
<build-status build="build"></build-status>
</div>
</td>
<td data-title="Created">
<relative-timestamp timestamp="build.metadata.creationTimestamp"></relative-timestamp>
</td>
</tr>
</tbody>
</table>
<div ng-if="buildConfig | isJenkinsPipelineStrategy">
<build-pipeline build="build" ng-repeat="build in orderedBuilds track by (build | uid)"></build-pipeline>
<table ng-if="(builds | hashSize) === 0" class="table table-bordered table-hover table-mobile">
14 changes: 9 additions & 5 deletions app/views/browse/deployment-config.html
View file
Original file line number Diff line number Diff line change
@@ -202,10 +202,17 @@ <h3>Triggers</h3>
<annotations annotations="deploymentConfig.metadata.annotations"></annotations>
</div>
<div ng-if="loaded">
<div class="table-filter-wrapper">
<div class="empty-state-message text-center" ng-if="(deployments | hashSize) == 0">
<h2>{{emptyMessage}}</h2>
</div>
<div
class="table-filter-wrapper"
ng-if="(deployments | hashSize) !== 0">
<project-filter></project-filter>
</div>
<table class="table table-bordered table-hover table-mobile">
<table
class="table table-bordered table-hover table-mobile"
ng-if="(deployments | hashSize) !== 0">
<thead>
<tr>
<th>Deployment</th>
@@ -214,9 +221,6 @@ <h3>Triggers</h3>
<th>Trigger</th>
</tr>
</thead>
<tbody ng-if="(deployments | hashSize) == 0">
<tr><td colspan="4"><em>{{emptyMessage}}</em></td></tr>
</tbody>
<tbody ng-repeat="deployment in deployments | orderObjectsByDate : true">
<tr>
<td data-title="Deployment">
16 changes: 9 additions & 7 deletions app/views/browse/imagestream.html
View file
Original file line number Diff line number Diff line change
@@ -57,7 +57,12 @@ <h1>
</dl>
<annotations annotations="imageStream.metadata.annotations"></annotations>
</div>
<table class="table table-bordered table-hover table-mobile">
<div class="empty-state-message text-center" ng-if="(tagsByName | hashSize) == 0">
<h2>{{emptyMessage}}</h2>
</div>
<table
class="table table-bordered table-hover table-mobile"
ng-if="(tagsByName | hashSize) !== 0">
<thead>
<tr>
<th>Tag</th>
@@ -67,9 +72,6 @@ <h1>
<th>Pull Spec</th>
</tr>
</thead>
<tbody ng-if="(tagsByName | hashSize) == 0">
<tr><td colspan="5"><em>{{emptyMessage}}</em></td></tr>
</tbody>
<tbody ng-repeat-start="tag in tagsByName | orderBy : 'name'">
<tr>
<td data-title="Tag"><a href="{{imageStream | navigateResourceURL}}/{{tag.name}}">{{tag.name}}</a></td>
@@ -127,7 +129,7 @@ <h1>
<div class="pull-spec truncate hidden-xs"
ng-attr-title="{{tag.status.items[0].dockerImageReference}}">
{{tag.status.items[0].dockerImageReference}}
</div>
</div>
</div>
</td>
</tr>
@@ -150,8 +152,8 @@ <h1>
<div class="pull-spec truncate hidden-xs"
ng-attr-title="{{item.dockerImageReference}}">
{{item.dockerImageReference}}
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
10 changes: 6 additions & 4 deletions app/views/browse/routes.html
View file
Original file line number Diff line number Diff line change
@@ -24,7 +24,12 @@ <h1>Routes</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 gutter-top">
<table class="table table-bordered table-hover table-mobile">
<div class="empty-state-message text-center" ng-if="(routes | hashSize) == 0">
<h2>{{emptyMessage}}</h2>
</div>
<table
class="table table-bordered table-hover table-mobile"
ng-if="(routes | hashSize) !== 0">
<thead>
<tr>
<th>Name</th>
@@ -34,9 +39,6 @@ <h1>Routes</h1>
<th>TLS Termination</th>
</tr>
</thead>
<tbody ng-if="(routes | hashSize) == 0">
<tr><td colspan="5"><em>{{emptyMessage}}</em></td></tr>
</tbody>
<tbody ng-repeat="route in routes | orderObjectsByDate : true">
<tr>
<td data-title="Name">
10 changes: 6 additions & 4 deletions app/views/builds.html
View file
Original file line number Diff line number Diff line change
@@ -21,7 +21,12 @@ <h1>Builds</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 gutter-top">
<table class="table table-bordered table-hover table-mobile">
<div class="empty-state-message text-center" ng-if="!(latestByConfig | hashSize)">
<h2>{{emptyMessage}}</h2>
</div>
<table
class="table table-bordered table-hover table-mobile"
ng-if="(latestByConfig | hashSize)">
<thead>
<tr>
<th>Name</th>
@@ -32,9 +37,6 @@ <h1>Builds</h1>
<th>Source</th>
</tr>
</thead>
<tbody ng-if="!(latestByConfig | hashSize)">
<tr><td colspan="6"><em>{{emptyMessage}}</em></td></tr>
</tbody>
<tbody ng-repeat="(buildConfigName, latestBuild) in latestByConfig">
<!-- Build config with no builds-->
<tr ng-if="!latestBuild">
12 changes: 6 additions & 6 deletions app/views/deployments.html
View file
Original file line number Diff line number Diff line change
@@ -21,7 +21,12 @@ <h1>Deployments</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 gutter-top">
<table class="table table-bordered table-hover table-mobile">
<div class="empty-state-message text-center" ng-if="showEmptyMessage()">
<h2>{{emptyMessage}}</h2>
</div>
<table
class="table table-bordered table-hover table-mobile"
ng-if="!showEmptyMessage()">
<thead>
<tr>
<th>Name</th>
@@ -31,11 +36,6 @@ <h1>Deployments</h1>
<th>Trigger</th>
</tr>
</thead>
<!-- message doesnt show right when there are both dcs and rcs and they are all filtered -->
<tbody ng-if="showEmptyMessage()">
<!-- If there are no deployment configs, and if the only 'deployments' are just replication controllers -->
<tr><td colspan="5"><em>{{emptyMessage}}</em></td></tr>
</tbody>
<tbody ng-repeat="(deploymentConfigName, deploymentConfigDeployments) in deploymentsByDeploymentConfig" ng-if="deploymentConfigName && (deploymentConfigs[deploymentConfigName] || !unfilteredDeploymentConfigs[deploymentConfigName])">
<!-- Deployment config with no deployments-->
<tr ng-if="(deploymentConfigDeployments | hashSize) == 0 && deploymentConfigName">
26 changes: 7 additions & 19 deletions app/views/directives/events.html
View file
Original file line number Diff line number Diff line change
@@ -17,7 +17,13 @@
<div pf-sort config="sortConfig" class="sort-controls"></div>
</div>
</div>
<table class="table table-bordered table-condensed table-mobile table-hover events-table" ng-class="{ 'table-empty': (filteredEvents | hashSize) === 0 }">
<div class="empty-state-message text-center" ng-if="(filteredEvents | hashSize) === 0">
<h2>{{emptyMessage}}</h2>
</div>
<table
class="table table-bordered table-condensed table-mobile table-hover events-table"
ng-class="{ 'table-empty': (filteredEvents | hashSize) === 0 }"
ng-if="(filteredEvents | hashSize) !== 0">
<thead>
<tr>
<th id="time">Time</th>
@@ -34,24 +40,6 @@
<th id="message"><span class="hidden-xs-inline visible-sm-inline visible-md-inline hidden-lg-inline">Reason and </span>Message</th>
</tr>
</thead>
<tbody ng-if="(filteredEvents | hashSize) === 0">
<tr>
<td class="hidden-lg" colspan="3">
<span ng-if="(events | hashSize) === 0"><em>No events to show.</em></span>
<span ng-if="(events | hashSize) > 0">
All events hidden by filter.
<a href="" ng-click="filter.text = ''" role="button">Clear filter</a>
</span>
</td>
<td class="hidden-xs hidden-sm hidden-md" colspan="6">
<span ng-if="(events | hashSize) === 0"><em>No events to show.</em></span>
<span ng-if="(events | hashSize) > 0">
All events hidden by filter.
<a href="" ng-click="filter.text = ''" role="button">Clear filter</a>
</span>
</td>
</tr>
</tbody>
<tbody ng-repeat="event in filteredEvents">
<tr>
<td data-title="Time" class="nowrap">{{event.lastTimestamp | date:'mediumTime'}}</td>
10 changes: 6 additions & 4 deletions app/views/directives/pods-table.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
<table class="table table-bordered table-hover table-mobile">
<div class="empty-state-message text-center" ng-if="(pods | hashSize) == 0">
<h2>{{emptyMessage}}</h2>
</div>
<table
class="table table-bordered table-hover table-mobile"
ng-if="(pods | hashSize) !== 0">
<thead>
<tr>
<th>Name</th>
@@ -8,9 +13,6 @@
<th>Age</th>
</tr>
</thead>
<tbody ng-if="(pods | hashSize) == 0">
<tr><td colspan="5"><em>{{emptyMessage || 'No pods to show'}}</em></td></tr>
</tbody>
<tbody ng-repeat="pod in pods | orderObjectsByDate : true">
<tr>
<td data-title="Name">
10 changes: 6 additions & 4 deletions app/views/images.html
View file
Original file line number Diff line number Diff line change
@@ -21,7 +21,12 @@ <h1>Image Streams</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 gutter-top">
<table class="table table-bordered table-hover table-mobile">
<div class="empty-state-message text-center" ng-if="(imageStreams | hashSize) == 0">
<h2>{{emptyMessage}}</h2>
</div>
<table
class="table table-bordered table-hover table-mobile"
ng-if="(imageStreams | hashSize) !== 0">
<thead>
<tr>
<th>Name</th>
@@ -30,9 +35,6 @@ <h1>Image Streams</h1>
<th>Updated</th>
</tr>
</thead>
<tbody ng-if="(imageStreams | hashSize) == 0">
<tr><td colspan="4"><em>{{emptyMessage}}</em></td></tr>
</tbody>
<tbody ng-repeat="imageStream in imageStreams | orderObjectsByDate : true">
<tr>
<td data-title="Name"><a href="{{imageStream | navigateResourceURL}}">{{imageStream.metadata.name}}</a></td>
11 changes: 7 additions & 4 deletions app/views/other-resources.html
View file
Original file line number Diff line number Diff line change
@@ -28,7 +28,13 @@ <h1>Other Resources</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 gutter-top">
<table class="table table-bordered table-mobile" ng-class="{ 'table-empty': (resources | hashSize) === 0 }">
<div class="empty-state-message text-center" ng-if="(resources | hashSize) == 0">
<h2>{{emptyMessage}}</h2>
</div>
<table
class="table table-bordered table-mobile"
ng-class="{ 'table-empty': (resources | hashSize) === 0 }"
ng-if="(resources | hashSize) !== 0">
<thead>
<tr>
<th>Name</th>
@@ -37,9 +43,6 @@ <h1>Other Resources</h1>
<th><span class="sr-only">Actions</span></th>
</tr>
</thead>
<tbody ng-if="(resources | hashSize) == 0">
<tr><td colspan="4"><em>{{emptyMessage}}</em></td></tr>
</tbody>
<tbody ng-repeat="resource in resources | orderObjectsByDate : true">
<tr>
<td data-title="Name">{{resource.metadata.name}}</td>
10 changes: 6 additions & 4 deletions app/views/services.html
View file
Original file line number Diff line number Diff line change
@@ -21,7 +21,12 @@ <h1>Services</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 gutter-top">
<table class="table table-bordered table-hover table-mobile">
<div class="empty-state-message text-center" ng-if="(services | hashSize) == 0">
<h2>{{emptyMessage}}</h2>
</div>
<table
class="table table-bordered table-hover table-mobile"
ng-if="(services | hashSize) !== 0">
<thead>
<tr>
<th>Name</th>
@@ -32,9 +37,6 @@ <h1>Services</h1>
<th>Age</th>
</tr>
</thead>
<tbody ng-if="(services | hashSize) == 0">
<tr><td colspan="6"><em>{{emptyMessage}}</em></td></tr>
</tbody>
<tbody ng-repeat="service in services | orderObjectsByDate : true">
<tr>
<td data-title="Name"><a href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a></td>
15 changes: 10 additions & 5 deletions app/views/storage.html
View file
Original file line number Diff line number Diff line change
@@ -21,7 +21,12 @@ <h1>Storage</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="section-header page-header-bleed-right page-header-bleed-left">
<div class="empty-state-message text-center" ng-if="(pvcs | hashSize) === 0">
<h2>{{emptyMessage}}</h2>
</div>
<div
class="section-header page-header-bleed-right page-header-bleed-left"
ng-if="(pvcs | hashSize) !== 0">
<div class="hidden-xs pull-right" ng-if="project && ('persistentvolumeclaims' | canI : 'create')">
<a ng-href="project/{{project.metadata.name}}/create-pvc" class="btn btn-default">Request Storage</a>
</div>
@@ -30,7 +35,10 @@ <h2>Persistent Volume Claims</h2>
<a ng-href="project/{{project.metadata.name}}/create-pvc" class="btn btn-default">Request Storage</a>
</div>
</div>
<table class="table table-bordered table-hover table-mobile" ng-class="{ 'table-empty': (pvcs | hashSize) === 0 }">
<table
class="table table-bordered table-hover table-mobile"
ng-class="{ 'table-empty': (pvcs | hashSize) === 0 }"
ng-if="(pvcs | hashSize) !== 0">
<thead>
<tr>
<th>Name</th>
@@ -40,9 +48,6 @@ <h2>Persistent Volume Claims</h2>
<th>Age</th>
</tr>
</thead>
<tbody ng-if="(pvcs | hashSize) === 0">
<tr><td colspan="5"><em>{{emptyMessage}}</em></td></tr>
</tbody>
<tbody ng-repeat="pvc in pvcs | orderObjectsByDate : true">
<tr>
<td data-title="Name"><a ng-href="{{pvc | navigateResourceURL}}">{{pvc.metadata.name}}</a></td>
117 changes: 51 additions & 66 deletions dist/scripts/templates.js
View file

Large diffs are not rendered by default.