mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Fix catalog & workloads table view (#7371)
* Fix catalog list table view Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Wrap ingresses rules Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Reduce Badge sizing Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Do not text-overflow:ellipsis in Pod names Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Save a room to table head cells Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Update snapshots Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> --------- Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
GitHub
parent
8035f92dbd
commit
d7b2202c1f
@ -490,10 +490,10 @@ exports[`entity running technical tests when navigated to catalog renders 1`] =
|
||||
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
|
||||
>
|
||||
<div
|
||||
style="height: 33px; width: 100%;"
|
||||
style="height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -1206,10 +1206,10 @@ exports[`entity running technical tests when navigated to catalog when details p
|
||||
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
|
||||
>
|
||||
<div
|
||||
style="height: 33px; width: 100%;"
|
||||
style="height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
|
||||
@ -739,10 +739,10 @@ exports[`opening catalog entity details panel when navigated to the catalog rend
|
||||
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
|
||||
>
|
||||
<div
|
||||
style="height: 99px; width: 100%;"
|
||||
style="height: 108px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -815,7 +815,7 @@ exports[`opening catalog entity details panel when navigated to the catalog rend
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -888,7 +888,7 @@ exports[`opening catalog entity details panel when navigated to the catalog rend
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -1560,10 +1560,10 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
|
||||
>
|
||||
<div
|
||||
style="height: 99px; width: 100%;"
|
||||
style="height: 108px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -1636,7 +1636,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -1709,7 +1709,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -2413,10 +2413,10 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
|
||||
>
|
||||
<div
|
||||
style="height: 99px; width: 100%;"
|
||||
style="height: 108px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -2489,7 +2489,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -2562,7 +2562,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -3266,10 +3266,10 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
|
||||
>
|
||||
<div
|
||||
style="height: 99px; width: 100%;"
|
||||
style="height: 108px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -3342,7 +3342,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -3415,7 +3415,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -4370,10 +4370,10 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
|
||||
>
|
||||
<div
|
||||
style="height: 99px; width: 100%;"
|
||||
style="height: 108px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -4446,7 +4446,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -4519,7 +4519,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -5211,10 +5211,10 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
|
||||
>
|
||||
<div
|
||||
style="height: 99px; width: 100%;"
|
||||
style="height: 108px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -5287,7 +5287,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -5360,7 +5360,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -6052,10 +6052,10 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
|
||||
>
|
||||
<div
|
||||
style="height: 99px; width: 100%;"
|
||||
style="height: 108px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -6128,7 +6128,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
@ -6201,7 +6201,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 66px; height: 33px; width: 100%;"
|
||||
style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
|
||||
@ -8,6 +8,10 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:global(.TableCell) {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
@ -276,6 +276,9 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
|
||||
{...getCategoryColumns({ activeCategory })}
|
||||
onDetails={this.props.onCatalogEntityListClick}
|
||||
renderItemMenu={this.renderItemMenu}
|
||||
tableProps={{
|
||||
customRowHeights: () => 36, // Entity avatar size + padding
|
||||
}}
|
||||
data-testid={`catalog-list-for-${activeCategory?.metadata.name ?? "browse-all"}`}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
&.rules {
|
||||
flex-grow: 3.0;
|
||||
overflow-x: scroll;
|
||||
text-overflow: unset;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
@ -20,7 +20,6 @@
|
||||
|
||||
.ingressRule {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ingressRule + .ingressRule {
|
||||
|
||||
@ -29,6 +29,7 @@ import nodeApiInjectable from "../../../common/k8s-api/endpoints/node.api.inject
|
||||
import eventStoreInjectable from "../+events/store.injectable";
|
||||
import podStoreInjectable from "./store.injectable";
|
||||
import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
|
||||
import { Tooltip } from "../tooltip";
|
||||
|
||||
enum columnId {
|
||||
name = "name",
|
||||
@ -163,13 +164,14 @@ class NonInjectedPods extends React.Component<Dependencies> {
|
||||
{ title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
|
||||
]}
|
||||
renderTableContents={pod => [
|
||||
<Badge
|
||||
flat
|
||||
key="name"
|
||||
label={pod.getName()}
|
||||
tooltip={pod.getName()}
|
||||
expandable={false}
|
||||
/>,
|
||||
<>
|
||||
<span id={`list-pod-${pod.getId()}`}>
|
||||
{pod.getName()}
|
||||
</span>
|
||||
<Tooltip targetId={`list-pod-${pod.getId()}`}>
|
||||
{pod.getName()}
|
||||
</Tooltip>
|
||||
</>,
|
||||
<KubeObjectStatusIcon key="icon" object={pod} />,
|
||||
<NamespaceSelectBadge
|
||||
key="namespace"
|
||||
|
||||
@ -34,7 +34,8 @@
|
||||
.badge:not(.flat) {
|
||||
background: var(--colorVague);
|
||||
border-radius: 3px;
|
||||
padding: .2em .4em;
|
||||
line-height: normal;
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
|
||||
.small {
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
.line {
|
||||
background: currentColor;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
transition: 250ms width ease-in;
|
||||
|
||||
@ -4,11 +4,13 @@
|
||||
*/
|
||||
|
||||
.TableCell {
|
||||
position: relative;
|
||||
padding: $padding;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1;
|
||||
line-height: 1.1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.menu {
|
||||
@include table-cell-action;
|
||||
@ -39,43 +41,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
// fix: don't hide "sortIcon" when used with <TableHead nowrap> and there is not enough space to show all the content
|
||||
&.sorting.nowrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
> * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sortIcon {
|
||||
transition: 150ms opacity;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: var(--tableHeaderBackground);
|
||||
|
||||
> .content {
|
||||
flex-shrink: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> .sortIcon {
|
||||
margin: 0;
|
||||
&.enabled {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.Table.sortable > .TableHead & {
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
&:hover .sortIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.sorting {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sortIcon {
|
||||
transition: 350ms opacity;
|
||||
opacity: .3;
|
||||
|
||||
&.enabled {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.sorting {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
color: var(--tableHeaderColor);
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&.topLine {
|
||||
border-top: 1px solid var(--borderFaintColor);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user