mirror of https://github.com/portainer/portainer
feat(ui): update dashboard table & items EE-3474 (#7351)
Ali
GitHub
parent
d4d80ed8f7
commit
11dffdee9a
|
|
@ -150,7 +150,7 @@
|
|||
"3": "#f5f5f4",
|
||||
"4": "#e7e5e4",
|
||||
"5": "#d7d3d0",
|
||||
"6": "#d7d3d0",
|
||||
"6": "#a9a29d",
|
||||
"7": "#79716b",
|
||||
"8": "#57534e",
|
||||
"9": "#44403c",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M50 8.33337V18.75M50 8.33337C26.9881 8.33337 8.33334 26.9882 8.33334 50M50 8.33337C73.0119 8.33337 91.6667 26.9882 91.6667 50M50 81.25V91.6667M50 91.6667C73.0119 91.6667 91.6667 73.0119 91.6667 50M50 91.6667C26.9881 91.6667 8.33334 73.0119 8.33334 50M18.75 50H8.33334M91.6667 50H81.25M79.4935 79.4935L72.1029 72.1029M20.5068 79.4935L27.9048 72.0955M20.5068 20.8334L27.742 28.0686M79.4935 20.8334L56.2496 43.75M58.3333 50C58.3333 54.6024 54.6024 58.3334 50 58.3334C45.3976 58.3334 41.6667 54.6024 41.6667 50C41.6667 45.3977 45.3976 41.6667 50 41.6667C54.6024 41.6667 58.3333 45.3977 58.3333 50Z" stroke="black" stroke-width="8.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.7453 16C18.5362 14.8661 19 13.4872 19 12C19 11.4851 18.9444 10.9832 18.8389 10.5M6.25469 16C5.46381 14.8662 5 13.4872 5 12C5 8.13401 8.13401 5 12 5C12.4221 5 12.8355 5.03737 13.2371 5.10897M16.4999 7.5L11.9999 12M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 794 B After Width: | Height: | Size: 655 B |
|
|
@ -6,22 +6,27 @@
|
|||
<div class="row" ng-if="ctrl.endpoint">
|
||||
<div class="col-sm-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-tachometer-alt" title-text="Environment info"></rd-widget-header>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<div class="toolBar vertical-center w-full">
|
||||
<div class="toolBarTitle vertical-center p-5">
|
||||
<pr-icon icon="'svg-tachometer'" class-name="'icon-nested-blue [&>svg]:!h-5 [&>svg]:!w-5'" mode="'primary'" class="vertical-center"></pr-icon>
|
||||
Environment info
|
||||
</div>
|
||||
</div>
|
||||
<rd-widget-body classes="!px-5 !py-0">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Environment</td>
|
||||
<td>
|
||||
<td class="!pl-0 !border-none">Environment</td>
|
||||
<td class="!border-none">
|
||||
{{ ctrl.endpoint.Name }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-if="ctrl.showEnvUrl">
|
||||
<td>URL</td>
|
||||
<td>{{ ctrl.endpoint.URL | stripprotocol }}</td>
|
||||
<td class="!pl-0 !border-t">URL</td>
|
||||
<td class="!border-t">{{ ctrl.endpoint.URL | stripprotocol }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tags</td>
|
||||
<td class="!pl-0">Tags</td>
|
||||
<td>{{ ctrl.endpointTags }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -34,23 +39,23 @@
|
|||
<div class="dashboard-grid mx-4">
|
||||
<div ng-if="ctrl.pools" data-cy="k8sDashboard-namespaces">
|
||||
<a ui-sref="kubernetes.resourcePools">
|
||||
<dashboard-item icon="'fa-layer-group'" type="'Namespace'" value="ctrl.pools.length"></dashboard-item>
|
||||
<dashboard-item feather-icon="true" icon="'layers'" type="'Namespace'" value="ctrl.pools.length"></dashboard-item>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div ng-if="ctrl.applications" data-cy="k8sDashboard-applications">
|
||||
<a ui-sref="kubernetes.applications">
|
||||
<dashboard-item icon="'fa-laptop-code'" type="'Application'" value="ctrl.applications.length"></dashboard-item>
|
||||
<dashboard-item feather-icon="true" icon="'box'" type="'Application'" value="ctrl.applications.length"></dashboard-item>
|
||||
</a>
|
||||
</div>
|
||||
<div ng-if="ctrl.configurations" data-cy="k8sDashboard-configurations">
|
||||
<a ui-sref="kubernetes.configurations">
|
||||
<dashboard-item icon="'fa-file-code'" type="'Configuration'" value="ctrl.configurations.length"></dashboard-item>
|
||||
<dashboard-item feather-icon="true" icon="'lock'" type="'Configuration'" value="ctrl.configurations.length"></dashboard-item>
|
||||
</a>
|
||||
</div>
|
||||
<div ng-if="ctrl.volumes" data-cy="k8sDashboard-volumes">
|
||||
<a ui-sref="kubernetes.volumes">
|
||||
<dashboard-item icon="'fa-database'" type="'Volume'" value="ctrl.volumes.length"></dashboard-item>
|
||||
<dashboard-item feather-icon="true" icon="'database'" type="'Volume'" value="ctrl.volumes.length"></dashboard-item>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -334,13 +334,13 @@
|
|||
width: 30px;
|
||||
}
|
||||
|
||||
.table tr > th:first-child,
|
||||
.table tr > td:first-child {
|
||||
.table-responsive tr > th:first-child,
|
||||
.table-responsive tr > td:first-child {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.table tr > th:last-child,
|
||||
.table tr > last-child {
|
||||
.table-responsive tr > th:last-child,
|
||||
.table-responsive tr > last-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,21 +20,45 @@ export function DashboardItem({
|
|||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'border-solid rounded-lg border-2 hover:border-2 border-gray-5 hover:border-blue-7',
|
||||
'bg-gray-2 hover:bg-blue-2',
|
||||
'p-3'
|
||||
'border-solid rounded-lg border p-3',
|
||||
'bg-gray-2 hover:bg-blue-2 border-gray-5 hover:border-blue-7',
|
||||
'th-dark:bg-gray-iron-10 th-dark:hover:bg-gray-10 th-dark:border-gray-neutral-8 th-dark:hover:border-blue-8',
|
||||
'th-highcontrast:bg-black th-highcontrast:hover:bg-gray-11 th-highcontrast:border-white th-highcontrast:hover:border-blue-8'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center" aria-label={type}>
|
||||
<div className="icon-badge text-2xl bg-blue-3 text-blue-8 mr-4">
|
||||
<div
|
||||
className={clsx(
|
||||
'icon-badge text-2xl mr-4 !p-2',
|
||||
'bg-blue-3 text-blue-8',
|
||||
'th-dark:bg-blue-3 th-dark:text-blue-8',
|
||||
'th-highcontrast:bg-blue-3 th-highcontrast:text-blue-8'
|
||||
)}
|
||||
>
|
||||
<Icon icon={icon} feather={featherIcon} className="feather" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-around">
|
||||
<div className="text-gray-9 font-medium text-2xl" aria-label="value">
|
||||
<div
|
||||
className={clsx(
|
||||
'font-medium text-2xl',
|
||||
'text-gray-9',
|
||||
'th-dark:text-white',
|
||||
'th-highcontrast:text-white'
|
||||
)}
|
||||
aria-label="value"
|
||||
>
|
||||
{typeof value !== 'undefined' ? value : '-'}
|
||||
</div>
|
||||
<div className="text-gray-7 text-xl" aria-label="resourceType">
|
||||
<div
|
||||
className={clsx(
|
||||
'text-xl',
|
||||
'text-gray-7',
|
||||
'th-dark:text-gray-warm-5',
|
||||
'th-highcontrast:text-gray-warm-5'
|
||||
)}
|
||||
aria-label="resourceType"
|
||||
>
|
||||
{pluralize(value || 0, type)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue