-
({ label: id, value: id }))}
+ onChange={(id) =>
+ onChange(id ? { id, desc: value?.desc ?? false } : undefined)
+ }
+ bindToBody
+ value={value?.id ?? null}
+ isClearable
/>
diff --git a/app/react/portainer/templates/app-templates/TemplateListSort/index.ts b/app/react/portainer/templates/app-templates/TemplateListSort/index.ts
new file mode 100644
index 000000000..8519dc4e6
--- /dev/null
+++ b/app/react/portainer/templates/app-templates/TemplateListSort/index.ts
@@ -0,0 +1 @@
+export { TemplateListSort } from './TemplateListSort';
diff --git a/app/react/portainer/templates/app-templates/types.ts b/app/react/portainer/templates/app-templates/types.ts
index 6d74e2009..ee755fa8a 100644
--- a/app/react/portainer/templates/app-templates/types.ts
+++ b/app/react/portainer/templates/app-templates/types.ts
@@ -1,10 +1,19 @@
+import { BasicTableSettings } from '@@/datatables/types';
+
import { Pair } from '../../settings/types';
+export interface ListState extends BasicTableSettings {
+ category: string | null;
+ setCategory: (category: string | null) => void;
+ type: TemplateType | null;
+ setType: (type: TemplateType | null) => void;
+}
+
export enum TemplateType {
Container = 1,
SwarmStack = 2,
ComposeStack = 3,
- ComposeEdgeStack = 4,
+ EdgeStack = 4,
}
/**
diff --git a/app/react/portainer/templates/app-templates/useFetchTemplateInfoMutation.ts b/app/react/portainer/templates/app-templates/useFetchTemplateInfoMutation.ts
new file mode 100644
index 000000000..7811112bf
--- /dev/null
+++ b/app/react/portainer/templates/app-templates/useFetchTemplateInfoMutation.ts
@@ -0,0 +1,52 @@
+import { useMutation } from 'react-query';
+
+import { StackType } from '@/react/common/stacks/types';
+import { mutationOptions, withGlobalError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { TemplateType } from './types';
+import { TemplateViewModel } from './view-model';
+
+export function useFetchTemplateInfoMutation() {
+ return useMutation(
+ getTemplateInfo,
+ mutationOptions(withGlobalError('Unable to fetch template info'))
+ );
+}
+
+async function getTemplateInfo(template: TemplateViewModel) {
+ const fileContent = await fetchFilePreview({
+ url: template.Repository.url,
+ file: template.Repository.stackfile,
+ });
+
+ const type = getCustomTemplateType(template.Type);
+
+ return {
+ type,
+ fileContent,
+ };
+}
+
+function getCustomTemplateType(type: TemplateType): StackType {
+ switch (type) {
+ case TemplateType.SwarmStack:
+ return StackType.DockerSwarm;
+ case TemplateType.ComposeStack:
+ return StackType.DockerCompose;
+ default:
+ throw new Error(`Unknown supported template type: ${type}`);
+ }
+}
+
+async function fetchFilePreview({ url, file }: { url: string; file: string }) {
+ try {
+ const { data } = await axios.post<{ FileContent: string }>(
+ '/templates/file',
+ { repositoryUrl: url, composeFilePathInRepository: file }
+ );
+ return data.FileContent;
+ } catch (err) {
+ throw parseAxiosError(err);
+ }
+}
diff --git a/app/react/portainer/templates/app-templates/useSortAndFilter.tsx b/app/react/portainer/templates/app-templates/useSortAndFilter.tsx
new file mode 100644
index 000000000..5cb29e15f
--- /dev/null
+++ b/app/react/portainer/templates/app-templates/useSortAndFilter.tsx
@@ -0,0 +1,111 @@
+import { useCallback, useMemo } from 'react';
+
+import { TemplateViewModel } from './view-model';
+import { ListState, TemplateType } from './types';
+
+export function useSortAndFilterTemplates(
+ templates: Array
,
+ listState: ListState & { search: string },
+ showSwarmStacks?: boolean
+) {
+ const filterByCategory = useCallback(
+ (item: TemplateViewModel) => {
+ if (!listState.category) {
+ return true;
+ }
+
+ return item.Categories.includes(listState.category);
+ },
+ [listState.category]
+ );
+
+ const filterBySearch = useCallback(
+ (item: TemplateViewModel) => {
+ const search = listState.search.toLowerCase();
+ return (
+ item.Title.toLowerCase().includes(search) ||
+ item.Description.toLowerCase().includes(search) ||
+ item.Categories.some((category) =>
+ category.toLowerCase().includes(search)
+ ) ||
+ item.Note?.toLowerCase().includes(search) ||
+ item.Name?.toLowerCase().includes(search)
+ );
+ },
+ [listState.search]
+ );
+
+ const filterByTemplateType = useCallback(
+ (item: TemplateViewModel) => {
+ switch (item.Type) {
+ case TemplateType.Container:
+ return (
+ listState.type === TemplateType.Container || listState.type === null
+ );
+ case TemplateType.SwarmStack:
+ return (
+ showSwarmStacks &&
+ (listState.type === TemplateType.SwarmStack ||
+ listState.type === null)
+ );
+ case TemplateType.ComposeStack:
+ return (
+ listState.type === TemplateType.SwarmStack ||
+ listState.type === null
+ );
+ case TemplateType.EdgeStack:
+ return listState.type === TemplateType.EdgeStack;
+ default:
+ return false;
+ }
+ },
+ [listState.type, showSwarmStacks]
+ );
+
+ const sort = useCallback(
+ (a: TemplateViewModel, b: TemplateViewModel) => {
+ const sortMultiplier = listState.sortBy?.desc ? -1 : 1;
+ switch (listState.sortBy?.id) {
+ case 'Categories':
+ return sortByCategories(a.Categories, b.Categories) * sortMultiplier;
+ case 'Description':
+ return a.Description.localeCompare(b.Description) * sortMultiplier;
+ case 'Title':
+ default:
+ return a.Title.localeCompare(b.Title) * sortMultiplier;
+ }
+ },
+
+ [listState.sortBy?.desc, listState.sortBy?.id]
+ );
+
+ return useMemo(
+ () =>
+ templates
+ ?.filter(filterByTemplateType)
+ .filter(filterByCategory)
+ .filter(filterBySearch)
+ .sort(sort) || [],
+ [templates, filterByTemplateType, filterByCategory, filterBySearch, sort]
+ );
+}
+
+function sortByCategories(a: Array, b: Array): number {
+ if (a.length === 0 && b.length === 0) {
+ return 0;
+ }
+ if (a.length === 0) {
+ return -1;
+ }
+ if (b.length === 0) {
+ return 1;
+ }
+
+ const aCategory = a[0];
+ const bCategory = b[0];
+
+ return (
+ aCategory.localeCompare(bCategory) ||
+ sortByCategories(a.slice(1), b.slice(1))
+ );
+}
diff --git a/app/react/portainer/templates/app-templates/template.ts b/app/react/portainer/templates/app-templates/view-model.ts
similarity index 100%
rename from app/react/portainer/templates/app-templates/template.ts
rename to app/react/portainer/templates/app-templates/view-model.ts
diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js
index 0c39ddb82..d6e4e4293 100644
--- a/webpack/webpack.common.js
+++ b/webpack/webpack.common.js
@@ -177,6 +177,10 @@ module.exports = {
},
},
},
+ watchOptions: {
+ ignored: /node_modules/,
+ aggregateTimeout: 500,
+ },
resolve: {
alias: {
'@@': path.resolve(projectRoot, 'app/react/components'),