hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fix catalog & workloads table view (#7371)

Browse Source 
* 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 2023-03-17 19:57:32 +03:00 committed by GitHub
parent 8035f92dbd
commit d7b2202c1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 72 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/src/features/catalog/__snapshots__/entity-running.test.tsx.snap
View File

@ -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;" style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
> >
<div <div
style="height: 33px; width: 100%;" style="height: 36px; width: 100%;"
> >
<div <div
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;" style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
> >
<div <div
class="TableRow nowrap" 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;" style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
> >
<div <div
style="height: 33px; width: 100%;" style="height: 36px; width: 100%;"
> >
<div <div
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;" style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
> >
<div <div
class="TableRow nowrap" class="TableRow nowrap"

56
packages/core/src/features/catalog/__snapshots__/opening-entity-details.test.tsx.snap
View File

@ -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;" style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
> >
<div <div
style="height: 99px; width: 100%;" style="height: 108px; width: 100%;"
> >
<div <div
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;" style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
> >
<div <div
class="TableRow nowrap" class="TableRow nowrap"
@ -815,7 +815,7 @@ exports[`opening catalog entity details panel when navigated to the catalog rend
</div> </div>
</div> </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 <div
class="TableRow nowrap" class="TableRow nowrap"
@ -888,7 +888,7 @@ exports[`opening catalog entity details panel when navigated to the catalog rend
</div> </div>
</div> </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 <div
class="TableRow nowrap" 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;" style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
> >
<div <div
style="height: 99px; width: 100%;" style="height: 108px; width: 100%;"
> >
<div <div
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;" style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
> >
<div <div
class="TableRow nowrap" class="TableRow nowrap"
@ -1636,7 +1636,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" class="TableRow nowrap"
@ -1709,7 +1709,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" 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;" style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
> >
<div <div
style="height: 99px; width: 100%;" style="height: 108px; width: 100%;"
> >
<div <div
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;" style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
> >
<div <div
class="TableRow nowrap" class="TableRow nowrap"
@ -2489,7 +2489,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" class="TableRow nowrap"
@ -2562,7 +2562,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" 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;" style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
> >
<div <div
style="height: 99px; width: 100%;" style="height: 108px; width: 100%;"
> >
<div <div
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;" style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
> >
<div <div
class="TableRow nowrap" class="TableRow nowrap"
@ -3342,7 +3342,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" class="TableRow nowrap"
@ -3415,7 +3415,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" 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;" style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
> >
<div <div
style="height: 99px; width: 100%;" style="height: 108px; width: 100%;"
> >
<div <div
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;" style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
> >
<div <div
class="TableRow nowrap" class="TableRow nowrap"
@ -4446,7 +4446,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" class="TableRow nowrap"
@ -4519,7 +4519,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" 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;" style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
> >
<div <div
style="height: 99px; width: 100%;" style="height: 108px; width: 100%;"
> >
<div <div
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;" style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
> >
<div <div
class="TableRow nowrap" class="TableRow nowrap"
@ -5287,7 +5287,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" class="TableRow nowrap"
@ -5360,7 +5360,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" 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;" style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
> >
<div <div
style="height: 99px; width: 100%;" style="height: 108px; width: 100%;"
> >
<div <div
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;" style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
> >
<div <div
class="TableRow nowrap" class="TableRow nowrap"
@ -6128,7 +6128,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" class="TableRow nowrap"
@ -6201,7 +6201,7 @@ exports[`opening catalog entity details panel when navigated to the catalog when
</div> </div>
</div> </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 <div
class="TableRow nowrap" class="TableRow nowrap"

4
packages/core/src/renderer/components/+catalog/catalog.module.scss
View File

@ -8,6 +8,10 @@
opacity: 1; opacity: 1;
} }
:global(.TableCell) {
padding: 6px 8px;
}
flex-grow: 1; flex-grow: 1;
} }

3
packages/core/src/renderer/components/+catalog/catalog.tsx
View File

@ -276,6 +276,9 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
{...getCategoryColumns({ activeCategory })} {...getCategoryColumns({ activeCategory })}
onDetails={this.props.onCatalogEntityListClick} onDetails={this.props.onCatalogEntityListClick}
renderItemMenu={this.renderItemMenu} renderItemMenu={this.renderItemMenu}
tableProps={{
customRowHeights: () => 36, // Entity avatar size + padding
}}
data-testid={`catalog-list-for-${activeCategory?.metadata.name ?? "browse-all"}`} data-testid={`catalog-list-for-${activeCategory?.metadata.name ?? "browse-all"}`}
/> />
); );

3
packages/core/src/renderer/components/+network-ingresses/ingresses.scss
View File

@ -12,7 +12,7 @@
&.rules { &.rules {
flex-grow: 3.0; flex-grow: 3.0;
overflow-x: scroll; overflow-x: scroll;
text-overflow: unset; flex-wrap: wrap;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
@ -20,7 +20,6 @@
.ingressRule { .ingressRule {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
} }
.ingressRule + .ingressRule { .ingressRule + .ingressRule {

16
packages/core/src/renderer/components/+workloads-pods/pods.tsx
View File

@ -29,6 +29,7 @@ import nodeApiInjectable from "../../../common/k8s-api/endpoints/node.api.inject
import eventStoreInjectable from "../+events/store.injectable"; import eventStoreInjectable from "../+events/store.injectable";
import podStoreInjectable from "./store.injectable"; import podStoreInjectable from "./store.injectable";
import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
import { Tooltip } from "../tooltip";
enum columnId { enum columnId {
name = "name", name = "name",
@ -163,13 +164,14 @@ class NonInjectedPods extends React.Component<Dependencies> {
{ title: "Status", className: "status", sortBy: columnId.status, id: columnId.status }, { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
]} ]}
renderTableContents={pod => [ renderTableContents={pod => [
<Badge <>
flat <span id={`list-pod-${pod.getId()}`}>
key="name" {pod.getName()}
label={pod.getName()} </span>
tooltip={pod.getName()} <Tooltip targetId={`list-pod-${pod.getId()}`}>
expandable={false} {pod.getName()}
/>, </Tooltip>
</>,
<KubeObjectStatusIcon key="icon" object={pod} />, <KubeObjectStatusIcon key="icon" object={pod} />,
<NamespaceSelectBadge <NamespaceSelectBadge
key="namespace" key="namespace"

3
packages/core/src/renderer/components/badge/badge.module.scss
View File

@ -34,7 +34,8 @@
.badge:not(.flat) { .badge:not(.flat) {
background: var(--colorVague); background: var(--colorVague);
border-radius: 3px; border-radius: 3px;
padding: .2em .4em; line-height: normal;
padding: 0.2rem 0.4rem;
} }
.small { .small {

1
packages/core/src/renderer/components/line-progress/line-progress.scss
View File

@ -14,6 +14,7 @@
.line { .line {
background: currentColor; background: currentColor;
display: block; display: block;
width: 100%;
height: 100%; height: 100%;
border-radius: inherit; border-radius: inherit;
transition: 250ms width ease-in; transition: 250ms width ease-in;

44
packages/core/src/renderer/components/table/table-cell.scss
View File

@ -4,11 +4,13 @@
*/ */
.TableCell { .TableCell {
position: relative;
padding: $padding; padding: $padding;
word-break: break-all; word-break: break-all;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; line-height: 1.1;
line-height: 1; display: flex;
align-items: center;
&.menu { &.menu {
@include table-cell-action; @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 { &.sorting.nowrap {
display: flex; display: flex;
align-items: center; align-items: center;
> * {
flex-shrink: 0;
}
> .content {
flex-shrink: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
> .sortIcon {
margin: 0;
}
}
.Table.sortable > .TableHead & {
user-select: none;
white-space: nowrap;
&.sorting {
cursor: pointer;
} }
.sortIcon { .sortIcon {
transition: 350ms opacity; transition: 150ms opacity;
opacity: .3; opacity: 0;
position: absolute;
right: 0;
background: var(--tableHeaderBackground);
&.enabled { &.enabled {
opacity: 1; opacity: 1;
} }
} }
&:hover .sortIcon {
opacity: 1;
}
&.sorting {
cursor: pointer;
} }
a { a {

2
packages/core/src/renderer/components/table/table-head.scss
View File

@ -9,6 +9,8 @@
color: var(--tableHeaderColor); color: var(--tableHeaderColor);
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
user-select: none;
white-space: nowrap;
&.topLine { &.topLine {
border-top: 1px solid var(--borderFaintColor); border-top: 1px solid var(--borderFaintColor);