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