From a90a65c9d8d78190405774d2f06edd3c4fbb1e83 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 6 Dec 2021 10:33:44 +0000 Subject: [PATCH] ui: Adds partition support to Service and Node Identity templates (#11696) --- .changelog/11696.txt | 3 ++ .../app/components/code-editor/README.mdx | 6 +-- .../app/components/code-editor/index.hbs | 13 ++++++- .../consul/node-identity/template/README.mdx | 27 +++++++++++++ .../consul/node-identity/template/index.hbs | 28 +++++++++++++- .../service-identity/template/README.mdx | 29 ++++++++++++++ .../service-identity/template/index.hbs | 38 ++++++++++++++++++- .../app/components/inline-code/README.mdx | 16 ++++++++ .../app/components/inline-code/layout.scss | 4 ++ .../app/components/inline-code/skin.scss | 1 + .../app/components/policy-form/index.hbs | 14 +++---- .../app/components/policy-selector/index.hbs | 2 + ui/packages/consul-ui/app/styles/debug.scss | 19 ++++++---- 13 files changed, 173 insertions(+), 27 deletions(-) create mode 100644 .changelog/11696.txt create mode 100644 ui/packages/consul-ui/app/components/consul/node-identity/template/README.mdx create mode 100644 ui/packages/consul-ui/app/components/consul/service-identity/template/README.mdx diff --git a/.changelog/11696.txt b/.changelog/11696.txt new file mode 100644 index 000000000..5723a5a74 --- /dev/null +++ b/.changelog/11696.txt @@ -0,0 +1,3 @@ +```release-note:feature +ui: Adds support for partitions to Service and Node Identity template visuals. +``` diff --git a/ui/packages/consul-ui/app/components/code-editor/README.mdx b/ui/packages/consul-ui/app/components/code-editor/README.mdx index cdf13110f..6e38d2d45 100644 --- 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 (HCL Format) <:content> - - + {"content": "Initial Content"} ``` diff --git a/ui/packages/consul-ui/app/components/code-editor/index.hbs b/ui/packages/consul-ui/app/components/code-editor/index.hbs index d994307bd..f5594c3d4 100644 --- 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}}
- + {{/if}} {{/if}} - + 
{{#if (has-block "content")}}{{yield to="content"}}{{else}}{{value}}{{/if}}
diff --git 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 new file mode 100644 index 000000000..7c0ab1c86 --- /dev/null +++ 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 +
+``` + +## 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) + +--- diff --git 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 index 54b3f2948..41dbefe82 100644 --- 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}} \ No newline at end of file +{{~/if~}} +{{~/if~}} \ No newline at end of file diff --git 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 new file mode 100644 index 000000000..89eb4cb25 --- /dev/null +++ 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 +
+``` + +## 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) + +--- diff --git 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 index 3a1553305..2c1de515c 100644 --- 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" } @@ -26,4 +59,5 @@ service_prefix "" { node_prefix "" { policy = "read" } +{{/if}} {{/if}} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/inline-code/README.mdx b/ui/packages/consul-ui/app/components/inline-code/README.mdx index 20761809e..afdd5cbdb 100644 --- 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 `
`s.
+
+```hbs preview-template
+
{
+  "Code": true
+}

+```
+
+```css
+pre code {
+  @extend %block-code;
+}
+```
diff --git a/ui/packages/consul-ui/app/components/inline-code/layout.scss b/ui/packages/consul-ui/app/components/inline-code/layout.scss
index e23fbfe00..499d70d31 100644
--- 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;
+}
diff --git a/ui/packages/consul-ui/app/components/inline-code/skin.scss b/ui/packages/consul-ui/app/components/inline-code/skin.scss
index 133d1ede3..3fb061925 100644
--- 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));
diff --git a/ui/packages/consul-ui/app/components/policy-form/index.hbs b/ui/packages/consul-ui/app/components/policy-form/index.hbs
index 61e2fa908..da1f05479 100644
--- 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 (HCL Format)
           
-          <:content>
-            
-          
+            />
         
 {{else if (eq item.template 'node-identity')}}
         
             Rules (HCL Format)
           
-          <:content>
-            
-          
+              @partition={{partition}}
+            />
         
 {{else}}
         
                 
               
@@ -140,6 +141,7 @@
               <:content>
                 
               
             
diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss
index 878aac643..5ca08667b 100644
--- 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%;