ui: Adds partition support to Service and Node Identity templates (#11696)

2021-12-06 10:33:44 +00:00 · 2021-12-06 10:33:44 +00:00 · a90a65c9d8
parent 7775773979
commit a90a65c9d8
13 changed files with 173 additions and 27 deletions
--- a/.changelog/11696.txt
+++ b/.changelog/11696.txt
@ -0,0 +1,3 @@
+```release-note:feature
+ui: Adds support for partitions to Service and Node Identity template visuals.
+```
--- a/ui/packages/consul-ui/app/components/code-editor/README.mdx
+++ b/ui/packages/consul-ui/app/components/code-editor/README.mdx
@ -16,11 +16,7 @@ state: needs-love
    Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a>
    </:label>
    <:content>
-    <!-- Plain text or something that renders data like the following -->
-    <Consul::ServiceIdentity::Template
-        @nspace={{nspace}}
-        @name={{item.Name}}
-    />
+      {"content": "Initial Content"}
    </:content>
 </CodeEditor>
 ```
--- a/ui/packages/consul-ui/app/components/code-editor/index.hbs
+++ b/ui/packages/consul-ui/app/components/code-editor/index.hbs
@ -18,11 +18,20 @@
            {{mode.name}}
          </PowerSelect>
          <div class="toolbar-separator"></div>
-          <CopyButton @value={{value}} @name="value" />
+          <CopyButton
+            @value={{value}}
+            @name="value"
+          />
        {{/if}}
      {{/if}}
    </div>
  </div>
 </div>
-<IvyCodemirror @value={{value}} @name={{name}} @class={{class}} @options={{options}} @valueUpdated={{action onkeyup}} />
+<IvyCodemirror
+  @value={{value}}
+  @name={{name}}
+  @class={{class}}
+  @options={{options}}
+  @valueUpdated={{action onkeyup}}
+/>
 <pre><code>{{#if (has-block "content")}}{{yield to="content"}}{{else}}{{value}}{{/if}}</code></pre>
--- a/ui/packages/consul-ui/app/components/consul/node-identity/template/README.mdx
+++ b/ui/packages/consul-ui/app/components/consul/node-identity/template/README.mdx
@ -0,0 +1,27 @@
+# Consul::Node::Identity::Template
+
+The component is a text-only template that represents what a NodeIdentity
+policy looks like. The policy generated here is **not** what is sent back to
+the backend, instead its just a visual representation of what happens in the
+backend when you save a NodeIdentity.
+
+```hbs preview-template
+<pre><code><Consul::NodeIdentity::Template
+  @partition={{'default-ier'}}
+  @name={{"Policy-Name"}}
+/></code></pre>
+```
+
+## Arguments
+
+| Argument/Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `partition` | `string` | `default` | The name of the current partition  |
+| `name` | `string` |  | The name of the policy the will be used to
+interpolate the various policy names  |
+
+## See
+
+- [Template Source Code](./index.hbs)
+
+---
--- a/ui/packages/consul-ui/app/components/consul/node-identity/template/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/node-identity/template/index.hbs
@ -1,4 +1,27 @@
-{{#if (env "CONSUL_NSPACES_ENABLED")}}
+{{#if (can "use partitions")~}}
+partition "{{or @partition 'default'}}" {
+  {{#if (can "use nspaces")}}
+  namespace "default" {
+    node "{{@name}}" {
+	    policy = "write"
+    }
+  }
+  namespace_prefix "" {
+    service_prefix "" {
+	    policy = "read"
+    }
+  }
+  {{else}}
+  node "{{@name}}" {
+	  policy = "write"
+  }
+  service_prefix "" {
+	  policy = "read"
+  }
+  {{/if}}
+}
+{{~else~}}
+{{~#if (can "use nspaces")~}}
 namespace "default" {
  node "{{@name}}" {
 	  policy = "write"
@ -16,4 +39,5 @@ node "{{@name}}" {
 service_prefix "" {
 	policy = "read"
 }
-{{/if}}
+{{~/if~}}
+{{~/if~}}
--- a/ui/packages/consul-ui/app/components/consul/service-identity/template/README.mdx
+++ b/ui/packages/consul-ui/app/components/consul/service-identity/template/README.mdx
@ -0,0 +1,29 @@
+# Consul::ServiceIdentity::Template
+
+The component is a text-only template that represents what a NodeIdentity
+policy looks like. The policy generated here is **not** what is sent back to
+the backend, instead its just a visual representation of what happens in the
+backend when you save a NodeIdentity.
+
+```hbs preview-template
+<pre><code><Consul::ServiceIdentity::Template
+  @nspace={{'default-est'}}
+  @partition={{'default-ier'}}
+  @name={{"Policy-Name"}}
+/></code></pre>
+```
+
+## Arguments
+
+| Argument/Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `nspace` | `string` | `default` | The name of the current namespace  |
+| `partition` | `string` | `default` | The name of the current partition  |
+| `name` | `string` |  | The name of the policy the will be used to
+interpolate the various policy names  |
+
+## See
+
+- [Template Source Code](./index.hbs)
+
+---
--- a/ui/packages/consul-ui/app/components/consul/service-identity/template/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/service-identity/template/index.hbs
@ -1,5 +1,38 @@
-{{#if (env "CONSUL_NSPACES_ENABLED")}}
-namespace "{{@nspace}}" {
+{{#if (can "use partitions")}}
+partition "{{or @partition 'default'}}" {
+  {{#if (can 'use nspaces')}}
+  namespace "{{or @nspace 'default'}}" {
+    service "{{@name}}" {
+	    policy = "write"
+    }
+    service "{{@name}}-sidecar-proxy" {
+	    policy = "write"
+    }
+    service_prefix "" {
+	    policy = "read"
+    }
+    node_prefix "" {
+	    policy = "read"
+    }
+  }
+  {{else}}
+  service "{{@name}}" {
+	  policy = "write"
+  }
+  service "{{@name}}-sidecar-proxy" {
+	  policy = "write"
+  }
+  service_prefix "" {
+	  policy = "read"
+  }
+  node_prefix "" {
+	  policy = "read"
+  }
+  {{/if}}
+}
+{{else}}
+{{#if (can 'use nspaces')}}
+namespace "{{or @nspace 'default'}}" {
  service "{{@name}}" {
 	  policy = "write"
  }
@ -27,3 +60,4 @@ node_prefix "" {
 	policy = "read"
 }
 {{/if}}
+{{/if}}
--- a/ui/packages/consul-ui/app/components/inline-code/README.mdx
+++ b/ui/packages/consul-ui/app/components/inline-code/README.mdx
@ -20,3 +20,19 @@ p code {
  @extend %inline-code;
 }
 ```
+
+We also have a `%block-code` that is currently contained in the same CSS files here as it shares so much of this (this should potentially be thought about and reorganized at some stage)
+
+At the time of writing we only use this in the docs for all `<pre><code>`s.
+
+```hbs preview-template
+<pre><code>{
+  "Code": true
+}</code></pre>
+```
+
+```css
+pre code {
+  @extend %block-code;
+}
+```
--- a/ui/packages/consul-ui/app/components/inline-code/layout.scss
+++ b/ui/packages/consul-ui/app/components/inline-code/layout.scss
@ -2,3 +2,7 @@
  display: inline-block;
  padding: 0 4px;
 }
+%block-code {
+  display: block;
+  padding: 0 8px;
+}
--- a/ui/packages/consul-ui/app/components/inline-code/skin.scss
+++ b/ui/packages/consul-ui/app/components/inline-code/skin.scss
@ -1,3 +1,4 @@
+%block-code,
 %inline-code {
  border: 1px solid;
  color: rgb(var(--tone-brand-600));
--- a/ui/packages/consul-ui/app/components/policy-form/index.hbs
+++ b/ui/packages/consul-ui/app/components/policy-form/index.hbs
@ -47,12 +47,11 @@
          <:label>
            Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a>
          </:label>
-          <:content>
-            <Consul::ServiceIdentity::Template
+          <:content><Consul::ServiceIdentity::Template
              @nspace={{nspace}}
+              @partition={{partition}}
              @name={{item.Name}}
-            />
-          </:content>
+            /></:content>
        </CodeEditor>
 {{else if (eq item.template 'node-identity')}}
        <CodeEditor
@ -64,11 +63,10 @@
          <:label>
            Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a>
          </:label>
-          <:content>
-            <Consul::NodeIdentity::Template
+          <:content><Consul::NodeIdentity::Template
              @name={{item.Name}}
-            />
-          </:content>
+              @partition={{partition}}
+            /></:content>
        </CodeEditor>
 {{else}}
        <CodeEditor
--- a/ui/packages/consul-ui/app/components/policy-selector/index.hbs
+++ b/ui/packages/consul-ui/app/components/policy-selector/index.hbs
@ -125,6 +125,7 @@
              <:content>
                <Consul::ServiceIdentity::Template
                  @nspace={{nspace}}
+                  @partition={{partition}}
                  @name={{item.Name}}
                />
              </:content>
@ -140,6 +141,7 @@
              <:content>
                <Consul::NodeIdentity::Template
                  @name={{item.Name}}
+                  @partition={{partition}}
                />
              </:content>
            </CodeEditor>
--- a/ui/packages/consul-ui/app/styles/debug.scss
+++ b/ui/packages/consul-ui/app/styles/debug.scss
@ -31,24 +31,24 @@
  @extend %p3;
  text-align: center;
 }
-[id^="docfy-demo-preview-color"] ul,
-[id^="docfy-demo-preview-typography"] ul,
-[id^="docfy-demo-preview-icons"] ul {
+[id^='docfy-demo-preview-color'] ul,
+[id^='docfy-demo-preview-typography'] ul,
+[id^='docfy-demo-preview-icons'] ul {
  @extend %debug-grid;
 }

-[id^="docfy-demo-preview-typography"] figure,
-[id^="docfy-demo-preview-icons"] figure {
+[id^='docfy-demo-preview-typography'] figure,
+[id^='docfy-demo-preview-icons'] figure {
  border: var(--decor-border-100);
  border-color: rgb(var(--tone-gray-300));
  height: 80px;
 }
-[id^="docfy-demo-preview-icons"] figure::before {
+[id^='docfy-demo-preview-icons'] figure::before {
  position: relative;
  top: 20px;
 }

-[id^="docfy-demo-preview-color"] figure {
+[id^='docfy-demo-preview-color'] figure {
  height: 40px;
 }
 #docfy-demo-preview-color0 {
@ -60,7 +60,7 @@
  @extend %theme-dark;
 }

-[id^="docfy-demo-preview-typography"] {
+[id^='docfy-demo-preview-typography'] {
  .debug-h000 {
    @extend %h000;
  }
@ -248,6 +248,9 @@ html.with-route-announcer .route-title {
      figcaption code {
        @extend %inline-code;
      }
+      pre code {
+        @extend %block-code;
+      }
      figure > [type='text'] {
        border: 1px solid rgb(var(--tone-gray-999));
        width: 100%;