Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Metrics UI] UX improvements for saved views #69910

Merged
merged 16 commits into from
Jun 29, 2020
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
UX improvements when saving and editng
phillipb committed Jun 25, 2020
commit ffd1d408f52c25f99ef6a48ff529db0b7161b78b
Original file line number Diff line number Diff line change
@@ -42,8 +42,8 @@ export function SavedViewsToolbarControls<ViewState>(props: Props<ViewState>) {
find,
errorOnFind,
errorOnCreate,
createdId,
updatedId,
createdView,
updatedView,
currentView,
setCurrentView,
} = useContext(SavedView.Context);
@@ -110,18 +110,20 @@ export function SavedViewsToolbarControls<ViewState>(props: Props<ViewState>) {
}, [errorOnCreate]);

useEffect(() => {
if (updatedId !== undefined) {
if (updatedView !== undefined) {
setCurrentView(updatedView);
// INFO: Close the modal after the view is created.
closeUpdateModal();
}
}, [updatedId, closeUpdateModal]);
}, [updatedView, setCurrentView, closeUpdateModal]);

useEffect(() => {
if (createdId !== undefined) {
if (createdView !== undefined) {
// INFO: Close the modal after the view is created.
setCurrentView(createdView);
closeCreateModal();
}
}, [createdId, closeCreateModal]);
}, [createdView, setCurrentView, closeCreateModal]);

useEffect(() => {
if (deletedId !== undefined) {
@@ -145,7 +147,13 @@ export function SavedViewsToolbarControls<ViewState>(props: Props<ViewState>) {
button={
<EuiFlexGroup gutterSize={'s'} alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonIcon onClick={showSavedViewMenu} iconType="globe" />
<EuiButtonIcon
aria-label={i18n.translate('xpack.infra.savedView.changeView', {
defaultMessage: 'Change view',
})}
onClick={showSavedViewMenu}
iconType="globe"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionList onClick={showSavedViewMenu}>
@@ -198,7 +206,7 @@ export function SavedViewsToolbarControls<ViewState>(props: Props<ViewState>) {
<EuiListGroupItem
iconType={'save'}
onClick={openSaveModal}
label={i18n.translate('xpack.infra.savedView.manageViews', {
label={i18n.translate('xpack.infra.savedView.saveNewView', {
defaultMessage: 'Save new view',
})}
/>
Original file line number Diff line number Diff line change
@@ -55,7 +55,7 @@ export function SavedViewListModal<ViewState>({ close, views, setView }: Props<V
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Select a view to load"
id="xpack.infra.waffle.savedView.updateHeader"
id="xpack.infra.waffle.savedView.selectViewHeader"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
20 changes: 17 additions & 3 deletions x-pack/plugins/infra/public/containers/saved_view/saved_view.tsx
Original file line number Diff line number Diff line change
@@ -49,8 +49,12 @@ export const useSavedView = (props: Props) => {

const [currentView, setCurrentView] = useState<SavedView<any> | null>(null);
const [loadingDefaultView, setLoadingDefaultView] = useState<boolean | null>(null);
const { create, error: errorOnCreate, createdId } = useCreateSavedObject(viewType);
const { update, error: errorOnUpdate, updatedId } = useUpdateSavedObject(viewType);
const { create, error: errorOnCreate, data: createdViewData, createdId } = useCreateSavedObject(
viewType
);
const { update, error: errorOnUpdate, data: updatedViewData, updatedId } = useUpdateSavedObject(
viewType
);
const { deleteObject, deletedId } = useDeleteSavedObject(viewType);
const { getObject, data: currentViewSavedObject } = useGetSavedObject(viewType);
const [createError, setCreateError] = useState<string | null>(null);
@@ -158,7 +162,7 @@ export const useSavedView = (props: Props) => {
const items: Array<SavedView<ViewState>> = [
{
name: i18n.translate('xpack.infra.savedView.defaultViewNameHosts', {
defaultMessage: 'Hosts',
defaultMessage: 'Default view',
}),
id: '0',
isDefault: !defaultViewId || defaultViewId === '0', // If there is no default view then hosts is the default
@@ -171,6 +175,14 @@ export const useSavedView = (props: Props) => {
return items;
}, [defaultViewState, savedObjects, viewType, defaultViewId, mapToView]);

const createdView = useMemo(() => {
return createdViewData ? mapToView(createdViewData) : null;
}, [createdViewData, mapToView]);

const updatedView = useMemo(() => {
return updatedViewData ? mapToView(updatedViewData) : null;
}, [updatedViewData, mapToView]);

const loadDefaultView = useCallback(() => {
setLoadingDefaultView(true);
getObject(defaultViewId);
@@ -222,9 +234,11 @@ export const useSavedView = (props: Props) => {
defaultViewId,
loading,
updateView,
updatedView,
updatedId,
deletedId,
createdId,
createdView,
errorOnUpdate,
errorOnFind,
errorOnCreate: createError,
Original file line number Diff line number Diff line change
@@ -16,6 +16,13 @@ import {
WaffleFiltersState,
} from './use_waffle_filters';

export const DEFAULT_WAFFLE_VIEW_STATE: WaffleViewState = {
...DEFAULT_WAFFLE_OPTIONS_STATE,
filterQuery: DEFAULT_WAFFLE_FILTERS_STATE,
time: DEFAULT_WAFFLE_TIME_STATE.currentTime,
autoReload: DEFAULT_WAFFLE_TIME_STATE.isAutoReloading,
};

export const useWaffleViewState = () => {
const {
metric,
@@ -53,13 +60,6 @@ export const useWaffleViewState = () => {
legend,
};

const defaultViewState: WaffleViewState = {
...DEFAULT_WAFFLE_OPTIONS_STATE,
filterQuery: DEFAULT_WAFFLE_FILTERS_STATE,
time: DEFAULT_WAFFLE_TIME_STATE.currentTime,
autoReload: DEFAULT_WAFFLE_TIME_STATE.isAutoReloading,
};

const onViewChange = useCallback(
(newState: WaffleViewState) => {
setWaffleOptionsState({
@@ -89,7 +89,7 @@ export const useWaffleViewState = () => {

return {
viewState,
defaultViewState,
defaultViewState: DEFAULT_WAFFLE_VIEW_STATE,
onViewChange,
};
};
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@ import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'
import { Layout } from './components/layout';
import { useLinkProps } from '../../../hooks/use_link_props';
import { SavedView } from '../../../containers/saved_view/saved_view';
import { useWaffleViewState } from './hooks/use_waffle_view_state';
import { DEFAULT_WAFFLE_VIEW_STATE } from './hooks/use_waffle_view_state';
import { useHistory } from '../../../utils/history_context';

export const SnapshotPage = () => {
@@ -34,6 +34,7 @@ export const SnapshotPage = () => {
isLoading,
loadSourceFailureMessage,
loadSource,
source,
metricIndicesExist,
} = useContext(Source.Context);
useTrackPageview({ app: 'infra_metrics', path: 'inventory' });
@@ -43,8 +44,6 @@ export const SnapshotPage = () => {
const getQueryStringFromLocation = (location: Location) => location.search.substring(1);
const queryString = history?.location ? getQueryStringFromLocation(history.location) : '';

const { defaultViewState } = useWaffleViewState();

const tutorialLinkProps = useLinkProps({
app: 'home',
hash: '/tutorial_directory/metrics',
@@ -63,15 +62,15 @@ export const SnapshotPage = () => {
})
}
/>
{isLoading ? (
{isLoading && !source ? (
<SourceLoadingPage />
) : metricIndicesExist ? (
<>
<FilterBar />
<SavedView.Provider
shouldLoadDefault={!queryString}
viewType={'inventory-view'}
defaultViewState={defaultViewState}
defaultViewState={DEFAULT_WAFFLE_VIEW_STATE}
>
<Layout />
</SavedView.Provider>