feat: Edit the application Compose content to add a comparison. (#10855)

agent/app/dto/response/app.go

@@ -179,5 +179,6 @@ type AppParam struct {
 
 type AppConfig struct {
 	Params     []AppParam `json:"params"`
+	RawCompose string     `json:"rawCompose"`
 	request.AppContainerConfig
 }

agent/app/service/app_install.go

@@ -796,6 +796,9 @@ func (a *AppInstallService) GetParams(id uint) (*response.AppConfig, error) {
 	res.RestartPolicy = getRestartPolicy(install.DockerCompose)
 	res.WebUI = install.WebUI
 	res.Type = install.App.Type
+	if rawCompose, err := getUpgradeCompose(install, detail); err == nil {
+		res.RawCompose = rawCompose
+	}
 	return &res, nil
 }
 

frontend/src/api/interface/app.ts

@@ -270,6 +270,7 @@ export namespace App {
 
     export interface AppConfig {
         params: InstallParams[];
+        rawCompose?: string;
         cpuQuota: number;
         memoryLimit: number;
         memoryUnit: string;

frontend/src/views/app-store/installed/detail/index.vue

@@ -126,22 +126,26 @@
                         <span class="input-help">{{ $t('app.editComposeHelper') }}</span>
                     </el-form-item>
                     <div v-if="paramModel.editCompose">
+                        <el-button @click="openDiff()" type="primary" class="!mb-2">
+                            {{ $t('app.showDiff') }}
+                        </el-button>
                         <CodemirrorPro v-model="paramModel.dockerCompose" mode="yaml"></CodemirrorPro>
                     </div>
                 </div>
             </el-form>
         </div>
         <template #footer v-if="edit">
-            <span>
             <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
             <el-button type="primary" :disabled="loading" @click="submit(paramForm)">
                 {{ $t('commons.button.confirm') }}
             </el-button>
-            </span>
         </template>
+        <Diff ref="composeDiffRef" @confirm="getNewCompose" />
     </DrawerPro>
 </template>
 <script lang="ts" setup>
+import Diff from '@/views/app-store/installed/upgrade/diff/index.vue';
+
 import { App } from '@/api/interface/app';
 import { getAppInstallParams, updateAppInstallParams, updateInstallConfig } from '@/api/modules/app';
 import { reactive, ref } from 'vue';
@@ -200,6 +204,16 @@ const limits = ref<Container.ResourceLimit>({
     memory: null as number,
 });
 const oldMemory = ref<number>(0);
+const composeDiffRef = ref();
+const rawCompose = ref('');
+
+const getNewCompose = (compose: string) => {
+    paramModel.dockerCompose = compose;
+};
+
+const openDiff = () => {
+    composeDiffRef.value.acceptParams(rawCompose.value, paramModel.dockerCompose);
+};
 
 function checkWebUI() {
     if (webUI.domain !== '') {
@@ -266,6 +280,7 @@ const get = async () => {
     try {
         loading.value = true;
         const res = await getAppInstallParams(Number(paramData.value.id));
+        rawCompose.value = res.data.rawCompose;
         const configParams = res.data.params || [];
         if (configParams && configParams.length > 0) {
             configParams.forEach((d) => {

frontend/src/views/app-store/installed/upgrade/index.vue

@@ -70,12 +70,10 @@
             </div>
         </div>
         <template #footer>
-            <span class="dialog-footer">
             <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
             <el-button type="primary" @click="onOperate" :disabled="versions == null || loading">
                 {{ $t('commons.button.confirm') }}
             </el-button>
-            </span>
         </template>
         <Diff ref="composeDiffRef" @confirm="getNewCompose" />
     </DrawerPro>