mirror of https://github.com/grafana/grafana
Chore: Remove previews crawler UI (and feature flag) (#62906)
Ryan McKinley
2 years ago
committed by
GitHub
parent
0efb84617e
commit
39116b9c11
@ -1,64 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React, { useState } from 'react'; |
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data'; |
|
||||||
import { getBackendSrv, config } from '@grafana/runtime'; |
|
||||||
import { Button, CodeEditor, Modal, useTheme2 } from '@grafana/ui'; |
|
||||||
|
|
||||||
export const CrawlerStartButton = () => { |
|
||||||
const styles = getStyles(useTheme2()); |
|
||||||
const [open, setOpen] = useState(false); |
|
||||||
const [body, setBody] = useState({ |
|
||||||
mode: 'thumbs', |
|
||||||
theme: config.theme2.isLight ? 'light' : 'dark', |
|
||||||
}); |
|
||||||
const onDismiss = () => setOpen(false); |
|
||||||
const doStart = () => { |
|
||||||
getBackendSrv() |
|
||||||
.post('/api/admin/crawler/start', body) |
|
||||||
.then((v) => { |
|
||||||
console.log('GOT', v); |
|
||||||
onDismiss(); |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<Modal title={'Start crawler'} 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 type="submit" onClick={doStart}> |
|
||||||
Start |
|
||||||
</Button> |
|
||||||
<Button variant="secondary" onClick={onDismiss}> |
|
||||||
Cancel |
|
||||||
</Button> |
|
||||||
</Modal.ButtonRow> |
|
||||||
</Modal> |
|
||||||
|
|
||||||
<Button onClick={() => setOpen(true)} variant="primary"> |
|
||||||
Start |
|
||||||
</Button> |
|
||||||
</> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => { |
|
||||||
return { |
|
||||||
wrap: css` |
|
||||||
border: 2px solid #111; |
|
||||||
`,
|
|
||||||
}; |
|
||||||
}; |
|
||||||
@ -1,81 +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 { CrawlerStartButton } from './CrawlerStartButton'; |
|
||||||
|
|
||||||
interface CrawlerStatusMessage { |
|
||||||
state: string; |
|
||||||
started: string; |
|
||||||
finished: string; |
|
||||||
complete: number; |
|
||||||
queue: number; |
|
||||||
last: string; |
|
||||||
} |
|
||||||
|
|
||||||
export const CrawlerStatus = () => { |
|
||||||
const styles = getStyles(useTheme2()); |
|
||||||
const [status, setStatus] = useState<CrawlerStatusMessage>(); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
const subscription = getGrafanaLiveSrv() |
|
||||||
.getStream<CrawlerStatusMessage>({ |
|
||||||
scope: LiveChannelScope.Grafana, |
|
||||||
namespace: 'broadcast', |
|
||||||
path: 'crawler', |
|
||||||
}) |
|
||||||
.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}> |
|
||||||
No status (never run) |
|
||||||
<br /> |
|
||||||
<CrawlerStartButton /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className={styles.wrap}> |
|
||||||
<pre>{JSON.stringify(status, null, 2)}</pre> |
|
||||||
{status.state !== 'running' && <CrawlerStartButton />} |
|
||||||
{status.state !== 'stopped' && ( |
|
||||||
<Button |
|
||||||
variant="secondary" |
|
||||||
onClick={() => { |
|
||||||
getBackendSrv().post('/api/admin/crawler/stop'); |
|
||||||
}} |
|
||||||
> |
|
||||||
Stop |
|
||||||
</Button> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => { |
|
||||||
return { |
|
||||||
wrap: css` |
|
||||||
border: 4px solid red; |
|
||||||
`,
|
|
||||||
running: css` |
|
||||||
border: 4px solid green; |
|
||||||
`,
|
|
||||||
}; |
|
||||||
}; |
|
||||||
@ -1,102 +0,0 @@ |
|||||||
import React, { PureComponent } from 'react'; |
|
||||||
|
|
||||||
import { Button, CollapsableSection, FileUpload } from '@grafana/ui'; |
|
||||||
import { getBackendSrv } from 'app/core/services/backend_srv'; |
|
||||||
import { getThumbnailURL } from 'app/features/search/components/SearchCard'; |
|
||||||
|
|
||||||
interface Props { |
|
||||||
uid: string; |
|
||||||
} |
|
||||||
|
|
||||||
interface State {} |
|
||||||
|
|
||||||
export class PreviewSettings extends PureComponent<Props, State> { |
|
||||||
state: State = {}; |
|
||||||
|
|
||||||
doUpload = (evt: EventTarget & HTMLInputElement, isLight?: boolean) => { |
|
||||||
const file = evt?.files && evt.files[0]; |
|
||||||
if (!file) { |
|
||||||
console.log('NOPE!', evt); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
const url = getThumbnailURL(this.props.uid, isLight); |
|
||||||
const formData = new FormData(); |
|
||||||
formData.append('file', file); |
|
||||||
|
|
||||||
fetch(url, { |
|
||||||
method: 'POST', |
|
||||||
body: formData, |
|
||||||
}) |
|
||||||
.then((response) => response.json()) |
|
||||||
.then((result) => { |
|
||||||
console.log('Success:', result); |
|
||||||
location.reload(); //HACK
|
|
||||||
}) |
|
||||||
.catch((error) => { |
|
||||||
console.error('Error:', error); |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
markAsStale = (isLight: boolean) => async () => { |
|
||||||
return getBackendSrv().put(getThumbnailURL(this.props.uid, isLight), { state: 'stale' }); |
|
||||||
}; |
|
||||||
|
|
||||||
render() { |
|
||||||
const { uid } = this.props; |
|
||||||
const imgstyle = { maxWidth: 300, maxHeight: 300 }; |
|
||||||
return ( |
|
||||||
<CollapsableSection label="Preview settings" isOpen={true}> |
|
||||||
<div>DUMMY UI just so we have an upload button!</div> |
|
||||||
<table cellSpacing="4"> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<td>[DARK]</td> |
|
||||||
<td>[LIGHT]</td> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
<tr> |
|
||||||
<td> |
|
||||||
<Button type="button" variant="primary" onClick={this.markAsStale(false)} fill="outline"> |
|
||||||
Mark as stale |
|
||||||
</Button> |
|
||||||
</td> |
|
||||||
<td> |
|
||||||
<Button type="button" variant="primary" onClick={this.markAsStale(true)} fill="outline"> |
|
||||||
Mark as stale |
|
||||||
</Button> |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td> |
|
||||||
<img src={getThumbnailURL(uid, false)} alt="Preview of dashboard in dark theme" style={imgstyle} /> |
|
||||||
</td> |
|
||||||
<td> |
|
||||||
<img src={getThumbnailURL(uid, true)} alt="Preview of dashboard in light theme" style={imgstyle} /> |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td> |
|
||||||
<FileUpload |
|
||||||
accept="image/png, image/webp" |
|
||||||
onFileUpload={({ currentTarget }) => this.doUpload(currentTarget, false)} |
|
||||||
> |
|
||||||
Upload dark |
|
||||||
</FileUpload> |
|
||||||
</td> |
|
||||||
<td> |
|
||||||
<FileUpload |
|
||||||
accept="image/png, image/webp" |
|
||||||
onFileUpload={({ currentTarget }) => this.doUpload(currentTarget, true)} |
|
||||||
> |
|
||||||
Upload light |
|
||||||
</FileUpload> |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
</CollapsableSection> |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue