From cf501348a9fd590df2329830860e2e28d2d96d7b Mon Sep 17 00:00:00 2001
From: "Daryn St. Pierre" <daryn.st.pierre@konghq.com>
Date: Mon, 6 Jul 2020 10:47:58 -0400
Subject: [PATCH 1/2] created a Diagnostics page that displas the Kuma config
 in a readable format.

---
 src/router.js             |  10 +++
 src/views/Diagnostics.vue | 157 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 167 insertions(+)
 create mode 100644 src/views/Diagnostics.vue

diff --git a/src/router.js b/src/router.js
index ef6307ccfe..4fa738d3fc 100644
--- a/src/router.js
+++ b/src/router.js
@@ -103,6 +103,16 @@ export default (store) => {
         breadcrumb: 'Overview'
       }
     },
+    // diagnostics
+    {
+      path: '/diagnostics',
+      name: 'diagnostics',
+      component: () => import(/* webpackChunkName: "diagnostics" */ '@/views/Diagnostics'),
+      meta: {
+        title: 'Diagnostics',
+        breadcrumb: 'Diagnostics'
+      }
+    },
     // remote CPs
     {
       path: '/remote-cp',
diff --git a/src/views/Diagnostics.vue b/src/views/Diagnostics.vue
new file mode 100644
index 0000000000..0c5c1f44ff
--- /dev/null
+++ b/src/views/Diagnostics.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="local-cps">
+    <page-header noflex>
+      <h2 class="xxl">
+        {{ pageTitle }}
+      </h2>
+    </page-header>
+    <FrameSkeleton class="py-2 px-4">
+      <div v-if="isReady">
+        <p
+          v-if="isReady && configUrl"
+          class="my-2"
+        >
+          You can view this configuration at <a
+            :href="configUrl"
+            target="_blank"
+          >{{ configUrl }}</a>
+        </p>
+        <prism
+          class="code-block"
+          language="json"
+          :code="codeOutput"
+        />
+      </div>
+
+      <!-- loading / error handling -->
+      <KEmptyState
+        v-if="isLoading || hasError"
+        cta-is-hidden
+      >
+        <template slot="title">
+          <div class="card-icon mb-3">
+            <KIcon
+              v-if="icon"
+              class="kong-icon--centered"
+              :color="iconColor"
+              :icon="icon"
+              size="42"
+            />
+          </div>
+          <span v-if="isLoading">
+            Data Loading...
+          </span>
+          <span v-else-if="hasError">
+            An error has occurred while trying to load this data.
+          </span>
+        </template>
+      </KEmptyState>
+    </FrameSkeleton>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Prism from 'vue-prismjs'
+import 'prismjs/themes/prism.css'
+import PageHeader from '@/components/Utils/PageHeader.vue'
+import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
+
+export default {
+  name: 'Diagnostics',
+  metaInfo: {
+    title: 'Diagnostics'
+  },
+  components: {
+    PageHeader,
+    FrameSkeleton,
+    Prism
+  },
+  data () {
+    return {
+      isLoading: true,
+      hasError: false
+    }
+  },
+  computed: {
+    ...mapGetters({
+      config: 'getConfig'
+    }),
+    icon () {
+      if (this.isLoading) {
+        return 'spinner'
+      } else if (this.hasError) {
+        return 'warning'
+      }
+
+      return false
+    },
+    iconColor () {
+      if (this.hasError) {
+        return 'var(--yellow-base)'
+      }
+
+      return '#ccc'
+    },
+    isReady () {
+      return !this.hasError && !this.isLoading
+    },
+    pageTitle () {
+      const metaTitle = this.$route.meta.title
+
+      return metaTitle
+    },
+    codeOutput () {
+      const code = this.config
+
+      return JSON.stringify(code, null, 2)
+    },
+    configUrl () {
+      const url = localStorage.getItem('kumaApiUrl') || null
+      const apiUrl = url
+        ? `${url}/config`
+        : null
+
+      return apiUrl
+    }
+  },
+  beforeMount () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      // if the config isn't present, run
+      if (!this.config) {
+        // fetch the config
+        this.$store.dispatch('getConfig')
+          .catch(error => {
+            this.hasError = true
+
+            console.log(error)
+          })
+          .finally(() => {
+            setTimeout(() => {
+              this.isLoading = false
+            }, process.env.VUE_APP_DATA_TIMEOUT)
+          })
+      } else {
+        setTimeout(() => {
+          this.isLoading = false
+        }, process.env.VUE_APP_DATA_TIMEOUT)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-icon {
+  text-align: center;
+
+  img, svg {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+</style>

From d85e0451afdac938f3f3dced7c62a17a80adef6a Mon Sep 17 00:00:00 2001
From: "Daryn St. Pierre" <daryn.st.pierre@konghq.com>
Date: Mon, 6 Jul 2020 11:01:50 -0400
Subject: [PATCH 2/2] added clipboard functionality.

---
 src/views/Diagnostics.vue | 46 +++++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/views/Diagnostics.vue b/src/views/Diagnostics.vue
index 0c5c1f44ff..ce3e043fca 100644
--- a/src/views/Diagnostics.vue
+++ b/src/views/Diagnostics.vue
@@ -6,22 +6,36 @@
       </h2>
     </page-header>
     <FrameSkeleton class="py-2 px-4">
-      <div v-if="isReady">
-        <p
-          v-if="isReady && configUrl"
-          class="my-2"
-        >
-          You can view this configuration at <a
-            :href="configUrl"
-            target="_blank"
-          >{{ configUrl }}</a>
-        </p>
-        <prism
-          class="code-block"
-          language="json"
-          :code="codeOutput"
-        />
-      </div>
+      <KCard
+        v-if="isReady"
+        border-variant="noBorder"
+      >
+        <template slot="body">
+          <prism
+            class="code-block"
+            language="json"
+            :code="codeOutput"
+          />
+        </template>
+        <template slot="actions">
+          <KClipboardProvider
+            v-if="codeOutput"
+            v-slot="{ copyToClipboard }"
+          >
+            <KPop placement="bottom">
+              <KButton
+                appearance="primary"
+                @click="() => { copyToClipboard(codeOutput) }"
+              >
+                Copy config to clipboard
+              </KButton>
+              <div slot="content">
+                <p>Config copied to clipboard!</p>
+              </div>
+            </KPop>
+          </KClipboardProvider>
+        </template>
+      </KCard>
 
       <!-- loading / error handling -->
       <KEmptyState