mirror of https://github.com/grafana/grafana
Live: Remove (alpha) ability to configure live pipelines (#65138)
Ryan McKinley
2 years ago
committed by
GitHub
parent
b2fb7a162a
commit
f96637b5fc
|
@ -1,132 +0,0 @@ |
|||||||
import React, { useState } from 'react'; |
|
||||||
|
|
||||||
import { DataSourceRef, LiveChannelScope, SelectableValue } from '@grafana/data'; |
|
||||||
import { DataSourcePicker, getBackendSrv } from '@grafana/runtime'; |
|
||||||
import { Input, Field, Button, ValuePicker, HorizontalGroup } from '@grafana/ui'; |
|
||||||
import { useAppNotification } from 'app/core/copy/appNotification'; |
|
||||||
|
|
||||||
import { Rule } from './types'; |
|
||||||
|
|
||||||
interface Props { |
|
||||||
onRuleAdded: (rule: Rule) => void; |
|
||||||
} |
|
||||||
|
|
||||||
type PatternType = 'ds' | 'any'; |
|
||||||
|
|
||||||
const patternTypes: Array<SelectableValue<PatternType>> = [ |
|
||||||
{ |
|
||||||
label: 'Data source', |
|
||||||
description: 'Configure a channel scoped to a data source instance', |
|
||||||
value: 'ds', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'Any', |
|
||||||
description: 'Enter an arbitray channel pattern', |
|
||||||
value: 'any', |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
export function AddNewRule({ onRuleAdded }: Props) { |
|
||||||
const [patternType, setPatternType] = useState<PatternType>(); |
|
||||||
const [pattern, setPattern] = useState<string>(); |
|
||||||
const [patternPrefix, setPatternPrefix] = useState<string>(''); |
|
||||||
const [datasource, setDatasource] = useState<DataSourceRef>(); |
|
||||||
const notifyApp = useAppNotification(); |
|
||||||
|
|
||||||
const onSubmit = () => { |
|
||||||
if (!pattern) { |
|
||||||
notifyApp.error('Enter path'); |
|
||||||
return; |
|
||||||
} |
|
||||||
if (patternType === 'ds' && !patternPrefix.length) { |
|
||||||
notifyApp.error('Select datasource'); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
getBackendSrv() |
|
||||||
.post(`api/live/channel-rules`, { |
|
||||||
pattern: patternPrefix + pattern, |
|
||||||
settings: { |
|
||||||
converter: { |
|
||||||
type: 'jsonAuto', |
|
||||||
}, |
|
||||||
frameOutputs: [ |
|
||||||
{ |
|
||||||
type: 'managedStream', |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
}) |
|
||||||
.then((v: any) => { |
|
||||||
console.log('ADDED', v); |
|
||||||
setPattern(undefined); |
|
||||||
setPatternType(undefined); |
|
||||||
onRuleAdded(v.rule); |
|
||||||
}) |
|
||||||
.catch((e) => { |
|
||||||
notifyApp.error('Error adding rule', e); |
|
||||||
e.isHandled = true; |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
if (patternType) { |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<HorizontalGroup> |
|
||||||
{patternType === 'any' && ( |
|
||||||
<Field label="Pattern"> |
|
||||||
<Input |
|
||||||
value={pattern ?? ''} |
|
||||||
onChange={(e) => setPattern(e.currentTarget.value)} |
|
||||||
placeholder="scope/namespace/path" |
|
||||||
/> |
|
||||||
</Field> |
|
||||||
)} |
|
||||||
{patternType === 'ds' && ( |
|
||||||
<> |
|
||||||
<Field label="Data source"> |
|
||||||
<DataSourcePicker |
|
||||||
current={datasource} |
|
||||||
onChange={(ds) => { |
|
||||||
setDatasource(ds); |
|
||||||
setPatternPrefix(`${LiveChannelScope.DataSource}/${ds.uid}/`); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Field> |
|
||||||
<Field label="Path"> |
|
||||||
<Input value={pattern ?? ''} onChange={(e) => setPattern(e.currentTarget.value)} placeholder="path" /> |
|
||||||
</Field> |
|
||||||
</> |
|
||||||
)} |
|
||||||
|
|
||||||
<Field label=""> |
|
||||||
<Button onClick={onSubmit} variant={pattern?.length ? 'primary' : 'secondary'}> |
|
||||||
Add |
|
||||||
</Button> |
|
||||||
</Field> |
|
||||||
|
|
||||||
<Field label=""> |
|
||||||
<Button variant="secondary" onClick={() => setPatternType(undefined)}> |
|
||||||
Cancel |
|
||||||
</Button> |
|
||||||
</Field> |
|
||||||
</HorizontalGroup> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<ValuePicker |
|
||||||
label="Add channel rule" |
|
||||||
variant="secondary" |
|
||||||
size="md" |
|
||||||
icon="plus" |
|
||||||
menuPlacement="auto" |
|
||||||
isFullWidth={false} |
|
||||||
options={patternTypes} |
|
||||||
onChange={(v) => setPatternType(v.value)} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,51 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
|
|
||||||
import { getBackendSrv } from '@grafana/runtime'; |
|
||||||
import { Page } from 'app/core/components/Page/Page'; |
|
||||||
import { useNavModel } from 'app/core/hooks/useNavModel'; |
|
||||||
|
|
||||||
import { GrafanaCloudBackend } from './types'; |
|
||||||
|
|
||||||
export default function CloudAdminPage() { |
|
||||||
const navModel = useNavModel('live-cloud'); |
|
||||||
const [cloud, setCloud] = useState<GrafanaCloudBackend[]>([]); |
|
||||||
const [error, setError] = useState<string>(); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
getBackendSrv() |
|
||||||
.get(`api/live/write-configs`) |
|
||||||
.then((data) => { |
|
||||||
setCloud(data.writeConfigs); |
|
||||||
}) |
|
||||||
.catch((e) => { |
|
||||||
if (e.data) { |
|
||||||
setError(JSON.stringify(e.data, null, 2)); |
|
||||||
} |
|
||||||
}); |
|
||||||
}, []); |
|
||||||
|
|
||||||
return ( |
|
||||||
<Page navModel={navModel}> |
|
||||||
<Page.Contents> |
|
||||||
{error && <pre>{error}</pre>} |
|
||||||
{!cloud && <>Loading cloud definitions</>} |
|
||||||
{cloud && |
|
||||||
cloud.map((v) => { |
|
||||||
return ( |
|
||||||
<div key={v.uid}> |
|
||||||
<h2>{v.uid}</h2> |
|
||||||
<pre className={styles.row}>{JSON.stringify(v.settings, null, 2)}</pre> |
|
||||||
</div> |
|
||||||
); |
|
||||||
})} |
|
||||||
</Page.Contents> |
|
||||||
</Page> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
const styles = { |
|
||||||
row: css` |
|
||||||
cursor: pointer; |
|
||||||
`,
|
|
||||||
}; |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { Page } from 'app/core/components/Page/Page'; |
|
||||||
import { useNavModel } from 'app/core/hooks/useNavModel'; |
|
||||||
|
|
||||||
export default function FeatureTogglePage() { |
|
||||||
const navModel = useNavModel('live-status'); |
|
||||||
|
|
||||||
return ( |
|
||||||
<Page navModel={navModel}> |
|
||||||
<Page.Contents> |
|
||||||
<h1>Pipeline is not enabled</h1> |
|
||||||
To enable pipelines, enable the feature toggle: |
|
||||||
<pre> |
|
||||||
{`[feature_toggles]
|
|
||||||
enable = live-pipeline |
|
||||||
`}
|
|
||||||
</pre> |
|
||||||
</Page.Contents> |
|
||||||
</Page> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { Page } from 'app/core/components/Page/Page'; |
|
||||||
import { useNavModel } from 'app/core/hooks/useNavModel'; |
|
||||||
|
|
||||||
export default function CloudAdminPage() { |
|
||||||
const navModel = useNavModel('live-status'); |
|
||||||
|
|
||||||
return ( |
|
||||||
<Page navModel={navModel}> |
|
||||||
<Page.Contents>Live/Live/Live</Page.Contents> |
|
||||||
</Page> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,67 +0,0 @@ |
|||||||
import React, { useEffect, useState, ChangeEvent } from 'react'; |
|
||||||
|
|
||||||
import { getBackendSrv } from '@grafana/runtime'; |
|
||||||
import { Input } from '@grafana/ui'; |
|
||||||
import { Page } from 'app/core/components/Page/Page'; |
|
||||||
import { useNavModel } from 'app/core/hooks/useNavModel'; |
|
||||||
|
|
||||||
import { AddNewRule } from './AddNewRule'; |
|
||||||
import { PipelineTable } from './PipelineTable'; |
|
||||||
import { Rule } from './types'; |
|
||||||
|
|
||||||
export default function PipelineAdminPage() { |
|
||||||
const [rules, setRules] = useState<Rule[]>([]); |
|
||||||
const [defaultRules, setDefaultRules] = useState<any[]>([]); |
|
||||||
const [newRule, setNewRule] = useState<Rule>(); |
|
||||||
const navModel = useNavModel('live-pipeline'); |
|
||||||
const [error, setError] = useState<string>(); |
|
||||||
|
|
||||||
const loadRules = () => { |
|
||||||
getBackendSrv() |
|
||||||
.get(`api/live/channel-rules`) |
|
||||||
.then((data) => { |
|
||||||
setRules(data.rules ?? []); |
|
||||||
setDefaultRules(data.rules ?? []); |
|
||||||
}) |
|
||||||
.catch((e) => { |
|
||||||
if (e.data) { |
|
||||||
setError(JSON.stringify(e.data, null, 2)); |
|
||||||
} |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
loadRules(); |
|
||||||
}, []); |
|
||||||
|
|
||||||
const onSearchQueryChange = (e: ChangeEvent<HTMLInputElement>) => { |
|
||||||
if (e.target.value) { |
|
||||||
setRules(rules.filter((rule) => rule.pattern.toLowerCase().includes(e.target.value.toLowerCase()))); |
|
||||||
} else { |
|
||||||
setRules(defaultRules); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<Page navModel={navModel}> |
|
||||||
<Page.Contents> |
|
||||||
{error && <pre>{error}</pre>} |
|
||||||
<div className="page-action-bar"> |
|
||||||
<div className="gf-form gf-form--grow"> |
|
||||||
<Input placeholder="Search pattern..." onChange={onSearchQueryChange} /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<PipelineTable rules={rules} onRuleChanged={loadRules} selectRule={newRule} /> |
|
||||||
|
|
||||||
<AddNewRule |
|
||||||
onRuleAdded={(r: Rule) => { |
|
||||||
console.log('GOT', r, 'vs', rules[0]); |
|
||||||
setNewRule(r); |
|
||||||
loadRules(); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Page.Contents> |
|
||||||
</Page> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,142 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
|
|
||||||
import { getBackendSrv } from '@grafana/runtime'; |
|
||||||
import { Tag, IconButton } from '@grafana/ui'; |
|
||||||
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; |
|
||||||
|
|
||||||
import { RuleModal } from './RuleModal'; |
|
||||||
import { Rule, Output, RuleType } from './types'; |
|
||||||
|
|
||||||
function renderOutputTags(key: string, output?: Output): React.ReactNode { |
|
||||||
if (!output?.type) { |
|
||||||
return null; |
|
||||||
} |
|
||||||
return <Tag key={key} name={output.type} />; |
|
||||||
} |
|
||||||
|
|
||||||
interface Props { |
|
||||||
rules: Rule[]; |
|
||||||
onRuleChanged: () => void; |
|
||||||
selectRule?: Rule; |
|
||||||
} |
|
||||||
|
|
||||||
export const PipelineTable = (props: Props) => { |
|
||||||
const { rules } = props; |
|
||||||
const [isOpen, setOpen] = useState(false); |
|
||||||
const [selectedRule, setSelectedRule] = useState<Rule>(); |
|
||||||
const [clickColumn, setClickColumn] = useState<RuleType>('converter'); |
|
||||||
|
|
||||||
const onRowClick = (rule: Rule, event?: any) => { |
|
||||||
if (!rule) { |
|
||||||
return; |
|
||||||
} |
|
||||||
let column = event?.target?.getAttribute('data-column'); |
|
||||||
if (!column || column === 'pattern') { |
|
||||||
column = 'converter'; |
|
||||||
} |
|
||||||
setClickColumn(column); |
|
||||||
setSelectedRule(rule); |
|
||||||
setOpen(true); |
|
||||||
}; |
|
||||||
|
|
||||||
// Supports selecting a rule from external config (after add rule)
|
|
||||||
useEffect(() => { |
|
||||||
if (props.selectRule) { |
|
||||||
onRowClick(props.selectRule); |
|
||||||
} |
|
||||||
}, [props.selectRule]); |
|
||||||
|
|
||||||
const onRemoveRule = (pattern: string) => { |
|
||||||
getBackendSrv() |
|
||||||
.delete(`api/live/channel-rules`, JSON.stringify({ pattern: pattern })) |
|
||||||
.catch((e) => console.error(e)) |
|
||||||
.finally(() => { |
|
||||||
props.onRuleChanged(); |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
const renderPattern = (pattern: string) => { |
|
||||||
if (pattern.startsWith('ds/')) { |
|
||||||
const idx = pattern.indexOf('/', 4); |
|
||||||
if (idx > 3) { |
|
||||||
const uid = pattern.substring(3, idx); |
|
||||||
const ds = getDatasourceSrv().getInstanceSettings(uid); |
|
||||||
if (ds) { |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Tag name={ds.name} colorIndex={1} /> |
|
||||||
<span>{pattern.substring(idx + 1)}</span> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
return pattern; |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<div className="admin-list-table"> |
|
||||||
<table className="filter-table filter-table--hover form-inline"> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th>Channel</th> |
|
||||||
<th>Converter</th> |
|
||||||
<th>Processor</th> |
|
||||||
<th>Output</th> |
|
||||||
<th style={{ width: 10 }}> </th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
{rules.map((rule) => ( |
|
||||||
<tr key={rule.pattern} onClick={(e) => onRowClick(rule, e)} className={styles.row}> |
|
||||||
<td data-pattern={rule.pattern} data-column="pattern"> |
|
||||||
{renderPattern(rule.pattern)} |
|
||||||
</td> |
|
||||||
<td data-pattern={rule.pattern} data-column="converter"> |
|
||||||
{rule.settings?.converter?.type} |
|
||||||
</td> |
|
||||||
<td data-pattern={rule.pattern} data-column="processor"> |
|
||||||
{rule.settings?.frameProcessors?.map((processor) => ( |
|
||||||
<span key={rule.pattern + processor.type}>{processor.type}</span> |
|
||||||
))} |
|
||||||
</td> |
|
||||||
<td data-pattern={rule.pattern} data-column="output"> |
|
||||||
{rule.settings?.frameOutputs?.map((output) => ( |
|
||||||
<span key={rule.pattern + output.type}>{renderOutputTags('out', output)}</span> |
|
||||||
))} |
|
||||||
</td> |
|
||||||
<td> |
|
||||||
<IconButton |
|
||||||
name="trash-alt" |
|
||||||
onClick={(e) => { |
|
||||||
e.stopPropagation(); |
|
||||||
onRemoveRule(rule.pattern); |
|
||||||
}} |
|
||||||
></IconButton> |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
))} |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
</div> |
|
||||||
{isOpen && selectedRule && ( |
|
||||||
<RuleModal |
|
||||||
rule={selectedRule} |
|
||||||
isOpen={isOpen} |
|
||||||
onClose={() => { |
|
||||||
setOpen(false); |
|
||||||
}} |
|
||||||
clickColumn={clickColumn} |
|
||||||
/> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const styles = { |
|
||||||
row: css` |
|
||||||
cursor: pointer; |
|
||||||
`,
|
|
||||||
}; |
|
||||||
@ -1,128 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React, { useState, useMemo } from 'react'; |
|
||||||
|
|
||||||
import { getBackendSrv } from '@grafana/runtime'; |
|
||||||
import { Modal, TabContent, TabsBar, Tab, Button } from '@grafana/ui'; |
|
||||||
|
|
||||||
import { RuleSettingsArray } from './RuleSettingsArray'; |
|
||||||
import { RuleSettingsEditor } from './RuleSettingsEditor'; |
|
||||||
import { RuleTest } from './RuleTest'; |
|
||||||
import { Rule, RuleType, PipeLineEntitiesInfo, RuleSetting } from './types'; |
|
||||||
import { getPipeLineEntities } from './utils'; |
|
||||||
|
|
||||||
interface Props { |
|
||||||
rule: Rule; |
|
||||||
isOpen: boolean; |
|
||||||
onClose: () => void; |
|
||||||
clickColumn: RuleType; |
|
||||||
} |
|
||||||
interface TabInfo { |
|
||||||
label: string; |
|
||||||
type?: RuleType; |
|
||||||
isTest?: boolean; |
|
||||||
isConverter?: boolean; |
|
||||||
icon?: string; |
|
||||||
} |
|
||||||
const tabs: TabInfo[] = [ |
|
||||||
{ label: 'Converter', type: 'converter', isConverter: true }, |
|
||||||
{ label: 'Processors', type: 'frameProcessors' }, |
|
||||||
{ label: 'Outputs', type: 'frameOutputs' }, |
|
||||||
{ label: 'Test', isTest: true, icon: 'flask' }, |
|
||||||
]; |
|
||||||
|
|
||||||
export const RuleModal = (props: Props) => { |
|
||||||
const { isOpen, onClose, clickColumn } = props; |
|
||||||
const [rule, setRule] = useState<Rule>(props.rule); |
|
||||||
const [activeTab, setActiveTab] = useState<TabInfo | undefined>(tabs.find((t) => t.type === clickColumn)); |
|
||||||
// to show color of Save button
|
|
||||||
const [hasChange, setChange] = useState<boolean>(false); |
|
||||||
const [ruleSetting, setRuleSetting] = useState<any>(activeTab?.type ? rule?.settings?.[activeTab.type] : undefined); |
|
||||||
const [entitiesInfo, setEntitiesInfo] = useState<PipeLineEntitiesInfo>(); |
|
||||||
|
|
||||||
const onRuleSettingChange = (value: RuleSetting | RuleSetting[]) => { |
|
||||||
setChange(true); |
|
||||||
if (activeTab?.type) { |
|
||||||
setRule({ |
|
||||||
...rule, |
|
||||||
settings: { |
|
||||||
...rule.settings, |
|
||||||
[activeTab?.type]: value, |
|
||||||
}, |
|
||||||
}); |
|
||||||
} |
|
||||||
setRuleSetting(value); |
|
||||||
}; |
|
||||||
|
|
||||||
// load pipeline entities info
|
|
||||||
useMemo(() => { |
|
||||||
getPipeLineEntities().then((data) => { |
|
||||||
setEntitiesInfo(data); |
|
||||||
}); |
|
||||||
}, []); |
|
||||||
|
|
||||||
const onSave = () => { |
|
||||||
getBackendSrv() |
|
||||||
.put(`api/live/channel-rules`, rule) |
|
||||||
.then(() => { |
|
||||||
setChange(false); |
|
||||||
onClose(); |
|
||||||
}) |
|
||||||
.catch((e) => console.error(e)); |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<Modal isOpen={isOpen} title={rule.pattern} onDismiss={onClose} closeOnEscape> |
|
||||||
<TabsBar> |
|
||||||
{tabs.map((tab, index) => { |
|
||||||
return ( |
|
||||||
<Tab |
|
||||||
key={index} |
|
||||||
label={tab.label} |
|
||||||
active={tab === activeTab} |
|
||||||
icon={tab.icon as any} |
|
||||||
onChangeTab={() => { |
|
||||||
setActiveTab(tab); |
|
||||||
if (tab.type) { |
|
||||||
// to notify children of the new rule
|
|
||||||
setRuleSetting(rule?.settings?.[tab.type]); |
|
||||||
} |
|
||||||
}} |
|
||||||
/> |
|
||||||
); |
|
||||||
})} |
|
||||||
</TabsBar> |
|
||||||
<TabContent> |
|
||||||
{entitiesInfo && rule && activeTab && ( |
|
||||||
<> |
|
||||||
{activeTab?.isTest && <RuleTest rule={rule} />} |
|
||||||
{activeTab.isConverter && ( |
|
||||||
<RuleSettingsEditor |
|
||||||
onChange={onRuleSettingChange} |
|
||||||
value={ruleSetting} |
|
||||||
ruleType={'converter'} |
|
||||||
entitiesInfo={entitiesInfo} |
|
||||||
/> |
|
||||||
)} |
|
||||||
{!activeTab.isConverter && activeTab.type && ( |
|
||||||
<RuleSettingsArray |
|
||||||
onChange={onRuleSettingChange} |
|
||||||
value={ruleSetting} |
|
||||||
ruleType={activeTab.type} |
|
||||||
entitiesInfo={entitiesInfo} |
|
||||||
/> |
|
||||||
)} |
|
||||||
</> |
|
||||||
)} |
|
||||||
<Button onClick={onSave} className={styles.save} variant={hasChange ? 'primary' : 'secondary'}> |
|
||||||
Save |
|
||||||
</Button> |
|
||||||
</TabContent> |
|
||||||
</Modal> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const styles = { |
|
||||||
save: css` |
|
||||||
margin-top: 5px; |
|
||||||
`,
|
|
||||||
}; |
|
||||||
@ -1,51 +0,0 @@ |
|||||||
import React, { useState } from 'react'; |
|
||||||
|
|
||||||
import { SelectableValue } from '@grafana/data'; |
|
||||||
import { Select } from '@grafana/ui'; |
|
||||||
|
|
||||||
import { RuleSettingsEditor } from './RuleSettingsEditor'; |
|
||||||
import { RuleType, RuleSetting, PipeLineEntitiesInfo } from './types'; |
|
||||||
|
|
||||||
interface Props { |
|
||||||
ruleType: RuleType; |
|
||||||
onChange: (value: RuleSetting[]) => void; |
|
||||||
value: RuleSetting[]; |
|
||||||
entitiesInfo: PipeLineEntitiesInfo; |
|
||||||
} |
|
||||||
|
|
||||||
export const RuleSettingsArray = ({ onChange, value, ruleType, entitiesInfo }: Props) => { |
|
||||||
const [index, setIndex] = useState<number>(0); |
|
||||||
const arr = value ?? []; |
|
||||||
const onRuleChange = (v: RuleSetting) => { |
|
||||||
if (!value) { |
|
||||||
onChange([v]); |
|
||||||
} else { |
|
||||||
const copy = [...value]; |
|
||||||
copy[index] = v; |
|
||||||
onChange(copy); |
|
||||||
} |
|
||||||
}; |
|
||||||
// create array of value.length + 1
|
|
||||||
let indexArr: Array<SelectableValue<number>> = []; |
|
||||||
for (let i = 0; i <= arr.length; i++) { |
|
||||||
indexArr.push({ |
|
||||||
label: `${ruleType}: ${i}`, |
|
||||||
value: i, |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<Select |
|
||||||
placeholder="Select an index" |
|
||||||
options={indexArr} |
|
||||||
value={index} |
|
||||||
onChange={(index) => { |
|
||||||
// set index to find the correct setting
|
|
||||||
setIndex(index.value!); |
|
||||||
}} |
|
||||||
></Select> |
|
||||||
<RuleSettingsEditor onChange={onRuleChange} value={arr[index]} ruleType={ruleType} entitiesInfo={entitiesInfo} /> |
|
||||||
</> |
|
||||||
); |
|
||||||
}; |
|
||||||
@ -1,48 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { CodeEditor, Select } from '@grafana/ui'; |
|
||||||
|
|
||||||
import { RuleType, RuleSetting, PipeLineEntitiesInfo } from './types'; |
|
||||||
|
|
||||||
interface Props { |
|
||||||
ruleType: RuleType; |
|
||||||
onChange: (value: RuleSetting) => void; |
|
||||||
value: RuleSetting; |
|
||||||
entitiesInfo: PipeLineEntitiesInfo; |
|
||||||
} |
|
||||||
|
|
||||||
export const RuleSettingsEditor = ({ onChange, value, ruleType, entitiesInfo }: Props) => { |
|
||||||
return ( |
|
||||||
<> |
|
||||||
<Select |
|
||||||
key={ruleType} |
|
||||||
options={entitiesInfo[ruleType]} |
|
||||||
placeholder="Select an option" |
|
||||||
value={value?.type ?? ''} |
|
||||||
onChange={(value) => { |
|
||||||
// set the body with example
|
|
||||||
const type = value.value; |
|
||||||
onChange({ |
|
||||||
type, |
|
||||||
[type]: entitiesInfo.getExample(ruleType, type), |
|
||||||
}); |
|
||||||
}} |
|
||||||
/> |
|
||||||
<CodeEditor |
|
||||||
height={'50vh'} |
|
||||||
value={value ? JSON.stringify(value[value.type], null, '\t') : ''} |
|
||||||
showLineNumbers={true} |
|
||||||
readOnly={false} |
|
||||||
language="json" |
|
||||||
showMiniMap={false} |
|
||||||
onBlur={(text: string) => { |
|
||||||
const body = JSON.parse(text); |
|
||||||
onChange({ |
|
||||||
type: value.type, |
|
||||||
[value.type]: body, |
|
||||||
}); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</> |
|
||||||
); |
|
||||||
}; |
|
||||||
@ -1,78 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React, { useState } from 'react'; |
|
||||||
|
|
||||||
import { dataFrameFromJSON, getDisplayProcessor } from '@grafana/data'; |
|
||||||
import { getBackendSrv, config } from '@grafana/runtime'; |
|
||||||
import { Button, CodeEditor, Table, Field } from '@grafana/ui'; |
|
||||||
|
|
||||||
import { ChannelFrame, Rule } from './types'; |
|
||||||
|
|
||||||
interface Props { |
|
||||||
rule: Rule; |
|
||||||
} |
|
||||||
|
|
||||||
export const RuleTest = (props: Props) => { |
|
||||||
const [response, setResponse] = useState<ChannelFrame[]>(); |
|
||||||
const [data, setData] = useState<string>(); |
|
||||||
|
|
||||||
const onBlur = (text: string) => { |
|
||||||
setData(text); |
|
||||||
}; |
|
||||||
|
|
||||||
const onClick = () => { |
|
||||||
getBackendSrv() |
|
||||||
.post(`api/live/pipeline-convert-test`, { |
|
||||||
channelRules: [props.rule], |
|
||||||
channel: props.rule.pattern, |
|
||||||
data: data, |
|
||||||
}) |
|
||||||
.then((data: any) => { |
|
||||||
const t = data.channelFrames as any[]; |
|
||||||
if (t) { |
|
||||||
setResponse( |
|
||||||
t.map((f) => { |
|
||||||
const frame = dataFrameFromJSON(f.frame); |
|
||||||
for (const field of frame.fields) { |
|
||||||
field.display = getDisplayProcessor({ field, theme: config.theme2 }); |
|
||||||
} |
|
||||||
return { channel: f.channel, frame }; |
|
||||||
}) |
|
||||||
); |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e) => { |
|
||||||
setResponse(e); |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<CodeEditor |
|
||||||
height={100} |
|
||||||
value="" |
|
||||||
showLineNumbers={true} |
|
||||||
readOnly={false} |
|
||||||
language="json" |
|
||||||
showMiniMap={false} |
|
||||||
onBlur={onBlur} |
|
||||||
/> |
|
||||||
|
|
||||||
<Button onClick={onClick} className={styles.margin}> |
|
||||||
Test |
|
||||||
</Button> |
|
||||||
|
|
||||||
{response?.length && |
|
||||||
response.map((r) => ( |
|
||||||
<Field key={r.channel} label={r.channel}> |
|
||||||
<Table data={r.frame} width={700} height={Math.min(10 * r.frame.length + 10, 150)} showTypeIcons></Table> |
|
||||||
</Field> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const styles = { |
|
||||||
margin: css` |
|
||||||
margin-bottom: 15px; |
|
||||||
`,
|
|
||||||
}; |
|
||||||
@ -1,40 +0,0 @@ |
|||||||
import { SafeDynamicImport } from 'app/core/components/DynamicImports/SafeDynamicImport'; |
|
||||||
import { config } from 'app/core/config'; |
|
||||||
import { RouteDescriptor } from 'app/core/navigation/types'; |
|
||||||
import { isGrafanaAdmin } from 'app/features/plugins/admin/permissions'; |
|
||||||
|
|
||||||
const liveRoutes = [ |
|
||||||
{ |
|
||||||
path: '/live', |
|
||||||
component: SafeDynamicImport( |
|
||||||
() => import(/* webpackChunkName: "LiveStatusPage" */ 'app/features/live/pages/LiveStatusPage') |
|
||||||
), |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/live/pipeline', |
|
||||||
component: SafeDynamicImport( |
|
||||||
() => import(/* webpackChunkName: "PipelineAdminPage" */ 'app/features/live/pages/PipelineAdminPage') |
|
||||||
), |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/live/cloud', |
|
||||||
component: SafeDynamicImport( |
|
||||||
() => import(/* webpackChunkName: "CloudAdminPage" */ 'app/features/live/pages/CloudAdminPage') |
|
||||||
), |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
export function getLiveRoutes(cfg = config): RouteDescriptor[] { |
|
||||||
if (!isGrafanaAdmin()) { |
|
||||||
return []; |
|
||||||
} |
|
||||||
if (cfg.featureToggles['live-pipeline']) { |
|
||||||
return liveRoutes; |
|
||||||
} |
|
||||||
return liveRoutes.map((v) => ({ |
|
||||||
...v, |
|
||||||
component: SafeDynamicImport( |
|
||||||
() => import(/* webpackChunkName: "FeatureTogglePage" */ 'app/features/live/pages/FeatureTogglePage') |
|
||||||
), |
|
||||||
})); |
|
||||||
} |
|
||||||
@ -1,61 +0,0 @@ |
|||||||
import { DataFrame, SelectableValue } from '@grafana/data'; |
|
||||||
export interface Converter extends RuleSetting { |
|
||||||
[t: string]: any; |
|
||||||
} |
|
||||||
|
|
||||||
export interface Processor extends RuleSetting { |
|
||||||
[t: string]: any; |
|
||||||
} |
|
||||||
|
|
||||||
export interface Output extends RuleSetting { |
|
||||||
[t: string]: any; |
|
||||||
} |
|
||||||
|
|
||||||
export interface RuleSetting<T = any> { |
|
||||||
type: string; |
|
||||||
[key: string]: any; |
|
||||||
} |
|
||||||
export interface RuleSettings { |
|
||||||
converter?: Converter; |
|
||||||
frameProcessors?: Processor[]; |
|
||||||
frameOutputs?: Output[]; |
|
||||||
} |
|
||||||
|
|
||||||
export interface Rule { |
|
||||||
pattern: string; |
|
||||||
settings: RuleSettings; |
|
||||||
} |
|
||||||
|
|
||||||
export interface Pipeline { |
|
||||||
rules: Rule[]; |
|
||||||
} |
|
||||||
|
|
||||||
export interface GrafanaCloudBackend { |
|
||||||
uid: string; |
|
||||||
settings: any; |
|
||||||
} |
|
||||||
|
|
||||||
export type RuleType = 'converter' | 'frameProcessors' | 'frameOutputs'; |
|
||||||
|
|
||||||
export interface PipelineListOption { |
|
||||||
type: string; |
|
||||||
description: string; |
|
||||||
example?: object; |
|
||||||
} |
|
||||||
export interface EntitiesTypes { |
|
||||||
converters: PipelineListOption[]; |
|
||||||
frameProcessors: PipelineListOption[]; |
|
||||||
frameOutputs: PipelineListOption[]; |
|
||||||
} |
|
||||||
|
|
||||||
export interface PipeLineEntitiesInfo { |
|
||||||
converter: SelectableValue[]; |
|
||||||
frameProcessors: SelectableValue[]; |
|
||||||
frameOutputs: SelectableValue[]; |
|
||||||
getExample: (rule: RuleType, type: string) => object; |
|
||||||
} |
|
||||||
|
|
||||||
export interface ChannelFrame { |
|
||||||
channel: string; |
|
||||||
frame: DataFrame; |
|
||||||
} |
|
||||||
@ -1,31 +0,0 @@ |
|||||||
import { getBackendSrv } from '@grafana/runtime'; |
|
||||||
|
|
||||||
import { PipelineListOption, PipeLineEntitiesInfo } from './types'; |
|
||||||
|
|
||||||
export async function getPipeLineEntities(): Promise<PipeLineEntitiesInfo> { |
|
||||||
return await getBackendSrv() |
|
||||||
.get(`api/live/pipeline-entities`) |
|
||||||
.then((data) => { |
|
||||||
return { |
|
||||||
converter: transformLabel(data, 'converters'), |
|
||||||
frameProcessors: transformLabel(data, 'frameProcessors'), |
|
||||||
frameOutputs: transformLabel(data, 'frameOutputs'), |
|
||||||
getExample: (ruleType, type) => { |
|
||||||
return data[`${ruleType}s`]?.filter((option: PipelineListOption) => option.type === type)?.[0]?.['example']; |
|
||||||
}, |
|
||||||
}; |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
export function transformLabel(data: any, key: keyof typeof data) { |
|
||||||
if (Array.isArray(data)) { |
|
||||||
return data.map((d) => ({ |
|
||||||
label: d[key], |
|
||||||
value: d[key], |
|
||||||
})); |
|
||||||
} |
|
||||||
return data[key].map((typeObj: PipelineListOption) => ({ |
|
||||||
label: typeObj.type, |
|
||||||
value: typeObj.type, |
|
||||||
})); |
|
||||||
} |
|
||||||
@ -1,132 +0,0 @@ |
|||||||
/* Do not change, this code is generated from Golang structs */ |
|
||||||
|
|
||||||
import { FieldConfig } from '@grafana/data'; |
|
||||||
|
|
||||||
export interface ChannelAuthCheckConfig { |
|
||||||
role?: string; |
|
||||||
} |
|
||||||
export interface ChannelAuthConfig { |
|
||||||
subscribe?: ChannelAuthCheckConfig; |
|
||||||
publish?: ChannelAuthCheckConfig; |
|
||||||
} |
|
||||||
export interface ChangeLogOutputConfig { |
|
||||||
fieldName: string; |
|
||||||
channel: string; |
|
||||||
} |
|
||||||
export interface RemoteWriteOutputConfig { |
|
||||||
uid: string; |
|
||||||
sampleMilliseconds: number; |
|
||||||
} |
|
||||||
export interface ThresholdOutputConfig { |
|
||||||
fieldName: string; |
|
||||||
channel: string; |
|
||||||
} |
|
||||||
export interface NumberCompareFrameConditionConfig { |
|
||||||
fieldName: string; |
|
||||||
op: string; |
|
||||||
value: number; |
|
||||||
} |
|
||||||
export interface MultipleFrameConditionCheckerConfig { |
|
||||||
conditionType: string; |
|
||||||
conditions: FrameConditionCheckerConfig[]; |
|
||||||
} |
|
||||||
export interface FrameConditionCheckerConfig { |
|
||||||
type: Omit<keyof FrameConditionCheckerConfig, 'type'>; |
|
||||||
multiple?: MultipleFrameConditionCheckerConfig; |
|
||||||
numberCompare?: NumberCompareFrameConditionConfig; |
|
||||||
} |
|
||||||
export interface ConditionalOutputConfig { |
|
||||||
condition?: FrameConditionCheckerConfig; |
|
||||||
output?: FrameOutputterConfig; |
|
||||||
} |
|
||||||
export interface RedirectOutputConfig { |
|
||||||
channel: string; |
|
||||||
} |
|
||||||
export interface MultipleOutputterConfig { |
|
||||||
outputs: FrameOutputterConfig[]; |
|
||||||
} |
|
||||||
export interface ManagedStreamOutputConfig {} |
|
||||||
export interface FrameOutputterConfig { |
|
||||||
type: Omit<keyof FrameOutputterConfig, 'type'>; |
|
||||||
managedStream?: ManagedStreamOutputConfig; |
|
||||||
multiple?: MultipleOutputterConfig; |
|
||||||
redirect?: RedirectOutputConfig; |
|
||||||
conditional?: ConditionalOutputConfig; |
|
||||||
threshold?: ThresholdOutputConfig; |
|
||||||
remoteWrite?: RemoteWriteOutputConfig; |
|
||||||
loki?: LokiOutputConfig; |
|
||||||
changeLog?: ChangeLogOutputConfig; |
|
||||||
} |
|
||||||
export interface MultipleFrameProcessorConfig { |
|
||||||
processors: FrameProcessorConfig[]; |
|
||||||
} |
|
||||||
export interface KeepFieldsFrameProcessorConfig { |
|
||||||
fieldNames: string[]; |
|
||||||
} |
|
||||||
export interface DropFieldsFrameProcessorConfig { |
|
||||||
fieldNames: string[]; |
|
||||||
} |
|
||||||
export interface FrameProcessorConfig { |
|
||||||
type: Omit<keyof FrameProcessorConfig, 'type'>; |
|
||||||
dropFields?: DropFieldsFrameProcessorConfig; |
|
||||||
keepFields?: KeepFieldsFrameProcessorConfig; |
|
||||||
multiple?: MultipleFrameProcessorConfig; |
|
||||||
} |
|
||||||
export interface JsonFrameConverterConfig {} |
|
||||||
export interface AutoInfluxConverterConfig { |
|
||||||
frameFormat: string; |
|
||||||
} |
|
||||||
export interface ExactJsonConverterConfig { |
|
||||||
fields: Field[]; |
|
||||||
} |
|
||||||
export interface Label { |
|
||||||
name: string; |
|
||||||
value: string; |
|
||||||
} |
|
||||||
export interface Field { |
|
||||||
name: string; |
|
||||||
type: number; |
|
||||||
value: string; |
|
||||||
labels?: Label[]; |
|
||||||
config?: FieldConfig; |
|
||||||
} |
|
||||||
export interface AutoJsonConverterConfig { |
|
||||||
fieldTips?: { [key: string]: Field }; |
|
||||||
} |
|
||||||
export interface ConverterConfig { |
|
||||||
type: Omit<keyof ConverterConfig, 'type'>; |
|
||||||
jsonAuto?: AutoJsonConverterConfig; |
|
||||||
jsonExact?: ExactJsonConverterConfig; |
|
||||||
influxAuto?: AutoInfluxConverterConfig; |
|
||||||
jsonFrame?: JsonFrameConverterConfig; |
|
||||||
} |
|
||||||
export interface LokiOutputConfig { |
|
||||||
uid: string; |
|
||||||
} |
|
||||||
export interface RedirectDataOutputConfig { |
|
||||||
channel: string; |
|
||||||
} |
|
||||||
export interface DataOutputterConfig { |
|
||||||
type: Omit<keyof DataOutputterConfig, 'type'>; |
|
||||||
redirect?: RedirectDataOutputConfig; |
|
||||||
loki?: LokiOutputConfig; |
|
||||||
} |
|
||||||
export interface MultipleSubscriberConfig { |
|
||||||
subscribers: SubscriberConfig[]; |
|
||||||
} |
|
||||||
export interface SubscriberConfig { |
|
||||||
type: Omit<keyof SubscriberConfig, 'type'>; |
|
||||||
multiple?: MultipleSubscriberConfig; |
|
||||||
} |
|
||||||
export interface ChannelRuleSettings { |
|
||||||
auth?: ChannelAuthConfig; |
|
||||||
subscribers?: SubscriberConfig[]; |
|
||||||
dataOutputs?: DataOutputterConfig[]; |
|
||||||
converter?: ConverterConfig; |
|
||||||
frameProcessors?: FrameProcessorConfig[]; |
|
||||||
frameOutputs?: FrameOutputterConfig[]; |
|
||||||
} |
|
||||||
export interface ChannelRule { |
|
||||||
pattern: string; |
|
||||||
settings: ChannelRuleSettings; |
|
||||||
} |
|
||||||
Loading…
Reference in new issue