mirror of https://github.com/grafana/grafana
Storage: Add basic file upload management (#50638)
Ryan McKinley
3 years ago
committed by
GitHub
parent
4a76436be2
commit
4a00c7ebde
@ -1,62 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React, { useState } from 'react'; |
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data'; |
|
||||||
import { getBackendSrv } from '@grafana/runtime'; |
|
||||||
import { Button, CodeEditor, Modal, useTheme2 } from '@grafana/ui'; |
|
||||||
|
|
||||||
export const ExportStartButton = () => { |
|
||||||
const styles = getStyles(useTheme2()); |
|
||||||
const [open, setOpen] = useState(false); |
|
||||||
const [body, setBody] = useState({ |
|
||||||
format: 'git', |
|
||||||
git: {}, |
|
||||||
}); |
|
||||||
const onDismiss = () => setOpen(false); |
|
||||||
const doStart = () => { |
|
||||||
getBackendSrv() |
|
||||||
.post('/api/admin/export', body) |
|
||||||
.then((v) => { |
|
||||||
console.log('GOT', v); |
|
||||||
onDismiss(); |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<Modal title={'Export grafana instance'} isOpen={open} onDismiss={onDismiss}> |
|
||||||
<div className={styles.wrap}> |
|
||||||
<CodeEditor |
|
||||||
height={200} |
|
||||||
value={JSON.stringify(body, null, 2) ?? ''} |
|
||||||
showLineNumbers={false} |
|
||||||
readOnly={false} |
|
||||||
language="json" |
|
||||||
showMiniMap={false} |
|
||||||
onBlur={(text: string) => { |
|
||||||
setBody(JSON.parse(text)); // force JSON?
|
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<Modal.ButtonRow> |
|
||||||
<Button onClick={doStart}>Start</Button> |
|
||||||
<Button variant="secondary" onClick={onDismiss}> |
|
||||||
Cancel |
|
||||||
</Button> |
|
||||||
</Modal.ButtonRow> |
|
||||||
</Modal> |
|
||||||
|
|
||||||
<Button onClick={() => setOpen(true)} variant="primary"> |
|
||||||
Export |
|
||||||
</Button> |
|
||||||
</> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => { |
|
||||||
return { |
|
||||||
wrap: css` |
|
||||||
border: 2px solid #111; |
|
||||||
`,
|
|
||||||
}; |
|
||||||
}; |
|
||||||
@ -1,82 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
|
|
||||||
import { GrafanaTheme2, isLiveChannelMessageEvent, isLiveChannelStatusEvent, LiveChannelScope } from '@grafana/data'; |
|
||||||
import { getBackendSrv, getGrafanaLiveSrv } from '@grafana/runtime'; |
|
||||||
import { Button, useTheme2 } from '@grafana/ui'; |
|
||||||
|
|
||||||
import { ExportStartButton } from './ExportStartButton'; |
|
||||||
|
|
||||||
interface ExportStatusMessage { |
|
||||||
running: boolean; |
|
||||||
target: string; |
|
||||||
started: number; |
|
||||||
finished: number; |
|
||||||
update: number; |
|
||||||
count: number; |
|
||||||
current: number; |
|
||||||
last: string; |
|
||||||
status: string; |
|
||||||
} |
|
||||||
|
|
||||||
export const ExportStatus = () => { |
|
||||||
const styles = getStyles(useTheme2()); |
|
||||||
const [status, setStatus] = useState<ExportStatusMessage>(); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
const subscription = getGrafanaLiveSrv() |
|
||||||
.getStream<ExportStatusMessage>({ |
|
||||||
scope: LiveChannelScope.Grafana, |
|
||||||
namespace: 'broadcast', |
|
||||||
path: 'export', |
|
||||||
}) |
|
||||||
.subscribe({ |
|
||||||
next: (evt) => { |
|
||||||
if (isLiveChannelMessageEvent(evt)) { |
|
||||||
setStatus(evt.message); |
|
||||||
} else if (isLiveChannelStatusEvent(evt)) { |
|
||||||
setStatus(evt.message); |
|
||||||
} |
|
||||||
}, |
|
||||||
}); |
|
||||||
return () => { |
|
||||||
subscription.unsubscribe(); |
|
||||||
}; |
|
||||||
}, []); |
|
||||||
|
|
||||||
if (!status) { |
|
||||||
return ( |
|
||||||
<div className={styles.wrap}> |
|
||||||
<ExportStartButton /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className={styles.wrap}> |
|
||||||
<pre>{JSON.stringify(status, null, 2)}</pre> |
|
||||||
{Boolean(!status.running) && <ExportStartButton />} |
|
||||||
{Boolean(status.running) && ( |
|
||||||
<Button |
|
||||||
variant="secondary" |
|
||||||
onClick={() => { |
|
||||||
getBackendSrv().post('/api/admin/export/stop'); |
|
||||||
}} |
|
||||||
> |
|
||||||
Stop |
|
||||||
</Button> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => { |
|
||||||
return { |
|
||||||
wrap: css` |
|
||||||
border: 4px solid red; |
|
||||||
`,
|
|
||||||
running: css` |
|
||||||
border: 4px solid green; |
|
||||||
`,
|
|
||||||
}; |
|
||||||
}; |
|
||||||
@ -0,0 +1,20 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { Button } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { StorageView } from './types'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
onPathChange: (p: string, v?: StorageView) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export function AddRootView({ onPathChange }: Props) { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div>TODO... Add ROOT</div> |
||||||
|
<Button variant="secondary" onClick={() => onPathChange('/')}> |
||||||
|
Cancel |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import { uniqueId } from 'lodash'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { Icon, IconName, useStyles2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
rootIcon?: IconName; |
||||||
|
pathName: string; |
||||||
|
onPathChange: (path: string) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export function Breadcrumb({ pathName, onPathChange, rootIcon }: Props) { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
const paths = pathName.split('/').filter(Boolean); |
||||||
|
|
||||||
|
return ( |
||||||
|
<ul className={styles.breadCrumb}> |
||||||
|
{rootIcon && ( |
||||||
|
<li onClick={() => onPathChange('')}> |
||||||
|
<Icon name={rootIcon} /> |
||||||
|
</li> |
||||||
|
)} |
||||||
|
{paths.map((path, index) => { |
||||||
|
let url = '/' + paths.slice(0, index + 1).join('/'); |
||||||
|
const onClickBreadcrumb = () => onPathChange(url); |
||||||
|
const isLastBreadcrumb = index === paths.length - 1; |
||||||
|
return ( |
||||||
|
<li key={uniqueId(path)} onClick={isLastBreadcrumb ? undefined : onClickBreadcrumb}> |
||||||
|
{path} |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
breadCrumb: css` |
||||||
|
list-style: none; |
||||||
|
padding: ${theme.spacing(2, 1)}; |
||||||
|
|
||||||
|
li { |
||||||
|
display: inline; |
||||||
|
|
||||||
|
:not(:last-child) { |
||||||
|
color: ${theme.colors.text.link}; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
+ li:before { |
||||||
|
content: '>'; |
||||||
|
padding: ${theme.spacing(1)}; |
||||||
|
color: ${theme.colors.text.secondary}; |
||||||
|
} |
||||||
|
} |
||||||
|
`,
|
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,127 @@ |
|||||||
|
import React, { useEffect, useState } from 'react'; |
||||||
|
|
||||||
|
import { isLiveChannelMessageEvent, isLiveChannelStatusEvent, LiveChannelScope } from '@grafana/data'; |
||||||
|
import { getBackendSrv, getGrafanaLiveSrv } from '@grafana/runtime'; |
||||||
|
import { Button, CodeEditor, Modal } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { StorageView } from './types'; |
||||||
|
|
||||||
|
interface ExportStatusMessage { |
||||||
|
running: boolean; |
||||||
|
target: string; |
||||||
|
started: number; |
||||||
|
finished: number; |
||||||
|
update: number; |
||||||
|
count: number; |
||||||
|
current: number; |
||||||
|
last: string; |
||||||
|
status: string; |
||||||
|
} |
||||||
|
|
||||||
|
interface Props { |
||||||
|
onPathChange: (p: string, v?: StorageView) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export const ExportView = ({ onPathChange }: Props) => { |
||||||
|
const [status, setStatus] = useState<ExportStatusMessage>(); |
||||||
|
|
||||||
|
const [open, setOpen] = useState(false); |
||||||
|
const [body, setBody] = useState({ |
||||||
|
format: 'git', |
||||||
|
git: {}, |
||||||
|
}); |
||||||
|
const onDismiss = () => setOpen(false); |
||||||
|
const doStart = () => { |
||||||
|
getBackendSrv() |
||||||
|
.post('/api/admin/export', body) |
||||||
|
.then((v) => { |
||||||
|
onDismiss(); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const subscription = getGrafanaLiveSrv() |
||||||
|
.getStream<ExportStatusMessage>({ |
||||||
|
scope: LiveChannelScope.Grafana, |
||||||
|
namespace: 'broadcast', |
||||||
|
path: 'export', |
||||||
|
}) |
||||||
|
.subscribe({ |
||||||
|
next: (evt) => { |
||||||
|
if (isLiveChannelMessageEvent(evt)) { |
||||||
|
setStatus(evt.message); |
||||||
|
} else if (isLiveChannelStatusEvent(evt)) { |
||||||
|
setStatus(evt.message); |
||||||
|
} |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
// if not running, open the thread
|
||||||
|
setTimeout(() => { |
||||||
|
if (!status) { |
||||||
|
setOpen(true); |
||||||
|
} |
||||||
|
}, 500); |
||||||
|
|
||||||
|
return () => { |
||||||
|
subscription.unsubscribe(); |
||||||
|
}; |
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []); |
||||||
|
|
||||||
|
const renderButton = () => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal title={'Export grafana instance'} isOpen={open} onDismiss={onDismiss}> |
||||||
|
<div> |
||||||
|
<CodeEditor |
||||||
|
height={200} |
||||||
|
value={JSON.stringify(body, null, 2) ?? ''} |
||||||
|
showLineNumbers={false} |
||||||
|
readOnly={false} |
||||||
|
language="json" |
||||||
|
showMiniMap={false} |
||||||
|
onBlur={(text: string) => { |
||||||
|
setBody(JSON.parse(text)); // force JSON?
|
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<Modal.ButtonRow> |
||||||
|
<Button onClick={doStart}>Start</Button> |
||||||
|
<Button variant="secondary" onClick={onDismiss}> |
||||||
|
Cancel |
||||||
|
</Button> |
||||||
|
</Modal.ButtonRow> |
||||||
|
</Modal> |
||||||
|
|
||||||
|
<Button onClick={() => setOpen(true)} variant="primary"> |
||||||
|
Export |
||||||
|
</Button> |
||||||
|
<Button variant="secondary" onClick={() => onPathChange('/')}> |
||||||
|
Cancel |
||||||
|
</Button> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
if (!status) { |
||||||
|
return <div>{renderButton()}</div>; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<pre>{JSON.stringify(status, null, 2)}</pre> |
||||||
|
{Boolean(!status.running) && renderButton()} |
||||||
|
{Boolean(status.running) && ( |
||||||
|
<Button |
||||||
|
variant="secondary" |
||||||
|
onClick={() => { |
||||||
|
getBackendSrv().post('/api/admin/export/stop'); |
||||||
|
}} |
||||||
|
> |
||||||
|
Stop |
||||||
|
</Button> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,161 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import { isString } from 'lodash'; |
||||||
|
import React, { useMemo } from 'react'; |
||||||
|
import SVG from 'react-inlinesvg'; |
||||||
|
import { useAsync } from 'react-use'; |
||||||
|
import AutoSizer from 'react-virtualized-auto-sizer'; |
||||||
|
|
||||||
|
import { DataFrame, GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { CodeEditor, useStyles2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { getGrafanaStorage } from './helper'; |
||||||
|
import { StorageView } from './types'; |
||||||
|
|
||||||
|
interface FileDisplayInfo { |
||||||
|
category?: 'svg' | 'image' | 'text'; |
||||||
|
language?: string; // match code editor
|
||||||
|
} |
||||||
|
|
||||||
|
interface Props { |
||||||
|
listing: DataFrame; |
||||||
|
path: string; |
||||||
|
onPathChange: (p: string, view?: StorageView) => void; |
||||||
|
view: StorageView; |
||||||
|
} |
||||||
|
|
||||||
|
export function FileView({ listing, path, onPathChange, view }: Props) { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
const info = useMemo(() => getFileDisplayInfo(path), [path]); |
||||||
|
const body = useAsync(async () => { |
||||||
|
if (info.category === 'text') { |
||||||
|
const rsp = await getGrafanaStorage().get(path); |
||||||
|
if (isString(rsp)) { |
||||||
|
return rsp; |
||||||
|
} |
||||||
|
return JSON.stringify(rsp, null, 2); |
||||||
|
} |
||||||
|
return null; |
||||||
|
}, [info, path]); |
||||||
|
|
||||||
|
switch (view) { |
||||||
|
case StorageView.Config: |
||||||
|
return <div>CONFIGURE?</div>; |
||||||
|
case StorageView.Perms: |
||||||
|
return <div>Permissions</div>; |
||||||
|
case StorageView.History: |
||||||
|
return <div>TODO... history</div>; |
||||||
|
} |
||||||
|
|
||||||
|
let src = `api/storage/read/${path}`; |
||||||
|
if (src.endsWith('/')) { |
||||||
|
src = src.substring(0, src.length - 1); |
||||||
|
} |
||||||
|
|
||||||
|
switch (info.category) { |
||||||
|
case 'svg': |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<SVG src={src} className={styles.icon} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
case 'image': |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<a target={'_self'} href={src}> |
||||||
|
<img src={src} className={styles.img} /> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
); |
||||||
|
case 'text': |
||||||
|
return ( |
||||||
|
<div className={styles.tableWrapper}> |
||||||
|
<AutoSizer> |
||||||
|
{({ width, height }) => ( |
||||||
|
<CodeEditor |
||||||
|
width={width} |
||||||
|
height={height} |
||||||
|
value={body.value ?? ''} |
||||||
|
showLineNumbers={false} |
||||||
|
readOnly={true} |
||||||
|
language={info.language ?? 'text'} |
||||||
|
showMiniMap={false} |
||||||
|
onBlur={(text: string) => { |
||||||
|
console.log('CHANGED!', text); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</AutoSizer> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
FILE: <a href={src}>{path}</a> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function getFileDisplayInfo(path: string): FileDisplayInfo { |
||||||
|
const idx = path.lastIndexOf('.'); |
||||||
|
if (idx < 0) { |
||||||
|
return {}; |
||||||
|
} |
||||||
|
const suffix = path.substring(idx + 1).toLowerCase(); |
||||||
|
switch (suffix) { |
||||||
|
case 'svg': |
||||||
|
return { category: 'svg' }; |
||||||
|
case 'jpg': |
||||||
|
case 'jpeg': |
||||||
|
case 'png': |
||||||
|
case 'webp': |
||||||
|
case 'gif': |
||||||
|
return { category: 'image' }; |
||||||
|
|
||||||
|
case 'geojson': |
||||||
|
case 'json': |
||||||
|
return { category: 'text', language: 'json' }; |
||||||
|
case 'text': |
||||||
|
case 'go': |
||||||
|
case 'md': |
||||||
|
return { category: 'text' }; |
||||||
|
} |
||||||
|
return {}; |
||||||
|
} |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => ({ |
||||||
|
// TODO: remove `height: 90%`
|
||||||
|
wrapper: css` |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
height: 100%; |
||||||
|
`,
|
||||||
|
tableControlRowWrapper: css` |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: ${theme.spacing(2)}; |
||||||
|
`,
|
||||||
|
// TODO: remove `height: 100%`
|
||||||
|
tableWrapper: css` |
||||||
|
border: 1px solid ${theme.colors.border.medium}; |
||||||
|
height: 100%; |
||||||
|
`,
|
||||||
|
uploadSpot: css` |
||||||
|
margin-left: ${theme.spacing(2)}; |
||||||
|
`,
|
||||||
|
border: css` |
||||||
|
border: 1px solid ${theme.colors.border.medium}; |
||||||
|
padding: ${theme.spacing(2)}; |
||||||
|
`,
|
||||||
|
img: css` |
||||||
|
max-width: 100%; |
||||||
|
// max-height: 147px;
|
||||||
|
// fill: ${theme.colors.text.primary};
|
||||||
|
`,
|
||||||
|
icon: css` |
||||||
|
// max-width: 100%;
|
||||||
|
// max-height: 147px;
|
||||||
|
// fill: ${theme.colors.text.primary};
|
||||||
|
`,
|
||||||
|
}); |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
import AutoSizer from 'react-virtualized-auto-sizer'; |
||||||
|
|
||||||
|
import { DataFrame, GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { Table, useStyles2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { UploadView } from './UploadView'; |
||||||
|
import { StorageView } from './types'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
listing: DataFrame; |
||||||
|
path: string; |
||||||
|
onPathChange: (p: string, view?: StorageView) => void; |
||||||
|
view: StorageView; |
||||||
|
} |
||||||
|
|
||||||
|
export function FolderView({ listing, path, onPathChange, view }: Props) { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
switch (view) { |
||||||
|
case StorageView.Config: |
||||||
|
return <div>CONFIGURE?</div>; |
||||||
|
case StorageView.Perms: |
||||||
|
return <div>Permissions</div>; |
||||||
|
case StorageView.Upload: |
||||||
|
return ( |
||||||
|
<UploadView |
||||||
|
folder={path} |
||||||
|
onUpload={(rsp) => { |
||||||
|
console.log('Uploaded: ' + path); |
||||||
|
if (rsp.path) { |
||||||
|
onPathChange(rsp.path); |
||||||
|
} else { |
||||||
|
onPathChange(path); // back to data
|
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.tableWrapper}> |
||||||
|
<AutoSizer> |
||||||
|
{({ width, height }) => ( |
||||||
|
<div style={{ width: `${width}px`, height: `${height}px` }}> |
||||||
|
<Table |
||||||
|
height={height} |
||||||
|
width={width} |
||||||
|
data={listing} |
||||||
|
noHeader={false} |
||||||
|
showTypeIcons={false} |
||||||
|
resizable={false} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</AutoSizer> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => ({ |
||||||
|
// TODO: remove `height: 90%`
|
||||||
|
wrapper: css` |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
height: 100%; |
||||||
|
`,
|
||||||
|
tableControlRowWrapper: css` |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: ${theme.spacing(2)}; |
||||||
|
`,
|
||||||
|
// TODO: remove `height: 100%`
|
||||||
|
tableWrapper: css` |
||||||
|
border: 1px solid ${theme.colors.border.medium}; |
||||||
|
height: 100%; |
||||||
|
`,
|
||||||
|
uploadSpot: css` |
||||||
|
margin-left: ${theme.spacing(2)}; |
||||||
|
`,
|
||||||
|
border: css` |
||||||
|
border: 1px solid ${theme.colors.border.medium}; |
||||||
|
padding: ${theme.spacing(2)}; |
||||||
|
`,
|
||||||
|
}); |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React, { useMemo, useState } from 'react'; |
||||||
|
|
||||||
|
import { DataFrame, DataFrameView, GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { config } from '@grafana/runtime'; |
||||||
|
import { Button, Card, FilterInput, Icon, IconName, TagList, useStyles2, VerticalGroup } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { StorageView } from './types'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
root: DataFrame; |
||||||
|
onPathChange: (p: string, v?: StorageView) => void; |
||||||
|
} |
||||||
|
|
||||||
|
interface RootFolder { |
||||||
|
name: string; |
||||||
|
title: string; |
||||||
|
storageType: string; |
||||||
|
description: string; |
||||||
|
readOnly: boolean; |
||||||
|
builtIn: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
export function RootView({ root, onPathChange }: Props) { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
const [searchQuery, setSearchQuery] = useState<string>(''); |
||||||
|
let base = location.pathname; |
||||||
|
if (!base.endsWith('/')) { |
||||||
|
base += '/'; |
||||||
|
} |
||||||
|
|
||||||
|
const roots = useMemo(() => { |
||||||
|
const view = new DataFrameView<RootFolder>(root); |
||||||
|
const all = view.map((v) => ({ ...v })); |
||||||
|
if (searchQuery?.length) { |
||||||
|
const lower = searchQuery.toLowerCase(); |
||||||
|
return all.filter((v) => { |
||||||
|
const isMatch = v.name.toLowerCase().indexOf(lower) >= 0 || v.description.toLowerCase().indexOf(lower) >= 0; |
||||||
|
if (isMatch) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
return false; |
||||||
|
}); |
||||||
|
} |
||||||
|
return all; |
||||||
|
}, [searchQuery, root]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div className="page-action-bar"> |
||||||
|
<div className="gf-form gf-form--grow"> |
||||||
|
<FilterInput placeholder="Search Storage" value={searchQuery} onChange={setSearchQuery} /> |
||||||
|
</div> |
||||||
|
<Button className="pull-right" onClick={() => onPathChange('', StorageView.AddRoot)}> |
||||||
|
Add Root |
||||||
|
</Button> |
||||||
|
{config.featureToggles.export && ( |
||||||
|
<Button className="pull-right" onClick={() => onPathChange('', StorageView.Export)}> |
||||||
|
Export |
||||||
|
</Button> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<VerticalGroup> |
||||||
|
{roots.map((v) => ( |
||||||
|
<Card key={v.name} href={`admin/storage/${v.name}/`}> |
||||||
|
<Card.Heading>{v.title ?? v.name}</Card.Heading> |
||||||
|
<Card.Meta className={styles.clickable}>{v.description}</Card.Meta> |
||||||
|
<Card.Tags className={styles.clickable}> |
||||||
|
<TagList tags={getTags(v)} /> |
||||||
|
</Card.Tags> |
||||||
|
<Card.Figure className={styles.clickable}> |
||||||
|
<Icon name={getIconName(v.storageType)} size="xxxl" className={styles.secondaryTextColor} /> |
||||||
|
</Card.Figure> |
||||||
|
</Card> |
||||||
|
))} |
||||||
|
</VerticalGroup> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
secondaryTextColor: css` |
||||||
|
color: ${theme.colors.text.secondary}; |
||||||
|
`,
|
||||||
|
clickable: css` |
||||||
|
pointer-events: none; |
||||||
|
`,
|
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function getTags(v: RootFolder) { |
||||||
|
const tags: string[] = []; |
||||||
|
if (v.builtIn) { |
||||||
|
tags.push('Builtin'); |
||||||
|
} |
||||||
|
if (v.readOnly) { |
||||||
|
tags.push('Read only'); |
||||||
|
} |
||||||
|
return tags; |
||||||
|
} |
||||||
|
|
||||||
|
export function getIconName(type: string): IconName { |
||||||
|
switch (type) { |
||||||
|
case 'git': |
||||||
|
return 'code-branch'; |
||||||
|
case 'disk': |
||||||
|
return 'folder-open'; |
||||||
|
case 'sql': |
||||||
|
return 'database'; |
||||||
|
default: |
||||||
|
return 'folder-open'; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,205 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React, { useMemo } from 'react'; |
||||||
|
import { useAsync } from 'react-use'; |
||||||
|
|
||||||
|
import { DataFrame, GrafanaTheme2, isDataFrame, ValueLinkConfig } from '@grafana/data'; |
||||||
|
import { locationService } from '@grafana/runtime'; |
||||||
|
import { useStyles2, IconName, Spinner, TabsBar, Tab, Button, HorizontalGroup } from '@grafana/ui'; |
||||||
|
import Page from 'app/core/components/Page/Page'; |
||||||
|
import { useNavModel } from 'app/core/hooks/useNavModel'; |
||||||
|
import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; |
||||||
|
|
||||||
|
import { AddRootView } from './AddRootView'; |
||||||
|
import { Breadcrumb } from './Breadcrumb'; |
||||||
|
import { ExportView } from './ExportView'; |
||||||
|
import { FileView } from './FileView'; |
||||||
|
import { FolderView } from './FolderView'; |
||||||
|
import { RootView } from './RootView'; |
||||||
|
import { getGrafanaStorage } from './helper'; |
||||||
|
import { StorageView } from './types'; |
||||||
|
|
||||||
|
interface RouteParams { |
||||||
|
path: string; |
||||||
|
} |
||||||
|
|
||||||
|
interface QueryParams { |
||||||
|
view: StorageView; |
||||||
|
} |
||||||
|
|
||||||
|
interface Props extends GrafanaRouteComponentProps<RouteParams, QueryParams> {} |
||||||
|
|
||||||
|
export default function StoragePage(props: Props) { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
const navModel = useNavModel('storage'); |
||||||
|
const path = props.match.params.path ?? ''; |
||||||
|
const view = props.queryParams.view ?? StorageView.Data; |
||||||
|
const setPath = (p: string, view?: StorageView) => { |
||||||
|
let url = ('/admin/storage/' + p).replace('//', '/'); |
||||||
|
if (view && view !== StorageView.Data) { |
||||||
|
url += '?view=' + view; |
||||||
|
} |
||||||
|
locationService.push(url); |
||||||
|
}; |
||||||
|
|
||||||
|
const listing = useAsync((): Promise<DataFrame | undefined> => { |
||||||
|
return getGrafanaStorage() |
||||||
|
.list(path) |
||||||
|
.then((frame) => { |
||||||
|
if (frame) { |
||||||
|
const name = frame.fields[0]; |
||||||
|
frame.fields[0] = { |
||||||
|
...name, |
||||||
|
getLinks: (cfg: ValueLinkConfig) => { |
||||||
|
const n = name.values.get(cfg.valueRowIndex ?? 0); |
||||||
|
const p = path + '/' + n; |
||||||
|
return [ |
||||||
|
{ |
||||||
|
title: `Open ${n}`, |
||||||
|
href: `/admin/storage/${p}`, |
||||||
|
target: '_self', |
||||||
|
origin: name, |
||||||
|
onClick: () => { |
||||||
|
setPath(p); |
||||||
|
}, |
||||||
|
}, |
||||||
|
]; |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
return frame; |
||||||
|
}); |
||||||
|
}, [path]); |
||||||
|
|
||||||
|
const isFolder = useMemo(() => { |
||||||
|
let isFolder = path?.indexOf('/') < 0; |
||||||
|
if (listing.value) { |
||||||
|
const length = listing.value.length; |
||||||
|
if (length > 1) { |
||||||
|
isFolder = true; |
||||||
|
} |
||||||
|
if (length === 1) { |
||||||
|
const first = listing.value.fields[0].values.get(0) as string; |
||||||
|
isFolder = !path.endsWith(first); |
||||||
|
} |
||||||
|
} |
||||||
|
return isFolder; |
||||||
|
}, [path, listing]); |
||||||
|
|
||||||
|
const renderView = () => { |
||||||
|
const isRoot = !path?.length || path === '/'; |
||||||
|
switch (view) { |
||||||
|
case StorageView.Export: |
||||||
|
if (!isRoot) { |
||||||
|
setPath(''); |
||||||
|
return <Spinner />; |
||||||
|
} |
||||||
|
return <ExportView onPathChange={setPath} />; |
||||||
|
|
||||||
|
case StorageView.AddRoot: |
||||||
|
if (!isRoot) { |
||||||
|
setPath(''); |
||||||
|
return <Spinner />; |
||||||
|
} |
||||||
|
return <AddRootView onPathChange={setPath} />; |
||||||
|
} |
||||||
|
|
||||||
|
const frame = listing.value; |
||||||
|
if (!isDataFrame(frame)) { |
||||||
|
return <></>; |
||||||
|
} |
||||||
|
|
||||||
|
if (isRoot) { |
||||||
|
return <RootView root={frame} onPathChange={setPath} />; |
||||||
|
} |
||||||
|
|
||||||
|
const opts = [{ what: StorageView.Data, text: 'Data' }]; |
||||||
|
|
||||||
|
// Root folders have a config page
|
||||||
|
if (path.indexOf('/') < 0) { |
||||||
|
opts.push({ what: StorageView.Config, text: 'Configure' }); |
||||||
|
} |
||||||
|
|
||||||
|
// Lets only apply permissions to folders (for now)
|
||||||
|
if (isFolder) { |
||||||
|
opts.push({ what: StorageView.Perms, text: 'Permissions' }); |
||||||
|
} else { |
||||||
|
// TODO: only if the file exists in a storage engine with
|
||||||
|
opts.push({ what: StorageView.History, text: 'History' }); |
||||||
|
} |
||||||
|
|
||||||
|
// Hardcode the uploadable folder :)
|
||||||
|
if (isFolder && path.startsWith('resources')) { |
||||||
|
opts.push({ |
||||||
|
what: StorageView.Upload, |
||||||
|
text: 'Upload', |
||||||
|
}); |
||||||
|
} |
||||||
|
const canAddFolder = isFolder && path.startsWith('resources'); |
||||||
|
const canDelete = !isFolder && path.startsWith('resources/'); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.wrapper}> |
||||||
|
<HorizontalGroup width="100%" justify="space-between" height={25}> |
||||||
|
<Breadcrumb pathName={path} onPathChange={setPath} rootIcon={navModel.node.icon as IconName} /> |
||||||
|
<div> |
||||||
|
{canAddFolder && <Button onClick={() => alert('TODO: new folder modal')}>New Folder</Button>} |
||||||
|
{canDelete && ( |
||||||
|
<Button variant="destructive" onClick={() => alert('TODO: confirm delete modal')}> |
||||||
|
Delete |
||||||
|
</Button> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</HorizontalGroup> |
||||||
|
|
||||||
|
<TabsBar> |
||||||
|
{opts.map((opt) => ( |
||||||
|
<Tab |
||||||
|
key={opt.what} |
||||||
|
label={opt.text} |
||||||
|
active={opt.what === view} |
||||||
|
onChangeTab={() => setPath(path, opt.what)} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</TabsBar> |
||||||
|
{isFolder ? ( |
||||||
|
<FolderView path={path} listing={frame} onPathChange={setPath} view={view} /> |
||||||
|
) : ( |
||||||
|
<FileView path={path} listing={frame} onPathChange={setPath} view={view} /> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Page navModel={navModel}> |
||||||
|
<Page.Contents isLoading={listing.loading}>{renderView()}</Page.Contents> |
||||||
|
</Page> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => ({ |
||||||
|
// TODO: remove `height: 90%`
|
||||||
|
wrapper: css` |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
height: 100%; |
||||||
|
`,
|
||||||
|
tableControlRowWrapper: css` |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: ${theme.spacing(2)}; |
||||||
|
`,
|
||||||
|
// TODO: remove `height: 100%`
|
||||||
|
tableWrapper: css` |
||||||
|
border: 1px solid ${theme.colors.border.medium}; |
||||||
|
height: 100%; |
||||||
|
`,
|
||||||
|
uploadSpot: css` |
||||||
|
margin-left: ${theme.spacing(2)}; |
||||||
|
`,
|
||||||
|
border: css` |
||||||
|
border: 1px solid ${theme.colors.border.medium}; |
||||||
|
padding: ${theme.spacing(2)}; |
||||||
|
`,
|
||||||
|
}); |
||||||
@ -0,0 +1,136 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React, { useState } from 'react'; |
||||||
|
import SVG from 'react-inlinesvg'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { Button, ButtonGroup, Field, FileDropzone, useStyles2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { getGrafanaStorage } from './helper'; |
||||||
|
import { UploadReponse } from './types'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
folder: string; |
||||||
|
onUpload: (rsp: UploadReponse) => void; |
||||||
|
} |
||||||
|
|
||||||
|
interface ErrorResponse { |
||||||
|
message: string; |
||||||
|
} |
||||||
|
|
||||||
|
const FileDropzoneCustomChildren = ({ secondaryText = 'Drag and drop here or browse' }) => { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.iconWrapper}> |
||||||
|
<small className={styles.small}>{secondaryText}</small> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export const UploadView = ({ folder, onUpload }: Props) => { |
||||||
|
const [file, setFile] = useState<File | undefined>(undefined); |
||||||
|
|
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
const [error, setError] = useState<ErrorResponse>({ message: '' }); |
||||||
|
|
||||||
|
const Preview = () => { |
||||||
|
if (!file) { |
||||||
|
return <></>; |
||||||
|
} |
||||||
|
const isImage = file.type?.startsWith('image/'); |
||||||
|
const isSvg = file.name?.endsWith('.svg'); |
||||||
|
|
||||||
|
const src = URL.createObjectURL(file); |
||||||
|
return ( |
||||||
|
<Field label="Preview"> |
||||||
|
<div className={styles.iconPreview}> |
||||||
|
{isSvg && <SVG src={src} className={styles.img} />} |
||||||
|
{isImage && !isSvg && <img src={src} className={styles.img} />} |
||||||
|
</div> |
||||||
|
</Field> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const doUpload = async () => { |
||||||
|
if (!file) { |
||||||
|
setError({ message: 'please select a file' }); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const rsp = await getGrafanaStorage().upload(folder, file); |
||||||
|
if (rsp.status !== 200) { |
||||||
|
setError(rsp); |
||||||
|
} else { |
||||||
|
onUpload(rsp); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<FileDropzone |
||||||
|
readAs="readAsBinaryString" |
||||||
|
onFileRemove={() => { |
||||||
|
setFile(undefined); |
||||||
|
}} |
||||||
|
options={{ |
||||||
|
accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'] }, |
||||||
|
multiple: false, |
||||||
|
onDrop: (acceptedFiles: File[]) => { |
||||||
|
setFile(acceptedFiles[0]); |
||||||
|
}, |
||||||
|
}} |
||||||
|
> |
||||||
|
{error.message !== '' ? <p>{error.message}</p> : Boolean(file) ? <Preview /> : <FileDropzoneCustomChildren />} |
||||||
|
</FileDropzone> |
||||||
|
|
||||||
|
<ButtonGroup> |
||||||
|
<Button className={styles.button} variant={'primary'} disabled={!file} onClick={doUpload}> |
||||||
|
Upload |
||||||
|
</Button> |
||||||
|
</ButtonGroup> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => ({ |
||||||
|
resourcePickerPopover: css` |
||||||
|
border-radius: ${theme.shape.borderRadius()}; |
||||||
|
box-shadow: ${theme.shadows.z3}; |
||||||
|
background: ${theme.colors.background.primary}; |
||||||
|
border: 1px solid ${theme.colors.border.medium}; |
||||||
|
`,
|
||||||
|
resourcePickerPopoverContent: css` |
||||||
|
width: 315px; |
||||||
|
font-size: ${theme.typography.bodySmall.fontSize}; |
||||||
|
min-height: 184px; |
||||||
|
padding: ${theme.spacing(1)}; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
`,
|
||||||
|
button: css` |
||||||
|
margin: 12px 20px 5px; |
||||||
|
`,
|
||||||
|
iconPreview: css` |
||||||
|
width: 238px; |
||||||
|
height: 198px; |
||||||
|
border: 1px solid ${theme.colors.border.medium}; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
`,
|
||||||
|
img: css` |
||||||
|
width: 147px; |
||||||
|
height: 147px; |
||||||
|
fill: ${theme.colors.text.primary}; |
||||||
|
`,
|
||||||
|
iconWrapper: css` |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
`,
|
||||||
|
small: css` |
||||||
|
color: ${theme.colors.text.secondary}; |
||||||
|
margin-bottom: ${theme.spacing(2)}; |
||||||
|
`,
|
||||||
|
}); |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
import { DataFrame, dataFrameFromJSON, DataFrameJSON, getDisplayProcessor } from '@grafana/data'; |
||||||
|
import { config, getBackendSrv } from '@grafana/runtime'; |
||||||
|
|
||||||
|
import { UploadReponse } from './types'; |
||||||
|
|
||||||
|
// Likely should be built into the search interface!
|
||||||
|
export interface GrafanaStorage { |
||||||
|
get: <T = any>(path: string) => Promise<T>; |
||||||
|
list: (path: string) => Promise<DataFrame | undefined>; |
||||||
|
upload: (folder: string, file: File) => Promise<UploadReponse>; |
||||||
|
} |
||||||
|
|
||||||
|
class SimpleStorage implements GrafanaStorage { |
||||||
|
constructor() {} |
||||||
|
|
||||||
|
async get<T = any>(path: string): Promise<T> { |
||||||
|
const storagePath = `api/storage/read/${path}`.replace('//', '/'); |
||||||
|
return getBackendSrv().get<T>(storagePath); |
||||||
|
} |
||||||
|
|
||||||
|
async list(path: string): Promise<DataFrame | undefined> { |
||||||
|
let url = 'api/storage/list/'; |
||||||
|
if (path) { |
||||||
|
url += path + '/'; |
||||||
|
} |
||||||
|
const rsp = await getBackendSrv().get<DataFrameJSON>(url); |
||||||
|
if (rsp?.data) { |
||||||
|
const f = dataFrameFromJSON(rsp); |
||||||
|
for (const field of f.fields) { |
||||||
|
field.display = getDisplayProcessor({ field, theme: config.theme2 }); |
||||||
|
} |
||||||
|
return f; |
||||||
|
} |
||||||
|
return undefined; |
||||||
|
} |
||||||
|
|
||||||
|
async upload(folder: string, file: File): Promise<UploadReponse> { |
||||||
|
const formData = new FormData(); |
||||||
|
formData.append('folder', folder); |
||||||
|
formData.append('file', file); |
||||||
|
const res = await fetch('/api/storage/upload', { |
||||||
|
method: 'POST', |
||||||
|
body: formData, |
||||||
|
}); |
||||||
|
|
||||||
|
let body = (await res.json()) as UploadReponse; |
||||||
|
if (!body) { |
||||||
|
body = {} as any; |
||||||
|
} |
||||||
|
body.status = res.status; |
||||||
|
body.statusText = res.statusText; |
||||||
|
if (res.status !== 200 && !body.err) { |
||||||
|
body.err = true; |
||||||
|
} |
||||||
|
return body; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
let storage: GrafanaStorage | undefined; |
||||||
|
|
||||||
|
export function getGrafanaStorage() { |
||||||
|
if (!storage) { |
||||||
|
storage = new SimpleStorage(); |
||||||
|
} |
||||||
|
return storage; |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
export enum StorageView { |
||||||
|
Data = 'data', |
||||||
|
Config = 'config', |
||||||
|
Perms = 'perms', |
||||||
|
Upload = 'upload', |
||||||
|
Export = 'export', |
||||||
|
History = 'history', |
||||||
|
AddRoot = 'add', |
||||||
|
} |
||||||
|
|
||||||
|
export interface UploadReponse { |
||||||
|
status: number; |
||||||
|
statusText: string; |
||||||
|
|
||||||
|
err?: boolean; |
||||||
|
message: string; |
||||||
|
path: string; |
||||||
|
} |
||||||
Loading…
Reference in new issue