IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactor StartModal into PlaylistSettingsModal

Browse Source
This commit is contained in:
Ashley Harrison 2022-01-18 14:24:13 +00:00
parent 58b6756f2f
commit e71fc33865
No known key found for this signature in database
GPG Key ID: AEC29E54E8D7CD90
4 changed files with 101 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/features/playlist/PlaylistPage.tsx
View File

@ -11,7 +11,7 @@ import { ConfirmModal } from '@grafana/ui';
import PageActionBar from 'app/core/components/PageActionBar/PageActionBar';
import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA';
import { deletePlaylist, getAllPlaylist } from './api';
import { StartModal } from './StartModal';
import { PlaylistSettingsModal } from './PlaylistSettingsModal';
import { PlaylistPageList } from './PlaylistPageList';
import { EmptyQueryListBanner } from './EmptyQueryListBanner';
@ -101,7 +101,13 @@ export const PlaylistPage: FC<PlaylistPageProps> = ({ navModel }) => {
onDismiss={onDismissDelete}
/>
)}
{startPlaylist && <StartModal playlist={startPlaylist} onDismiss={() => setStartPlaylist(undefined)} />}
{startPlaylist && (
<PlaylistSettingsModal
showStartButton
playlist={startPlaylist}
onDismiss={() => setStartPlaylist(undefined)}
/>
)}
</Page.Contents>
</Page>
);

91
public/app/features/playlist/PlaylistPageList.tsx
View File

@ -1,26 +1,11 @@
import React, { useState } from 'react';
import React from 'react';
import { PlaylistDTO } from './types';
import {
Button,
Card,
Checkbox,
ClipboardButton,
Field,
FieldSet,
Icon,
Input,
LinkButton,
Modal,
ModalsController,
RadioButtonGroup,
useStyles2,
} from '@grafana/ui';
import { Button, Card, LinkButton, ModalsController, useStyles2 } from '@grafana/ui';
import { contextSrv } from 'app/core/services/context_srv';
import { AppEvents, GrafanaTheme2, SelectableValue, UrlQueryMap, urlUtil } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { css } from '@emotion/css';
import { DashNavButton } from '../dashboard/components/DashNav/DashNavButton';
import appEvents from 'app/core/app_events';
import { buildBaseUrl } from '../dashboard/components/ShareModal/utils';
import { PlaylistSettingsModal } from './PlaylistSettingsModal';
interface Props {
setStartPlaylist: (playlistItem: PlaylistDTO) => void;
@ -28,70 +13,6 @@ interface Props {
playlists: PlaylistDTO[] | undefined;
}
interface ShareModalProps {
playlistId: number;
onDismiss: () => void;
}
type PlaylistModes = boolean | 'tv';
const PlaylistShareModal = ({ playlistId, onDismiss }: ShareModalProps) => {
const [mode, setMode] = useState<PlaylistModes>(false);
const [autoFit, setAutofit] = useState(false);
const modes: Array<SelectableValue<PlaylistModes>> = [
{ label: 'Normal', value: false },
{ label: 'TV', value: 'tv' },
{ label: 'Kiosk', value: true },
];
const onShareUrlCopy = () => {
appEvents.emit(AppEvents.alertSuccess, ['Content copied to clipboard']);
};
const params: UrlQueryMap = {};
if (mode) {
params.kiosk = mode;
}
if (autoFit) {
params.autofitpanels = true;
}
const shareUrl = urlUtil.renderUrl(`${buildBaseUrl()}/play/${playlistId}`, params);
return (
<Modal isOpen={true} title="Share playlist" onDismiss={onDismiss}>
<FieldSet>
<Field label="Mode">
<RadioButtonGroup value={mode} options={modes} onChange={setMode} />
</Field>
<Field>
<Checkbox
label="Autofit"
description="Panel heights will be adjusted to fit screen size"
name="autofix"
value={autoFit}
onChange={(e) => setAutofit(e.currentTarget.checked)}
/>
</Field>
<Field label="Link URL">
<Input
id="link-url-input"
value={shareUrl}
readOnly
addonAfter={
<ClipboardButton variant="primary" getText={() => shareUrl} onClipboardCopy={onShareUrlCopy}>
<Icon name="copy" /> Copy
</ClipboardButton>
}
/>
</Field>
</FieldSet>
</Modal>
);
};
export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDelete }: Props) => {
const styles = useStyles2(getStyles);
return (
@ -108,8 +29,8 @@ export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDel
icon="share-alt"
iconSize="lg"
onClick={() => {
showModal(PlaylistShareModal, {
playlistId: playlist.id,
showModal(PlaylistSettingsModal, {
playlist: playlist,
onDismiss: hideModal,
});
}}

87
public/app/features/playlist/PlaylistSettingsModal.tsx Normal file
View File

@ -0,0 +1,87 @@
import React, { FC, useState } from 'react';
import { AppEvents, SelectableValue, UrlQueryMap, urlUtil } from '@grafana/data';
import { locationService } from '@grafana/runtime';
import { PlaylistDTO } from './types';
import { Button, Checkbox, ClipboardButton, Field, FieldSet, Icon, Input, Modal, RadioButtonGroup } from '@grafana/ui';
import appEvents from 'app/core/app_events';
import { buildBaseUrl } from '../dashboard/components/ShareModal/utils';
export interface Props {
playlist: PlaylistDTO;
onDismiss: () => void;
showStartButton?: boolean;
}
export const PlaylistSettingsModal: FC<Props> = ({ playlist, onDismiss, showStartButton }) => {
const [mode, setMode] = useState<any>(false);
const [autoFit, setAutofit] = useState(false);
const modes: Array<SelectableValue<any>> = [
{ label: 'Normal', value: false },
{ label: 'TV', value: 'tv' },
{ label: 'Kiosk', value: true },
];
const onStart = () => {
const params: any = {};
if (mode) {
params.kiosk = mode;
}
if (autoFit) {
params.autofitpanels = true;
}
locationService.push(urlUtil.renderUrl(`/playlists/play/${playlist.id}`, params));
};
const onShareUrlCopy = () => {
appEvents.emit(AppEvents.alertSuccess, ['Content copied to clipboard']);
};
const params: UrlQueryMap = {};
if (mode) {
params.kiosk = mode;
}
if (autoFit) {
params.autofitpanels = true;
}
const shareUrl = urlUtil.renderUrl(`${buildBaseUrl()}/play/${playlist.id}`, params);
return (
<Modal isOpen={true} icon="play" title="Start playlist" onDismiss={onDismiss}>
<FieldSet>
<Field label="Mode">
<RadioButtonGroup value={mode} options={modes} onChange={setMode} />
</Field>
<Field>
<Checkbox
label="Autofit"
description="Panel heights will be adjusted to fit screen size"
name="autofix"
value={autoFit}
onChange={(e) => setAutofit(e.currentTarget.checked)}
/>
</Field>
<Field label="Link URL">
<Input
id="link-url-input"
value={shareUrl}
readOnly
addonAfter={
<ClipboardButton variant="primary" getText={() => shareUrl} onClipboardCopy={onShareUrlCopy}>
<Icon name="copy" /> Copy
</ClipboardButton>
}
/>
</Field>
</FieldSet>
{showStartButton && (
<Modal.ButtonRow>
<Button variant="primary" onClick={onStart}>
Start {playlist.name}
</Button>
</Modal.ButtonRow>
)}
</Modal>
);
};

54
public/app/features/playlist/StartModal.tsx
View File

@ -1,54 +0,0 @@
import React, { FC, useState } from 'react';
import { SelectableValue, urlUtil } from '@grafana/data';
import { locationService } from '@grafana/runtime';
import { PlaylistDTO } from './types';
import { Button, Checkbox, Field, Modal, RadioButtonGroup, VerticalGroup } from '@grafana/ui';
export interface StartModalProps {
playlist: PlaylistDTO;
onDismiss: () => void;
}
export const StartModal: FC<StartModalProps> = ({ playlist, onDismiss }) => {
const [mode, setMode] = useState<any>(false);
const [autoFit, setAutofit] = useState(false);
const modes: Array<SelectableValue<any>> = [
{ label: 'Normal', value: false },
{ label: 'TV', value: 'tv' },
{ label: 'Kiosk', value: true },
];
const onStart = () => {
const params: any = {};
if (mode) {
params.kiosk = mode;
}
if (autoFit) {
params.autofitpanels = true;
}
locationService.push(urlUtil.renderUrl(`/playlists/play/${playlist.id}`, params));
};
return (
<Modal isOpen={true} icon="play" title="Start playlist" onDismiss={onDismiss}>
<VerticalGroup>
<Field label="Mode">
<RadioButtonGroup value={mode} options={modes} onChange={setMode} />
</Field>
<Checkbox
label="Autofit"
description="Panel heights will be adjusted to fit screen size"
name="autofix"
value={autoFit}
onChange={(e) => setAutofit(e.currentTarget.checked)}
/>
</VerticalGroup>
<Modal.ButtonRow>
<Button variant="primary" onClick={onStart}>
Start {playlist.name}
</Button>
</Modal.ButtonRow>
</Modal>
);
};