mirror of https://github.com/portainer/portainer
refactor(kube/apps): migrate integrated apps table to react [EE-4690] (#11025)
Chaim Lev-Ari
8 months ago
committed by
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 = '';
|
||||
}
|
||||
@ -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