{"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":""}