diff --git a/faas/web/src/components/ExecutionList.tsx b/faas/web/src/components/ExecutionList.tsx index 61e798e..b23da64 100644 --- a/faas/web/src/components/ExecutionList.tsx +++ b/faas/web/src/components/ExecutionList.tsx @@ -1,21 +1,21 @@ import React, { useState, useEffect } from 'react'; import { - Card, - Group, - Text, - Badge, - Stack, Table, Button, + Stack, + Title, + Modal, Select, TextInput, Pagination, - Container, - Alert, - Loader, - Code, + Group, ActionIcon, - Modal, + Badge, + Card, + Text, + Loader, + Alert, + Code, ScrollArea, Flex, } from '@mantine/core'; @@ -183,138 +183,162 @@ const ExecutionList: React.FC = () => { if (loading && executions.length === 0) { return ( - - + + + Function Executions + + + + - - + Loading executions... + + ); } return ( - - - - - - setSearchTerm(event.currentTarget.value)} - leftSection={} - style={{ width: 300 }} - /> - ({ value: f.id, label: f.name }))} + value={selectedFunction} + onChange={(value) => { + setSelectedFunction(value || ''); + setPage(1); + }} + clearable + style={{ width: 200 }} + /> + - {filteredExecutions.length === 0 ? ( - - No executions found - - ) : ( - - - - - Function - Status - Duration - Memory - Started - Actions - - - - {filteredExecutions.map((execution) => ( - - - - {getFunctionName(execution.function_id)} - {execution.id.slice(0, 8)}... - - - - - {execution.status} - - - - - - {formatDuration(execution.duration)} - - - - - {/* */} - {formatMemory(execution.memory_used)} - - - - {formatDate(execution.created_at)} - - - - handleViewLogs(execution)} - title="View Logs" - > - - - {(execution.status === 'running' || execution.status === 'pending') && ( - handleCancelExecution(execution.id)} - title="Cancel Execution" - > - - - )} - - - - ))} - -
- - )} + {error && ( + + {error} + + )} - {totalPages > 1 && ( - - - - )} + {filteredExecutions.length === 0 ? ( + + + +
+ + No executions found + + + There are no function executions matching your current filters + +
+ - + ) : ( + + + + + Function + Status + Duration + Memory + Started + Actions + + + + {filteredExecutions.map((execution) => ( + + + + {getFunctionName(execution.function_id)} + {execution.id.slice(0, 8)}... + + + + + {execution.status} + + + + + + {formatDuration(execution.duration)} + + + + + {/* */} + {formatMemory(execution.memory_used)} + + + + {formatDate(execution.created_at)} + + + + handleViewLogs(execution)} + title="View Logs" + > + + + {(execution.status === 'running' || execution.status === 'pending') && ( + handleCancelExecution(execution.id)} + title="Cancel Execution" + > + + + )} + + + + ))} + +
+ + )} + + {totalPages > 1 && ( + + + + )} {/* Logs Modal */} { - + ); }; -export default ExecutionList; \ No newline at end of file +export default ExecutionList; diff --git a/faas/web/src/components/FunctionList.tsx b/faas/web/src/components/FunctionList.tsx index 1f5fb56..ac832bb 100644 --- a/faas/web/src/components/FunctionList.tsx +++ b/faas/web/src/components/FunctionList.tsx @@ -1,18 +1,18 @@ import React, { useEffect, useState } from 'react'; import { Table, - Badge, Button, - Group, - Text, - ActionIcon, - Menu, - Paper, + Stack, Title, - Alert, + Group, + ActionIcon, + Badge, + Card, + Text, Loader, - Center, + Alert, Tooltip, + Menu, } from '@mantine/core'; import { IconPlayerPlay, @@ -114,40 +114,50 @@ export const FunctionList: React.FC = ({ } }; - if (loading) { + if (loading && functions.length === 0) { return ( -
- -
- ); - } + + + Functions + + + + + - if (error) { - return ( - } title="Error" color="red" mb="md"> - {error} - - + + + Loading functions... + + ); } return ( - - + + Functions + + )} + {functions.length === 0 ? ( -
-
+ + - - No functions found - - - Create your first serverless function to get started - +
+ + No functions found + + + Create your first serverless function to get started + +
-
-
+ + ) : ( - - - - Name - Runtime - Image - Memory - Timeout - Owner - Created - Actions - - - - {functions.map((func) => ( - - - {func.name} - {func.handler} - - - - {func.runtime} - - - - - {func.image} - - - - {func.memory} MB - - - {func.timeout} - - - - {func.owner?.name || 'Unknown'} - {func.owner?.type && ( - ({func.owner.type}) - )} - - - - - {func.created_at ? new Date(func.created_at).toLocaleDateString() : 'N/A'} - - - - - - onExecuteFunction(func)} - > - - - - - - - - - - - } - onClick={() => onEditFunction(func)} - > - Edit - - } - onClick={() => handleDeploy(func)} - > - Deploy - - } - color="red" - onClick={() => handleDelete(func)} - > - Delete - - - - - + +
+ + + Name + Runtime + Image + Memory + Timeout + Owner + Created + Actions - ))} - -
+ + + {functions.map((func) => ( + + + {func.name} + {func.description || ''} + + + + {func.runtime} + + + + + {func.image || ''} + + + + {func.memoryLimit || 'N/A'} MB + + + {func.timeout || 'N/A'} + + + N/A + + + + {func.createdAt ? new Date(func.createdAt).toLocaleDateString() : 'N/A'} + + + + + + onExecuteFunction(func)} + > + + + + + + + + + + + } + onClick={() => onEditFunction(func)} + > + Edit + + } + onClick={() => handleDeploy(func)} + > + Deploy + + } + color="red" + onClick={() => handleDelete(func)} + > + Delete + + + + + + + ))} + + + )} - + ); }; diff --git a/kms/docker-compose.yml b/kms/docker-compose.yml index f03498b..5c2b708 100644 --- a/kms/docker-compose.yml +++ b/kms/docker-compose.yml @@ -75,16 +75,16 @@ services: - ./migrations:/app/migrations:ro,Z restart: unless-stopped - frontend: - build: - context: ./kms-frontend - dockerfile: Dockerfile - container_name: kms-frontend - ports: - - "3000:80" - networks: - - kms-network - restart: unless-stopped +# frontend: +# build: +# context: ./kms-frontend +# dockerfile: Dockerfile +# container_name: kms-frontend +# ports: +# - "3000:80" +# networks: +# - kms-network +# restart: unless-stopped volumes: postgres_data: