mirror of
https://github.com/portainer/portainer.git
synced 2025-07-24 15:59:41 +02:00
refactor(containers): migrate view to react [EE-2212] (#6577)
Co-authored-by: LP B <xAt0mZ@users.noreply.github.com>
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
5ee570e075
commit
bed4257194
71 changed files with 1616 additions and 875 deletions
|
|
@ -1,256 +1,105 @@
|
|||
import { useEffect } from 'react';
|
||||
import {
|
||||
useTable,
|
||||
useSortBy,
|
||||
useFilters,
|
||||
useGlobalFilter,
|
||||
usePagination,
|
||||
Row,
|
||||
} from 'react-table';
|
||||
import { useRowSelectColumn } from '@lineup-lite/hooks';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { useDebounce } from '@/portainer/hooks/useDebounce';
|
||||
import type {
|
||||
ContainersTableSettings,
|
||||
DockerContainer,
|
||||
} from '@/react/docker/containers/types';
|
||||
import { useEnvironment } from '@/portainer/environments/useEnvironment';
|
||||
import { Environment } from '@/portainer/environments/types';
|
||||
import type { DockerContainer } from '@/react/docker/containers/types';
|
||||
|
||||
import { PaginationControls } from '@@/PaginationControls';
|
||||
import { TableSettingsMenu, Datatable } from '@@/datatables';
|
||||
import {
|
||||
QuickActionsSettings,
|
||||
buildAction,
|
||||
QuickActionsSettings,
|
||||
} from '@@/datatables/QuickActionsSettings';
|
||||
import {
|
||||
Table,
|
||||
TableActions,
|
||||
TableContainer,
|
||||
TableHeaderRow,
|
||||
TableRow,
|
||||
TableSettingsMenu,
|
||||
TableTitle,
|
||||
TableTitleActions,
|
||||
} from '@@/datatables';
|
||||
import { multiple } from '@@/datatables/filter-types';
|
||||
import { useTableSettings } from '@@/datatables/useTableSettings';
|
||||
import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
|
||||
import { useRepeater } from '@@/datatables/useRepeater';
|
||||
import { SearchBar, useSearchBarState } from '@@/datatables/SearchBar';
|
||||
import { useRowSelect } from '@@/datatables/useRowSelect';
|
||||
import { Checkbox } from '@@/form-components/Checkbox';
|
||||
import { TableFooter } from '@@/datatables/TableFooter';
|
||||
import { SelectedRowsCount } from '@@/datatables/SelectedRowsCount';
|
||||
|
||||
import { ContainersDatatableActions } from './ContainersDatatableActions';
|
||||
import { useContainers } from '../../queries/containers';
|
||||
|
||||
import { createStore } from './datatable-store';
|
||||
import { ContainersDatatableSettings } from './ContainersDatatableSettings';
|
||||
import { useColumns } from './columns';
|
||||
import { ContainersDatatableActions } from './ContainersDatatableActions';
|
||||
import { RowProvider } from './RowContext';
|
||||
|
||||
export interface ContainerTableProps {
|
||||
isAddActionVisible: boolean;
|
||||
dataset: DockerContainer[];
|
||||
onRefresh?(): Promise<void>;
|
||||
const storageKey = 'containers';
|
||||
const useStore = createStore(storageKey);
|
||||
|
||||
const actions = [
|
||||
buildAction('logs', 'Logs'),
|
||||
buildAction('inspect', 'Inspect'),
|
||||
buildAction('stats', 'Stats'),
|
||||
buildAction('exec', 'Console'),
|
||||
buildAction('attach', 'Attach'),
|
||||
];
|
||||
|
||||
export interface Props {
|
||||
isHostColumnVisible: boolean;
|
||||
tableKey?: string;
|
||||
environment: Environment;
|
||||
}
|
||||
|
||||
export function ContainersDatatable({
|
||||
isAddActionVisible,
|
||||
dataset,
|
||||
onRefresh,
|
||||
isHostColumnVisible,
|
||||
}: ContainerTableProps) {
|
||||
const { settings, setTableSettings } =
|
||||
useTableSettings<ContainersTableSettings>();
|
||||
const [searchBarValue, setSearchBarValue] = useSearchBarState('containers');
|
||||
|
||||
const columns = useColumns();
|
||||
|
||||
const endpoint = useEnvironment();
|
||||
|
||||
useRepeater(settings.autoRefreshRate, onRefresh);
|
||||
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
page,
|
||||
prepareRow,
|
||||
selectedFlatRows,
|
||||
allColumns,
|
||||
gotoPage,
|
||||
setPageSize,
|
||||
setHiddenColumns,
|
||||
toggleHideColumn,
|
||||
setGlobalFilter,
|
||||
state: { pageIndex, pageSize },
|
||||
} = useTable<DockerContainer>(
|
||||
{
|
||||
defaultCanFilter: false,
|
||||
columns,
|
||||
data: dataset,
|
||||
filterTypes: { multiple },
|
||||
initialState: {
|
||||
pageSize: settings.pageSize || 10,
|
||||
hiddenColumns: settings.hiddenColumns,
|
||||
sortBy: [settings.sortBy],
|
||||
globalFilter: searchBarValue,
|
||||
},
|
||||
isRowSelectable(row: Row<DockerContainer>) {
|
||||
return !row.original.IsPortainer;
|
||||
},
|
||||
autoResetSelectedRows: false,
|
||||
getRowId(originalRow: DockerContainer) {
|
||||
return originalRow.Id;
|
||||
},
|
||||
selectCheckboxComponent: Checkbox,
|
||||
},
|
||||
useFilters,
|
||||
useGlobalFilter,
|
||||
useSortBy,
|
||||
usePagination,
|
||||
useRowSelect,
|
||||
useRowSelectColumn
|
||||
environment,
|
||||
}: Props) {
|
||||
const settings = useStore();
|
||||
const columns = useColumns(isHostColumnVisible);
|
||||
const hidableColumns = _.compact(
|
||||
columns.filter((col) => col.canHide).map((col) => col.id)
|
||||
);
|
||||
|
||||
const debouncedSearchValue = useDebounce(searchBarValue);
|
||||
|
||||
useEffect(() => {
|
||||
setGlobalFilter(debouncedSearchValue);
|
||||
}, [debouncedSearchValue, setGlobalFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
toggleHideColumn('host', !isHostColumnVisible);
|
||||
}, [toggleHideColumn, isHostColumnVisible]);
|
||||
|
||||
const columnsToHide = allColumns.filter((colInstance) => {
|
||||
const columnDef = columns.find((c) => c.id === colInstance.id);
|
||||
return columnDef?.canHide;
|
||||
});
|
||||
|
||||
const actions = [
|
||||
buildAction('logs', 'Logs'),
|
||||
buildAction('inspect', 'Inspect'),
|
||||
buildAction('stats', 'Stats'),
|
||||
buildAction('exec', 'Console'),
|
||||
buildAction('attach', 'Attach'),
|
||||
];
|
||||
|
||||
const tableProps = getTableProps();
|
||||
const tbodyProps = getTableBodyProps();
|
||||
const containersQuery = useContainers(
|
||||
environment.Id,
|
||||
true,
|
||||
undefined,
|
||||
settings.autoRefreshRate * 1000
|
||||
);
|
||||
|
||||
return (
|
||||
<TableContainer>
|
||||
<TableTitle icon="box" featherIcon label="Containers">
|
||||
<SearchBar
|
||||
value={searchBarValue}
|
||||
onChange={handleSearchBarChange}
|
||||
placeholder="Search for a container..."
|
||||
/>
|
||||
<TableActions>
|
||||
<RowProvider context={{ environment }}>
|
||||
<Datatable
|
||||
titleOptions={{
|
||||
icon: 'fa-cubes',
|
||||
title: 'Containers',
|
||||
}}
|
||||
settingsStore={settings}
|
||||
columns={columns}
|
||||
renderTableActions={(selectedRows) => (
|
||||
<ContainersDatatableActions
|
||||
selectedItems={selectedFlatRows.map((row) => row.original)}
|
||||
isAddActionVisible={isAddActionVisible}
|
||||
endpointId={endpoint.Id}
|
||||
/>
|
||||
</TableActions>
|
||||
<TableTitleActions>
|
||||
<ColumnVisibilityMenu<DockerContainer>
|
||||
columns={columnsToHide}
|
||||
onChange={handleChangeColumnsVisibility}
|
||||
value={settings.hiddenColumns}
|
||||
selectedItems={selectedRows}
|
||||
isAddActionVisible
|
||||
endpointId={environment.Id}
|
||||
/>
|
||||
)}
|
||||
isLoading={containersQuery.isLoading}
|
||||
isRowSelectable={(row) => !row.original.IsPortainer}
|
||||
initialTableState={{ hiddenColumns: settings.hiddenColumns }}
|
||||
renderTableSettings={(tableInstance) => {
|
||||
const columnsToHide = tableInstance.allColumns.filter((colInstance) =>
|
||||
hidableColumns?.includes(colInstance.id)
|
||||
);
|
||||
|
||||
<TableSettingsMenu
|
||||
quickActions={<QuickActionsSettings actions={actions} />}
|
||||
>
|
||||
<ContainersDatatableSettings isRefreshVisible={!!onRefresh} />
|
||||
</TableSettingsMenu>
|
||||
</TableTitleActions>
|
||||
</TableTitle>
|
||||
|
||||
<Table
|
||||
className={tableProps.className}
|
||||
role={tableProps.role}
|
||||
style={tableProps.style}
|
||||
>
|
||||
<thead>
|
||||
{headerGroups.map((headerGroup) => {
|
||||
const { key, className, role, style } =
|
||||
headerGroup.getHeaderGroupProps();
|
||||
|
||||
return (
|
||||
<TableHeaderRow<DockerContainer>
|
||||
key={key}
|
||||
className={className}
|
||||
role={role}
|
||||
style={style}
|
||||
headers={headerGroup.headers}
|
||||
onSortChange={handleSortChange}
|
||||
return (
|
||||
<>
|
||||
<ColumnVisibilityMenu<DockerContainer>
|
||||
columns={columnsToHide}
|
||||
onChange={(hiddenColumns) => {
|
||||
settings.setHiddenColumns(hiddenColumns);
|
||||
tableInstance.setHiddenColumns(hiddenColumns);
|
||||
}}
|
||||
value={settings.hiddenColumns}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</thead>
|
||||
<tbody
|
||||
className={tbodyProps.className}
|
||||
role={tbodyProps.role}
|
||||
style={tbodyProps.style}
|
||||
>
|
||||
{page.length > 0 ? (
|
||||
page.map((row) => {
|
||||
prepareRow(row);
|
||||
const { key, className, role, style } = row.getRowProps();
|
||||
return (
|
||||
<TableRow<DockerContainer>
|
||||
cells={row.cells}
|
||||
key={key}
|
||||
className={className}
|
||||
role={role}
|
||||
style={style}
|
||||
<TableSettingsMenu
|
||||
quickActions={<QuickActionsSettings actions={actions} />}
|
||||
>
|
||||
<ContainersDatatableSettings
|
||||
isRefreshVisible
|
||||
settings={settings}
|
||||
/>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="text-center text-muted">
|
||||
No container available.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<TableFooter>
|
||||
<SelectedRowsCount value={selectedFlatRows.length} />
|
||||
<PaginationControls
|
||||
showAll
|
||||
pageLimit={pageSize}
|
||||
page={pageIndex + 1}
|
||||
onPageChange={(p) => gotoPage(p - 1)}
|
||||
totalCount={dataset.length}
|
||||
onPageLimitChange={handlePageSizeChange}
|
||||
/>
|
||||
</TableFooter>
|
||||
</TableContainer>
|
||||
</TableSettingsMenu>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
storageKey={storageKey}
|
||||
dataset={containersQuery.data || []}
|
||||
emptyContentLabel="No containers found"
|
||||
/>
|
||||
</RowProvider>
|
||||
);
|
||||
|
||||
function handlePageSizeChange(pageSize: number) {
|
||||
setPageSize(pageSize);
|
||||
setTableSettings((settings) => ({ ...settings, pageSize }));
|
||||
}
|
||||
|
||||
function handleChangeColumnsVisibility(hiddenColumns: string[]) {
|
||||
setHiddenColumns(hiddenColumns);
|
||||
setTableSettings((settings) => ({ ...settings, hiddenColumns }));
|
||||
}
|
||||
|
||||
function handleSearchBarChange(value: string) {
|
||||
setSearchBarValue(value);
|
||||
}
|
||||
|
||||
function handleSortChange(id: string, desc: boolean) {
|
||||
setTableSettings((settings) => ({
|
||||
...settings,
|
||||
sortBy: { id, desc },
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@ import * as notifications from '@/portainer/services/notifications';
|
|||
import { useAuthorizations, Authorized } from '@/portainer/hooks/useUser';
|
||||
import { confirmContainerDeletion } from '@/portainer/services/modal.service/prompt';
|
||||
import { setPortainerAgentTargetHeader } from '@/portainer/services/http-request.helper';
|
||||
import type {
|
||||
import {
|
||||
ContainerId,
|
||||
ContainerStatus,
|
||||
DockerContainer,
|
||||
} from '@/react/docker/containers/types';
|
||||
import {
|
||||
|
|
@ -40,13 +41,22 @@ export function ContainersDatatableActions({
|
|||
}: Props) {
|
||||
const selectedItemCount = selectedItems.length;
|
||||
const hasPausedItemsSelected = selectedItems.some(
|
||||
(item) => item.Status === 'paused'
|
||||
(item) => item.State === ContainerStatus.Paused
|
||||
);
|
||||
const hasStoppedItemsSelected = selectedItems.some((item) =>
|
||||
['stopped', 'created'].includes(item.Status)
|
||||
[
|
||||
ContainerStatus.Stopped,
|
||||
ContainerStatus.Created,
|
||||
ContainerStatus.Exited,
|
||||
].includes(item.Status)
|
||||
);
|
||||
const hasRunningItemsSelected = selectedItems.some((item) =>
|
||||
['running', 'healthy', 'unhealthy', 'starting'].includes(item.Status)
|
||||
[
|
||||
ContainerStatus.Running,
|
||||
ContainerStatus.Healthy,
|
||||
ContainerStatus.Unhealthy,
|
||||
ContainerStatus.Starting,
|
||||
].includes(item.Status)
|
||||
);
|
||||
|
||||
const isAuthorized = useAuthorizations([
|
||||
|
|
@ -95,7 +105,7 @@ export function ContainersDatatableActions({
|
|||
<Button
|
||||
color="light"
|
||||
onClick={() => onKillClick(selectedItems)}
|
||||
disabled={selectedItemCount === 0}
|
||||
disabled={selectedItemCount === 0 || hasStoppedItemsSelected}
|
||||
>
|
||||
<i className="fa fa-bomb space-right" aria-hidden="true" />
|
||||
Kill
|
||||
|
|
@ -228,7 +238,7 @@ export function ContainersDatatableActions({
|
|||
|
||||
function onRemoveClick(selectedItems: DockerContainer[]) {
|
||||
const isOneContainerRunning = selectedItems.some(
|
||||
(container) => container.Status === 'running'
|
||||
(container) => container.State === 'running'
|
||||
);
|
||||
|
||||
const runningTitle = isOneContainerRunning ? 'running' : '';
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
import { EnvironmentProvider } from '@/portainer/environments/useEnvironment';
|
||||
import type { Environment } from '@/portainer/environments/types';
|
||||
|
||||
import { TableSettingsProvider } from '@@/datatables/useTableSettings';
|
||||
|
||||
import {
|
||||
ContainersDatatable,
|
||||
ContainerTableProps,
|
||||
} from './ContainersDatatable';
|
||||
|
||||
interface Props extends ContainerTableProps {
|
||||
endpoint: Environment;
|
||||
}
|
||||
|
||||
export function ContainersDatatableContainer({
|
||||
endpoint,
|
||||
tableKey = 'containers',
|
||||
...props
|
||||
}: Props) {
|
||||
const defaultSettings = {
|
||||
autoRefreshRate: 0,
|
||||
truncateContainerName: 32,
|
||||
hiddenQuickActions: [],
|
||||
hiddenColumns: [],
|
||||
pageSize: 10,
|
||||
sortBy: { id: 'state', desc: false },
|
||||
};
|
||||
|
||||
return (
|
||||
<EnvironmentProvider environment={endpoint}>
|
||||
<TableSettingsProvider defaults={defaultSettings} storageKey={tableKey}>
|
||||
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||
<ContainersDatatable {...props} />
|
||||
</TableSettingsProvider>
|
||||
</EnvironmentProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +1,18 @@
|
|||
import type { ContainersTableSettings } from '@/react/docker/containers/types';
|
||||
|
||||
import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
|
||||
import { useTableSettings } from '@@/datatables/useTableSettings';
|
||||
import { Checkbox } from '@@/form-components/Checkbox';
|
||||
import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
|
||||
|
||||
import { TableSettings } from './types';
|
||||
import { TRUNCATE_LENGTH } from './datatable-store';
|
||||
|
||||
interface Props {
|
||||
isRefreshVisible: boolean;
|
||||
isRefreshVisible?: boolean;
|
||||
settings: TableSettings;
|
||||
}
|
||||
|
||||
export function ContainersDatatableSettings({ isRefreshVisible }: Props) {
|
||||
const { settings, setTableSettings } =
|
||||
useTableSettings<ContainersTableSettings>();
|
||||
|
||||
export function ContainersDatatableSettings({
|
||||
isRefreshVisible,
|
||||
settings,
|
||||
}: Props) {
|
||||
return (
|
||||
<>
|
||||
<Checkbox
|
||||
|
|
@ -19,23 +20,18 @@ export function ContainersDatatableSettings({ isRefreshVisible }: Props) {
|
|||
label="Truncate container name"
|
||||
checked={settings.truncateContainerName > 0}
|
||||
onChange={() =>
|
||||
setTableSettings((settings) => ({
|
||||
...settings,
|
||||
truncateContainerName: settings.truncateContainerName > 0 ? 0 : 32,
|
||||
}))
|
||||
settings.setTruncateContainerName(
|
||||
settings.truncateContainerName > 0 ? 0 : TRUNCATE_LENGTH
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
{isRefreshVisible && (
|
||||
<TableSettingsMenuAutoRefresh
|
||||
value={settings.autoRefreshRate}
|
||||
onChange={handleRefreshRateChange}
|
||||
onChange={(value) => settings.setAutoRefreshRate(value)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
function handleRefreshRateChange(autoRefreshRate: number) {
|
||||
setTableSettings({ autoRefreshRate });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import { Environment } from '@/portainer/environments/types';
|
||||
|
||||
import { createRowContext } from '@@/datatables/RowContext';
|
||||
|
||||
interface RowContextState {
|
||||
environment: Environment;
|
||||
}
|
||||
|
||||
const { RowProvider, useRowContext } = createRowContext<RowContextState>();
|
||||
|
||||
export { RowProvider, useRowContext };
|
||||
|
|
@ -1,12 +1,28 @@
|
|||
import { Column } from 'react-table';
|
||||
import { CellProps, Column } from 'react-table';
|
||||
|
||||
import type { DockerContainer } from '@/react/docker/containers/types';
|
||||
import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
|
||||
import { useContainerGpus } from '@/react/docker/containers/queries/gpus';
|
||||
|
||||
export const gpus: Column<DockerContainer> = {
|
||||
Header: 'GPUs',
|
||||
accessor: 'Gpus',
|
||||
id: 'gpus',
|
||||
disableFilters: true,
|
||||
canHide: true,
|
||||
Filter: () => null,
|
||||
Cell: GpusCell,
|
||||
};
|
||||
|
||||
function GpusCell({
|
||||
row: { original: container },
|
||||
}: CellProps<DockerContainer>) {
|
||||
const containerId = container.Id;
|
||||
const environmentId = useEnvironmentId();
|
||||
const gpusQuery = useContainerGpus(environmentId, containerId);
|
||||
|
||||
if (!gpusQuery.data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <>{gpusQuery.data}</>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { Column } from 'react-table';
|
||||
import { useSref } from '@uirouter/react';
|
||||
|
||||
import { useEnvironment } from '@/portainer/environments/useEnvironment';
|
||||
import { EnvironmentStatus } from '@/portainer/environments/types';
|
||||
import type { DockerContainer } from '@/react/docker/containers/types';
|
||||
import { isOfflineEndpoint } from '@/portainer/helpers/endpointHelper';
|
||||
import { useCurrentEnvironment } from '@/portainer/hooks/useCurrentEnvironment';
|
||||
|
||||
export const image: Column<DockerContainer> = {
|
||||
Header: 'Image',
|
||||
|
|
@ -21,14 +21,15 @@ interface Props {
|
|||
}
|
||||
|
||||
function ImageCell({ value: imageName }: Props) {
|
||||
const endpoint = useEnvironment();
|
||||
const offlineMode = endpoint.Status !== EnvironmentStatus.Up;
|
||||
|
||||
const linkProps = useSref('docker.images.image', { id: imageName });
|
||||
const shortImageName = trimSHASum(imageName);
|
||||
|
||||
const linkProps = useSref('docker.images.image', { id: imageName });
|
||||
if (offlineMode) {
|
||||
return shortImageName;
|
||||
const environmentQuery = useCurrentEnvironment();
|
||||
|
||||
const environment = environmentQuery.data;
|
||||
|
||||
if (!environment || isOfflineEndpoint(environment)) {
|
||||
return <span>{shortImageName}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import _ from 'lodash';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { created } from './created';
|
||||
|
|
@ -12,21 +13,22 @@ import { stack } from './stack';
|
|||
import { state } from './state';
|
||||
import { gpus } from './gpus';
|
||||
|
||||
export function useColumns() {
|
||||
export function useColumns(isHostColumnVisible: boolean) {
|
||||
return useMemo(
|
||||
() => [
|
||||
name,
|
||||
state,
|
||||
quickActions,
|
||||
stack,
|
||||
image,
|
||||
created,
|
||||
ip,
|
||||
host,
|
||||
gpus,
|
||||
ports,
|
||||
ownership,
|
||||
],
|
||||
[]
|
||||
() =>
|
||||
_.compact([
|
||||
name,
|
||||
state,
|
||||
quickActions,
|
||||
stack,
|
||||
image,
|
||||
created,
|
||||
ip,
|
||||
isHostColumnVisible && host,
|
||||
gpus,
|
||||
ports,
|
||||
ownership,
|
||||
]),
|
||||
[isHostColumnVisible]
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import { CellProps, Column, TableInstance } from 'react-table';
|
||||
import { CellProps, Column } from 'react-table';
|
||||
import _ from 'lodash';
|
||||
import { useSref } from '@uirouter/react';
|
||||
|
||||
import { useEnvironment } from '@/portainer/environments/useEnvironment';
|
||||
import type {
|
||||
ContainersTableSettings,
|
||||
DockerContainer,
|
||||
} from '@/react/docker/containers/types';
|
||||
import type { DockerContainer } from '@/react/docker/containers/types';
|
||||
import { isOfflineEndpoint } from '@/portainer/helpers/endpointHelper';
|
||||
import { useCurrentEnvironment } from '@/portainer/hooks/useCurrentEnvironment';
|
||||
|
||||
import { useTableSettings } from '@@/datatables/useTableSettings';
|
||||
import { useTableSettings } from '@@/datatables/useZustandTableSettings';
|
||||
|
||||
import { TableSettings } from '../types';
|
||||
|
||||
export const name: Column<DockerContainer> = {
|
||||
Header: 'Name',
|
||||
|
|
@ -27,23 +27,24 @@ export const name: Column<DockerContainer> = {
|
|||
export function NameCell({
|
||||
value: name,
|
||||
row: { original: container },
|
||||
}: CellProps<TableInstance>) {
|
||||
const { settings } = useTableSettings<ContainersTableSettings>();
|
||||
const truncate = settings.truncateContainerName;
|
||||
const endpoint = useEnvironment();
|
||||
const offlineMode = endpoint.Status !== 1;
|
||||
|
||||
const linkProps = useSref('docker.containers.container', {
|
||||
}: CellProps<DockerContainer>) {
|
||||
const linkProps = useSref('.container', {
|
||||
id: container.Id,
|
||||
nodeName: container.NodeName,
|
||||
});
|
||||
|
||||
const { settings } = useTableSettings<TableSettings>();
|
||||
const truncate = settings.truncateContainerName;
|
||||
const environmentQuery = useCurrentEnvironment();
|
||||
|
||||
const environment = environmentQuery.data;
|
||||
|
||||
let shortName = name;
|
||||
if (truncate > 0) {
|
||||
shortName = _.truncate(name, { length: truncate });
|
||||
}
|
||||
|
||||
if (offlineMode) {
|
||||
if (!environment || isOfflineEndpoint(environment)) {
|
||||
return <span>{shortName}</span>;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Column } from 'react-table';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { useEnvironment } from '@/portainer/environments/useEnvironment';
|
||||
import type { DockerContainer, Port } from '@/react/docker/containers/types';
|
||||
import { useCurrentEnvironment } from '@/portainer/hooks/useCurrentEnvironment';
|
||||
|
||||
export const ports: Column<DockerContainer> = {
|
||||
Header: 'Published Ports',
|
||||
|
|
@ -20,12 +20,15 @@ interface Props {
|
|||
}
|
||||
|
||||
function PortsCell({ value: ports }: Props) {
|
||||
const { PublicURL: publicUrl } = useEnvironment();
|
||||
const environmentQuery = useCurrentEnvironment();
|
||||
|
||||
if (ports.length === 0) {
|
||||
const environment = environmentQuery.data;
|
||||
if (!environment || ports.length === 0) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
const { PublicURL: publicUrl } = environment;
|
||||
|
||||
return _.uniqBy(ports, 'public').map((port) => (
|
||||
<a
|
||||
key={`${port.host}:${port.public}`}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
import { CellProps, Column } from 'react-table';
|
||||
|
||||
import { useEnvironment } from '@/portainer/environments/useEnvironment';
|
||||
import { useAuthorizations } from '@/portainer/hooks/useUser';
|
||||
import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions';
|
||||
import type {
|
||||
ContainersTableSettings,
|
||||
DockerContainer,
|
||||
} from '@/react/docker/containers/types';
|
||||
import { EnvironmentStatus } from '@/portainer/environments/types';
|
||||
import { isOfflineEndpoint } from '@/portainer/helpers/endpointHelper';
|
||||
import { useCurrentEnvironment } from '@/portainer/hooks/useCurrentEnvironment';
|
||||
import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions';
|
||||
import { DockerContainer } from '@/react/docker/containers/types';
|
||||
|
||||
import { useTableSettings } from '@@/datatables/useTableSettings';
|
||||
import { useTableSettings } from '@@/datatables/useZustandTableSettings';
|
||||
|
||||
import { TableSettings } from '../types';
|
||||
|
||||
export const quickActions: Column<DockerContainer> = {
|
||||
Header: 'Quick Actions',
|
||||
|
|
@ -25,10 +24,12 @@ export const quickActions: Column<DockerContainer> = {
|
|||
function QuickActionsCell({
|
||||
row: { original: container },
|
||||
}: CellProps<DockerContainer>) {
|
||||
const endpoint = useEnvironment();
|
||||
const offlineMode = endpoint.Status !== EnvironmentStatus.Up;
|
||||
const environmentQuery = useCurrentEnvironment();
|
||||
|
||||
const { settings } = useTableSettings<ContainersTableSettings>();
|
||||
const environment = environmentQuery.data;
|
||||
const offlineMode = !environment || isOfflineEndpoint(environment);
|
||||
|
||||
const { settings } = useTableSettings<TableSettings>();
|
||||
|
||||
const { hiddenQuickActions = [] } = settings;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import { Column } from 'react-table';
|
||||
import { CellProps, Column } from 'react-table';
|
||||
import clsx from 'clsx';
|
||||
import _ from 'lodash';
|
||||
|
||||
import type {
|
||||
DockerContainer,
|
||||
DockerContainerStatus,
|
||||
import {
|
||||
type DockerContainer,
|
||||
ContainerStatus,
|
||||
} from '@/react/docker/containers/types';
|
||||
|
||||
import { DefaultFilter } from '@@/datatables/Filter';
|
||||
|
|
@ -20,11 +19,14 @@ export const state: Column<DockerContainer> = {
|
|||
canHide: true,
|
||||
};
|
||||
|
||||
function StatusCell({ value: status }: { value: DockerContainerStatus }) {
|
||||
const statusNormalized = _.toLower(status);
|
||||
const hasHealthCheck = ['starting', 'healthy', 'unhealthy'].includes(
|
||||
statusNormalized
|
||||
);
|
||||
function StatusCell({
|
||||
value: status,
|
||||
}: CellProps<DockerContainer, ContainerStatus>) {
|
||||
const hasHealthCheck = [
|
||||
ContainerStatus.Starting,
|
||||
ContainerStatus.Healthy,
|
||||
ContainerStatus.Unhealthy,
|
||||
].includes(status);
|
||||
|
||||
const statusClassName = getClassName();
|
||||
|
||||
|
|
@ -40,22 +42,21 @@ function StatusCell({ value: status }: { value: DockerContainerStatus }) {
|
|||
);
|
||||
|
||||
function getClassName() {
|
||||
if (includeString(['paused', 'starting', 'unhealthy'])) {
|
||||
return 'warning';
|
||||
}
|
||||
|
||||
if (includeString(['created'])) {
|
||||
return 'info';
|
||||
}
|
||||
|
||||
if (includeString(['stopped', 'dead', 'exited'])) {
|
||||
return 'danger';
|
||||
}
|
||||
|
||||
return 'success';
|
||||
|
||||
function includeString(values: DockerContainerStatus[]) {
|
||||
return values.some((val) => statusNormalized.includes(val));
|
||||
switch (status) {
|
||||
case ContainerStatus.Paused:
|
||||
case ContainerStatus.Starting:
|
||||
case ContainerStatus.Unhealthy:
|
||||
return 'warning';
|
||||
case ContainerStatus.Created:
|
||||
return 'info';
|
||||
case ContainerStatus.Stopped:
|
||||
case ContainerStatus.Dead:
|
||||
case ContainerStatus.Exited:
|
||||
return 'danger';
|
||||
case ContainerStatus.Healthy:
|
||||
case ContainerStatus.Running:
|
||||
default:
|
||||
return 'success';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import create from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
|
||||
import { keyBuilder } from '@/portainer/hooks/useLocalStorage';
|
||||
import {
|
||||
paginationSettings,
|
||||
sortableSettings,
|
||||
refreshableSettings,
|
||||
hiddenColumnsSettings,
|
||||
} from '@/react/components/datatables/types';
|
||||
|
||||
import { QuickAction, TableSettings } from './types';
|
||||
|
||||
export const TRUNCATE_LENGTH = 32;
|
||||
|
||||
export function createStore(storageKey: string) {
|
||||
return create<TableSettings>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
...sortableSettings(set),
|
||||
...paginationSettings(set),
|
||||
...hiddenColumnsSettings(set),
|
||||
...refreshableSettings(set),
|
||||
truncateContainerName: TRUNCATE_LENGTH,
|
||||
setTruncateContainerName(truncateContainerName: number) {
|
||||
set({
|
||||
truncateContainerName,
|
||||
});
|
||||
},
|
||||
|
||||
hiddenQuickActions: [] as QuickAction[],
|
||||
setHiddenQuickActions: (hiddenQuickActions: QuickAction[]) =>
|
||||
set({ hiddenQuickActions }),
|
||||
}),
|
||||
{
|
||||
name: keyBuilder(storageKey),
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { ContainersDatatable } from './ContainersDatatable';
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import {
|
||||
PaginationTableSettings,
|
||||
RefreshableTableSettings,
|
||||
SettableColumnsTableSettings,
|
||||
SortableTableSettings,
|
||||
} from '@/react/components/datatables/types';
|
||||
|
||||
export type QuickAction = 'attach' | 'exec' | 'inspect' | 'logs' | 'stats';
|
||||
|
||||
export interface SettableQuickActionsTableSettings<TAction> {
|
||||
hiddenQuickActions: TAction[];
|
||||
setHiddenQuickActions: (hiddenQuickActions: TAction[]) => void;
|
||||
}
|
||||
|
||||
export interface TableSettings
|
||||
extends SortableTableSettings,
|
||||
PaginationTableSettings,
|
||||
SettableColumnsTableSettings,
|
||||
SettableQuickActionsTableSettings<QuickAction>,
|
||||
RefreshableTableSettings {
|
||||
truncateContainerName: number;
|
||||
setTruncateContainerName: (value: number) => void;
|
||||
}
|
||||
38
app/react/docker/containers/ListView/ListView.tsx
Normal file
38
app/react/docker/containers/ListView/ListView.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { useInfo } from '@/docker/services/system.service';
|
||||
import { Environment } from '@/portainer/environments/types';
|
||||
import { isAgentEnvironment } from '@/portainer/environments/utils';
|
||||
|
||||
import { PageHeader } from '@@/PageHeader';
|
||||
|
||||
import { ContainersDatatable } from './ContainersDatatable';
|
||||
|
||||
interface Props {
|
||||
endpoint: Environment;
|
||||
}
|
||||
|
||||
export function ListView({ endpoint: environment }: Props) {
|
||||
const isAgent = isAgentEnvironment(environment.Type);
|
||||
|
||||
const envInfoQuery = useInfo(environment.Id, (info) => !!info.Swarm?.NodeID);
|
||||
|
||||
const isSwarmManager = !!envInfoQuery.data;
|
||||
const isHostColumnVisible = isAgent && isSwarmManager;
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="Container list"
|
||||
breadcrumbs={[{ label: 'Containers' }]}
|
||||
reload
|
||||
/>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-sm-12">
|
||||
<ContainersDatatable
|
||||
isHostColumnVisible={isHostColumnVisible}
|
||||
environment={environment}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
1
app/react/docker/containers/ListView/index.ts
Normal file
1
app/react/docker/containers/ListView/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { ListView } from './ListView';
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
import clsx from 'clsx';
|
||||
|
||||
import { DockerContainerStatus } from '@/react/docker/containers/types';
|
||||
import { ContainerStatus } from '@/react/docker/containers/types';
|
||||
import { Authorized } from '@/portainer/hooks/useUser';
|
||||
import { Icon } from '@/react/components/Icon';
|
||||
import { react2angular } from '@/react-tools/react2angular';
|
||||
|
||||
import { Icon } from '@@/Icon';
|
||||
import { Link } from '@@/Link';
|
||||
|
||||
import styles from './ContainerQuickActions.module.css';
|
||||
|
|
@ -22,7 +21,7 @@ interface Props {
|
|||
containerId?: string;
|
||||
nodeName: string;
|
||||
state: QuickActionsState;
|
||||
status: DockerContainerStatus;
|
||||
status: ContainerStatus;
|
||||
}
|
||||
|
||||
export function ContainerQuickActions({
|
||||
|
|
@ -36,9 +35,12 @@ export function ContainerQuickActions({
|
|||
return <TaskQuickActions taskId={taskId} state={state} />;
|
||||
}
|
||||
|
||||
const isActive = ['starting', 'running', 'healthy', 'unhealthy'].includes(
|
||||
status
|
||||
);
|
||||
const isActive = [
|
||||
ContainerStatus.Starting,
|
||||
ContainerStatus.Running,
|
||||
ContainerStatus.Healthy,
|
||||
ContainerStatus.Unhealthy,
|
||||
].includes(status);
|
||||
|
||||
return (
|
||||
<div className={clsx('space-x-1', styles.root)}>
|
||||
|
|
@ -135,8 +137,3 @@ function TaskQuickActions({ taskId, state }: TaskProps) {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const ContainerQuickActionsAngular = react2angular(
|
||||
ContainerQuickActions,
|
||||
['taskId', 'containerId', 'nodeName', 'state', 'status']
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1 @@
|
|||
export {
|
||||
ContainerQuickActions,
|
||||
ContainerQuickActionsAngular,
|
||||
} from './ContainerQuickActions';
|
||||
export { ContainerQuickActions } from './ContainerQuickActions';
|
||||
|
|
|
|||
|
|
@ -3,15 +3,8 @@ import PortainerError from '@/portainer/error';
|
|||
import axios from '@/portainer/services/axios';
|
||||
import { genericHandler } from '@/docker/rest/response/handlers';
|
||||
|
||||
import { NetworkId } from '../networks/types';
|
||||
|
||||
import { ContainerId, DockerContainer } from './types';
|
||||
|
||||
export interface Filters {
|
||||
label?: string[];
|
||||
network?: NetworkId[];
|
||||
}
|
||||
|
||||
export async function startContainer(
|
||||
endpointId: EnvironmentId,
|
||||
id: ContainerId
|
||||
|
|
@ -92,25 +85,7 @@ export async function removeContainer(
|
|||
}
|
||||
}
|
||||
|
||||
export async function getContainers(
|
||||
environmentId: EnvironmentId,
|
||||
filters?: Filters
|
||||
) {
|
||||
try {
|
||||
const { data } = await axios.get<DockerContainer[]>(
|
||||
urlBuilder(environmentId, '', 'json'),
|
||||
{
|
||||
params: { all: 0, filters },
|
||||
}
|
||||
);
|
||||
|
||||
return data;
|
||||
} catch (e) {
|
||||
throw new PortainerError('Unable to retrieve containers', e as Error);
|
||||
}
|
||||
}
|
||||
|
||||
function urlBuilder(
|
||||
export function urlBuilder(
|
||||
endpointId: EnvironmentId,
|
||||
id?: ContainerId,
|
||||
action?: string
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
import { useQuery } from 'react-query';
|
||||
|
||||
import { EnvironmentId } from '@/portainer/environments/types';
|
||||
|
||||
import { getContainers, Filters } from './containers.service';
|
||||
|
||||
export function useContainers(environmentId: EnvironmentId, filters?: Filters) {
|
||||
return useQuery(
|
||||
['environments', environmentId, 'docker', 'containers', { filters }],
|
||||
() => getContainers(environmentId, filters),
|
||||
{
|
||||
meta: {
|
||||
title: 'Failure',
|
||||
message: 'Unable to get containers in network',
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
50
app/react/docker/containers/queries/containers.ts
Normal file
50
app/react/docker/containers/queries/containers.ts
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import { useQuery } from 'react-query';
|
||||
|
||||
import { EnvironmentId } from '@/portainer/environments/types';
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
|
||||
import { urlBuilder } from '../containers.service';
|
||||
import { DockerContainerResponse } from '../types/response';
|
||||
import { parseViewModel } from '../utils';
|
||||
|
||||
import { Filters } from './types';
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export function useContainers(
|
||||
environmentId: EnvironmentId,
|
||||
all = true,
|
||||
filters?: Filters,
|
||||
autoRefreshRate?: number
|
||||
) {
|
||||
return useQuery(
|
||||
queryKeys.filters(environmentId, all, filters),
|
||||
() => getContainers(environmentId, all, filters),
|
||||
{
|
||||
meta: {
|
||||
title: 'Failure',
|
||||
message: 'Unable to retrieve containers',
|
||||
},
|
||||
refetchInterval() {
|
||||
return autoRefreshRate ?? false;
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async function getContainers(
|
||||
environmentId: EnvironmentId,
|
||||
all = true,
|
||||
filters?: Filters
|
||||
) {
|
||||
try {
|
||||
const { data } = await axios.get<DockerContainerResponse[]>(
|
||||
urlBuilder(environmentId, undefined, 'json'),
|
||||
{
|
||||
params: { all, filters: filters && JSON.stringify(filters) },
|
||||
}
|
||||
);
|
||||
return data.map((c) => parseViewModel(c));
|
||||
} catch (error) {
|
||||
throw parseAxiosError(error as Error, 'Unable to retrieve containers');
|
||||
}
|
||||
}
|
||||
29
app/react/docker/containers/queries/gpus.tsx
Normal file
29
app/react/docker/containers/queries/gpus.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { useQuery } from 'react-query';
|
||||
|
||||
import { EnvironmentId } from '@/portainer/environments/types';
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
async function getContainerGpus(
|
||||
environmentId: EnvironmentId,
|
||||
containerId: string
|
||||
) {
|
||||
try {
|
||||
const { data } = await axios.get<{ gpus: string }>(
|
||||
`/docker/${environmentId}/containers/${containerId}/gpus`
|
||||
);
|
||||
return data.gpus;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err as Error);
|
||||
}
|
||||
}
|
||||
|
||||
export function useContainerGpus(
|
||||
environmentId: EnvironmentId,
|
||||
containerId: string
|
||||
) {
|
||||
return useQuery(queryKeys.gpus(environmentId, containerId), () =>
|
||||
getContainerGpus(environmentId, containerId)
|
||||
);
|
||||
}
|
||||
19
app/react/docker/containers/queries/query-keys.ts
Normal file
19
app/react/docker/containers/queries/query-keys.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { EnvironmentId } from '@/portainer/environments/types';
|
||||
|
||||
import { queryKeys as dockerQueryKeys } from '../../queries/utils';
|
||||
|
||||
import { Filters } from './types';
|
||||
|
||||
export const queryKeys = {
|
||||
list: (environmentId: EnvironmentId) =>
|
||||
[dockerQueryKeys.root(environmentId), 'containers'] as const,
|
||||
|
||||
filters: (environmentId: EnvironmentId, all?: boolean, filters?: Filters) =>
|
||||
[...queryKeys.list(environmentId), { all, filters }] as const,
|
||||
|
||||
container: (environmentId: EnvironmentId, id: string) =>
|
||||
[...queryKeys.list(environmentId), id] as const,
|
||||
|
||||
gpus: (environmentId: EnvironmentId, id: string) =>
|
||||
[...queryKeys.container(environmentId, id), 'gpus'] as const,
|
||||
};
|
||||
6
app/react/docker/containers/queries/types.ts
Normal file
6
app/react/docker/containers/queries/types.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { NetworkId } from '../../networks/types';
|
||||
|
||||
export interface Filters {
|
||||
label?: string[];
|
||||
network?: NetworkId[];
|
||||
}
|
||||
|
|
@ -1,54 +1,40 @@
|
|||
import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
|
||||
|
||||
import {
|
||||
PaginationTableSettings,
|
||||
RefreshableTableSettings,
|
||||
SettableColumnsTableSettings,
|
||||
SettableQuickActionsTableSettings,
|
||||
SortableTableSettings,
|
||||
} from '@@/datatables/types';
|
||||
import { DockerContainerResponse } from './types/response';
|
||||
|
||||
export type DockerContainerStatus =
|
||||
| 'paused'
|
||||
| 'stopped'
|
||||
| 'created'
|
||||
| 'healthy'
|
||||
| 'unhealthy'
|
||||
| 'starting'
|
||||
| 'running'
|
||||
| 'dead'
|
||||
| 'exited';
|
||||
export enum ContainerStatus {
|
||||
Paused = 'paused',
|
||||
Stopped = 'stopped',
|
||||
Created = 'created',
|
||||
Healthy = 'healthy',
|
||||
Unhealthy = 'unhealthy',
|
||||
Starting = 'starting',
|
||||
Running = 'running',
|
||||
Dead = 'dead',
|
||||
Exited = 'exited',
|
||||
}
|
||||
|
||||
export type QuickAction = 'attach' | 'exec' | 'inspect' | 'logs' | 'stats';
|
||||
|
||||
export interface ContainersTableSettings
|
||||
extends SortableTableSettings,
|
||||
PaginationTableSettings,
|
||||
SettableColumnsTableSettings,
|
||||
SettableQuickActionsTableSettings<QuickAction>,
|
||||
RefreshableTableSettings {
|
||||
truncateContainerName: number;
|
||||
}
|
||||
|
||||
export interface Port {
|
||||
host: string;
|
||||
public: string;
|
||||
private: string;
|
||||
host?: string;
|
||||
public: number;
|
||||
private: number;
|
||||
}
|
||||
|
||||
export type ContainerId = string;
|
||||
|
||||
export type DockerContainer = {
|
||||
IsPortainer: boolean;
|
||||
Status: DockerContainerStatus;
|
||||
type DecoratedDockerContainer = {
|
||||
NodeName: string;
|
||||
Id: ContainerId;
|
||||
ResourceControl?: ResourceControlViewModel;
|
||||
IP: string;
|
||||
Names: string[];
|
||||
Created: string;
|
||||
ResourceControl: ResourceControlViewModel;
|
||||
Ports: Port[];
|
||||
StackName?: string;
|
||||
Status: ContainerStatus;
|
||||
Ports: Port[];
|
||||
StatusText: string;
|
||||
Image: string;
|
||||
Gpus: string;
|
||||
};
|
||||
|
||||
export type DockerContainer = DecoratedDockerContainer &
|
||||
Omit<DockerContainerResponse, keyof DecoratedDockerContainer>;
|
||||
|
|
|
|||
94
app/react/docker/containers/types/response.ts
Normal file
94
app/react/docker/containers/types/response.ts
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import { PortainerMetadata } from '@/react/docker/types';
|
||||
|
||||
interface EndpointIPAMConfig {
|
||||
IPv4Address?: string;
|
||||
IPv6Address?: string;
|
||||
LinkLocalIPs?: string[];
|
||||
}
|
||||
|
||||
interface EndpointSettings {
|
||||
IPAMConfig?: EndpointIPAMConfig;
|
||||
Links: string[];
|
||||
Aliases: string[];
|
||||
NetworkID: string;
|
||||
EndpointID: string;
|
||||
Gateway: string;
|
||||
IPAddress: string;
|
||||
IPPrefixLen: number;
|
||||
IPv6Gateway: string;
|
||||
GlobalIPv6Address: string;
|
||||
GlobalIPv6PrefixLen: number;
|
||||
MacAddress: string;
|
||||
DriverOpts: { [key: string]: string };
|
||||
}
|
||||
|
||||
export interface SummaryNetworkSettings {
|
||||
Networks: { [key: string]: EndpointSettings | undefined };
|
||||
}
|
||||
|
||||
interface PortResponse {
|
||||
IP?: string;
|
||||
PrivatePort: number;
|
||||
PublicPort?: number;
|
||||
Type: string;
|
||||
}
|
||||
|
||||
enum MountPropagation {
|
||||
// PropagationRPrivate RPRIVATE
|
||||
RPrivate = 'rprivate',
|
||||
// PropagationPrivate PRIVATE
|
||||
Private = 'private',
|
||||
// PropagationRShared RSHARED
|
||||
RShared = 'rshared',
|
||||
// PropagationShared SHARED
|
||||
Shared = 'shared',
|
||||
// PropagationRSlave RSLAVE
|
||||
RSlave = 'rslave',
|
||||
// PropagationSlave SLAVE
|
||||
Slave = 'slave',
|
||||
}
|
||||
|
||||
enum MountType {
|
||||
// TypeBind is the type for mounting host dir
|
||||
Bind = 'bind',
|
||||
// TypeVolume is the type for remote storage volumes
|
||||
Volume = 'volume',
|
||||
// TypeTmpfs is the type for mounting tmpfs
|
||||
Tmpfs = 'tmpfs',
|
||||
// TypeNamedPipe is the type for mounting Windows named pipes
|
||||
NamedPipe = 'npipe',
|
||||
}
|
||||
|
||||
interface MountPoint {
|
||||
Type?: MountType;
|
||||
Name?: string;
|
||||
Source: string;
|
||||
Destination: string;
|
||||
Driver?: string;
|
||||
Mode: string;
|
||||
RW: boolean;
|
||||
Propagation: MountPropagation;
|
||||
}
|
||||
|
||||
export interface DockerContainerResponse {
|
||||
Id: string;
|
||||
Names: string[];
|
||||
Image: string;
|
||||
ImageID: string;
|
||||
Command: string;
|
||||
Created: number;
|
||||
Ports: PortResponse[];
|
||||
SizeRw?: number;
|
||||
SizeRootFs?: number;
|
||||
Labels: { [key: string]: string };
|
||||
State: string;
|
||||
Status: string;
|
||||
HostConfig: {
|
||||
NetworkMode?: string;
|
||||
};
|
||||
NetworkSettings?: SummaryNetworkSettings;
|
||||
Mounts: MountPoint[];
|
||||
|
||||
Portainer: PortainerMetadata;
|
||||
IsPortainer: boolean;
|
||||
}
|
||||
87
app/react/docker/containers/utils.ts
Normal file
87
app/react/docker/containers/utils.ts
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import _ from 'lodash';
|
||||
|
||||
import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
|
||||
|
||||
import { DockerContainer, ContainerStatus } from './types';
|
||||
import { DockerContainerResponse } from './types/response';
|
||||
|
||||
export function parseViewModel(
|
||||
response: DockerContainerResponse
|
||||
): DockerContainer {
|
||||
const resourceControl =
|
||||
response.Portainer?.ResourceControl &&
|
||||
new ResourceControlViewModel(response?.Portainer?.ResourceControl);
|
||||
const nodeName = response.Portainer?.Agent?.NodeName || '';
|
||||
|
||||
const ip =
|
||||
Object.values(response?.NetworkSettings?.Networks || {})[0]?.IPAddress ||
|
||||
'';
|
||||
|
||||
const labels = response.Labels || {};
|
||||
const stackName =
|
||||
labels['com.docker.compose.project'] ||
|
||||
labels['com.docker.stack.namespace'];
|
||||
|
||||
const status = createStatus(response.Status);
|
||||
|
||||
const ports = _.compact(
|
||||
response.Ports?.map(
|
||||
(p) =>
|
||||
p.PublicPort && {
|
||||
host: p.IP,
|
||||
private: p.PrivatePort,
|
||||
public: p.PublicPort,
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
return {
|
||||
...response,
|
||||
ResourceControl: resourceControl,
|
||||
NodeName: nodeName,
|
||||
IP: ip,
|
||||
StackName: stackName,
|
||||
Status: status,
|
||||
Ports: ports,
|
||||
StatusText: response.Status,
|
||||
Gpus: '',
|
||||
};
|
||||
}
|
||||
|
||||
function createStatus(statusText = ''): ContainerStatus {
|
||||
const status = statusText.toLowerCase();
|
||||
|
||||
if (status.includes(ContainerStatus.Paused)) {
|
||||
return ContainerStatus.Paused;
|
||||
}
|
||||
|
||||
if (status.includes(ContainerStatus.Dead)) {
|
||||
return ContainerStatus.Dead;
|
||||
}
|
||||
|
||||
if (status.includes(ContainerStatus.Created)) {
|
||||
return ContainerStatus.Created;
|
||||
}
|
||||
|
||||
if (status.includes(ContainerStatus.Stopped)) {
|
||||
return ContainerStatus.Stopped;
|
||||
}
|
||||
|
||||
if (status.includes(ContainerStatus.Exited)) {
|
||||
return ContainerStatus.Exited;
|
||||
}
|
||||
|
||||
if (status.includes('(healthy)')) {
|
||||
return ContainerStatus.Healthy;
|
||||
}
|
||||
|
||||
if (status.includes('(unhealthy)')) {
|
||||
return ContainerStatus.Unhealthy;
|
||||
}
|
||||
|
||||
if (status.includes('(health: starting)')) {
|
||||
return ContainerStatus.Starting;
|
||||
}
|
||||
|
||||
return ContainerStatus.Running;
|
||||
}
|
||||
|
|
@ -9,13 +9,13 @@ import { AccessControlPanel } from '@/portainer/access-control/AccessControlPane
|
|||
import { ResourceControlType } from '@/portainer/access-control/types';
|
||||
import { DockerContainer } from '@/react/docker/containers/types';
|
||||
import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
|
||||
import { useContainers } from '@/react/docker/containers/queries/containers';
|
||||
|
||||
import { PageHeader } from '@@/PageHeader';
|
||||
|
||||
import { useNetwork, useDeleteNetwork } from '../queries';
|
||||
import { isSystemNetwork } from '../network.helper';
|
||||
import { DockerNetwork, NetworkContainer } from '../types';
|
||||
import { useContainers } from '../../containers/queries';
|
||||
|
||||
import { NetworkDetailsTable } from './NetworkDetailsTable';
|
||||
import { NetworkOptionsTable } from './NetworkOptionsTable';
|
||||
|
|
@ -38,7 +38,7 @@ export function ItemView() {
|
|||
const filters = {
|
||||
network: [networkId],
|
||||
};
|
||||
const containersQuery = useContainers(environmentId, filters);
|
||||
const containersQuery = useContainers(environmentId, true, filters);
|
||||
|
||||
useEffect(() => {
|
||||
if (networkQuery.data && containersQuery.data) {
|
||||
|
|
|
|||
5
app/react/docker/queries/utils.ts
Normal file
5
app/react/docker/queries/utils.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { EnvironmentId } from '@/portainer/environments/types';
|
||||
|
||||
export const queryKeys = {
|
||||
root: (environmentId: EnvironmentId) => ['docker', environmentId] as const,
|
||||
};
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import _ from 'lodash';
|
||||
|
||||
import { DockerContainer } from '@/react/docker/containers/types';
|
||||
import { Environment } from '@/portainer/environments/types';
|
||||
import { createStore } from '@/react/docker/containers/ListView/ContainersDatatable/datatable-store';
|
||||
import { useColumns } from '@/react/docker/containers/ListView/ContainersDatatable/columns';
|
||||
import { ContainersDatatableActions } from '@/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions';
|
||||
import { ContainersDatatableSettings } from '@/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableSettings';
|
||||
|
||||
import { Datatable, TableSettingsMenu } from '@@/datatables';
|
||||
import {
|
||||
buildAction,
|
||||
QuickActionsSettings,
|
||||
} from '@@/datatables/QuickActionsSettings';
|
||||
import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
|
||||
|
||||
import { useContainers } from '../../containers/queries/containers';
|
||||
import { RowProvider } from '../../containers/ListView/ContainersDatatable/RowContext';
|
||||
|
||||
const storageKey = 'stack-containers';
|
||||
const useStore = createStore(storageKey);
|
||||
|
||||
const actions = [
|
||||
buildAction('logs', 'Logs'),
|
||||
buildAction('inspect', 'Inspect'),
|
||||
buildAction('stats', 'Stats'),
|
||||
buildAction('exec', 'Console'),
|
||||
buildAction('attach', 'Attach'),
|
||||
];
|
||||
|
||||
export interface Props {
|
||||
environment: Environment;
|
||||
stackName: string;
|
||||
}
|
||||
|
||||
export function StackContainersDatatable({ environment, stackName }: Props) {
|
||||
const settings = useStore();
|
||||
const columns = useColumns(false);
|
||||
const hidableColumns = _.compact(
|
||||
columns.filter((col) => col.canHide).map((col) => col.id)
|
||||
);
|
||||
|
||||
const containersQuery = useContainers(
|
||||
environment.Id,
|
||||
true,
|
||||
{
|
||||
label: [`com.docker.compose.project=${stackName}`],
|
||||
},
|
||||
settings.autoRefreshRate * 1000
|
||||
);
|
||||
|
||||
return (
|
||||
<RowProvider context={{ environment }}>
|
||||
<Datatable
|
||||
titleOptions={{
|
||||
icon: 'fa-cubes',
|
||||
title: 'Containers',
|
||||
}}
|
||||
settingsStore={settings}
|
||||
columns={columns}
|
||||
renderTableActions={(selectedRows) => (
|
||||
<ContainersDatatableActions
|
||||
selectedItems={selectedRows}
|
||||
isAddActionVisible={false}
|
||||
endpointId={environment.Id}
|
||||
/>
|
||||
)}
|
||||
initialTableState={{ hiddenColumns: settings.hiddenColumns }}
|
||||
renderTableSettings={(tableInstance) => {
|
||||
const columnsToHide = tableInstance.allColumns.filter((colInstance) =>
|
||||
hidableColumns?.includes(colInstance.id)
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ColumnVisibilityMenu<DockerContainer>
|
||||
columns={columnsToHide}
|
||||
onChange={(hiddenColumns) => {
|
||||
settings.setHiddenColumns(hiddenColumns);
|
||||
tableInstance.setHiddenColumns(hiddenColumns);
|
||||
}}
|
||||
value={settings.hiddenColumns}
|
||||
/>
|
||||
<TableSettingsMenu
|
||||
quickActions={<QuickActionsSettings actions={actions} />}
|
||||
>
|
||||
<ContainersDatatableSettings settings={settings} />
|
||||
</TableSettingsMenu>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
storageKey={storageKey}
|
||||
dataset={containersQuery.data || []}
|
||||
isLoading={containersQuery.isLoading}
|
||||
emptyContentLabel="No containers found"
|
||||
/>
|
||||
</RowProvider>
|
||||
);
|
||||
}
|
||||
23
app/react/docker/stacks/types.ts
Normal file
23
app/react/docker/stacks/types.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
export enum StackType {
|
||||
/**
|
||||
* Represents a stack managed via docker stack
|
||||
*/
|
||||
DockerSwarm = 1,
|
||||
/**
|
||||
* Represents a stack managed via docker-compose
|
||||
*/
|
||||
DockerCompose,
|
||||
/**
|
||||
* Represents a stack managed via kubectl
|
||||
*/
|
||||
Kubernetes,
|
||||
/**
|
||||
* Represents a stack managed via Nomad
|
||||
*/
|
||||
Nomad,
|
||||
}
|
||||
|
||||
export enum StackStatus {
|
||||
Active = 1,
|
||||
Inactive,
|
||||
}
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
import { ResourceControlResponse } from '@/portainer/access-control/types';
|
||||
|
||||
export interface PortainerMetadata {
|
||||
ResourceControl: ResourceControlResponse;
|
||||
interface AgentMetadata {
|
||||
NodeName: string;
|
||||
}
|
||||
|
||||
export interface PortainerMetadata {
|
||||
ResourceControl?: ResourceControlResponse;
|
||||
Agent?: AgentMetadata;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue