feat(dashboard): allow user-defined dashboard card sizes #796
Conversation
maxcao13
changed the title
|
Test image available: |
|
Ah, I assume the placeholders won't be up to test with since the test image won't have |
|
Test image available: |
You can use the PR CI test images and have development feature flags enabled: $ CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-796-f65ecf43dedc0c8c08844b8f358bb36e04832408 CRYOSTAT_CORS_ORIGIN=http://localhost:9000 CRYOSTAT_DISABLE_SSL=true sh smoketest.sh
$ #in new terminal:
$ cd cryostat-web
$ yarn start:devObviously for |
Something like a draggable resize bar would be nice, or any other method that allows the user some fine-grained control. It could simply be a slider component that they can pull up somehow which allows value selection from 1-12 for the card span, for example. Though, I'm not sure if all of those sizes really make sense - is there a reason for the user to choose a 1 or 11 span, or 2 or 10? Maybe if they are using an ultrawide aspect monitor? |
diff --git a/src/app/Dashboard/Dashboard.tsx b/src/app/Dashboard/Dashboard.tsx
index 836929f..e84cc30 100644
--- a/src/app/Dashboard/Dashboard.tsx
+++ b/src/app/Dashboard/Dashboard.tsx
@@ -226,8 +226,8 @@ export const Dashboard: React.FC<DashboardProps> = (_) => {
);
const handleResize = React.useCallback(
- (idx: number) => {
- dispatch(dashboardCardConfigResizeCardIntent(idx, cardConfigs[idx].span === 12 ? 6 : 12));
+ (idx: number, span: gridSpans) => {
+ dispatch(dashboardCardConfigResizeCardIntent(idx, span));
},
[dispatch, cardConfigs]
);
@@ -245,7 +245,7 @@ export const Dashboard: React.FC<DashboardProps> = (_) => {
idx={idx}
defaultSpan={getConfigByName(cfg.name).defaultSpan}
onRemove={() => handleRemove(idx)}
- onResize={() => handleResize(idx)}
+ onResize={(span: number) => handleResize(idx, span)}
/>,
],
})}
diff --git a/src/app/Dashboard/DashboardCardActionMenu.tsx b/src/app/Dashboard/DashboardCardActionMenu.tsx
index 04cee70..febd0c2 100644
--- a/src/app/Dashboard/DashboardCardActionMenu.tsx
+++ b/src/app/Dashboard/DashboardCardActionMenu.tsx
@@ -37,7 +37,16 @@
*/
import { CardConfig } from '@app/Shared/Redux/Configurations/DashboardConfigSlicer';
import { RootState } from '@app/Shared/Redux/ReduxStore';
-import { Dropdown, DropdownItem, gridSpans, KebabToggle } from '@patternfly/react-core';
+import {
+ Dropdown,
+ DropdownItem,
+ gridSpans,
+ KebabToggle,
+ Popover,
+ Slider,
+ Text,
+ TextVariants,
+} from '@patternfly/react-core';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
@@ -46,12 +55,13 @@ export interface DashboardCardActionProps {
idx: number;
defaultSpan: gridSpans;
onRemove: () => void;
- onResize: () => void;
+ onResize: (span: gridSpans) => void;
}
export const DashboardCardActionMenu: React.FunctionComponent<DashboardCardActionProps> = (props) => {
const cardConfigs: CardConfig[] = useSelector((state: RootState) => state.dashboardConfigs.list);
const [isOpen, setOpen] = React.useState(false);
+ const [span, setSpan] = React.useState(props.defaultSpan || 12);
const [t] = useTranslation();
@@ -62,9 +72,23 @@ export const DashboardCardActionMenu: React.FunctionComponent<DashboardCardActio
[setOpen]
);
+ const handleSpanChange = React.useCallback(
+ (v) => {
+ if (v < 1) {
+ v = 1;
+ }
+ if (v > 12) {
+ v = 12;
+ }
+ setSpan(v);
+ },
+ [setSpan]
+ );
+
return (
<>
<Dropdown
+ onBlur={() => props.onResize(span)}
isPlain
isFlipEnabled
menuAppendTo={'parent'}
@@ -76,13 +100,11 @@ export const DashboardCardActionMenu: React.FunctionComponent<DashboardCardActio
<DropdownItem key="Remove" onClick={props.onRemove}>
{t('REMOVE', { ns: 'common' })}
</DropdownItem>,
- props.defaultSpan == 12 ? null : (
- <DropdownItem key="Resize" onClick={props.onResize}>
- {cardConfigs[props.idx].span === props.defaultSpan
- ? t('EXPAND', { ns: 'common' })
- : t('DashboardCardActionMenu.SHRINK', { val: props.defaultSpan })}
- </DropdownItem>
- ),
+ <DropdownItem key="Resize">
+ <Text component={TextVariants.p}>{t('EXPAND', { ns: 'common' })}</Text>
+ <Slider value={span} onChange={handleSpanChange} step={1} min={1} max={12} />
+ <Text component={TextVariants.p}>{span}</Text>
+ </DropdownItem>,
].filter((item) => item !== null)}
/>
</>Quick hack on top of your patch here to demonstrate. It's not a great UX, but it gives some easy flexibility to lay things out how the user might like it depending on the content they choose to place and what kind of display and display settings they use.
|
|
Just a though to extend above concept: maybe we could allow dragging at corners (or at least bottom-right) of any card to resize instead of slider. I guess we can make it "snap" to certain defined span if it reaches a certain size. Not sure how hard it is to implement it :D |
|
Yea I agree with that, I think that's similar to what we were mentioning above with the "draggable resize". I think in that case the card should always snap to the span width sizes as it is dragged. I also have no idea how hard this would be to implement though, not sure if there is already any support in Patternfly for something like this. |
|
Test image available: |
|
Anyway, I don't think we need to go all the way to drag-to-resize card borders with this initial PR. Something better than my hack above hopefully, but at least something still that allows the user to pick a |
maxcao13
force-pushed
the
user-defined-card-sizes
branch
from
f65ecf4 to
a86ae85
Compare
|
Test image available: |
|
Updated the resizing, thoughts? |
|
Test image available: |
|
Test image available: |
|
Test image available: |
Signed-off-by: Max Cao <macao@redhat.com>
Signed-off-by: Max Cao <macao@redhat.com>
maxcao13
force-pushed
the
user-defined-card-sizes
branch
from
8690183 to
8b82fa6
Compare
|
I think maybe I will hold off on tests like with the other beta-ish Dashboard features, as this may be changed in the future. |
|
Test image available: |
|
Test image available: |
|
Test image available: |
|
Oh, there was actually still a bug with resizing the cards over the right side of the screen that I missed. I will file a quick PR. |
Signed-off-by: Max Cao macao@redhat.com
Welcome to Cryostat! 👋
Before contributing, make sure you have:
mainbranch[chore, ci, docs, feat, fix, test]git commit --amend --signoffFixes: #729
Description of the change:
Allows cards to be resizable and for these configs to be persisted.
Motivation for the change:
See #729
How to manually test: