| 1 |
- {"version":3,"file":"PlaylistNewPage.647f02e6de724871b34a.js","mappings":"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","sources":["webpack://grafana/./public/app/features/playlist/PlaylistTableRow.tsx","webpack://grafana/./public/app/features/playlist/PlaylistTableRows.tsx","webpack://grafana/./public/app/features/playlist/PlaylistTable.tsx","webpack://grafana/./public/app/features/playlist/PlaylistForm.tsx","webpack://grafana/./public/app/features/playlist/usePlaylistItems.tsx","webpack://grafana/./public/app/features/playlist/PlaylistNewPage.tsx","webpack://grafana/./public/app/features/playlist/api.ts","webpack://grafana/./public/app/features/playlist/styles.ts","webpack://grafana/./public/app/features/playlist/usePlaylist.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React, { FC, MouseEvent } from 'react';\n\nimport { GrafanaTheme } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { Icon, IconButton, useStyles } from '@grafana/ui';\n\nimport { TagBadge } from '../../core/components/TagFilter/TagBadge';\n\nimport { PlaylistItem } from './types';\n\ninterface PlaylistTableRowProps {\n first: boolean;\n last: boolean;\n item: PlaylistItem;\n onMoveUp: (item: PlaylistItem) => void;\n onMoveDown: (item: PlaylistItem) => void;\n onDelete: (item: PlaylistItem) => void;\n}\n\nexport const PlaylistTableRow: FC<PlaylistTableRowProps> = ({ item, onDelete, onMoveDown, onMoveUp, first, last }) => {\n const styles = useStyles(getStyles);\n const onDeleteClick = (event: MouseEvent) => {\n event.preventDefault();\n onDelete(item);\n };\n const onMoveDownClick = (event: MouseEvent) => {\n event.preventDefault();\n onMoveDown(item);\n };\n const onMoveUpClick = (event: MouseEvent) => {\n event.preventDefault();\n onMoveUp(item);\n };\n\n return (\n <tr aria-label={selectors.pages.PlaylistForm.itemRow} key={item.title}>\n {item.type === 'dashboard_by_id' ? (\n <td className={cx(styles.td, styles.item)}>\n <Icon name=\"apps\" aria-label={selectors.pages.PlaylistForm.itemIdType} />\n <span>{item.title}</span>\n </td>\n ) : null}\n {item.type === 'dashboard_by_tag' ? (\n <td className={cx(styles.td, styles.item)}>\n <Icon name=\"tag-alt\" aria-label={selectors.pages.PlaylistForm.itemTagType} />\n <TagBadge key={item.id} label={item.title} removeIcon={false} count={0} />\n </td>\n ) : null}\n <td className={cx(styles.td, styles.settings)}>\n {!first ? (\n <IconButton\n name=\"arrow-up\"\n size=\"md\"\n onClick={onMoveUpClick}\n aria-label={selectors.pages.PlaylistForm.itemMoveUp}\n type=\"button\"\n />\n ) : null}\n {!last ? (\n <IconButton\n name=\"arrow-down\"\n size=\"md\"\n onClick={onMoveDownClick}\n aria-label={selectors.pages.PlaylistForm.itemMoveDown}\n type=\"button\"\n />\n ) : null}\n <IconButton\n name=\"times\"\n size=\"md\"\n onClick={onDeleteClick}\n aria-label={selectors.pages.PlaylistForm.itemDelete}\n type=\"button\"\n />\n </td>\n </tr>\n );\n};\n\nfunction getStyles(theme: GrafanaTheme) {\n return {\n td: css`\n label: td;\n line-height: 28px;\n max-width: 335px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n `,\n item: css`\n label: item;\n span {\n margin-left: ${theme.spacing.xs};\n }\n `,\n settings: css`\n label: settings;\n text-align: right;\n `,\n };\n}\n","import React, { FC } from 'react';\n\nimport { PlaylistTableRow } from './PlaylistTableRow';\nimport { PlaylistItem } from './types';\n\ninterface PlaylistTableRowsProps {\n items: PlaylistItem[];\n onMoveUp: (item: PlaylistItem) => void;\n onMoveDown: (item: PlaylistItem) => void;\n onDelete: (item: PlaylistItem) => void;\n}\n\nexport const PlaylistTableRows: FC<PlaylistTableRowsProps> = ({ items, onMoveUp, onMoveDown, onDelete }) => {\n if (items.length === 0) {\n return (\n <tr>\n <td>\n <em>Playlist is empty. Add dashboards below.</em>\n </td>\n </tr>\n );\n }\n\n return (\n <>\n {items.map((item, index) => {\n const first = index === 0;\n const last = index === items.length - 1;\n return (\n <PlaylistTableRow\n first={first}\n last={last}\n item={item}\n onDelete={onDelete}\n onMoveDown={onMoveDown}\n onMoveUp={onMoveUp}\n key={item.title}\n />\n );\n })}\n </>\n );\n};\n","import React, { FC } from 'react';\n\nimport { PlaylistTableRows } from './PlaylistTableRows';\nimport { PlaylistItem } from './types';\n\ninterface PlaylistTableProps {\n items: PlaylistItem[];\n onMoveUp: (item: PlaylistItem) => void;\n onMoveDown: (item: PlaylistItem) => void;\n onDelete: (item: PlaylistItem) => void;\n}\n\nexport const PlaylistTable: FC<PlaylistTableProps> = ({ items, onMoveUp, onMoveDown, onDelete }) => {\n return (\n <div className=\"gf-form-group\">\n <h3 className=\"page-headering\">Dashboards</h3>\n\n <table className=\"filter-table\">\n <tbody>\n <PlaylistTableRows items={items} onMoveUp={onMoveUp} onMoveDown={onMoveDown} onDelete={onDelete} />\n </tbody>\n </table>\n </div>\n );\n};\n","import React, { FC } from 'react';\n\nimport { selectors } from '@grafana/e2e-selectors';\nimport { config } from '@grafana/runtime';\nimport { Button, Field, Form, HorizontalGroup, Input, LinkButton } from '@grafana/ui';\nimport { DashboardPickerByID } from 'app/core/components/editors/DashboardPickerByID';\n\nimport { TagFilter } from '../../core/components/TagFilter/TagFilter';\nimport { SearchSrv } from '../../core/services/search_srv';\n\nimport { PlaylistTable } from './PlaylistTable';\nimport { Playlist } from './types';\nimport { usePlaylistItems } from './usePlaylistItems';\n\ninterface PlaylistFormProps {\n onSubmit: (playlist: Playlist) => void;\n playlist: Playlist;\n}\n\nconst searchSrv = new SearchSrv();\n\nexport const PlaylistForm: FC<PlaylistFormProps> = ({ onSubmit, playlist }) => {\n const { name, interval, items: propItems } = playlist;\n const { items, addById, addByTag, deleteItem, moveDown, moveUp } = usePlaylistItems(propItems);\n return (\n <>\n <Form onSubmit={(list: Playlist) => onSubmit({ ...list, items })} validateOn={'onBlur'}>\n {({ register, errors }) => {\n const isDisabled = items.length === 0 || Object.keys(errors).length > 0;\n return (\n <>\n <Field label=\"Name\" invalid={!!errors.name} error={errors?.name?.message}>\n <Input\n type=\"text\"\n {...register('name', { required: 'Name is required' })}\n placeholder=\"Name\"\n defaultValue={name}\n aria-label={selectors.pages.PlaylistForm.name}\n />\n </Field>\n <Field label=\"Interval\" invalid={!!errors.interval} error={errors?.interval?.message}>\n <Input\n type=\"text\"\n {...register('interval', { required: 'Interval is required' })}\n placeholder=\"5m\"\n defaultValue={interval ?? '5m'}\n aria-label={selectors.pages.PlaylistForm.interval}\n />\n </Field>\n\n <PlaylistTable items={items} onMoveUp={moveUp} onMoveDown={moveDown} onDelete={deleteItem} />\n\n <div className=\"gf-form-group\">\n <h3 className=\"page-headering\">Add dashboards</h3>\n\n <Field label=\"Add by title\">\n <DashboardPickerByID onChange={addById} id=\"dashboard-picker\" isClearable />\n </Field>\n\n <Field label=\"Add by tag\">\n <TagFilter\n isClearable\n tags={[]}\n hideValues\n tagOptions={searchSrv.getDashboardTags}\n onChange={addByTag}\n placeholder={''}\n />\n </Field>\n </div>\n\n <HorizontalGroup>\n <Button type=\"submit\" variant=\"primary\" disabled={isDisabled}>\n Save\n </Button>\n <LinkButton variant=\"secondary\" href={`${config.appSubUrl}/playlists`}>\n Cancel\n </LinkButton>\n </HorizontalGroup>\n </>\n );\n }}\n </Form>\n </>\n );\n};\n","import { useCallback, useState } from 'react';\n\nimport { DashboardPickerItem } from 'app/core/components/editors/DashboardPickerByID';\n\nimport { PlaylistItem } from './types';\n\nexport function usePlaylistItems(playlistItems?: PlaylistItem[]) {\n const [items, setItems] = useState<PlaylistItem[]>(playlistItems ?? []);\n\n const addById = useCallback(\n (dashboard?: DashboardPickerItem) => {\n if (!dashboard || items.find((item) => item.id === dashboard.id)) {\n return;\n }\n\n const newItem: PlaylistItem = {\n id: dashboard.id,\n title: dashboard.label as string,\n type: 'dashboard_by_id',\n value: dashboard.id.toString(10),\n order: items.length + 1,\n };\n setItems([...items, newItem]);\n },\n [items]\n );\n\n const addByTag = useCallback(\n (tags: string[]) => {\n const tag = tags[0];\n if (!tag || items.find((item) => item.value === tag)) {\n return;\n }\n\n const newItem: PlaylistItem = {\n title: tag,\n type: 'dashboard_by_tag',\n value: tag,\n order: items.length + 1,\n };\n setItems([...items, newItem]);\n },\n [items]\n );\n\n const movePlaylistItem = useCallback(\n (item: PlaylistItem, offset: number) => {\n const newItems = [...items];\n const currentPosition = newItems.indexOf(item);\n const newPosition = currentPosition + offset;\n\n if (newPosition >= 0 && newPosition < newItems.length) {\n newItems.splice(currentPosition, 1);\n newItems.splice(newPosition, 0, item);\n }\n setItems(newItems);\n },\n [items]\n );\n\n const moveUp = useCallback(\n (item: PlaylistItem) => {\n movePlaylistItem(item, -1);\n },\n [movePlaylistItem]\n );\n\n const moveDown = useCallback(\n (item: PlaylistItem) => {\n movePlaylistItem(item, 1);\n },\n [movePlaylistItem]\n );\n\n const deleteItem = useCallback(\n (item: PlaylistItem) => {\n setItems(items.filter((i) => i !== item));\n },\n [items]\n );\n\n return { items, addById, addByTag, deleteItem, moveDown, moveUp };\n}\n","import React, { FC } from 'react';\nimport { connect, MapStateToProps } from 'react-redux';\n\nimport { NavModel } from '@grafana/data';\nimport { locationService } from '@grafana/runtime';\nimport { useStyles2 } from '@grafana/ui';\nimport Page from 'app/core/components/Page/Page';\nimport { getNavModel } from 'app/core/selectors/navModel';\nimport { StoreState } from 'app/types';\n\nimport { GrafanaRouteComponentProps } from '../../core/navigation/types';\n\nimport { PlaylistForm } from './PlaylistForm';\nimport { createPlaylist } from './api';\nimport { getPlaylistStyles } from './styles';\nimport { Playlist } from './types';\nimport { usePlaylist } from './usePlaylist';\n\ninterface ConnectedProps {\n navModel: NavModel;\n}\n\ninterface Props extends ConnectedProps, GrafanaRouteComponentProps {}\n\nexport const PlaylistNewPage: FC<Props> = ({ navModel }) => {\n const styles = useStyles2(getPlaylistStyles);\n const { playlist, loading } = usePlaylist();\n const onSubmit = async (playlist: Playlist) => {\n await createPlaylist(playlist);\n locationService.push('/playlists');\n };\n\n return (\n <Page navModel={navModel}>\n <Page.Contents isLoading={loading}>\n <h3 className={styles.subHeading}>New Playlist</h3>\n\n <p className={styles.description}>\n A playlist rotates through a pre-selected list of dashboards. A playlist can be a great way to build\n situational awareness, or just show off your metrics to your team or visitors.\n </p>\n\n <PlaylistForm onSubmit={onSubmit} playlist={playlist} />\n </Page.Contents>\n </Page>\n );\n};\n\nconst mapStateToProps: MapStateToProps<ConnectedProps, {}, StoreState> = (state: StoreState) => ({\n navModel: getNavModel(state.navIndex, 'playlists'),\n});\n\nexport default connect(mapStateToProps)(PlaylistNewPage);\n","import { getBackendSrv } from '@grafana/runtime';\n\nimport { notifyApp } from '../../core/actions';\nimport { createErrorNotification, createSuccessNotification } from '../../core/copy/appNotification';\nimport { dispatch } from '../../store/store';\n\nimport { Playlist, PlaylistDTO } from './types';\n\nexport async function createPlaylist(playlist: Playlist) {\n await withErrorHandling(() => getBackendSrv().post('/api/playlists', playlist));\n}\n\nexport async function updatePlaylist(uid: string, playlist: Playlist) {\n await withErrorHandling(() => getBackendSrv().put(`/api/playlists/${uid}`, playlist));\n}\n\nexport async function deletePlaylist(uid: string) {\n await withErrorHandling(() => getBackendSrv().delete(`/api/playlists/${uid}`), 'Playlist deleted');\n}\n\nexport async function getPlaylist(uid: string): Promise<Playlist> {\n const result: Playlist = await getBackendSrv().get(`/api/playlists/${uid}`);\n return result;\n}\n\nexport async function getAllPlaylist(query: string): Promise<PlaylistDTO[]> {\n const result: PlaylistDTO[] = await getBackendSrv().get('/api/playlists/', { query });\n return result;\n}\n\nasync function withErrorHandling(apiCall: () => Promise<void>, message = 'Playlist saved') {\n try {\n await apiCall();\n dispatch(notifyApp(createSuccessNotification(message)));\n } catch (e) {\n dispatch(notifyApp(createErrorNotification('Unable to save playlist', e)));\n }\n}\n","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport function getPlaylistStyles(theme: GrafanaTheme2) {\n return {\n description: css`\n label: description;\n width: 555px;\n margin-bottom: 20px;\n `,\n subHeading: css`\n label: sub-heading;\n margin-bottom: ${theme.spacing(2)};\n `,\n };\n}\n","import { useEffect, useState } from 'react';\n\nimport { getPlaylist } from './api';\nimport { Playlist } from './types';\n\nexport function usePlaylist(playlistUid?: string) {\n const [playlist, setPlaylist] = useState<Playlist>({ items: [], interval: '5m', name: '', uid: '' });\n const [loading, setLoading] = useState<boolean>(true);\n\n useEffect(() => {\n const initPlaylist = async () => {\n if (!playlistUid) {\n setLoading(false);\n return;\n }\n const list = await getPlaylist(playlistUid);\n setPlaylist(list);\n setLoading(false);\n };\n initPlaylist();\n }, [playlistUid]);\n\n return { playlist, loading };\n}\n"],"names":["PlaylistTableRow","item","onDelete","onMoveDown","onMoveUp","first","last","styles","useStyles","getStyles","selectors","type","className","cx","td","Icon","name","title","TagBadge","label","removeIcon","count","id","settings","IconButton","size","onClick","event","preventDefault","theme","css","spacing","xs","PlaylistTableRows","items","length","map","index","PlaylistTable","searchSrv","SearchSrv","PlaylistForm","onSubmit","playlist","interval","propItems","addById","addByTag","deleteItem","moveDown","moveUp","playlistItems","setItems","useState","useCallback","dashboard","find","newItem","value","toString","order","tags","tag","movePlaylistItem","offset","newItems","currentPosition","indexOf","newPosition","splice","filter","i","usePlaylistItems","Form","list","validateOn","register","errors","isDisabled","Object","keys","Field","invalid","error","message","Input","required","placeholder","defaultValue","DashboardPickerByID","onChange","isClearable","TagFilter","hideValues","tagOptions","getDashboardTags","HorizontalGroup","Button","variant","disabled","LinkButton","href","config","PlaylistNewPage","navModel","useStyles2","getPlaylistStyles","loading","usePlaylist","isLoading","subHeading","description","async","createPlaylist","locationService","connect","state","getNavModel","navIndex","withErrorHandling","getBackendSrv","post","updatePlaylist","uid","put","deletePlaylist","delete","getPlaylist","get","getAllPlaylist","query","apiCall","dispatch","notifyApp","createSuccessNotification","e","createErrorNotification","playlistUid","setPlaylist","setLoading","useEffect","initPlaylist"],"sourceRoot":""}
|
