Improve certificate details view, make information more concise (#1021)

The "Description" field can now display multi-line text content.

The "Authority" field now displays the authority name in Lemur (if
known) as well as issuer's name. For imported certs, "Imported" is
displayed.
This commit is contained in:
Marti Raudsepp 2017-12-12 19:49:30 +02:00 committed by kevgliss
parent b2d87940d6
commit ba4de07ad8
2 changed files with 44 additions and 52 deletions

View File

@ -71,63 +71,52 @@
<uib-tabset justified="true" class="col-md-8"> <uib-tabset justified="true" class="col-md-8">
<uib-tab> <uib-tab>
<uib-tab-heading>Basic Info</uib-tab-heading> <uib-tab-heading>Basic Info</uib-tab-heading>
<ul class="list-group"> <dl class="dl-horizontal list-group">
<li class="list-group-item"> <!-- Lemur metadata -->
<strong>Creator</strong> <div class="list-group-item">
<span class="pull-right"> <dt>Creator</dt>
{{ certificate.user.email }} <dd>{{ certificate.user.email }}</dd>
</span> <dt>Owner</dt>
</li> <dd>{{ certificate.owner }}</dd>
<li class="list-group-item"> <dt>Description</dt>
<strong>Not Before</strong> <dd class="multiline">{{ certificate.description }}</dd>
<span class="pull-right" uib-tooltip="{{ certificate.notBefore }}"> </div>
{{ momentService.createMoment(certificate.notBefore) }} <!-- Certificate fields -->
</span> <div class="list-group-item">
</li> <dt>Certificate Authority</dt>
<li class="list-group-item"> <dd>{{ certificate.authority ? certificate.authority.name : "Imported" }} <span class="text-muted">({{ certificate.issuer }})</span></dd>
<strong>Not After</strong> <dt>Serial</dt>
<span class="pull-right" uib-tooltip="{{ certificate.notAfter }}"> <dd>
{{ momentService.createMoment(certificate.notAfter) }} <div>Hex: {{ certificate.serialHex }}</div>
</span> <div class="text-muted text-nowrap">Decimal: {{ certificate.serial }}</div>
</li> </dd>
<li class="list-group-item"> <dt>Valid From</dt>
<strong>San</strong> <dd><span class="text-muted">{{ certificate.notBefore }}</span> ({{ momentService.createMoment(certificate.notBefore) }})</dd>
<span class="pull-right"> <dt>Valid To</dt>
<dd><span class="text-muted">{{ certificate.notAfter }}</span> ({{ momentService.createMoment(certificate.notAfter) }})</dd>
<dt>SAN</dt>
<dd>
<i class="glyphicon glyphicon-ok" ng-if="certificate.san"></i> <i class="glyphicon glyphicon-ok" ng-if="certificate.san"></i>
<i class="glyphicon glyphicon-remove" ng-if="!certificate.san"></i> <i class="glyphicon glyphicon-remove" ng-if="!certificate.san"></i>
</span> </dd>
</li> </div>
<li class="list-group-item"> <!-- Cryptography -->
<strong>Bits</strong> <div class="list-group-item">
<span class="pull-right">{{ certificate.bits }}</span> <dt>Key Length</dt>
</li> <dd>{{ certificate.bits }}</dd>
<li class="list-group-item"> <dt>Signing Algorithm</dt>
<strong>Signing Algorithm</strong> <dd>{{ certificate.signingAlgorithm }}</dd>
<span class="pull-right">{{ certificate.signingAlgorithm }}</span> </div>
</li> <div uib-tooltip="Lemur will attempt to check a certificates validity, this is used to track whether a certificate has been revoked"
<li class="list-group-item">
<strong>Serial</strong>
<span class="pull-right">{{ certificate.serial }}</span>
</li>
<li class="list-group-item">
<strong>Serial (Hex)</strong>
<span class="pull-right">{{ certificate.serialHex }}</span>
</li>
<li
uib-tooltip="Lemur will attempt to check a certificates validity, this is used to track whether a certificate has been revoked"
class="list-group-item"> class="list-group-item">
<strong>Validity</strong> <dt>Validity</dt>
<span class="pull-right"> <dd>
<span ng-if="certificate.status == 'unknown'" class="label label-warning">Unknown</span> <span ng-if="certificate.status == 'unknown'" class="label label-warning">Unknown</span>
<span ng-if="certificate.status == 'revoked'" class="label label-danger">Revoked</span> <span ng-if="certificate.status == 'revoked'" class="label label-danger">Revoked</span>
<span ng-if="certificate.status == 'valid'" class="label label-success">Valid</span> <span ng-if="certificate.status == 'valid'" class="label label-success">Valid</span>
</span> </dd>
</li> </div>
<li class="list-group-item"> </dl>
<strong>Description</strong>
<p>{{ certificate.description }}</p>
</li>
</ul>
</uib-tab> </uib-tab>
<uib-tab> <uib-tab>
<uib-tab-heading>Endpoints</uib-tab-heading> <uib-tab-heading>Endpoints</uib-tab-heading>

View File

@ -185,3 +185,6 @@ a {
text-align:center; text-align:center;
} }
.multiline {
white-space: pre-line;
}