2020-07-05 23:21:03 +00:00
< div class = "datatable" >
2022-07-13 09:21:26 +00:00
<!-- table title and action menu -->
2023-03-22 19:20:30 +00:00
< div class = "toolBar !flex-col !gap-0" >
< div class = "toolBar w-full !items-start !gap-x-5 !p-0" >
2022-07-13 09:21:26 +00:00
< div class = "toolBarTitle vertical-center" >
2022-08-10 04:12:20 +00:00
< div class = "widget-icon space-right" >
2022-11-28 02:00:28 +00:00
< pr-icon icon = "'list'" > < / pr-icon >
2022-08-10 04:12:20 +00:00
< / div >
2022-07-13 09:21:26 +00:00
Stacks
< / div >
2023-03-22 19:20:30 +00:00
<!-- use row reverse to make the left most items wrap first to the right side in the next line -->
< div class = "inline-flex flex-row-reverse flex-wrap !gap-x-5 gap-y-3" >
< div class = "actionBar !mr-0 !gap-3" >
< button
type="button"
class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="k8sApp-removeStackButton"
2023-03-07 21:27:42 +00:00
>
2023-03-22 19:20:30 +00:00
< pr-icon icon = "'trash-2'" > < / pr-icon >
Remove
< / button >
< div class = "settings" data-cy = "k8sApp-StackTableSettings" >
< 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 >
< 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" ng-if = "$ctrl.isAdmin" >
< input id = "applications_setting_show_system" type = "checkbox" ng-model = "$ctrl.settings.showSystem" ng-change = "$ctrl.onSettingsShowSystemChange()" / >
< label for = "applications_setting_show_system" > Show system resources< / label >
< / div >
< div class = "md-checkbox" >
< input
id="setting_auto_refresh"
type="checkbox"
ng-model="$ctrl.settings.repeater.autoRefresh"
ng-change="$ctrl.onSettingsRepeaterChange()"
data-cy="k8sApp-autoRefreshCheckbox-stack"
/>
< 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"
data-cy="k8sApp-refreshRateDropdown-stack"
>
< 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 >
2020-07-05 23:21:03 +00:00
< / div >
< / div >
2023-03-22 19:20:30 +00:00
< div >
< a type = "button" class = "btn btn-sm btn-default btn-sm" ng-click = "$ctrl.settings.open = false;" data-cy = "k8sApp-tableSettingsCloseButton-stack" > Close< / a >
< / div >
2020-07-05 23:21:03 +00:00
< / div >
< / div >
2023-03-22 19:20:30 +00:00
< / span >
< / div >
< / div >
< div class = "searchBar vertical-center" >
< pr-icon icon = "'search'" class-name = "'!h-3'" > < / pr-icon >
< input
type="text"
class="searchInput min-w-min self-start"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
< / div >
< div class = "form-group namespaces !mb-0 !mr-0 !h-[30px] w-fit min-w-[140px]" >
< div class = "input-group" >
< span class = "input-group-addon" >
< pr-icon icon = "'filter'" size = "'sm'" > < / pr-icon >
Namespace
< / span >
< select
class="form-control !h-[30px] !py-1"
ng-model="$ctrl.state.namespace"
ng-change="$ctrl.onChangeNamespace()"
data-cy="component-namespaceSelect"
ng-options="o.Value as (o.Name + (o.IsSystem ? ' - system' : '')) for o in $ctrl.state.namespaces"
>
< / select >
< / div >
2020-07-05 23:21:03 +00:00
< / div >
< / div >
2022-07-13 09:21:26 +00:00
< / div >
<!-- info text -->
2023-03-22 19:20:30 +00:00
< div class = "flex w-full flex-row" ng-if = "$ctrl.isAdmin && !$ctrl.settings.showSystem" >
< span class = "small text-muted vertical-center mt-1" >
2022-11-28 02:00:28 +00:00
< pr-icon icon = "'info'" mode = "'primary'" > < / pr-icon >
2022-07-13 09:21:26 +00:00
System resources are hidden, this can be changed in the table settings.
< / span >
< / div >
2023-03-22 19:20:30 +00:00
< div class = "w-full" >
< div class = "w-fit" >
< insights-box class-name = "'mt-2'" type = "'slim'" header = "'From 2.18 on, you can filter this view by namespace.'" insight-close-id = "'k8s-namespace-filtering'" > < / insights-box >
< / div >
< / div >
2022-07-13 09:21:26 +00:00
< / div >
< div class = "table-responsive" >
2023-02-12 21:04:24 +00:00
< table class = "table-hover nowrap-cells table" >
2022-07-13 09:21:26 +00:00
< thead >
< tr >
2023-02-12 21:04:24 +00:00
< th class = "dropdown w-20" >
< div class = "no-wrap flex h-full items-center" >
2022-07-13 09:21:26 +00:00
< span class = "md-checkbox" >
< input id = "select_all" type = "checkbox" ng-model = "$ctrl.state.selectAll" ng-change = "$ctrl.selectAll()" / >
< label for = "select_all" > < / label >
< / span >
< div class = "cursor-pointer" ng-click = "$ctrl.expandAll()" ng-if = "$ctrl.hasExpandableItems()" >
2022-11-28 02:00:28 +00:00
< pr-icon ng-if = "$ctrl.state.expandAll" icon = "'chevron-down'" > < / pr-icon >
< pr-icon ng-if = "!$ctrl.state.expandAll" icon = "'chevron-right'" > < / pr-icon >
2022-07-13 09:21:26 +00:00
< / div >
< / div >
< / th >
< th >
< table-column-header
col-title="'Stack'"
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="'Namespace'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'ResourcePool'"
is-sorted-desc="$ctrl.state.orderBy === 'ResourcePool' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ResourcePool')"
>< / table-column-header >
< / th >
< th >
< table-column-header
col-title="'Applications'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Applications.length'"
is-sorted-desc="$ctrl.state.orderBy === 'Applications.length' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Applications.length')"
>< / table-column-header >
< / th >
< th >
< table-column-header col-title = "'Actions'" can-sort = "false" > < / table-column-header >
< / th >
< / tr >
< / thead >
< tbody >
< tr
2023-03-31 00:24:57 +00:00
ng-show="!$ctrl.isAppsLoading"
2022-07-13 09:21:26 +00:00
dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | filter: $ctrl.isDisplayed | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
ng-class="{ active: item.Checked, 'datatable-highlighted': item.Highlighted }"
ng-click="$ctrl.expandItem(item, !item.Expanded)"
pagination-id="$ctrl.tableKey"
>
< td >
2023-02-12 21:04:24 +00:00
< div class = "no-wrap flex items-center" >
2022-07-13 09:21:26 +00:00
< span class = "md-checkbox" >
< input
id="select_{{ $index }}"
type="checkbox"
ng-model="item.Checked"
ng-click="$ctrl.selectItem(item, $event); $event.stopPropagation();"
ng-disabled="!$ctrl.allowSelection(item)"
/>
< label for = "select_{{ $index }}" > < / label >
< / span >
< div ng-if = "$ctrl.itemCanExpand(item)" class = "vertical-center" >
2022-11-28 02:00:28 +00:00
< pr-icon ng-if = "item.Expanded" icon = "'chevron-down'" > < / pr-icon >
< pr-icon ng-if = "!item.Expanded" icon = "'chevron-right'" > < / pr-icon >
2022-07-13 09:21:26 +00:00
< / div >
< / div >
< / td >
< td >
{{ item.Name }}
< / td >
< td >
< a ui-sref = "kubernetes.resourcePools.resourcePool({ id: item.ResourcePool })" ng-click = "$event.stopPropagation();" > {{ item.ResourcePool }}< / a >
< span class = "label label-info image-tag label-margins" ng-if = "$ctrl.isSystemNamespace(item.ResourcePool)" > system< / span >
< / td >
< td > {{ item.Applications.length }}< / td >
< td >
< a class = "vertical-center" ui-sref = "kubernetes.stacks.stack.logs({ namespace: item.ResourcePool, name: item.Name })" >
2022-11-28 02:00:28 +00:00
< pr-icon icon = "'file-text'" size = "'md'" title = "Logs" > < / pr-icon >
2022-07-13 09:21:26 +00:00
Logs
< / a >
< / td >
< / tr >
< tr
dir-paginate-end
ng-show="item.Expanded"
ng-repeat="app in item.Applications"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
< td > < / td >
< td colspan = "4" >
< a ui-sref = "kubernetes.applications.application({ name: app.Name, namespace: app.ResourcePool })" > {{ app.Name }}< / a >
< span style = "margin-left: 5px" class = "label label-primary image-tag" ng-if = "!$ctrl.isSystemNamespace(app.ResourcePool) && $ctrl.isExternalApplication(app)"
>external< /span
2021-09-07 23:06:18 +00:00
>
2022-07-13 09:21:26 +00:00
< / td >
< / tr >
2023-03-31 00:24:57 +00:00
< tr ng-if = "$ctrl.isAppsLoading" >
2023-02-12 21:04:24 +00:00
< td colspan = "5" class = "text-muted text-center" > Loading...< / td >
2022-07-13 09:21:26 +00:00
< / tr >
2023-03-31 00:24:57 +00:00
< tr ng-if = "$ctrl.state.filteredDataSet.length === 0 && !$ctrl.isAppsLoading" >
2023-02-12 21:04:24 +00:00
< td colspan = "5" class = "text-muted text-center" > No stack available.< / td >
2022-07-13 09:21:26 +00:00
< / tr >
< / tbody >
< / table >
< / div >
< div class = "footer pl-5" ng-if = "$ctrl.dataset" >
< div class = "infoBar !ml-0" ng-if = "$ctrl.state.selectedItemCount !== 0" > {{ $ctrl.state.selectedItemCount }} item(s) selected < / div >
< 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" pagination-id = "$ctrl.tableKey" > < / dir-pagination-controls >
< / form >
< / div >
< / div >
2020-07-05 23:21:03 +00:00
< / div >
