Skip to content

feat: Add copy function for raw JSON in container and network detail views #11141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wanghe-fit2cloud merged 3 commits into from
Dec 1, 2025
Merged

feat: Add copy function for raw JSON in container and network detail views #11141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
88698f7
feat: Add copy button for raw JSON in container and network detail views
HynoR Dec 1, 2025
716569a
refactor: Change CodemirrorPro component from disabled to readonly in…
HynoR Dec 1, 2025
844f411
feat: Add readonly prop to CodemirrorPro component for enhanced editi…
HynoR Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions frontend/src/components/codemirror-pro/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue';
import { basicSetup, EditorView } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { EditorState, Extension } from '@codemirror/state';
import { oneDark } from '@codemirror/theme-one-dark';
import { StreamLanguage } from '@codemirror/language';
import { nginx } from './nginx';
Expand All @@ -27,6 +27,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
readonly: {
type: Boolean,
default: false,
},
modelValue: {
type: String,
default: '',
Expand Down Expand Up @@ -119,7 +123,7 @@ const initCodeMirror = () => {
},
});

const extensions = [
const extensions: Extension[] = [
defaultTheme,
oneDark,
basicSetup,
Expand All @@ -131,6 +135,7 @@ const initCodeMirror = () => {
}),
placeholder(props.placeholder),
EditorView.editable.of(!props.disabled),
EditorState.readOnly.of(props.readonly),
];

if (props.lineWrapping) {
Expand Down
12 changes: 11 additions & 1 deletion frontend/src/views/container/container/inspect/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,12 @@
</el-tab-pane>

<el-tab-pane :label="$t('commons.button.view')" name="view">
<CodemirrorPro v-model="rawJson" :height-diff="240" :disabled="true" mode="json" />
<div class="mb-2 flex justify-start">
<el-button type="primary" @click="handleCopyRawJson" icon="DocumentCopy" size="default">
{{ $t('commons.button.copy') }}
</el-button>
</div>
<CodemirrorPro v-model="rawJson" :height-diff="240" :readonly="true" mode="json" />
</el-tab-pane>
</el-tabs>

Expand All @@ -165,6 +170,7 @@
import { ref } from 'vue';
import CodemirrorPro from '@/components/codemirror-pro/index.vue';
import { routerToFileWithPath } from '@/utils/router';
import { copyText } from '@/utils/util';
import i18n from '@/lang';

const visible = ref(false);
Expand Down Expand Up @@ -263,6 +269,10 @@ const handleJumpToFile = (path: string) => {
}
};

const handleCopyRawJson = () => {
copyText(rawJson.value);
};

defineExpose({
acceptParams,
});
Expand Down
12 changes: 11 additions & 1 deletion frontend/src/views/container/network/detail/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,12 @@
</el-tab-pane>

<el-tab-pane :label="$t('commons.button.view')" name="raw">
<CodemirrorPro v-model="rawJson" :height-diff="240" :disabled="true" mode="json" />
<div class="mb-2 flex justify-start">
<el-button type="primary" @click="handleCopyRawJson" icon="DocumentCopy" size="default">
{{ $t('commons.button.copy') }}
</el-button>
</div>
<CodemirrorPro v-model="rawJson" :height-diff="240" :readonly="true" mode="json" />
</el-tab-pane>
</el-tabs>

Expand All @@ -108,6 +113,7 @@
<script lang="ts" setup>
import { ref, computed } from 'vue';
import CodemirrorPro from '@/components/codemirror-pro/index.vue';
import { copyText } from '@/utils/util';

const visible = ref(false);
const activeTab = ref('overview');
Expand Down Expand Up @@ -173,6 +179,10 @@ const containerList = computed(() => {
}));
});

const handleCopyRawJson = () => {
copyText(rawJson.value);
};

defineExpose({
acceptParams,
});
Expand Down
Loading