quay/static/partials/super-user.html

<div>
  <div class="cor-loader" ng-show="!configStatus"></div>
  <div class="page-content" quay-show="Features.SUPER_USERS && configStatus == 'ready'">
    <div ng-if="requiresRestart" class="alert alert-warning restart-required">
      <button class="btn btn-warning" ng-click="restartContainer()">
        <i class="fa fa-refresh"></i>Restart Now
      </button>
      <i class="fa fa-lg fa-warning"></i>
      <div><strong>Container restart required!</strong></div>
      Configuration changes have been made but the container hasn't been restarted yet.
    </div>
    <div class="cor-title">
      <span class="cor-title-link"></span>
      <span class="cor-title-content">Enterprise Registry Management</span>
    </div>

    <div class="cor-tab-panel">
      <div class="cor-tabs">
        <span class="cor-tab" tab-active="true" tab-title="Manage Users"
              tab-target="#users" tab-init="loadUsers()">
          <i class="fa fa-group"></i>
        </span>
        <span class="cor-tab" tab-title="Dashboard" tab-target="#dashboard"
              tab-shown="setDashboardActive(true)" tab-hidden="setDashboardActive(false)">
          <i class="fa fa-tachometer"></i>
        </span>
        <span class="cor-tab" tab-title="Container Usage" tab-target="#usage-counter" tab-init="getUsage()">
          <i class="fa fa-pie-chart"></i>
        </span>
        <span class="cor-tab" tab-title="Usage Logs" tab-target="#logs" tab-init="loadUsageLogs()">
          <i class="fa fa-bar-chart"></i>
        </span>
        <span class="cor-tab" tab-title="Internal Logs and Debugging" tab-target="#debug" tab-init="loadDebugServices()">
          <i class="fa fa-bug"></i>
        </span>
        <span class="cor-tab" tab-title="Registry Settings" tab-target="#setup"
                              tab-init="loadConfig()">
          <i class="fa fa-cog"></i>
        </span>
      </div> <!-- /cor-tabs -->

      <div class="cor-tab-content">
        <!-- Setup tab -->
        <div id="setup" class="tab-pane">
          <div class="config-setup-tool" is-active="configStatus == 'ready'"
               configuration-saved="configurationSaved()"></div>
        </div>

        <!-- Dashboard tab -->
        <div id="dashboard" class="tab-pane">
          <div class="ps-usage-graph" is-enabled="dashboardActive"></div>
        </div>

        <!-- Debugging tab -->
        <div id="debug" class="tab-pane">
          <div class="cor-loader" ng-show="!debugServices"></div>

          <div role="tabpanel" ng-show="debugServices">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" ng-repeat="service in debugServices"
                  ng-class="debugService == service ? 'active' : ''">
                <a href="javascript:void(0)" ng-click="viewSystemLogs(service)">{{ service }}</a>
              </li>
           </ul>

           <div class="system-log-download-panel" ng-if="!debugService">
            Select a service above to view its local logs

            <div>
              <a class="btn btn-primary" href="/systemlogsarchive?_csrf_token={{ csrf_token }}" target="_blank">
                <i class="fa fa-download fa-lg" style="margin-right: 4px;"></i> Download All Local Logs (.tar.gz)
              </a>
            </div>
           </div>
           <div class="cor-log-box" logs="debugLogs" ng-show="debugService"></div>
          </div>
        </div>

        <!-- Logs tab -->
        <div id="logs" class="tab-pane">
          <div class="logsView" makevisible="logsCounter" all-logs="true"></div>
        </div> <!-- /logs tab-->

        <!-- Usage tab -->
        <div id="usage-counter" class="tab-pane">
          <div class="cor-loader" ng-show="systemUsage == null"></div>
          <div class="usage-chart" total="systemUsage.allowed" limit="systemUsageLimit"
               current="systemUsage.usage" usage-title="Deployed Containers"></div>

          <!-- Alerts -->
          <div class="alert alert-danger" ng-show="systemUsageLimit == 'over' && systemUsage">
            You have deployed more repositories than your plan allows. Please
            upgrade your subscription by contacting <a href="mailto:sales@coreos.com">CoreOS Sales</a>.
          </div>

          <div class="alert alert-warning" ng-show="systemUsageLimit == 'at' && systemUsage">
            You are at your current plan's number of allowed repositories. It might be time to think about
            upgrading your subscription by contacting <a href="mailto:sales@coreos.com">CoreOS Sales</a>.
          </div>

          <div class="alert alert-success" ng-show="systemUsageLimit == 'near' && systemUsage">
            You are nearing the number of allowed deployed repositories. It might be time to think about
            upgrading your subscription by contacting <a href="mailto:sales@coreos.com">CoreOS Sales</a>.
          </div>

          For more information: <a href="https://coreos.com/products/enterprise-registry/plans/">See Here</a>.
        </div> <!-- /usage-counter tab-->

        <!-- Users tab -->
        <div id="users" class="tab-pane active">
          <div class="cor-loader" ng-show="!users"></div>
          <div class="alert alert-error" ng-show="usersError">
            {{ usersError }}
          </div>
          <div ng-show="users">
            <div class="side-controls">
              <div class="result-count">
                Showing {{(users | filter:search | limitTo:100).length}} of
                {{(users | filter:search).length}} matching users
              </div>
              <div class="filter-input">
                <input id="log-filter" class="form-control" placeholder="Filter Users" type="text" ng-model="search.$">
              </div>
              <button class="btn btn-primary" style="vertical-align: top; margin-left: 10px;"
                      ng-click="showCreateUser()">
                <i class="fa fa-plus" style="margin-right: 6px;"></i>Create User
              </button>
            </div>

            <table class="table">
              <thead>
                <th style="width: 24px;"></th>
                <th>Username</th>
                <th>E-mail address</th>
                <th style="width: 24px;"></th>
              </thead>

              <tr ng-repeat="current_user in (users | filter:search | orderBy:'username' | limitTo:100)"
                  class="user-row">
                <td>
                  <span class="avatar" data="current_user.avatar" size="24"></span>
                </td>
                <td>
                  <span class="labels">
                    <span class="label label-default" ng-if="user.username == current_user.username">
                      You
                    </span>
                    <span class="label label-primary"
                          ng-if="current_user.super_user">
                      Superuser
                    </span>
                  </span>
                  {{ current_user.username }}
                </td>
                <td>
                  <a href="mailto:{{ current_user.email }}">{{ current_user.email }}</a>
                </td>
                <td style="text-align: center;">
                  <span class="cor-options-menu"
                        ng-if="user.username != current_user.username && !current_user.super_user">
                    <span class="cor-option" option-click="showChangePassword(current_user)">
                      <i class="fa fa-key"></i> Change Password
                    </span>
                    <span class="cor-option" option-click="sendRecoveryEmail(current_user)"
                          quay-show="Features.MAILING">
                      <i class="fa fa-envelope"></i> Send Recovery Email
                    </span>
                    <span class="cor-option" option-click="showDeleteUser(current_user)">
                      <i class="fa fa-times"></i> Delete User
                    </span>
                  </span>
                </td>
              </tr>
            </table>
          </div> <!-- /show if users -->
        </div> <!-- users-tab -->
      </div> <!-- /cor-tab-content -->
    </div> <!-- /cor-tab-panel -->

    <!-- Modal message dialog -->
    <div class="co-dialog modal fade" id="confirmDeleteUserModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Delete User?</h4>
          </div>
          <div class="modal-body">
            <div class="alert alert-danger">
              This operation <strong>cannot be undone</strong> and will <strong>delete any repositories owned by the user</strong>.
            </div>
            Are you <strong>sure</strong> you want to delete user <strong>{{ userToDelete.username }}</strong>?
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" ng-click="deleteUser(userToDelete)">Delete User</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <!-- Modal message dialog -->
    <div class="co-dialog modal fade" id="createUserModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Create New User</h4>
          </div>
          <form name="createUserForm" ng-submit="createUser()">
            <div class="modal-body" ng-show="createdUser">
              <table class="table">
                <thead>
                  <th>Username</th>
                  <th>E-mail address</th>
                  <th>Temporary Password</th>
                </thead>

                <tr class="user-row">
                    <td>{{ createdUser.username }}</td>
                    <td>{{ createdUser.email }}</td>
                    <td>{{ createdUser.password }}</td>
                </tr>
              </table>
            </div>
            <div class="modal-body" ng-show="creatingUser">
              <div class="cor-loader"></div>
            </div>
            <div class="modal-body" ng-show="!creatingUser && !createdUser">
                <div class="form-group">
                  <label>Username</label>
                  <input class="form-control" type="text" ng-model="newUser.username" ng-pattern="/^[a-z0-9_]{4,30}$/" required>
                </div>

                <div class="form-group">
                  <label>Email address</label>
                  <input class="form-control" type="email" ng-model="newUser.email" required>
                </div>
            </div>
            <div class="modal-footer" ng-show="createdUser">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
            <div class="modal-footer" ng-show="!creatingUser && !createdUser">
              <button class="btn btn-primary" type="submit" ng-disabled="!createUserForm.$valid">
                Create User
              </button>
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
          </form>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <!-- Modal message dialog -->
    <div class="co-dialog modal fade" id="restartingContainerModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Container Currently Restarting</h4>
          </div>
          <div class="modal-body" style="padding: 20px;">
           <i class="fa fa-lg fa-refresh" style="margin-right: 10px;"></i>
           <span class="registry-name"></span> is currently being restarted.
           <br><br>
           This can take several minutes. If the container does not restart on its own,
           please reexecute the <code>docker run</code> command.
          </div>
          <div class="modal-footer working">
            <span class="cor-loader-inline"></span> Waiting for container to restart...
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <!-- Modal message dialog -->
    <div class="co-dialog modal fade" id="changePasswordModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Change User Password</h4>
          </div>
          <div class="modal-body">
            <div class="alert alert-warning">
              The user will no longer be able to access the registry with their current password
            </div>

            <form class="form-change" id="changePasswordForm" name="changePasswordForm" data-trigger="manual">
              <input type="password" class="form-control" placeholder="User's new password" ng-model="userToChange.password" required ng-pattern="/^.{8,}$/">
              <input type="password" class="form-control" placeholder="Verify the new password" ng-model="userToChange.repeatPassword"
                     match="userToChange.password" required ng-pattern="/^.{8,}$/">
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" ng-click="changeUserPassword(userToChange)"
                    ng-disabled="changePasswordForm.$invalid">Change User Password</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div> <!-- /page-content -->
</div>