import {
Button,
DataTable,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow,
TableExpandRow,
TableExpandedRow,
TableExpandHeader,
TableToolbar,
TableToolbarContent,
} from "@carbon/react";
import { Add, TrashCan} from "@carbon/icons-react";
import React from "react";
import { Param, ResourceReference} from "../../models";
import { getNamespacePathById } from "../../hooks/api/use-namespaces";
interface ResourcesTableProps {
resources: ResourceReference[];
onDelete: (resourceName?: string) => void;
onAdd: () => void;
}
export const ResourcesTable: React.FC<ResourcesTableProps> = ({
resources,
onDelete,
onAdd,
}) => {
const headers = [
{key: "name", header: "Name"},
{key: "location", header: "Location"},
{key: "type", header: "Type"},
{key: "mimeType", header: "MIME Type"},
{key: "description", header: "Description"},
{key: "namespace", header: "Namespace"},
{key: "actions", header: "Actions"},
]
function resourcesToRows() {
return resources.map((resource: ResourceReference, index: number) => ({
id: resource.name || `resource-${index}`,
name: resource.name,
location: resource.location,
type: resource.type,
mimeType: resource.mimeType,
description: resource.description,
namespace: resource.namespace,
}))
}
function resourceHasDetails(resource: ResourceReference) {
return resource.params && resource.params.length > 0
}
function tableCells(resource) {
return (
<React.Fragment>
<TableCell>{resource.name}</TableCell>
<TableCell>{resource.location}</TableCell>
<TableCell>{resource.type}</TableCell>
<TableCell>{resource.mimeType}</TableCell>
<TableCell>{resource.description}</TableCell>
<TableCell>{getNamespacePathById(resource.namespace) || "default"}</TableCell>
<TableCell>
<Button
kind="ghost"
renderIcon={TrashCan}
hasIconOnly
iconDescription="Delete"
onClick={() => onDelete(resource.name)}
/>
</TableCell>
</React.Fragment>
)
}
return (
<DataTable headers={headers} rows={resourcesToRows()}>
{({
headers,
rows,
getTableProps,
getHeaderProps,
getRowProps,
getExpandedRowProps,
getToolbarProps
}) => (
<TableContainer>
<TableToolbar {...getToolbarProps()}>
<TableToolbarContent>
<Button renderIcon={Add} onClick={onAdd}>Add Resource</Button>
</TableToolbarContent>
</TableToolbar>
<Table {...getTableProps()}>
<TableHead>
<TableRow>
<TableExpandHeader/>
{headers.map((header) => (
<TableHeader {...getHeaderProps({header})}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => {
const resource = resources.find((item) => item.name === row.id)
if (resource && resourceHasDetails(resource)) {
// resource with details, expansion available
return (
<React.Fragment key={resource.name}>
<TableExpandRow expandIconDescription="Show details" {...getRowProps({row})}>
{tableCells(resource)}
</TableExpandRow>
{row.isExpanded && (
<TableExpandedRow colSpan={headers.length + 3} {...getExpandedRowProps({row})}>
Parameters:
{resource.params?.map((parameter: Param) => {
return (<div>{parameter.name + ": " + parameter.value}</div>)
})}
</TableExpandedRow>
)}
</React.Fragment>
)
} else if (resource) {
// resource without detials, no expansion available
return (
<TableRow {...getRowProps({row})}>
<TableCell />
{tableCells(resource)}
</TableRow>
)
}
})}
</TableBody>
</Table>
</TableContainer>
)}
</DataTable>
);
};
