Overview page

ui/app/routes/access-control.js

@@ -1,3 +1,12 @@
 import Route from '@ember/routing/route';
 
-export default class AccessControlRoute extends Route {}
+export default class AccessControlRoute extends Route {
+  // Load our tokens, roles, and policies
+  async model() {
+    return {
+      tokens: await this.store.findAll('token'),
+      roles: await this.store.findAll('role'),
+      policies: await this.store.findAll('policy'),
+    };
+  }
+}

ui/app/styles/components.scss

@@ -59,3 +59,4 @@
 @import './components/policies';
 @import './components/metadata-editor';
 @import './components/job-status-panel';
+@import './components/access-control';

ui/app/styles/components/access-control.scss

@@ -0,0 +1,32 @@
+.access-control-overview {
+  .intro {
+    margin-bottom: 2rem;
+    p {
+      margin-bottom: 1rem;
+    }
+    footer {
+      display: flex;
+      gap: 1rem;
+    }
+  }
+
+  .section-cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    & > div {
+      display: flex;
+      flex-direction: row;
+      & > a {
+        padding: 1rem;
+        text-decoration: none;
+        color: $black;
+        display: block;
+
+        &:hover {
+          background-color: var(--token-color-surface-interactive-hover);
+        }
+      }
+    }
+  }
+}

ui/app/templates/access-control/index.hbs

@@ -1,2 +1,37 @@
-{{page-title "Index"}}
+<section class="section access-control-overview">
+  <h1 class="title">Access Control</h1>
+  <section class="intro">
+    <p>Your Nomad cluster has Access Control enabled, which you can use to control access to data and APIs. Here, you can manage the Tokens, Policies, and Roles for your system.</p>
+    <footer>
+      <Hds::Link::Standalone @icon="docs-link" @text="ACL System Fundamentals" @iconPosition="trailing" @href="https://developer.hashicorp.com/nomad/tutorials/access-control/access-control" />
+      <Hds::Link::Standalone @icon="docs-link" @text="ACL Policy Concepts" @iconPosition="trailing" @href="https://developer.hashicorp.com/nomad/tutorials/access-control/access-control-policies" />
+    </footer>
+  </section>
+  <div class="section-cards">
+    <Hds::Card::Container @level="mid" @hasBorder={{true}}>
+      <LinkTo
+        @route="access-control.tokens"
+      >
+        <h2 class="title">{{this.model.tokens.length}} {{pluralize "Token" this.model.tokens.length}}</h2>
+        <p>User access tokens are associated with one or more policies or roles to grant specific capabilities.</p>
+      </LinkTo>
+    </Hds::Card::Container>
+    <Hds::Card::Container @level="mid" @hasBorder={{true}}>
+      <LinkTo
+        @route="access-control.policies"
+      >
+        <h2 class="title">{{this.model.policies.length}} {{pluralize "Policy" this.model.policies.length}}</h2>
+        <p>Sets of rules defining the capabilities granted to adhering tokens.</p>
+      </LinkTo>
+    </Hds::Card::Container>
+    <Hds::Card::Container @level="mid" @hasBorder={{true}}>
+      <LinkTo
+        @route="access-control.roles"
+      >
+        <h2 class="title">{{this.model.roles.length}} {{pluralize "Role" this.model.roles.length}}</h2>
+        <p>Roles group one or more Policies into higher-level sets of permissions.</p>
+      </LinkTo>
+    </Hds::Card::Container>
+  </div>
+</section>
 {{outlet}}

ui/app/templates/access-control/policies/policy.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-{{!-- <Breadcrumb @crumb={{hash label=this.policy.name args=(array "access-control.policies.policy" this.policy.name)}} /> --}}
+<Breadcrumb @crumb={{hash label=this.policy.name args=(array "access-control.policies.policy" this.policy.name)}} />
 {{page-title "Policy"}}
 <section class="section">
 	<h1 class="title with-flex" data-test-title>