add download btn

Signed-off-by: Frank Jogeleit <[email protected]>
kyverno · Mar 25, 2024 · 786e88e · 786e88e
1 parent e86ad78
commit 786e88e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/frontend/modules/core/components/resource/ExceptionDialog.vue b/frontend/modules/core/components/resource/ExceptionDialog.vue
@@ -18,7 +18,8 @@
             </app-row>
             <app-row style="position: relative;">
               <highlightjs :code="content" />
-              <v-btn theme="dark" style="position: absolute; top: 25px; right: 25px;" rounded="0" color="primary" variant="tonal" @click="copy(content)" :icon="copied ? 'mdi-content-save-check' : 'mdi-content-save'" />
+              <v-btn alt="Copy to Clipboard" theme="dark" style="position: absolute; top: 25px; right: 25px;" rounded="0" color="primary" variant="tonal" @click="copy(content)" :icon="copied ? 'mdi-content-save-check' : 'mdi-content-save'" />
+              <v-btn alt="Download as File" theme="dark" style="position: absolute; top: 25px; right: 87px;" rounded="0" color="primary" variant="tonal" @click="download()" icon="mdi-file-download" />
             </app-row>
           </template>
         </v-container>
@@ -33,7 +34,8 @@
 <script setup lang="ts">
 import { callAPI } from "~/modules/core/composables/api";
 import { useClipboard } from '@vueuse/core'
-import {FetchError} from "ofetch";
+import { FetchError } from "ofetch";
+import { parse } from "yaml";
 
 
 const props = defineProps<{
@@ -70,4 +72,23 @@ const request = async () => {
     open.value = true
   }
 }
+
+const download = () => {
+  if (!content.value) return;
+
+  try {
+    const res = parse(content.value)
+
+    let element = document.createElement('a');
+    element.setAttribute('href', 'data:application/yaml;charset=utf-8,' + encodeURIComponent(content.value));
+    element.setAttribute('download', `${res?.metadata?.name || props.resource}.yaml`);
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+    document.body.removeChild(element);
+  } catch {
+  }
+}
 </script>
diff --git a/frontend/pages/source/[source]/[category].vue b/frontend/pages/source/[source]/[category].vue
@@ -11,11 +11,11 @@
       <app-row>
         <resource-cluster-list :details="false" :exceptions="data.exceptions" />
       </app-row>
-      <resource-namespace-section v-if="data.namespaces.length" :namespaces="data.namespaces" />
+      <resource-namespace-section v-if="data.namespaces.length" :namespaces="data.namespaces" :exceptions="data.exceptions" />
     </template>
     <template v-else>
       <policy-cluster-results :source="route.params.source" :policy="route.params.policy" />
-      <policy-namespace-section :namespaces="data.namespaces" :source="route.params.source" :policy="route.params.policy" />
+      <policy-namespace-section :namespaces="data.namespaces" :source="route.params.source" :policy="route.params.policy" :exceptions="data.exceptions" />
     </template>
   </page-layout>
 </template>