From 7543cf79eee2c3ad899b51b9d48555aa43745e96 Mon Sep 17 00:00:00 2001
From: yyh <24493052+yongheng2016@users.noreply.github.com>
Date: Mon, 17 Jun 2024 17:16:26 +0800
Subject: [PATCH] feat: controhub/configmaps secrets service serviceacounts
 edit

---
 apps/adminConsole/src/containers/Yaml.vue     |   3 +-
 .../Configurations/Configmaps.vue             |  20 ++
 .../Configurations/Secrets.vue                |  20 ++
 .../Configurations/ServiceAccounts.vue        |  19 ++
 .../ApplicationSpaces/Services/Detail.vue     |  48 ++-
 .../src/pages/NamespacePods/Yaml.vue          |   6 +-
 .../src/pages/NamespacePods/Yaml2.vue         |   6 +-
 .../src/pages/NamespacePods/Yaml3.vue         | 306 ++++++++++++++++++
 apps/adminConsole/src/pages/Pods/Yaml2.vue    |   3 +-
 apps/common/src/containers/Yaml.vue           |   3 +-
 apps/common/src/network/index.ts              |  20 ++
 apps/nodes/src/pages/Pods/Yaml2.vue           |   3 +-
 12 files changed, 419 insertions(+), 38 deletions(-)
 create mode 100644 apps/adminConsole/src/pages/NamespacePods/Yaml3.vue

diff --git a/apps/adminConsole/src/containers/Yaml.vue b/apps/adminConsole/src/containers/Yaml.vue
index 4137fb6..d0ee54f 100644
--- a/apps/adminConsole/src/containers/Yaml.vue
+++ b/apps/adminConsole/src/containers/Yaml.vue
@@ -11,7 +11,8 @@
 			useWorker: true,
 			keyboardHandler: 'vscode',
 			wrapEnabled: true,
-			tabSize: 2
+			tabSize: 2,
+			wrap: true
 		}"
 	/>
 </template>
diff --git a/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/Configmaps.vue b/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/Configmaps.vue
index d68b3f7..13f956d 100644
--- a/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/Configmaps.vue
+++ b/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/Configmaps.vue
@@ -1,5 +1,10 @@
 <template>
 	<MyContentPage>
+		<template #extra>
+			<div class="col-auto">
+				<MoreSelection :options="options" size="md"></MoreSelection>
+			</div>
+		</template>
 		<MyPage>
 			<my-card square flat animated :title="t('DETAILS')">
 				<DetailPage :data="detail"></DetailPage>
@@ -13,6 +18,7 @@
 			<q-inner-loading :showing="loading"> </q-inner-loading>
 		</MyPage>
 	</MyContentPage>
+	<Yaml ref="yamlRef" :name="t('EDIT_YAML')" module="configmaps"></Yaml>
 </template>
 
 <script setup lang="ts">
@@ -29,11 +35,25 @@ import MyCard from '@packages/ui/src/components/MyCard2.vue';
 import MyPage from '@packages/ui/src/containers/MyPage.vue';
 import MyContentPage from 'src/components/MyContentPage.vue';
 import DataDetail from '@packages/ui/src/containers/DataDetail.vue';
+import MoreSelection from '@packages/ui/src/components/MoreSelection.vue';
+import Yaml from 'src/pages/NamespacePods/Yaml3.vue';
 
 let loading = ref(false);
 const detail = ref();
 const route = useRoute();
 const configmapsData = ref<{ [key: string]: string }>({});
+const yamlRef = ref();
+
+const options = [
+	{
+		label: t('EDIT_YAML'),
+		value: 'edit',
+		icon: 'sym_r_edit',
+		onClick: () => {
+			yamlRef.value.show();
+		}
+	}
+];
 
 const getAttrs = (detail: any) => {
 	const { cluster, namespace }: any = route.params;
diff --git a/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/Secrets.vue b/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/Secrets.vue
index d535a41..f0aa03a 100644
--- a/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/Secrets.vue
+++ b/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/Secrets.vue
@@ -1,5 +1,10 @@
 <template>
 	<MyContentPage>
+		<template #extra>
+			<div class="col-auto">
+				<MoreSelection :options="options" size="md"></MoreSelection>
+			</div>
+		</template>
 		<MyPage>
 			<my-card square flat animated :title="t('DETAILS')">
 				<DetailPage :data="detail"></DetailPage>
@@ -29,6 +34,7 @@
 			<q-inner-loading :showing="loading"> </q-inner-loading>
 		</MyPage>
 	</MyContentPage>
+	<Yaml ref="yamlRef" :name="t('EDIT_YAML')" module="secrets"></Yaml>
 </template>
 
 <script setup lang="ts">
@@ -47,12 +53,26 @@ import MyPage from '@packages/ui/src/containers/MyPage.vue';
 import MyContentPage from 'src/components/MyContentPage.vue';
 import { safeBtoa } from '@packages/ui/src/utils/base64';
 import DataDetail from '@packages/ui/src/containers/DataDetail.vue';
+import MoreSelection from '@packages/ui/src/components/MoreSelection.vue';
+import Yaml from 'src/pages/NamespacePods/Yaml3.vue';
 
 let loading = ref(false);
 const secretValueVisible = ref(false);
 const detail = ref();
 const route = useRoute();
 const secretsData = ref<{ [key: string]: string }>({});
+const yamlRef = ref();
+
+const options = [
+	{
+		label: t('EDIT_YAML'),
+		value: 'edit',
+		icon: 'sym_r_edit',
+		onClick: () => {
+			yamlRef.value.show();
+		}
+	}
+];
 
 const getAttrs = (detail: any) => {
 	const { cluster, namespace } = route.params;
diff --git a/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/ServiceAccounts.vue b/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/ServiceAccounts.vue
index ae34272..b0f4e1d 100644
--- a/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/ServiceAccounts.vue
+++ b/apps/adminConsole/src/pages/ApplicationSpaces/Configurations/ServiceAccounts.vue
@@ -1,5 +1,10 @@
 <template>
 	<MyContentPage>
+		<template #extra>
+			<div class="col-auto">
+				<MoreSelection :options="options" size="md"></MoreSelection>
+			</div>
+		</template>
 		<MyPage>
 			<my-card square flat animated :title="t('DETAILS')">
 				<DetailPage :data="detail"></DetailPage>
@@ -13,6 +18,7 @@
 			></Detail>
 			<q-inner-loading :showing="loading"> </q-inner-loading>
 		</MyPage>
+		<Yaml ref="yamlRef" :name="t('EDIT_YAML')" module="serviceaccounts"></Yaml>
 	</MyContentPage>
 </template>
 
@@ -29,6 +35,8 @@ import { getLocalTime } from 'src/utils';
 import MyCard from '@packages/ui/src/components/MyCard2.vue';
 import MyPage from '@packages/ui/src/containers/MyPage.vue';
 import MyContentPage from 'src/components/MyContentPage.vue';
+import MoreSelection from '@packages/ui/src/components/MoreSelection.vue';
+import Yaml from 'src/pages/NamespacePods/Yaml3.vue';
 
 const loading = ref(false);
 const secrets = ref();
@@ -36,7 +44,18 @@ const data = ref();
 const detail = ref();
 const route = useRoute();
 const serviceAccountName = ref();
+const yamlRef = ref();
 
+const options = [
+	{
+		label: t('EDIT_YAML'),
+		value: 'edit',
+		icon: 'sym_r_edit',
+		onClick: () => {
+			yamlRef.value.show();
+		}
+	}
+];
 const getAttrs = (detail: any) => {
 	const { cluster, namespace } = route.params;
 
diff --git a/apps/adminConsole/src/pages/ApplicationSpaces/Services/Detail.vue b/apps/adminConsole/src/pages/ApplicationSpaces/Services/Detail.vue
index e71b3c1..b6d0681 100644
--- a/apps/adminConsole/src/pages/ApplicationSpaces/Services/Detail.vue
+++ b/apps/adminConsole/src/pages/ApplicationSpaces/Services/Detail.vue
@@ -2,23 +2,7 @@
 	<MyContentPage>
 		<template #extra>
 			<div class="col-auto">
-				<q-btn color="grey-7" round flat icon="more_vert">
-					<q-menu cover auto-close>
-						<q-list>
-							<q-item
-								clickable
-								v-close-popup
-								v-for="item in options"
-								:key="item.key"
-								@click="item.onClick"
-							>
-								<q-item-section>
-									<q-item-label>{{ item.text }}</q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-menu>
-				</q-btn>
+				<MoreSelection :options="options" size="md"></MoreSelection>
 			</div>
 		</template>
 		<MyPage>
@@ -62,6 +46,7 @@
 			</MyCard>
 			<q-inner-loading :showing="loading"> </q-inner-loading>
 		</MyPage>
+		<Yaml ref="yamlRef" :name="t('EDIT_YAML')" module="services"></Yaml>
 	</MyContentPage>
 </template>
 
@@ -93,6 +78,8 @@ import WorkloadPanel from '@packages/ui/src/containers/WorkloadPanel.vue';
 import MyContentPage from 'src/components/MyContentPage.vue';
 import MyCard from '@packages/ui/src/components/MyCard2.vue';
 import QButtonStyle from '@packages/ui/src/components/QButtonStyle.vue';
+import MoreSelection from '@packages/ui/src/components/MoreSelection.vue';
+import Yaml from 'src/pages/NamespacePods/Yaml3.vue';
 
 const $q = useQuasar();
 let loading = ref(false);
@@ -103,6 +90,8 @@ const detail = ref();
 const PodContainerRef = ref();
 const workloads = ref([]);
 const pods = ref([]);
+const yamlRef = ref();
+
 const options = [
 	// {
 	//   key: 'edit',
@@ -124,9 +113,9 @@ const options = [
 	// },
 	{
 		key: 'editGateway',
-		icon: 'ip',
-		text: t('EDIT_EXTERNAL_ACCESS'),
-		action: 'edit',
+		icon: 'edit',
+		label: t('EDIT_EXTERNAL_ACCESS'),
+		value: 'editGateway',
 		// show: this.store.detail.type === SERVICE_TYPES.VirtualIP,
 		onClick: () => {
 			console.log('editGateway');
@@ -147,7 +136,7 @@ const options = [
 					console.log('Cancel');
 				});
 		}
-	}
+	},
 	// {
 	//   key: 'serviceMonitor',
 	//   icon: 'linechart',
@@ -157,15 +146,14 @@ const options = [
 	//     console.log('serviceMonitor');
 	//   },
 	// },
-	// {
-	//   key: 'editYaml',
-	//   icon: 'pen',
-	//   text: t('EDIT_YAML'),
-	//   action: 'edit',
-	//   onClick: () => {
-	//     console.log('editYaml');
-	//   },
-	// },
+	{
+		label: t('EDIT_YAML'),
+		value: 'edit',
+		icon: 'sym_r_edit',
+		onClick: () => {
+			yamlRef.value.show();
+		}
+	}
 	// {
 	//   key: 'delete',
 	//   icon: 'trash',
diff --git a/apps/adminConsole/src/pages/NamespacePods/Yaml.vue b/apps/adminConsole/src/pages/NamespacePods/Yaml.vue
index 54cc712..a864202 100644
--- a/apps/adminConsole/src/pages/NamespacePods/Yaml.vue
+++ b/apps/adminConsole/src/pages/NamespacePods/Yaml.vue
@@ -26,7 +26,7 @@
 					<q-space />
 					<q-btn icon="close" flat round dense v-close-popup />
 				</div>
-				<div class="relative-position" style="height: calc(100vh - 154px)">
+				<div class="relative-position" style="height: calc(100vh - 158px)">
 					<div
 						style="
 							height: calc(100%);
@@ -65,7 +65,8 @@
 								useWorker: true,
 								keyboardHandler: 'vscode',
 								wrapEnabled: true,
-								tabSize: 2
+								tabSize: 2,
+								wrap: true
 							}"
 						/>
 					</div>
@@ -257,6 +258,7 @@ const update = async (
 		//
 	}
 	loading2.value = false;
+	loading.value = false;
 };
 
 const handleFileAdded = (file: any) => {
diff --git a/apps/adminConsole/src/pages/NamespacePods/Yaml2.vue b/apps/adminConsole/src/pages/NamespacePods/Yaml2.vue
index 992c080..ee466ec 100644
--- a/apps/adminConsole/src/pages/NamespacePods/Yaml2.vue
+++ b/apps/adminConsole/src/pages/NamespacePods/Yaml2.vue
@@ -26,7 +26,7 @@
 					<q-space />
 					<q-btn icon="close" flat round dense v-close-popup />
 				</div>
-				<div class="relative-position" style="height: calc(100vh - 154px)">
+				<div class="relative-position" style="height: calc(100vh - 158px)">
 					<div
 						style="
 							height: calc(100%);
@@ -65,7 +65,8 @@
 								useWorker: true,
 								keyboardHandler: 'vscode',
 								wrapEnabled: true,
-								tabSize: 2
+								tabSize: 2,
+								wrap: true
 							}"
 						/>
 					</div>
@@ -256,6 +257,7 @@ const update = async (
 		//
 	}
 	loading2.value = false;
+	loading.value = false;
 };
 
 const handleFileAdded = (file: any) => {
diff --git a/apps/adminConsole/src/pages/NamespacePods/Yaml3.vue b/apps/adminConsole/src/pages/NamespacePods/Yaml3.vue
new file mode 100644
index 0000000..581f8e9
--- /dev/null
+++ b/apps/adminConsole/src/pages/NamespacePods/Yaml3.vue
@@ -0,0 +1,306 @@
+<template>
+	<div class="yaml-container">
+		<q-btn
+			v-if="$slots.default"
+			no-caps
+			@click="yamlShow"
+			flat
+			outline
+			color="primary"
+		>
+			<slot></slot>
+		</q-btn>
+		<q-dialog
+			persistent
+			full-width
+			full-height
+			v-model="visible2"
+			@show="show"
+			@hide="hide"
+		>
+			<q-card>
+				<div class="row items-center q-pa-md">
+					<div class="q-h6">
+						{{ name }}
+					</div>
+					<q-space />
+					<q-btn icon="close" flat round dense v-close-popup />
+				</div>
+				<div class="relative-position" style="height: calc(100vh - 158px)">
+					<div
+						style="
+							height: calc(100%);
+							border-radius: 6px;
+							overflow: hidden;
+							position: relative;
+						"
+						class="q-mx-sm q-b-sm"
+					>
+						<!-- <q-btn
+            color="primary"
+            dense
+            rounded
+            padding="xs md"
+            class="yaml-tool-container"
+          >
+            <q-uploader v-model="fileList" :auto-upload="false" accept=".yaml">
+              <template v-slot:header>
+                <q-icon name="upload" />
+              </template>
+            </q-uploader>
+            <q-icon dense name="upload" @click="handleDownload" />
+            <q-separator spaced inset vertical dark />
+            <q-icon name="download" @click="handleDownload" />
+          </q-btn> -->
+						<v-ace-editor
+							v-if="aceVisileb"
+							v-model:value="data"
+							lang="yaml"
+							theme="chaos"
+							:readonly="loading2"
+							style="height: calc(100%)"
+							:options="{
+								showGutter: true,
+								showPrintMargin: false,
+								useWorker: true,
+								keyboardHandler: 'vscode',
+								wrapEnabled: true,
+								tabSize: 2,
+								wrap: true
+							}"
+						/>
+					</div>
+					<q-card-section class="row justify-end q-pa-sm">
+						<q-btn
+							no-caps
+							unelevated
+							outline
+							rounded
+							padding="6px xl"
+							@click="yamlHide"
+						>
+							<span>{{ t('CANCEL') }}</span>
+						</q-btn>
+						<q-btn
+							no-caps
+							color="primary"
+							unelevated
+							rounded
+							padding="6px xl"
+							style="margin-left: 12px"
+							:loading="loading2"
+							@click="submit"
+						>
+							{{ t('OK') }}
+						</q-btn>
+					</q-card-section>
+				</div>
+			</q-card>
+			<q-inner-loading :showing="loading"> </q-inner-loading>
+		</q-dialog>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	getWorkloadsControler,
+	getYaml,
+	updateWorkloadsControler,
+	getDetail,
+	updateDetail
+} from 'src/network';
+import { computed, onMounted, ref, watch } from 'vue';
+import yaml, { load } from 'js-yaml';
+import { VAceEditor } from 'vue3-ace-editor';
+import ace from 'ace-builds';
+import 'ace-builds/src-noconflict/mode-yaml';
+// import 'ace-builds/src-noconflict/snippets/yaml';
+// import 'ace-builds/src-noconflict/theme-textmate';
+
+import 'ace-builds/src-noconflict/theme-textmate';
+import 'ace-builds/src-noconflict/mode-groovy';
+import 'ace-builds/src-noconflict/theme-chaos';
+// import 'ace-builds/src-noconflict/keybinding-vscode';
+import 'ace-builds/src-noconflict/ext-searchbox';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import workerJsonUrl from 'file-loader?esModule=false!ace-builds/src-noconflict/worker-yaml.js';
+import { objectToYaml, yamlToObject } from './yaml';
+import { useRoute } from 'vue-router';
+import { Loading, Notify, useQuasar } from 'quasar';
+import { ObjectMapper } from 'src/utils/object.mapper';
+import { t } from 'src/boot/i18n';
+import { get, set } from 'lodash-es';
+import { saveAs } from 'file-saver';
+import { API_VERSIONS } from 'src/utils/constants';
+import { cloneDeep, setWith } from 'lodash';
+ace.config.setModuleUrl('ace/mode/yaml_worker', workerJsonUrl);
+// src/components/Modals/EditYaml/index.jsx
+interface Props {
+	name?: string;
+	module?: 'secrets';
+}
+
+const emits = defineEmits(['change']);
+
+const $q = useQuasar();
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const data = ref();
+const detail = ref();
+const visible2 = ref(false);
+const aceVisileb = ref(false);
+const loading = ref(false);
+const loading2 = ref(false);
+const theme = ref('chaos');
+const fileList = ref();
+const mode = computed(() => {
+	const { kind } = route.params as Record<string, string>;
+
+	switch (kind) {
+		case 'deployments':
+			return 'deployment';
+		case 'statefulsets':
+			return 'statefulset';
+		case 'daemonsets':
+			return 'daemonset';
+		default:
+			return 'deployment';
+	}
+});
+
+const route = useRoute();
+
+const yamlShow = () => {
+	visible2.value = true;
+};
+
+const yamlHide = () => {
+	visible2.value = false;
+};
+
+const show = (evt: Event) => {
+	fetchData();
+	aceVisileb.value = true;
+};
+
+const hide = (evt: Event) => {
+	aceVisileb.value = false;
+	data.value = undefined;
+};
+
+const apiVersion = API_VERSIONS[props.module] || '';
+
+const fetchData = () => {
+	const { namespace, kind, name } = route.params as Record<string, string>;
+	const type = props.module || kind;
+	loading.value = true;
+	getDetail(apiVersion, { namespace, kind: type, name })
+		.then((res) => {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			detail.value = ObjectMapper[type](res.data);
+			data.value = objectToYaml(detail.value._originData);
+		})
+		.finally(() => {
+			loading.value = false;
+		});
+};
+
+const saveAsFile = (text = '', fileName = 'default.txt') => {
+	const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
+	saveAs(blob, fileName);
+};
+
+const handleDownload = () => {
+	let value = data.value;
+	let template;
+	if (value.metadata) {
+		template = value;
+	} else {
+		const values: any = Object.values(value);
+		if (values && values[0] && values[0].metadata) {
+			template = values[0];
+		}
+	}
+	const name = get(template, 'metadata.name', 'default');
+	const namespace = get(template, 'metadata.namespace', '');
+	const kind = get(template, 'kind', '').toLowerCase();
+	const fileName = [name, namespace, kind].filter((item) => item).join('.');
+	saveAsFile(value, `${fileName}.${mode.value}.yaml`);
+};
+
+const submit = async () => {
+	let newData = data.value;
+	set(newData, 'metadata.resourceVersion', detail.value.resourceVersion);
+	update(detail, newData);
+};
+
+const update = async (
+	params: Record<string, any>,
+	data: Record<string, any>
+) => {
+	let newObject = yamlToObject(data, false)[0];
+	try {
+		loading2.value = true;
+		const { namespace, kind, name } = route.params as Record<string, string>;
+
+		const type = props.module || kind;
+		loading.value = true;
+		getDetail(apiVersion, { namespace, kind: type, name });
+		const { data: result } = await getDetail(apiVersion, {
+			namespace,
+			kind: type,
+			name
+		});
+
+		const resourceVersion = get(result, 'metadata.resourceVersion');
+		if (resourceVersion) {
+			set(newObject, 'metadata.resourceVersion', resourceVersion);
+		}
+		newObject = objectToYaml(newObject);
+		const obj = yamlToObject(newObject, false);
+		const { data } = await updateDetail(
+			apiVersion,
+			{ namespace, kind: type, name },
+			obj[0]
+		);
+		yamlHide();
+		emits('change');
+	} catch {
+		//
+	}
+	loading2.value = false;
+	loading.value = false;
+};
+
+const handleFileAdded = (file: any) => {
+	if (file.type === 'application/x-yaml') {
+		fileList.value = [file];
+	} else {
+		fileList.value = [];
+	}
+};
+
+const handleFileFailed = (err: any, file: any) => {
+	fileList.value = [];
+};
+
+defineExpose({
+	show: yamlShow
+});
+</script>
+
+<style lang="scss" scoped>
+.yaml-container {
+	font-family: 'Roboto';
+}
+.yaml-tool-container {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	z-index: 1;
+}
+</style>
diff --git a/apps/adminConsole/src/pages/Pods/Yaml2.vue b/apps/adminConsole/src/pages/Pods/Yaml2.vue
index 74e5d30..e9eb899 100644
--- a/apps/adminConsole/src/pages/Pods/Yaml2.vue
+++ b/apps/adminConsole/src/pages/Pods/Yaml2.vue
@@ -26,7 +26,8 @@
 				:options="{
 					showGutter: true,
 					showPrintMargin: true,
-					useWorker: true
+					useWorker: true,
+					wrap: true
 				}"
 			/>
 		</q-card>
diff --git a/apps/common/src/containers/Yaml.vue b/apps/common/src/containers/Yaml.vue
index 0c56bd9..fae8e41 100644
--- a/apps/common/src/containers/Yaml.vue
+++ b/apps/common/src/containers/Yaml.vue
@@ -13,7 +13,8 @@
 			useWorker: false,
 			keyboardHandler: 'vscode',
 			wrapEnabled: true,
-			tabSize: 2
+			tabSize: 2,
+			wrap: true
 		}"
 	/>
 </template>
diff --git a/apps/common/src/network/index.ts b/apps/common/src/network/index.ts
index 30b90ba..cf61bb2 100644
--- a/apps/common/src/network/index.ts
+++ b/apps/common/src/network/index.ts
@@ -372,6 +372,15 @@ export const getWorkloadsControler = (
 	return api.get(`/apis/apps/v1/namespaces/${namespace}/${kind}/${name}`);
 };
 
+export const getDetail = (
+	apiVersion: string,
+	params: { namespace: string; kind: string; name: string }
+): Promise<AxiosResponse<ResourcesResponse>> => {
+	return api.get(
+		`${apiVersion}/namespaces/${params.namespace}/${params.kind}/${params.name}`
+	);
+};
+
 export const updateWorkloadsControler = (
 	namespace: string,
 	kind: string,
@@ -384,6 +393,17 @@ export const updateWorkloadsControler = (
 	);
 };
 
+export const updateDetail = (
+	apiVersion: string,
+	obj: { namespace: string; kind: string; name: string },
+	params: any
+): Promise<AxiosResponse<ResourcesResponse>> => {
+	return api.put(
+		`${apiVersion}/namespaces/${obj.namespace}/${obj.kind}/${obj.name}`,
+		params
+	);
+};
+
 export const updateCustomResources = (
 	namespace: string,
 	module: string,
diff --git a/apps/nodes/src/pages/Pods/Yaml2.vue b/apps/nodes/src/pages/Pods/Yaml2.vue
index 74e5d30..e9eb899 100644
--- a/apps/nodes/src/pages/Pods/Yaml2.vue
+++ b/apps/nodes/src/pages/Pods/Yaml2.vue
@@ -26,7 +26,8 @@
 				:options="{
 					showGutter: true,
 					showPrintMargin: true,
-					useWorker: true
+					useWorker: true,
+					wrap: true
 				}"
 			/>
 		</q-card>