mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Live: remove admin pages, add alpha panel (#28101)
This commit is contained in:
Ryan McKinley
GitHub
@@ -1,202 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { hot } from 'react-hot-loader';
|
||||
import { connect } from 'react-redux';
|
||||
import { css } from 'emotion';
|
||||
import { StoreState } from 'app/types';
|
||||
import { getNavModel } from 'app/core/selectors/navModel';
|
||||
import Page from 'app/core/components/Page/Page';
|
||||
import {
|
||||
NavModel,
|
||||
SelectableValue,
|
||||
FeatureState,
|
||||
LiveChannelScope,
|
||||
LiveChannelConfig,
|
||||
LiveChannelSupport,
|
||||
} from '@grafana/data';
|
||||
import { LivePanel } from './LivePanel';
|
||||
import { Select, FeatureInfoBox, Container } from '@grafana/ui';
|
||||
import { getGrafanaLiveCentrifugeSrv } from '../live/live';
|
||||
|
||||
interface Props {
|
||||
navModel: NavModel;
|
||||
}
|
||||
|
||||
const scopes: Array<SelectableValue<LiveChannelScope>> = [
|
||||
{ label: 'Grafana', value: LiveChannelScope.Grafana, description: 'Core grafana live features' },
|
||||
{ label: 'Data Sources', value: LiveChannelScope.DataSource, description: 'Data sources with live support' },
|
||||
{ label: 'Plugins', value: LiveChannelScope.Plugin, description: 'Plugins with live support' },
|
||||
];
|
||||
|
||||
interface State {
|
||||
scope: LiveChannelScope;
|
||||
namespace?: string;
|
||||
path?: string;
|
||||
|
||||
namespaces: Array<SelectableValue<string>>;
|
||||
paths: Array<SelectableValue<string>>;
|
||||
support?: LiveChannelSupport;
|
||||
config?: LiveChannelConfig;
|
||||
}
|
||||
|
||||
export class LiveAdmin extends PureComponent<Props, State> {
|
||||
state: State = {
|
||||
scope: LiveChannelScope.Grafana,
|
||||
namespace: 'testdata',
|
||||
path: 'random-2s-stream',
|
||||
namespaces: [],
|
||||
paths: [],
|
||||
};
|
||||
// onTextChanged: ((event: FormEvent<HTMLInputElement>) => void) | undefined;
|
||||
// onPublish: ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
|
||||
|
||||
async componentDidMount() {
|
||||
const { scope, namespace, path } = this.state;
|
||||
const srv = getGrafanaLiveCentrifugeSrv();
|
||||
const namespaces = await srv.scopes[scope].listNamespaces();
|
||||
const support = namespace ? await srv.scopes[scope].getChannelSupport(namespace) : undefined;
|
||||
const paths = support ? await support.getSupportedPaths() : undefined;
|
||||
const config = support && path ? await support.getChannelConfig(path) : undefined;
|
||||
|
||||
this.setState({
|
||||
namespaces,
|
||||
support,
|
||||
paths: paths
|
||||
? paths.map(p => ({
|
||||
label: p.path,
|
||||
value: p.path,
|
||||
description: p.description,
|
||||
}))
|
||||
: [],
|
||||
config,
|
||||
});
|
||||
}
|
||||
|
||||
onScopeChanged = async (v: SelectableValue<LiveChannelScope>) => {
|
||||
if (v.value) {
|
||||
const srv = getGrafanaLiveCentrifugeSrv();
|
||||
|
||||
this.setState({
|
||||
scope: v.value,
|
||||
namespace: undefined,
|
||||
path: undefined,
|
||||
namespaces: await srv.scopes[v.value!].listNamespaces(),
|
||||
paths: [],
|
||||
support: undefined,
|
||||
config: undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onNamespaceChanged = async (v: SelectableValue<string>) => {
|
||||
if (v.value) {
|
||||
const namespace = v.value;
|
||||
const srv = getGrafanaLiveCentrifugeSrv();
|
||||
const support = await srv.scopes[this.state.scope].getChannelSupport(namespace);
|
||||
|
||||
this.setState({
|
||||
namespace: v.value,
|
||||
paths: support!.getSupportedPaths().map(p => ({
|
||||
label: p.path,
|
||||
value: p.path,
|
||||
description: p.description,
|
||||
})),
|
||||
path: undefined,
|
||||
config: undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onPathChanged = async (v: SelectableValue<string>) => {
|
||||
if (v.value) {
|
||||
const path = v.value;
|
||||
const srv = getGrafanaLiveCentrifugeSrv();
|
||||
const support = await srv.scopes[this.state.scope].getChannelSupport(this.state.namespace!);
|
||||
if (!support) {
|
||||
this.setState({
|
||||
namespace: undefined,
|
||||
paths: [],
|
||||
config: undefined,
|
||||
support,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
path,
|
||||
support,
|
||||
config: support.getChannelConfig(path),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { navModel } = this.props;
|
||||
const { scope, namespace, namespaces, path, paths, config } = this.state;
|
||||
|
||||
return (
|
||||
<Page navModel={navModel}>
|
||||
<Page.Contents>
|
||||
<Container grow={1}>
|
||||
<FeatureInfoBox
|
||||
title="Grafana Live"
|
||||
featureState={FeatureState.alpha}
|
||||
// url={getDocsLink(DocsId.Transformations)}
|
||||
>
|
||||
<p>
|
||||
This supports real-time event streams in grafana core. This feature is under heavy development. Expect
|
||||
the intefaces and structures to change as this becomes more production ready.
|
||||
</p>
|
||||
</FeatureInfoBox>
|
||||
<br />
|
||||
<br />
|
||||
</Container>
|
||||
|
||||
<div
|
||||
className={css`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
> div {
|
||||
margin-right: 8px;
|
||||
min-width: 150px;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div>
|
||||
<h5>Scope</h5>
|
||||
<Select options={scopes} value={scopes.find(s => s.value === scope)} onChange={this.onScopeChanged} />
|
||||
</div>
|
||||
<div>
|
||||
<h5>Namespace</h5>
|
||||
<Select
|
||||
options={namespaces}
|
||||
value={namespaces.find(s => s.value === namespace) || namespace || ''}
|
||||
onChange={this.onNamespaceChanged}
|
||||
allowCustomValue={true}
|
||||
backspaceRemovesValue={true}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Path</h5>
|
||||
<Select
|
||||
options={paths}
|
||||
value={paths.find(s => s.value === path) || path || ''}
|
||||
onChange={this.onPathChanged}
|
||||
allowCustomValue={true}
|
||||
backspaceRemovesValue={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
{scope && namespace && path && <LivePanel scope={scope} namespace={namespace} path={path} config={config} />}
|
||||
</Page.Contents>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: StoreState) => ({
|
||||
navModel: getNavModel(state.navIndex, 'live'),
|
||||
});
|
||||
|
||||
export default hot(module)(connect(mapStateToProps)(LiveAdmin));
|
||||
@@ -1,150 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Unsubscribable, PartialObserver } from 'rxjs';
|
||||
import { getGrafanaLiveSrv } from '@grafana/runtime';
|
||||
import {
|
||||
AppEvents,
|
||||
isLiveChannelStatusEvent,
|
||||
LiveChannel,
|
||||
LiveChannelConfig,
|
||||
LiveChannelConnectionState,
|
||||
LiveChannelEvent,
|
||||
LiveChannelEventType,
|
||||
LiveChannelScope,
|
||||
LiveChannelStatusEvent,
|
||||
} from '@grafana/data';
|
||||
import { Input, Button } from '@grafana/ui';
|
||||
import { appEvents } from 'app/core/core';
|
||||
|
||||
interface Props {
|
||||
scope: LiveChannelScope;
|
||||
namespace: string;
|
||||
path: string;
|
||||
config?: LiveChannelConfig;
|
||||
}
|
||||
|
||||
interface State {
|
||||
channel?: LiveChannel;
|
||||
status: LiveChannelStatusEvent;
|
||||
count: number;
|
||||
lastTime: number;
|
||||
lastBody: string;
|
||||
text: string; // for publish!
|
||||
}
|
||||
|
||||
export class LivePanel extends PureComponent<Props, State> {
|
||||
state: State = {
|
||||
status: {
|
||||
type: LiveChannelEventType.Status,
|
||||
id: '?',
|
||||
state: LiveChannelConnectionState.Pending,
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
count: 0,
|
||||
lastTime: 0,
|
||||
lastBody: '',
|
||||
text: '',
|
||||
};
|
||||
subscription?: Unsubscribable;
|
||||
|
||||
streamObserver: PartialObserver<LiveChannelEvent> = {
|
||||
next: (event: LiveChannelEvent) => {
|
||||
if (isLiveChannelStatusEvent(event)) {
|
||||
this.setState({ status: event });
|
||||
} else {
|
||||
this.setState({
|
||||
count: this.state.count + 1,
|
||||
lastTime: Date.now(),
|
||||
lastBody: JSON.stringify(event),
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
startSubscription = () => {
|
||||
const { scope, namespace, path } = this.props;
|
||||
const channel = getGrafanaLiveSrv().getChannel({ scope, namespace, path });
|
||||
if (this.state.channel === channel) {
|
||||
return; // no change!
|
||||
}
|
||||
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
|
||||
this.subscription = channel.getStream().subscribe(this.streamObserver);
|
||||
this.setState({ channel });
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
this.startSubscription();
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(oldProps: Props) {
|
||||
if (oldProps.config !== this.props.config) {
|
||||
this.startSubscription();
|
||||
}
|
||||
}
|
||||
|
||||
onTextChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
this.setState({ text: event.target.value });
|
||||
};
|
||||
|
||||
onPublish = () => {
|
||||
const { text, channel } = this.state;
|
||||
if (text && channel) {
|
||||
const msg = {
|
||||
line: text,
|
||||
};
|
||||
|
||||
channel.publish!(msg)
|
||||
.then(v => {
|
||||
console.log('PUBLISHED', text, v);
|
||||
})
|
||||
.catch(err => {
|
||||
appEvents.emit(AppEvents.alertError, ['Publish error', `${err}`]);
|
||||
});
|
||||
}
|
||||
this.setState({ text: '' });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { lastBody, lastTime, count, status, text } = this.state;
|
||||
const { config } = this.props;
|
||||
const showPublish = config && config.canPublish && config.canPublish();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h5>Status: {config ? '' : '(no config)'}</h5>
|
||||
<pre>{JSON.stringify(status)}</pre>
|
||||
|
||||
<h5>Count: {count}</h5>
|
||||
{lastTime > 0 && (
|
||||
<>
|
||||
<h5>Last: {lastTime}</h5>
|
||||
{lastBody && (
|
||||
<div>
|
||||
<pre>{lastBody}</pre>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{showPublish && (
|
||||
<div>
|
||||
<h3>Write to channel</h3>
|
||||
<Input value={text} onChange={this.onTextChanged} />
|
||||
<Button onClick={this.onPublish} variant={text ? 'primary' : 'secondary'}>
|
||||
Publish
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user