keyspaces.html

<div ng-if="keyspaces === undefined || keyspaces === null" flex layout="column" layout-align="center center">
  <md-progress-circular md-mode="indeterminate"></md-progress-circular>
  <h3>Loading...</h3>
</div>

<div ng-if="keyspaces.length == 0" flex layout="column" layout-align="center center">
  <h3>No keyspaces found.</h3>
</div>

<md-content class="md-padding">

<md-card ng-repeat="keyspace in keyspaces">
   <md-toolbar>
   <div class="md-toolbar-tools">
    <h2>{{keyspace.name}}</h2>
    <span flex></span>
    <md-menu>
    <md-button class="md-icon-button" aria-label="Keyspace actions" ng-click="$mdOpenMenu()" md-menu-origin>
      <md-tooltip>Keyspace Actions</md-tooltip>
      <md-icon md-font-set="material-icons">more_vert</md-icon>
    </md-button>
    <md-menu-content>
    <md-menu-item ng-repeat="action in keyspaceActions">
      <md-button ng-click="actions.applyKeyspace($event,action,keyspace.name)">{{actions.label(action)}}</md-button>
    </md-menu-item>
    </md-menu-content>
    </md-menu>
  </div>
  </md-toolbar>

  <md-card-content>

  <h3 ng-bind="keyspace.shards.length == 0 ? 'No shards found.' : 'Shards'"></h3>

  <md-grid-list md-cols-sm="2" md-cols-md="4" md-cols-gt-md="8"
      md-row-height="2:1" md-gutter="1em">
    <md-grid-tile ng-repeat="shard in keyspace.shards" class="shard-tile md-whiteframe-z1">
      <a ng-href="#/shard/{{keyspace.name}}/{{shard}}" layout-fill layout="column" layout-align="center">
        <h3>{{shard}}</h3>
      </a>
    </md-grid-tile>
  </md-grid-list>

  </md-card-content>
</md-card>

</md-content>