From 84eacea7ac258f3e98aae39e612202a6c09c5eab Mon Sep 17 00:00:00 2001
From: "Daryn St. Pierre" <daryn.st.pierre@konghq.com>
Date: Fri, 19 Jun 2020 11:32:47 -0400
Subject: [PATCH 1/3] added a warning to the top of the Traffic Permissions
 view that alerts the user when the selected mesh does not have mTLS enabled.

---
 .env.development                          |   2 +-
 src/components/Skeletons/YamlView.vue     |   1 +
 src/services/mock.js                      | 189 ++++++++++++----------
 src/views/Policies/TrafficPermissions.vue |  49 +++++-
 4 files changed, 153 insertions(+), 88 deletions(-)

diff --git a/.env.development b/.env.development
index d641ef60f..743453e72 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,3 @@
 NODE_ENV=development
-VUE_APP_MOCK_API_ENABLED=true
+VUE_APP_MOCK_API_ENABLED=false
 VUE_APP_KUMA_CONFIG=/dev-api-config.json
diff --git a/src/components/Skeletons/YamlView.vue b/src/components/Skeletons/YamlView.vue
index a4f4df983..c6a2972e8 100644
--- a/src/components/Skeletons/YamlView.vue
+++ b/src/components/Skeletons/YamlView.vue
@@ -206,6 +206,7 @@ export default {
         delete sourceObj.type
         delete sourceObj.name
 
+        newObj.apiVersion = 'kuma.io/v1alpha1'
         newObj.kind = type
         newObj.metadata = {
           name: name
diff --git a/src/services/mock.js b/src/services/mock.js
index 75a593c3e..458f645c6 100644
--- a/src/services/mock.js
+++ b/src/services/mock.js
@@ -19,84 +19,103 @@ export default class Mock {
       'background: gray; color: white; display: block; padding: 0.25rem;')
 
     this.mock
-      // .onGet('/meshes').reply(200, {
-      //   total: 3,
-      //   items: [
-      //     {
-      //       mtls: {
-      //         ca: {
-      //           builtin: {}
-      //         }
-      //       },
-      //       name: 'default',
-      //       type: 'Mesh'
-      //     },
-      //     {
-      //       mtls: {
-      //         ca: {
-      //           builtin: {}
-      //         }
-      //       },
-      //       name: 'mesh-01',
-      //       type: 'Mesh'
-      //     },
-      //     {
-      //       mtls: {
-      //         ca: {
-      //           builtin: {}
-      //         }
-      //       },
-      //       name: 'kong-mania-12',
-      //       type: 'Mesh'
-      //     },
-      //     {
-      //       mtls: {
-      //         ca: {
-      //           builtin: {}
-      //         }
-      //       },
-      //       name: 'hello-world',
-      //       type: 'Mesh'
-      //     }
-      //   ],
-      //   next: null
-      // })
-      // .onGet('/meshes/default').reply(200, {
-      //   type: 'Mesh',
-      //   name: 'default',
-      //   mtls: {
-      //     ca: {
-      //       builtin: {}
-      //     }
-      //   }
-      // })
-      // .onGet('/meshes/mesh-01').reply(200, {
-      //   type: 'Mesh',
-      //   name: 'mesh-01',
-      //   mtls: {
-      //     ca: {
-      //       builtin: {}
-      //     }
-      //   }
-      // })
-      // .onGet('/meshes/kong-mania-12').reply(200, {
-      //   type: 'Mesh',
-      //   name: 'kong-mania-12',
-      //   mtls: {
-      //     ca: {
-      //       builtin: {}
-      //     }
-      //   }
-      // })
-      // .onGet('/meshes/hello-world').reply(200, {
-      //   type: 'Mesh',
-      //   name: 'hello-world',
-      //   mtls: {
-      //     ca: {
-      //       builtin: {}
-      //     }
-      //   }
-      // })
+      .onGet('/meshes').reply(200, {
+        total: 3,
+        items: [
+          {
+            name: 'default',
+            type: 'Mesh'
+          },
+          {
+            name: 'mesh-01',
+            type: 'Mesh',
+            mtls: {
+              enabledBackend: 'ca-1',
+              backends: [
+                {
+                  name: 'ca-1',
+                  type: 'provided',
+                  dpCert: {
+                    rotation: {
+                      expiration: '1d'
+                    }
+                  },
+                  conf: {
+                    cert: {
+                      secret: 'name-of-secret'
+                    },
+                    key: {
+                      secret: 'name-of-secret'
+                    }
+                  }
+                }
+              ]
+            }
+          },
+          {
+            name: 'kong-mania-12',
+            type: 'Mesh'
+          },
+          {
+            name: 'hello-world',
+            type: 'Mesh'
+          }
+        ],
+        next: null
+      })
+      .onGet('/meshes/default').reply(200, {
+        type: 'Mesh',
+        name: 'default',
+        mtls: {
+          ca: {
+            builtin: {}
+          }
+        }
+      })
+      .onGet('/meshes/mesh-01').reply(200, {
+        type: 'Mesh',
+        name: 'mesh-01',
+        mtls: {
+          enabledBackend: 'ca-1',
+          backends: [
+            {
+              name: 'ca-1',
+              type: 'provided',
+              dpCert: {
+                rotation: {
+                  expiration: '1d'
+                }
+              },
+              conf: {
+                cert: {
+                  secret: 'name-of-secret'
+                },
+                key: {
+                  secret: 'name-of-secret'
+                }
+              }
+            }
+          ]
+        }
+      })
+      .onGet('/meshes/kong-mania-12').reply(200, {
+        type: 'Mesh',
+        name: 'kong-mania-12',
+        mtls: {
+          ca: {
+            builtin: {}
+          }
+        }
+      })
+      .onGet('/meshes/hello-world').reply(200, {
+        type: 'Mesh',
+        name: 'hello-world',
+        mtls: {
+          ca: {
+            builtin: {}
+          }
+        }
+      })
       .onGet('/meshes/default/dataplanes').reply(200, {
         total: 2,
         items: [
@@ -1560,12 +1579,12 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/traffic-permissions').reply(200, {
+      .onGet('/meshes/mesh-01/traffic-permissions').reply(200, {
         total: 3,
         items: [
           {
             type: 'TrafficPermission',
-            mesh: 'default',
+            mesh: 'mesh-01',
             name: 'tp-1',
             sources: [
               {
@@ -1584,7 +1603,7 @@ export default class Mock {
           },
           {
             type: 'TrafficPermission',
-            mesh: 'default',
+            mesh: 'mesh-01',
             name: 'tp-1234',
             sources: [
               {
@@ -1603,7 +1622,7 @@ export default class Mock {
           },
           {
             type: 'TrafficPermission',
-            mesh: 'default',
+            mesh: 'mesh-01',
             name: 'tp-alpha-tango-donut',
             sources: [
               {
@@ -1622,7 +1641,7 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/traffic-permissions/tp-1').reply(200, {
+      .onGet('/meshes/mesh-01/traffic-permissions/tp-1').reply(200, {
         type: 'TrafficPermission',
         mesh: 'mesh-1',
         name: 'tp-1',
@@ -1643,7 +1662,7 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/traffic-permissions/tp-1234').reply(200, {
+      .onGet('/meshes/mesh-01/traffic-permissions/tp-1234').reply(200, {
         type: 'TrafficPermission',
         mesh: 'mesh-1',
         name: 'tp-1234',
@@ -1664,7 +1683,7 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/traffic-permissions/tp-alpha-tango-donut').reply(200, {
+      .onGet('/meshes/mesh-01/traffic-permissions/tp-alpha-tango-donut').reply(200, {
         type: 'TrafficPermission',
         mesh: 'mesh-1',
         name: 'tp-alpha-tango-donut',
diff --git a/src/views/Policies/TrafficPermissions.vue b/src/views/Policies/TrafficPermissions.vue
index a59b5f421..88f78f788 100644
--- a/src/views/Policies/TrafficPermissions.vue
+++ b/src/views/Policies/TrafficPermissions.vue
@@ -1,5 +1,26 @@
 <template>
   <div class="traffic-permissions">
+    <div
+      v-if="securityWarning"
+      class="alert-wrapper"
+    >
+      <KAlert appearance="warning">
+        <template slot="alertMessage">
+          <div class="alert-content">
+            <p>
+              <strong>All traffic is allowed:</strong> All service traffic is
+              enabled on this Mesh by default because Mutual TLS is not enabled.
+            </p>
+            <p>
+              Traffic Permissions are currently being ignored by the
+              <strong>{{ $route.params.mesh }}</strong> Mesh because Mutual TLS
+              is not enabled. You can still create and edit Traffic Permissions,
+              but they will go into effect only when Mutual TLS is enabled on the Mesh.
+            </p>
+          </div>
+        </template>
+      </KAlert>
+    </div>
     <FrameSkeleton>
       <DataOverview
         :page-size="pageSize"
@@ -157,7 +178,8 @@ export default {
       pageOffset: null,
       next: null,
       hasNext: false,
-      previous: []
+      previous: [],
+      securityWarning: false
     }
   },
   computed: {
@@ -205,6 +227,7 @@ export default {
   methods: {
     init () {
       this.loadData()
+      this.mtlsWarning()
     },
     goToPreviousPage () {
       this.pageOffset = this.previous.pop()
@@ -352,10 +375,32 @@ export default {
           this.entityIsLoading = false
         }, process.env.VUE_APP_DATA_TIMEOUT)
       }
+    },
+    mtlsWarning () {
+      const mesh = this.$route.params.mesh
+      const entityMesh = (mesh !== 'all')
+        ? mesh
+        : null
+
+      if (entityMesh) {
+        return this.$api.getMesh(entityMesh)
+          .then(response => {
+            const { mtls } = response
+
+            if (mtls && mtls.enabledBackend && mtls.enabledBackend !== null) {
+              this.securityWarning = false
+            } else {
+              this.securityWarning = true
+            }
+          })
+      }
     }
   }
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.alert-wrapper {
+  margin-bottom: var(--spacing-md);
+}
 </style>

From 53de870aa0083f1220c09636718bad707940bc65 Mon Sep 17 00:00:00 2001
From: "Daryn St. Pierre" <daryn.st.pierre@konghq.com>
Date: Mon, 22 Jun 2020 08:35:20 -0400
Subject: [PATCH 2/3] added mtls information to the default mesh in the mocks
 so that we can test the traffic permissions warning easier.

---
 src/services/mock.js | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/services/mock.js b/src/services/mock.js
index 458f645c6..696635c07 100644
--- a/src/services/mock.js
+++ b/src/services/mock.js
@@ -65,12 +65,29 @@ export default class Mock {
       })
       .onGet('/meshes/default').reply(200, {
         type: 'Mesh',
-        name: 'default',
-        mtls: {
-          ca: {
-            builtin: {}
-          }
-        }
+        name: 'default'
+        // mtls: {
+        //   enabledBackend: 'ca-1',
+        //   backends: [
+        //     {
+        //       name: 'ca-1',
+        //       type: 'provided',
+        //       dpCert: {
+        //         rotation: {
+        //           expiration: '1d'
+        //         }
+        //       },
+        //       conf: {
+        //         cert: {
+        //           secret: 'name-of-secret'
+        //         },
+        //         key: {
+        //           secret: 'name-of-secret'
+        //         }
+        //       }
+        //     }
+        //   ]
+        // }
       })
       .onGet('/meshes/mesh-01').reply(200, {
         type: 'Mesh',

From ce502e8103c8232542365fcc4762e341e99823bf Mon Sep 17 00:00:00 2001
From: "Daryn St. Pierre" <daryn.st.pierre@konghq.com>
Date: Mon, 22 Jun 2020 13:28:55 -0400
Subject: [PATCH 3/3] move all mTLS content in the warning to one line instead
 of 2.

---
 src/views/Policies/TrafficPermissions.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/views/Policies/TrafficPermissions.vue b/src/views/Policies/TrafficPermissions.vue
index 88f78f788..585a4f0ee 100644
--- a/src/views/Policies/TrafficPermissions.vue
+++ b/src/views/Policies/TrafficPermissions.vue
@@ -10,8 +10,6 @@
             <p>
               <strong>All traffic is allowed:</strong> All service traffic is
               enabled on this Mesh by default because Mutual TLS is not enabled.
-            </p>
-            <p>
               Traffic Permissions are currently being ignored by the
               <strong>{{ $route.params.mesh }}</strong> Mesh because Mutual TLS
               is not enabled. You can still create and edit Traffic Permissions,