feat: support filtering app store composes (#13432)

* feat: support filtering app store composes

* fix: initialize app store filter during setup

agent/app/dto/common_req.go

@@ -2,7 +2,8 @@ package dto
 
 type SearchWithPage struct {
 	PageInfo
-	Info string `json:"info"`
+	Info            string `json:"info"`
+	ExcludeAppStore bool   `json:"excludeAppStore"`
 }
 
 type SearchPageWithType struct {

agent/app/service/container_compose.go

@@ -158,6 +158,17 @@ func (u *ContainerService) PageCompose(req dto.SearchWithPage) (int64, interface
 			}
 		}
 	}
+	if req.ExcludeAppStore {
+		length, count := len(records), 0
+		for count < length {
+			if records[count].CreatedBy == "Apps" {
+				records = append(records[:count], records[(count+1):]...)
+				length--
+			} else {
+				count++
+			}
+		}
+	}
 	sort.Slice(records, func(i, j int) bool {
 		if records[i].IsPinned != records[j].IsPinned {
 			return records[i].IsPinned

frontend/src/api/interface/index.ts

@@ -22,6 +22,7 @@ export interface SearchWithPage {
     info: string;
     page: number;
     pageSize: number;
+    excludeAppStore?: boolean;
     orderBy?: string;
     order?: string;
     name?: string;

frontend/src/views/container/compose/index.vue

@@ -18,6 +18,15 @@
             </template>
             <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" />
+                <el-tooltip
+                    :content="includeAppStore ? $t('container.includeAppstore') : $t('container.excludeAppstore')"
+                >
+                    <el-button
+                        :type="includeAppStore ? '' : 'primary'"
+                        @click="searchWithAppShow(!includeAppStore)"
+                        :icon="includeAppStore ? 'View' : 'Hide'"
+                    />
+                </el-tooltip>
                 <TableRefresh @search="search()" />
                 <TableSetting title="container-refresh" @search="refresh()" />
             </template>
@@ -556,6 +565,7 @@ const dialogBackupRef = ref();
 const uploadRef = ref();
 
 const searchName = ref('');
+const includeAppStore = ref(localStorage.getItem('includeAppStore') !== 'false');
 const showType = ref('compose');
 const containerStats = ref<any[]>([]);
 const env = ref();
@@ -646,6 +656,7 @@ const refresh = async () => {
         info: searchName.value,
         page: 1,
         pageSize: 100,
+        excludeAppStore: !includeAppStore.value,
     };
     await searchCompose(params).then((res) => {
         data.value = res.data.items || [];
@@ -656,10 +667,12 @@ const search = async (withRefreshDetail?: boolean) => {
     if (!isActive.value || !isExist.value) {
         return;
     }
+    localStorage.setItem('includeAppStore', includeAppStore.value ? 'true' : 'false');
     let params = {
         info: searchName.value,
         page: 1,
         pageSize: 100,
+        excludeAppStore: !includeAppStore.value,
     };
     loading.value = true;
     await searchCompose(params)
@@ -675,6 +688,11 @@ const search = async (withRefreshDetail?: boolean) => {
         });
 };
 
+const searchWithAppShow = (item: boolean) => {
+    includeAppStore.value = item;
+    search();
+};
+
 const changePinned = async (row: Container.ComposeInfo) => {
     await composePin({
         name: row.name,

frontend/src/views/container/container/index.vue

@@ -488,7 +488,7 @@ import Uploads from '@/components/upload/index.vue';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import ContainerLogDialog from '@/components/log/container-drawer/index.vue';
 import Status from '@/components/status/index.vue';
-import { computed, reactive, onMounted, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import {
     containerItemStats,
     containerListStats,
@@ -539,7 +539,7 @@ const dialogCommitRef = ref();
 const dialogPortJumpRef = ref();
 const dialogBackupRef = ref();
 const opRef = ref();
-const includeAppStore = ref(true);
+const includeAppStore = ref(localStorage.getItem('includeAppStore') !== 'false');
 const columns = ref([]);
 
 const batchNames = ref();
@@ -1019,11 +1019,6 @@ const buttons = [
         },
     },
 ];
-
-onMounted(() => {
-    let includeItem = localStorage.getItem('includeAppStore');
-    includeAppStore.value = !includeItem || includeItem === 'true';
-});
 </script>
 
 <style scoped lang="scss">