lemur/lemur/static/app/angular/certificates/view/view.tpl.html

<div class="row">
  <div class="col-md-12">
    <h2 class="featurette-heading">Certificates
      <span class="text-muted"><small>Cipher text says what?</small></span></h2>
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="btn-group pull-right">
          <button data-placement="left" data-title="Create Certificate" bs-tooltip ng-click="create()"
             class="btn btn-primary">
            Create
          </button>
          <button data-placement="left" data-title="Import Certificate" bs-tooltip ng-click="import()"
             class="btn btn-info">
            Import
          </button>
        </div>
        <div class="btn-group">
          <button ng-click="toggleFilter(certificateTable)" class="btn btn-default">Filter</button>
        </div>
        <!--<select class="form-control" ng-model="show" ng-options="item.value as item.title for item in fields"></select>-->
        <div class="clearfix"></div>
      </div>
      <div class="table-responsive">
        <table ng-table="certificateTable" class="table" show-filter="false" template-pagination="angular/pager.html">
          <tbody>
          <tr ng-class="{'even-row': $even }" ng-repeat-start="certificate in $data track by $index">
            <td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">
              <ul class="list-unstyled">
                <li>{{ certificate.name }}</li>
                <li><span class="text-muted">{{ certificate.owner }}</span></li>
              </ul>
            </td>
            <td data-title="'Active'" filter="{ 'active': 'select' }" filter-data="getCertificateStatus()">
              <form>
                <switch ng-change="certificateService.updateActive(certificate)" id="status" name="status" ng-model="certificate.active" class="green small"></switch>
              </form>
            </td>
            <td data-title="'Issuer'" sortable="'issuer'" filter="{ 'issuer': 'text' }">
              {{ certificate.authority.name || certificate.issuer }}
            </td>
            <td data-title="'Common Name'" filter="{ 'cn': 'text'}">
              {{ certificate.cn }}
            </td>
            <td data-title="''">
              <div class="btn-group pull-right">
                  <button ng-model="certificate.toggle" class="btn btn-sm btn-info" btn-checkbox btn-checkbox-true="1" butn-checkbox-false="0">More</button>
                  <button class="btn btn-sm btn-warning" ng-click="edit(certificate.id)">Edit</button>
              </div>
            </td>
          </tr>
          <tr class="warning" ng-show="certificate.toggle" ng-repeat-end>
            <td colspan="6">
                <tabset justified="true" class="col-md-6">
                    <tab heading="Basic Info">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <strong>Creator</strong>
                                <span class="pull-right">
                                  {{ certificate.creator.email }}
                                </span>
                            </li>
                            <li class="list-group-item">
                                <strong>Not Before</strong>
                                <span class="pull-right" tooltip="{{ certificate.notBefore }}">
                                  {{ momentService.createMoment(certificate.notBefore) }}
                                </span>
                            </li>
                            <li class="list-group-item">
                                <strong>Not After</strong>
                                <span class="pull-right" tooltip="{{ certificate.notAfter }}">
                                  {{ momentService.createMoment(certificate.notAfter) }}
                                </span>
                            </li>
                            <li class="list-group-item">
                                <strong>San</strong>
                                <span class="pull-right">
                                    <i class="glyphicon glyphicon-ok" ng-show="certificate.san"></i>
                                    <i class="glyphicon glyphicon-remove" ng-show="!certificate.san"></i>
                                </span>
                                        </li>
                                        <li class="list-group-item">
                                            <strong>Bits</strong>
                                            <span class="pull-right">{{ certificate.bits }}</span>
                                        </li>
                                        <li class="list-group-item">
                                            <strong>Serial</strong>
                                            <span class="pull-right">{{ certificate.serial }}</span>
                                        </li>
                                        <li tooltip="Lemur will attempt to check a certificates validity, this is used to track whether a certificate as been revoked" class="list-group-item">
                                            <strong>Validity</strong>
                                <span class="pull-right">
                                  <span ng-show="!certificate.status" class="label label-warning">Unknown</span>
                                  <span ng-show="certificate.status == 'revoked'" class="label label-danger">Revoked</span>
                                  <span ng-show="certificate.status == 'valid'" class="label label-success">Valid</span>
                                </span>
                            </li>
                            <li class="list-group-item">
                                <strong>Description</strong>
                                <span class="pull-right">{{ certificate.description }}</span>
                            </li>
                        </ul>
                    </tab>
                    <tab heading="Notifications">
                        <div class="list-group">
                            <a href="#/domains/{{ domain.id }}" class="list-group-item" ng-repeat="notification in certificate.notifications">{{ notification.label }}</a>
                        </div>
                    </tab>
                    <tab heading="Destinations">
                        <div class="list-group">
                            <a href="#/domains/{{ domain.id }}" class="list-group-item" ng-repeat="destination in certificate.destinations">{{ destination.label }}</a>
                        </div>
                    </tab>
                    <tab heading="Domains">
                        <div class="list-group">
                            <a href="#/domains/{{ domain.id }}" class="list-group-item" ng-repeat="domain in certificate.domains">{{ domain.name }}</a>
                        </div>
                    </tab>
              </tabset>
              <tabset justified="true" class="col-md-6">
                <tab heading="Chain">
                  <p>
                    <pre style="width: 550px">{{ certificate.chain }}</pre>
                  </p>
                </tab>
                <tab heading="Public Certificate">
                  <p>
                    <pre style="width: 550px">{{ certificate.body }}</pre>
                  </p>
                </tab>
                <tab ng-click="certificateService.loadPrivateKey(certificate)">
                  <tab-heading>
                    Private Key
                  </tab-heading>
                  <p>
                    <pre style="width: 550px">{{ certificate.privateKey }}</pre>
                  </p>
                </tab>
              </tabset>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</div>