frontend: Handle large list of ports #2038
Conversation
|
ashu8912
force-pushed
the
large-port-list-handle
branch
2 times, most recently
from
fc3b1a0
to
3c5102b
Compare
|
cc @lijianzhi01 |
| @@ -738,7 +739,6 @@ export function ContainerInfo(props: ContainerInfoProps) { | |||
| }) { | |||
| const { rows } = props; | |||
| const id = useId('status-value-'); | |||
|
|
|||
| portsToShow && | ||
| container.ports && | ||
| portsToShow.length < container.ports.length && ( | ||
| <Grid item xs={12}> |
There was a problem hiding this comment.
Maybe we show allow these to be displayed horizontally since there's a lot of horizontal space which can help reduce the needed height when there are many items.
There was a problem hiding this comment.
I have updated it to take up horizontal space as well keeping in mind that we also show a port forward button beside these container ports on desktop app
| <Grid item xs={12}> | ||
| <Box display="flex" mt={2}> | ||
| <Button onClick={() => setMaxPortsToShow(prev => prev * 2)}> | ||
| {t('translation|Show More')} |
There was a problem hiding this comment.
I am not sure this gradual show is the correct one here. Just use a button "Show All" for example. Also makes the code simpler.
How many ports did this user have BTW?
There was a problem hiding this comment.
I tested it for a 1000 ports exposed, I am not sure if that's something which is likely in a real world scenario.
There was a problem hiding this comment.
I have added a show all commit fixup today to check how it felt. I think in a real use-case scenario, users are unlikely to want to discover ports gradually by doing the show more. Normally they want to see whether a certain port is there or to see all of them. I understand we cannot show them all by default, because it slows down the whole view if we have a lot of ports to display, but if that's a consequence of a user action (clicking "Show All") then I think it's acceptable.
Now sure why the tests are failing as I did update the snapshots.
ashu8912
force-pushed
the
large-port-list-handle
branch
from
a790524
to
acd7832
Compare
ashu8912
force-pushed
the
large-port-list-handle
branch
from
acd7832
to
5836a44
Compare
Signed-off-by: ashu8912 <aghildiyal@microsoft.com>
joaquimrocha
force-pushed
the
large-port-list-handle
branch
from
5836a44
to
8285993
Compare
Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>
joaquimrocha
force-pushed
the
large-port-list-handle
branch
from
8285993
to
78c4f58
Compare
When we have a lot of container ports exposed on a pod the page gets very slow, This PR takes care of not rendering all port items at once but allowing to gradually show more ports by adding a button for that.