apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor StartModal into PlaylistSettingsModal

Browse Source
pull/44161/head
Ashley Harrison 3 years ago
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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      public/app/features/playlist/PlaylistPage.tsx
  2. 91
      public/app/features/playlist/PlaylistPageList.tsx
  3. 87
      public/app/features/playlist/PlaylistSettingsModal.tsx
  4. 54
      public/app/features/playlist/StartModal.tsx

10
public/app/features/playlist/PlaylistPage.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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>
);
};
Write Preview
Loading…
Cancel
Save