mirror of https://github.com/portainer/portainer
refactor(kube/apps): migrate integrated apps table to react [EE-4690] (#11025)
Chaim Lev-Ari
GitHub
parent
26bb028ace
commit
946166319f
|
|
@ -1,131 +0,0 @@
|
|||
<div class="datatable">
|
||||
<rd-widget>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<div class="toolBar !gap-3">
|
||||
<div class="toolBarTitle vertical-center">
|
||||
<div class="widget-icon space-right">
|
||||
<pr-icon icon="$ctrl.titleIcon"></pr-icon>
|
||||
</div>
|
||||
{{ $ctrl.titleText }}
|
||||
</div>
|
||||
<div class="searchBar vertical-center !mr-0 min-w-[280px]">
|
||||
<pr-icon icon="'search'" class="vertical-center"></pr-icon>
|
||||
<input
|
||||
type="text"
|
||||
class="searchInput"
|
||||
ng-model="$ctrl.state.textFilter"
|
||||
ng-change="$ctrl.onTextFilterChange()"
|
||||
placeholder="Search for an application..."
|
||||
auto-focus
|
||||
ng-model-options="{ debounce: 300 }"
|
||||
/>
|
||||
</div>
|
||||
<div ng-if="$ctrl.refreshCallback" class="settings">
|
||||
<span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
|
||||
<span uib-dropdown-toggle aria-label="Settings">
|
||||
<pr-icon icon="'more-vertical'" class-name="'!mr-0 !h-4'"></pr-icon>
|
||||
</span>
|
||||
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
|
||||
<div class="tableMenu">
|
||||
<div class="menuHeader"> Table settings </div>
|
||||
<div class="menuContent">
|
||||
<div>
|
||||
<div class="md-checkbox">
|
||||
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
|
||||
<label for="setting_auto_refresh">Auto refresh</label>
|
||||
</div>
|
||||
<div ng-if="$ctrl.settings.repeater.autoRefresh">
|
||||
<label for="settings_refresh_rate"> Refresh rate </label>
|
||||
<select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
|
||||
<option value="10">10s</option>
|
||||
<option value="30">30s</option>
|
||||
<option value="60">1min</option>
|
||||
<option value="120">2min</option>
|
||||
<option value="300">5min</option>
|
||||
</select>
|
||||
<span>
|
||||
<pr-icon id="refreshRateChange" icon="'check'" mode="'success'" style="display: none"></pr-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table-hover nowrap-cells table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<table-column-header
|
||||
col-title="'Name'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Name'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Name')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<table-column-header
|
||||
col-title="'Stack'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'StackName'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('StackName')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<table-column-header
|
||||
col-title="'Image'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Image'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Image')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
|
||||
>
|
||||
<td
|
||||
><a ui-sref="kubernetes.applications.application({ name: item.Name, namespace: item.ResourcePool })">{{ item.Name }}</a></td
|
||||
>
|
||||
<td>{{ item.StackName || '-' }}</td>
|
||||
<td title="{{ item.Image }}">{{ item.Image | truncate: 64 }}</td>
|
||||
</tr>
|
||||
<tr ng-if="!$ctrl.dataset">
|
||||
<td colspan="3" class="text-muted text-center">Loading...</td>
|
||||
</tr>
|
||||
<tr ng-if="$ctrl.state.filteredDataSet.length === 0">
|
||||
<td colspan="3" class="text-muted text-center">No application available.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="footer" ng-if="$ctrl.dataset">
|
||||
<div class="paginationControls">
|
||||
<form class="form-inline">
|
||||
<span class="limitSelector">
|
||||
<span style="margin-right: 5px"> Items per page </span>
|
||||
<select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
|
||||
<option value="0">All</option>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</span>
|
||||
<dir-pagination-controls max-size="5"></dir-pagination-controls>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
angular.module('portainer.kubernetes').component('kubernetesIntegratedApplicationsDatatable', {
|
||||
templateUrl: './integratedApplicationsDatatable.html',
|
||||
controller: 'GenericDatatableController',
|
||||
bindings: {
|
||||
titleText: '@',
|
||||
titleIcon: '@',
|
||||
dataset: '<',
|
||||
tableKey: '@',
|
||||
orderBy: '@',
|
||||
reverseOrder: '<',
|
||||
refreshCallback: '<',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
import { ServiceType } from '@/react/kubernetes/applications/CreateView/application-services/types';
|
||||
import { AppType, DeploymentType } from '@/react/kubernetes/applications/types';
|
||||
|
||||
import { ConfigurationVolume } from './ConfigurationVolume';
|
||||
import { PersistedFolder } from './PersistedFolder';
|
||||
|
||||
export class Application {
|
||||
Id: string;
|
||||
|
||||
Name: string;
|
||||
|
||||
StackName: string;
|
||||
|
||||
StackId: string;
|
||||
|
||||
ApplicationKind: string;
|
||||
|
||||
ApplicationOwner: string;
|
||||
|
||||
ApplicationName: string;
|
||||
|
||||
Annotations: Record<string, string> = {};
|
||||
|
||||
ResourcePool: string;
|
||||
|
||||
Image: string;
|
||||
|
||||
CreationDate: 0;
|
||||
|
||||
Pods: [];
|
||||
|
||||
Containers: [];
|
||||
|
||||
Metadata: {
|
||||
labels?: Record<string, string>;
|
||||
annotations?: Record<string, string>;
|
||||
};
|
||||
|
||||
Limits: {
|
||||
Cpu?: number;
|
||||
Memory?: number;
|
||||
};
|
||||
|
||||
ServiceType?: ServiceType;
|
||||
|
||||
ServiceId: string;
|
||||
|
||||
ServiceName: string;
|
||||
|
||||
HeadlessServiceName: undefined; // only used for StatefulSet
|
||||
|
||||
LoadBalancerIPAddress: undefined; // only filled when bound service is LoadBalancer and state is available
|
||||
|
||||
PublishedPorts: [];
|
||||
|
||||
Volumes: [];
|
||||
|
||||
Env: [];
|
||||
|
||||
PersistedFolders: Array<PersistedFolder>;
|
||||
|
||||
ConfigurationVolumes: Array<ConfigurationVolume>;
|
||||
|
||||
DeploymentType?: DeploymentType;
|
||||
|
||||
DataAccessPolicy: 'Unknown';
|
||||
|
||||
ApplicationType?: AppType;
|
||||
|
||||
RunningPodsCount: 0;
|
||||
|
||||
TotalPodsCount: 0;
|
||||
|
||||
Yaml: string;
|
||||
|
||||
Note: string;
|
||||
|
||||
Raw: undefined; // only filled when inspecting app details / create / edit view (never filled in multiple-apps views)
|
||||
|
||||
AutoScaler: undefined; // only filled if the application has an HorizontalPodAutoScaler bound to it
|
||||
|
||||
Conditions: Array<{
|
||||
lastTransitionTime: string;
|
||||
lastUpdateTime: string;
|
||||
message: string;
|
||||
reason: string;
|
||||
status: string;
|
||||
type: string;
|
||||
}> = [];
|
||||
|
||||
constructor() {
|
||||
this.Id = '';
|
||||
this.Name = '';
|
||||
this.StackName = '';
|
||||
this.StackId = '';
|
||||
this.ApplicationKind = '';
|
||||
this.ApplicationOwner = '';
|
||||
this.ApplicationName = '';
|
||||
this.ResourcePool = '';
|
||||
this.Image = '';
|
||||
this.CreationDate = 0;
|
||||
this.Pods = [];
|
||||
this.Containers = [];
|
||||
this.Metadata = {};
|
||||
this.Limits = {};
|
||||
this.ServiceId = '';
|
||||
this.ServiceName = '';
|
||||
this.HeadlessServiceName = undefined;
|
||||
this.LoadBalancerIPAddress = undefined;
|
||||
this.PublishedPorts = [];
|
||||
this.Volumes = [];
|
||||
this.Env = [];
|
||||
this.PersistedFolders = [];
|
||||
this.ConfigurationVolumes = [];
|
||||
this.DataAccessPolicy = 'Unknown';
|
||||
this.RunningPodsCount = 0;
|
||||
this.TotalPodsCount = 0;
|
||||
this.Yaml = '';
|
||||
this.Note = '';
|
||||
this.Raw = undefined;
|
||||
this.AutoScaler = undefined;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export class ConfigurationVolume {
|
||||
fileMountPath: string = '';
|
||||
|
||||
rootMountPath: string = '';
|
||||
|
||||
configurationKey: string = '';
|
||||
|
||||
configurationName: string = '';
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export class PersistedFolder {
|
||||
MountPath: string = '';
|
||||
|
||||
persistentVolumeClaimName: string = '';
|
||||
|
||||
HostPath: string = '';
|
||||
}
|
||||
|
|
@ -1,49 +1,8 @@
|
|||
export * from './constants';
|
||||
|
||||
/**
|
||||
* KubernetesApplication Model (Composite)
|
||||
*/
|
||||
const _KubernetesApplication = Object.freeze({
|
||||
Id: '',
|
||||
Name: '',
|
||||
StackName: '',
|
||||
StackId: '',
|
||||
ApplicationKind: '',
|
||||
ApplicationOwner: '',
|
||||
ApplicationName: '',
|
||||
ResourcePool: '',
|
||||
Image: '',
|
||||
CreationDate: 0,
|
||||
Pods: [],
|
||||
Containers: [],
|
||||
Metadata: {},
|
||||
Limits: {},
|
||||
ServiceType: '',
|
||||
ServiceId: '',
|
||||
ServiceName: '',
|
||||
HeadlessServiceName: undefined, // only used for StatefulSet
|
||||
LoadBalancerIPAddress: undefined, // only filled when bound service is LoadBalancer and state is available
|
||||
PublishedPorts: [],
|
||||
Volumes: [],
|
||||
Env: [],
|
||||
PersistedFolders: [], // KubernetesApplicationPersistedFolder list
|
||||
ConfigurationVolumes: [], // KubernetesApplicationConfigurationVolume list
|
||||
DeploymentType: 'Unknown',
|
||||
DataAccessPolicy: 'Unknown',
|
||||
ApplicationType: 'Unknown',
|
||||
RunningPodsCount: 0,
|
||||
TotalPodsCount: 0,
|
||||
Yaml: '',
|
||||
Note: '',
|
||||
Raw: undefined, // only filled when inspecting app details / create / edit view (never filled in multiple-apps views)
|
||||
AutoScaler: undefined, // only filled if the application has an HorizontalPodAutoScaler bound to it
|
||||
});
|
||||
|
||||
export class KubernetesApplication {
|
||||
constructor() {
|
||||
Object.assign(this, JSON.parse(JSON.stringify(_KubernetesApplication)));
|
||||
}
|
||||
}
|
||||
export { Application as KubernetesApplication } from './Application';
|
||||
export { ConfigurationVolume as KubernetesApplicationConfigurationVolume } from './ConfigurationVolume';
|
||||
export { PersistedFolder as KubernetesApplicationPersistedFolder } from './PersistedFolder';
|
||||
|
||||
/**
|
||||
* HelmApplication Model (Composite)
|
||||
|
|
@ -64,37 +23,6 @@ export class HelmApplication {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* KubernetesApplicationPersistedFolder Model
|
||||
*/
|
||||
const _KubernetesApplicationPersistedFolder = Object.freeze({
|
||||
MountPath: '',
|
||||
persistentVolumeClaimName: '',
|
||||
HostPath: '',
|
||||
});
|
||||
|
||||
export class KubernetesApplicationPersistedFolder {
|
||||
constructor() {
|
||||
Object.assign(this, JSON.parse(JSON.stringify(_KubernetesApplicationPersistedFolder)));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* KubernetesApplicationConfigurationVolume Model
|
||||
*/
|
||||
const _KubernetesApplicationConfigurationVolume = Object.freeze({
|
||||
fileMountPath: '',
|
||||
rootMountPath: '',
|
||||
configurationKey: '',
|
||||
configurationName: '',
|
||||
});
|
||||
|
||||
export class KubernetesApplicationConfigurationVolume {
|
||||
constructor() {
|
||||
Object.assign(this, JSON.parse(JSON.stringify(_KubernetesApplicationConfigurationVolume)));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* KubernetesApplicationPort Model
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ import { AppDeploymentTypeFormSection } from '@/react/kubernetes/applications/co
|
|||
import { EnvironmentVariablesFormSection } from '@/react/kubernetes/applications/components/EnvironmentVariablesFormSection/EnvironmentVariablesFormSection';
|
||||
import { kubeEnvVarValidationSchema } from '@/react/kubernetes/applications/components/EnvironmentVariablesFormSection/kubeEnvVarValidationSchema';
|
||||
import { HelmInsightsBox } from '@/react/kubernetes/applications/ListView/ApplicationsDatatable/HelmInsightsBox';
|
||||
import { IntegratedAppsDatatable } from '@/react/kubernetes/components/IntegratedAppsDatatable/IntegratedAppsDatatable';
|
||||
|
||||
import { applicationsModule } from './applications';
|
||||
import { volumesModule } from './volumes';
|
||||
|
|
@ -213,6 +214,16 @@ export const ngModule = angular
|
|||
'showSystem',
|
||||
'setSystemResources',
|
||||
])
|
||||
)
|
||||
.component(
|
||||
'kubernetesIntegratedApplicationsDatatable',
|
||||
r2a(withUIRouter(withCurrentUser(IntegratedAppsDatatable)), [
|
||||
'dataset',
|
||||
'isLoading',
|
||||
'onRefresh',
|
||||
'tableKey',
|
||||
'tableTitle',
|
||||
])
|
||||
);
|
||||
|
||||
export const componentsModule = ngModule.name;
|
||||
|
|
|
|||
|
|
@ -158,17 +158,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-if="ctrl.configuration.Used">
|
||||
<div class="col-sm-12">
|
||||
<kubernetes-integrated-applications-datatable
|
||||
dataset="ctrl.configuration.Applications"
|
||||
table-key="kubernetes.configurations.applications"
|
||||
order-by="Name"
|
||||
refresh-callback="ctrl.getApplications"
|
||||
title-text="Applications using this ConfigMap"
|
||||
title-icon="svg-laptopcode"
|
||||
>
|
||||
</kubernetes-integrated-applications-datatable>
|
||||
</div>
|
||||
</div>
|
||||
<kubernetes-integrated-applications-datatable
|
||||
ng-if="ctrl.configuration.Used"
|
||||
dataset="ctrl.configuration.Applications"
|
||||
is-loading="ctrl.state.applicationsLoading"
|
||||
table-key="'kubernetes.configurations.applications'"
|
||||
on-refresh="(ctrl.getApplications)"
|
||||
table-title="'Applications using this ConfigMap'"
|
||||
>
|
||||
</kubernetes-integrated-applications-datatable>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -172,17 +172,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-if="ctrl.configuration.Used">
|
||||
<div class="col-sm-12">
|
||||
<kubernetes-integrated-applications-datatable
|
||||
dataset="ctrl.configuration.Applications"
|
||||
table-key="kubernetes.configurations.applications"
|
||||
order-by="Name"
|
||||
refresh-callback="ctrl.getApplications"
|
||||
title-text="Applications using this secret"
|
||||
title-icon="svg-laptopcode"
|
||||
>
|
||||
</kubernetes-integrated-applications-datatable>
|
||||
</div>
|
||||
</div>
|
||||
<kubernetes-integrated-applications-datatable
|
||||
ng-if="ctrl.configuration.Used"
|
||||
dataset="ctrl.configuration.Applications"
|
||||
is-loading="ctrl.state.applicationsLoading"
|
||||
table-key="'kubernetes.secrets.applications'"
|
||||
on-refresh="(ctrl.getApplications)"
|
||||
table-title="'Applications using this secret'"
|
||||
>
|
||||
</kubernetes-integrated-applications-datatable>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -180,17 +180,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-if="ctrl.isUsed(item)">
|
||||
<div class="col-sm-12">
|
||||
<kubernetes-integrated-applications-datatable
|
||||
dataset="ctrl.volume.Applications"
|
||||
table-key="kubernetes.volume.applications"
|
||||
order-by="Name"
|
||||
refresh-callback="ctrl.getVolume"
|
||||
title-text="Applications using this volume"
|
||||
title-icon="svg-laptopcode"
|
||||
>
|
||||
</kubernetes-integrated-applications-datatable>
|
||||
</div>
|
||||
</div>
|
||||
<kubernetes-integrated-applications-datatable
|
||||
ng-if="ctrl.isUsed(item)"
|
||||
dataset="ctrl.volume.Applications"
|
||||
is-loading="!ctrl.volume.Applications"
|
||||
table-key="'kubernetes.volume.applications'"
|
||||
on-refresh="(ctrl.getVolume)"
|
||||
table-title="'Applications using this volume'"
|
||||
>
|
||||
</kubernetes-integrated-applications-datatable>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
import dataflow from '@/assets/ico/dataflow-1.svg?c';
|
||||
import git from '@/assets/ico/git.svg?c';
|
||||
import kube from '@/assets/ico/kube.svg?c';
|
||||
import laptopcode from '@/assets/ico/laptop-code.svg?c';
|
||||
import ldap from '@/assets/ico/ldap.svg?c';
|
||||
import linux from '@/assets/ico/linux.svg?c';
|
||||
import memory from '@/assets/ico/memory.svg?c';
|
||||
|
|
@ -40,7 +39,6 @@ export const SvgIcons = {
|
|||
dataflow,
|
||||
dockericon,
|
||||
git,
|
||||
laptopcode,
|
||||
ldap,
|
||||
linux,
|
||||
memory,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
import LaptopCode from '@/assets/ico/laptop-code.svg?c';
|
||||
|
||||
import { Datatable, TableSettingsMenu } from '@@/datatables';
|
||||
import { useRepeater } from '@@/datatables/useRepeater';
|
||||
import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
|
||||
import { useTableStateWithStorage } from '@@/datatables/useTableState';
|
||||
import {
|
||||
BasicTableSettings,
|
||||
refreshableSettings,
|
||||
RefreshableTableSettings,
|
||||
} from '@@/datatables/types';
|
||||
|
||||
import { columns } from './columns';
|
||||
import { IntegratedApp } from './types';
|
||||
|
||||
interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
|
||||
|
||||
export function IntegratedAppsDatatable({
|
||||
dataset,
|
||||
onRefresh,
|
||||
isLoading,
|
||||
tableKey,
|
||||
tableTitle,
|
||||
}: {
|
||||
dataset: Array<IntegratedApp>;
|
||||
onRefresh: () => void;
|
||||
isLoading: boolean;
|
||||
tableKey: string;
|
||||
tableTitle: string;
|
||||
}) {
|
||||
const tableState = useTableStateWithStorage<TableSettings>(
|
||||
tableKey,
|
||||
'Name',
|
||||
(set) => ({
|
||||
...refreshableSettings(set),
|
||||
})
|
||||
);
|
||||
useRepeater(tableState.autoRefreshRate, onRefresh);
|
||||
|
||||
return (
|
||||
<Datatable
|
||||
dataset={dataset}
|
||||
settingsManager={tableState}
|
||||
columns={columns}
|
||||
disableSelect
|
||||
title={tableTitle}
|
||||
titleIcon={LaptopCode}
|
||||
isLoading={isLoading}
|
||||
renderTableSettings={() => (
|
||||
<TableSettingsMenu>
|
||||
<TableSettingsMenuAutoRefresh
|
||||
value={tableState.autoRefreshRate}
|
||||
onChange={tableState.setAutoRefreshRate}
|
||||
/>
|
||||
</TableSettingsMenu>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { createColumnHelper } from '@tanstack/react-table';
|
||||
|
||||
import { IntegratedApp } from './types';
|
||||
|
||||
export const helper = createColumnHelper<IntegratedApp>();
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { CellContext } from '@tanstack/react-table';
|
||||
|
||||
import { Link } from '@@/Link';
|
||||
|
||||
import { helper } from './columns.helper';
|
||||
import { IntegratedApp } from './types';
|
||||
|
||||
export const name = helper.accessor('Name', {
|
||||
header: 'Name',
|
||||
cell: Cell,
|
||||
});
|
||||
|
||||
function Cell({ row: { original: item } }: CellContext<IntegratedApp, string>) {
|
||||
return (
|
||||
<Link
|
||||
to="kubernetes.applications.application"
|
||||
params={{ name: item.Name, namespace: item.ResourcePool }}
|
||||
>
|
||||
{item.Name}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { truncate } from '@/portainer/filters/filters';
|
||||
|
||||
import { helper } from './columns.helper';
|
||||
import { name } from './columns.name';
|
||||
|
||||
export const columns = [
|
||||
name,
|
||||
helper.accessor('StackName', {
|
||||
header: 'Stack',
|
||||
cell: ({ getValue }) => getValue() || '-',
|
||||
}),
|
||||
|
||||
helper.accessor('Image', {
|
||||
header: 'Image',
|
||||
cell: ({ row: { original: item } }) => (
|
||||
<>
|
||||
{truncate(item.Image, 64)}
|
||||
{item.Containers?.length > 1 && <>+ {item.Containers.length - 1}</>}
|
||||
</>
|
||||
),
|
||||
}),
|
||||
];
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { KubernetesApplication } from '@/kubernetes/models/application/models';
|
||||
|
||||
export type IntegratedApp = KubernetesApplication;
|
||||
Loading…
Reference in New Issue