88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import { IconBrandDocker, IconServerOff } from "@tabler/icons-react";
|
|
|
|
import type { RouterOutputs } from "@homarr/api";
|
|
import { clientApi } from "@homarr/api/client";
|
|
import { invariantTechnicalLabels } from "@homarr/definitions";
|
|
|
|
import { createWidgetDefinition } from "../definition";
|
|
import { optionsBuilder } from "../options";
|
|
|
|
const columnsList = [
|
|
"name",
|
|
"state",
|
|
"cpuUsage",
|
|
"memoryUsage",
|
|
] as const satisfies (keyof RouterOutputs["docker"]["getContainers"]["containers"][number])[];
|
|
|
|
const allColumnsList = ["name", "state", "host", "cpuUsage", "memoryUsage", "actions"] as const;
|
|
|
|
const columnTranslationKeyMap = {
|
|
name: "common.field.name",
|
|
state: "docker.field.state.label",
|
|
host: "docker.field.host.label",
|
|
memoryUsage: "docker.field.stats.memory.label",
|
|
actions: "docker.action.title",
|
|
} as const satisfies Record<Exclude<(typeof allColumnsList)[number], "cpuUsage">, string>;
|
|
|
|
export const { definition, componentLoader } = createWidgetDefinition("dockerContainers", {
|
|
icon: IconBrandDocker,
|
|
supportsAdvancedFocus: true,
|
|
queryKey: [["docker", "getContainers"]],
|
|
refetchInterval: 30,
|
|
createOptions() {
|
|
return optionsBuilder.from(
|
|
(factory) => ({
|
|
endpointIds: factory.dynamicMultiSelect({
|
|
defaultValue: [],
|
|
maxValues: 100,
|
|
withDescription: true,
|
|
useOptions: () => {
|
|
const { data = [], isPending, isError } = clientApi.docker.getEndpoints.useQuery();
|
|
return {
|
|
data: data.map((endpoint) => ({ value: endpoint.id, label: endpoint.name })),
|
|
isPending,
|
|
isError,
|
|
};
|
|
},
|
|
}),
|
|
columns: factory.multiSelect({
|
|
defaultValue: [...allColumnsList],
|
|
options: allColumnsList.map((value) => ({
|
|
value,
|
|
label: (t) => {
|
|
if (value === "cpuUsage") return invariantTechnicalLabels.cpu;
|
|
return t(columnTranslationKeyMap[value]);
|
|
},
|
|
})),
|
|
searchable: true,
|
|
}),
|
|
enableRowSorting: factory.switch({
|
|
defaultValue: false,
|
|
}),
|
|
defaultSort: factory.select({
|
|
defaultValue: "name",
|
|
options: columnsList.map((value) => ({
|
|
value,
|
|
label: (t) => t(`widget.dockerContainers.option.defaultSort.option.${value}`),
|
|
})),
|
|
}),
|
|
descendingDefaultSort: factory.switch({
|
|
defaultValue: false,
|
|
}),
|
|
columnOrder: factory.text({ defaultValue: "" }),
|
|
columnWidths: factory.text({ defaultValue: "" }),
|
|
}),
|
|
{
|
|
columnOrder: { shouldHide: () => true },
|
|
columnWidths: { shouldHide: () => true },
|
|
},
|
|
);
|
|
},
|
|
errors: {
|
|
INTERNAL_SERVER_ERROR: {
|
|
icon: IconServerOff,
|
|
message: (t) => t("widget.dockerContainers.error.internalServerError"),
|
|
},
|
|
},
|
|
}).withDynamicImport(() => import("./component"));
|