@ant-design/icons#LineChartOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#LineChartOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: general-chart.editor.tsx From next-basics with GNU General Public License v3.0 | 6 votes |
|
export function GeneralChartEditor({
nodeUid,
}: EditorComponentProps): React.ReactElement {
const node = useBuilderNode<GeneralChartProperties>({ nodeUid });
return (
<EditorContainer nodeUid={nodeUid}>
<div className={styles.chartContainer}>
<div className={styles.layout}>
<BarChartOutlined className={styles.chartIcon} />
</div>
<div className={styles.layout}>
<LineChartOutlined className={styles.chartIcon} />
</div>
<div className={styles.layout}>
<PieChartFilled className={styles.chartIcon} />
</div>
<div className={styles.layout}>
<AreaChartOutlined className={styles.chartIcon} />
</div>
</div>
</EditorContainer>
);
}
Example #2
| Source File: index.tsx From fe-v5 with Apache License 2.0 | 6 votes |
|
MetricExplorerPage: React.FC = () => {
const [metrics, setMetrics] = useState<string[]>([]);
const { clusters } = useSelector<CommonRootState, CommonStoreState>((state) => state.common);
const [rerenderFlag, setRerenderFlag] = useState(_.uniqueId('rerenderFlag_'));
useEffect(() => {
if (clusters.length) {
getMetrics()
.then((res) => {
setMetrics(res.data || []);
})
.catch(() => {
setMetrics([]);
});
}
}, [clusters, rerenderFlag]);
return (
<PageLayout
title='即时查询'
icon={<LineChartOutlined />}
hideCluster={false}
onChangeCluster={() => {
setRerenderFlag(_.uniqueId('rerenderFlag_'));
}}
>
<div className='prometheus-page' key={rerenderFlag}>
<PanelList metrics={metrics} />
</div>
</PageLayout>
);
}
Example #3
| Source File: ToggleButtonChartFilter.tsx From posthog-foss with MIT License | 5 votes |
|
export function ToggleButtonChartFilter({
onChange = noop,
disabled = false,
simpleMode,
}: ToggleButtonChartFilterProps): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
const { clickhouseFeaturesEnabled, aggregationTargetLabel } = useValues(funnelLogic(insightProps))
const { chartFilter } = useValues(chartFilterLogic(insightProps))
const { setChartFilter } = useActions(chartFilterLogic(insightProps))
const defaultDisplay = FunnelVizType.Steps
const options = [
{
key: FunnelVizType.Steps,
label: 'Conversion steps',
description: `Track ${aggregationTargetLabel.plural} progress between steps of the funnel`,
icon: <FunnelPlotOutlined />,
},
{
key: FunnelVizType.TimeToConvert,
label: 'Time to convert',
description: `Track how long it takes for ${aggregationTargetLabel.plural} to convert`,
icon: <ClockCircleOutlined />,
hidden: !clickhouseFeaturesEnabled,
},
{
key: FunnelVizType.Trends,
label: 'Historical trends',
description: "Track how this funnel's conversion rate is trending over time",
icon: <LineChartOutlined />,
hidden: !clickhouseFeaturesEnabled,
},
]
if (options.filter((option) => !option.hidden).length <= 1) {
return null
}
const innerContent = (
<div className="funnel-chart-filter">
<DropdownSelector
options={options}
value={chartFilter || defaultDisplay}
onValueChange={(val) => {
const valueTyped = val as FunnelVizType
setChartFilter(valueTyped)
onChange(valueTyped)
}}
disabled={disabled}
hideDescriptionOnDisplay
compact={simpleMode}
/>
</div>
)
return simpleMode ? (
innerContent
) : (
<div>
<h4 className="secondary">Graph Type</h4>
{innerContent}
</div>
)
}
Example #4
| Source File: index.tsx From fe-v5 with Apache License 2.0 | 5 votes |
|
export default function index() {
const [match, setMatch] = useState<IMatch>();
const [range, setRange] = useState<Range>({
num: 1,
unit: 'hour',
description: 'hour',
});
const [rerenderFlag, setRerenderFlag] = useState(_.uniqueId('rerenderFlag_'));
return (
<PageLayout
title='快捷视图'
icon={<LineChartOutlined />}
hideCluster={false}
onChangeCluster={() => {
setRerenderFlag(_.uniqueId('rerenderFlag_'));
}}
>
<div className='n9e-metric-views' key={rerenderFlag}>
<List
onSelect={(record: IMatch) => {
setMatch(record);
}}
range={range}
/>
{match ? (
<>
<LabelsValues
range={range}
value={match}
onChange={(val) => {
setMatch(val);
}}
/>
<Metrics range={range} setRange={setRange} match={match} />
</>
) : null}
</div>
</PageLayout>
);
}
Example #5
| Source File: ChartFilter.tsx From posthog-foss with MIT License | 4 votes |
|
export function ChartFilter({ filters, onChange, disabled }: ChartFilterProps): JSX.Element {
const { insightProps } = useValues(insightLogic)
const { chartFilter } = useValues(chartFilterLogic(insightProps))
const { setChartFilter } = useActions(chartFilterLogic(insightProps))
const { preflight } = useValues(preflightLogic)
const cumulativeDisabled = filters.insight === InsightType.STICKINESS || filters.insight === InsightType.RETENTION
const tableDisabled = false
const pieDisabled = filters.insight === InsightType.RETENTION || filters.insight === InsightType.STICKINESS
const barDisabled = filters.insight === InsightType.RETENTION
const barValueDisabled =
barDisabled || filters.insight === InsightType.STICKINESS || filters.insight === InsightType.RETENTION
const defaultDisplay: ChartDisplayType =
filters.insight === InsightType.RETENTION
? ChartDisplayType.ActionsTable
: filters.insight === InsightType.FUNNELS
? ChartDisplayType.FunnelViz
: ChartDisplayType.ActionsLineGraphLinear
function Label({ icon, children = null }: { icon: React.ReactNode; children: React.ReactNode }): JSX.Element {
return (
<>
{icon} {children}
</>
)
}
function WarningTag({ children = null }: { children: React.ReactNode }): JSX.Element {
return (
<Tag color="orange" style={{ marginLeft: 8, fontSize: 10 }}>
{children}
</Tag>
)
}
const options =
filters.insight === InsightType.FUNNELS
? preflight?.is_clickhouse_enabled
? [
{
value: FunnelVizType.Steps,
label: <Label icon={<OrderedListOutlined />}>Steps</Label>,
},
{
value: FunnelVizType.Trends,
label: (
<Label icon={<LineChartOutlined />}>
Trends
<WarningTag>BETA</WarningTag>
</Label>
),
},
]
: [
{
value: FunnelVizType.Steps,
label: <Label icon={<OrderedListOutlined />}>Steps</Label>,
},
]
: [
{
label: 'Line Chart',
options: [
{
value: ChartDisplayType.ActionsLineGraphLinear,
label: <Label icon={<LineChartOutlined />}>Linear</Label>,
},
{
value: ChartDisplayType.ActionsLineGraphCumulative,
label: <Label icon={<AreaChartOutlined />}>Cumulative</Label>,
disabled: cumulativeDisabled,
},
],
},
{
label: 'Bar Chart',
options: [
{
value: ChartDisplayType.ActionsBarChart,
label: <Label icon={<BarChartOutlined />}>Time</Label>,
disabled: barDisabled,
},
{
value: ChartDisplayType.ActionsBarChartValue,
label: <Label icon={<BarChartOutlined />}>Value</Label>,
disabled: barValueDisabled,
},
],
},
{
value: ChartDisplayType.ActionsTable,
label: <Label icon={<TableOutlined />}>Table</Label>,
disabled: tableDisabled,
},
{
value: ChartDisplayType.ActionsPieChart,
label: <Label icon={<PieChartOutlined />}>Pie</Label>,
disabled: pieDisabled,
},
]
return (
<Select
key="2"
defaultValue={filters.display || defaultDisplay}
value={chartFilter || defaultDisplay}
onChange={(value: ChartDisplayType | FunnelVizType) => {
setChartFilter(value)
onChange?.(value)
}}
bordered
dropdownAlign={ANTD_TOOLTIP_PLACEMENTS.bottomRight}
dropdownMatchSelectWidth={false}
data-attr="chart-filter"
disabled={disabled}
options={options}
/>
)
}
Example #6
| Source File: commandPaletteLogic.ts From posthog-foss with MIT License | 4 votes |
|
commandPaletteLogic = kea<
commandPaletteLogicType<
Command,
CommandFlow,
CommandRegistrations,
CommandResult,
CommandResultDisplayable,
RegExpCommandPairs
>
>({
path: ['lib', 'components', 'CommandPalette', 'commandPaletteLogic'],
connect: {
actions: [personalAPIKeysLogic, ['createKey']],
values: [teamLogic, ['currentTeam'], userLogic, ['user']],
logic: [preflightLogic], // used in afterMount, which does not auto-connect
},
actions: {
hidePalette: true,
showPalette: true,
togglePalette: true,
setInput: (input: string) => ({ input }),
onArrowUp: true,
onArrowDown: (maxIndex: number) => ({ maxIndex }),
onMouseEnterResult: (index: number) => ({ index }),
onMouseLeaveResult: true,
executeResult: (result: CommandResult) => ({ result }),
activateFlow: (flow: CommandFlow | null) => ({ flow }),
backFlow: true,
registerCommand: (command: Command) => ({ command }),
deregisterCommand: (commandKey: string) => ({ commandKey }),
setCustomCommand: (commandKey: string) => ({ commandKey }),
deregisterScope: (scope: string) => ({ scope }),
},
reducers: {
isPaletteShown: [
false,
{
hidePalette: () => false,
showPalette: () => true,
togglePalette: (previousState) => !previousState,
},
],
keyboardResultIndex: [
0,
{
setInput: () => 0,
executeResult: () => 0,
activateFlow: () => 0,
backFlow: () => 0,
onArrowUp: (previousIndex) => (previousIndex > 0 ? previousIndex - 1 : 0),
onArrowDown: (previousIndex, { maxIndex }) => (previousIndex < maxIndex ? previousIndex + 1 : maxIndex),
},
],
hoverResultIndex: [
null as number | null,
{
activateFlow: () => null,
backFlow: () => null,
onMouseEnterResult: (_, { index }) => index,
onMouseLeaveResult: () => null,
onArrowUp: () => null,
onArrowDown: () => null,
},
],
input: [
'',
{
setInput: (_, { input }) => input,
activateFlow: () => '',
backFlow: () => '',
executeResult: () => '',
},
],
activeFlow: [
null as CommandFlow | null,
{
activateFlow: (currentFlow, { flow }) =>
flow ? { ...flow, scope: flow.scope ?? currentFlow?.scope, previousFlow: currentFlow } : null,
backFlow: (currentFlow) => currentFlow?.previousFlow ?? null,
},
],
rawCommandRegistrations: [
{} as CommandRegistrations,
{
registerCommand: (commands, { command }) => {
return { ...commands, [command.key]: command }
},
deregisterCommand: (commands, { commandKey }) => {
const { [commandKey]: _, ...cleanedCommands } = commands // eslint-disable-line
return cleanedCommands
},
},
],
},
listeners: ({ actions, values }) => ({
showPalette: () => {
posthog.capture('palette shown', { isMobile: isMobile() })
},
togglePalette: () => {
if (values.isPaletteShown) {
posthog.capture('palette shown', { isMobile: isMobile() })
}
},
executeResult: ({ result }: { result: CommandResult }) => {
if (result.executor === true) {
actions.activateFlow(null)
actions.hidePalette()
} else {
const possibleFlow = result.executor?.() || null
actions.activateFlow(possibleFlow)
if (!possibleFlow) {
actions.hidePalette()
}
}
// Capture command execution, without useless data
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { icon, index, ...cleanedResult }: Record<string, any> = result
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { resolver, ...cleanedCommand } = cleanedResult.source
cleanedResult.source = cleanedCommand
cleanedResult.isMobile = isMobile()
posthog.capture('palette command executed', cleanedResult)
},
deregisterScope: ({ scope }) => {
for (const command of Object.values(values.commandRegistrations)) {
if (command.scope === scope) {
actions.deregisterCommand(command.key)
}
}
},
setInput: async ({ input }, breakpoint) => {
await breakpoint(300)
if (input.length > 8) {
const response = await api.get('api/person/?key_identifier=' + encodeURIComponent(input))
const person = response.results[0]
if (person) {
actions.registerCommand({
key: `person-${person.distinct_ids[0]}`,
resolver: [
{
icon: UserOutlined,
display: `View person ${input}`,
executor: () => {
const { push } = router.actions
push(urls.person(person.distinct_ids[0]))
},
},
],
scope: GLOBAL_COMMAND_SCOPE,
})
}
}
},
}),
selectors: {
isSqueak: [
(selectors) => [selectors.input],
(input: string) => {
return input.trim().toLowerCase() === 'squeak'
},
],
activeResultIndex: [
(selectors) => [selectors.keyboardResultIndex, selectors.hoverResultIndex],
(keyboardResultIndex: number, hoverResultIndex: number | null) => {
return hoverResultIndex ?? keyboardResultIndex
},
],
commandRegistrations: [
(selectors) => [
selectors.rawCommandRegistrations,
dashboardsModel.selectors.nameSortedDashboards,
teamLogic.selectors.currentTeam,
],
(rawCommandRegistrations: CommandRegistrations, dashboards: DashboardType[]): CommandRegistrations => ({
...rawCommandRegistrations,
custom_dashboards: {
key: 'custom_dashboards',
resolver: dashboards.map((dashboard: DashboardType) => ({
key: `dashboard_${dashboard.id}`,
icon: LineChartOutlined,
display: `Go to Dashboard: ${dashboard.name}`,
executor: () => {
const { push } = router.actions
push(urls.dashboard(dashboard.id))
},
})),
scope: GLOBAL_COMMAND_SCOPE,
},
}),
],
regexpCommandPairs: [
(selectors) => [selectors.commandRegistrations],
(commandRegistrations: CommandRegistrations) => {
const array: RegExpCommandPairs = []
for (const command of Object.values(commandRegistrations)) {
if (command.prefixes) {
array.push([new RegExp(`^\\s*(${command.prefixes.join('|')})(?:\\s+(.*)|$)`, 'i'), command])
} else {
array.push([null, command])
}
}
return array
},
],
commandSearchResults: [
(selectors) => [
selectors.isPaletteShown,
selectors.regexpCommandPairs,
selectors.input,
selectors.activeFlow,
selectors.isSqueak,
],
(
isPaletteShown: boolean,
regexpCommandPairs: RegExpCommandPairs,
argument: string,
activeFlow: CommandFlow | null,
isSqueak: boolean
) => {
if (!isPaletteShown || isSqueak) {
return []
}
if (activeFlow) {
return resolveCommand(activeFlow, argument)
}
let directResults: CommandResult[] = []
let prefixedResults: CommandResult[] = []
for (const [regexp, command] of regexpCommandPairs) {
if (regexp) {
const match = argument.match(regexp)
if (match && match[1]) {
prefixedResults = [...prefixedResults, ...resolveCommand(command, match[2], match[1])]
}
}
directResults = [...directResults, ...resolveCommand(command, argument)]
}
const allResults = directResults.concat(prefixedResults)
let fusableResults: CommandResult[] = []
let guaranteedResults: CommandResult[] = []
for (const result of allResults) {
if (result.guarantee) {
guaranteedResults.push(result)
} else {
fusableResults.push(result)
}
}
fusableResults = uniqueBy(fusableResults, (result) => result.display)
guaranteedResults = uniqueBy(guaranteedResults, (result) => result.display)
const fusedResults = argument
? new Fuse(fusableResults, {
keys: ['display', 'synonyms'],
})
.search(argument)
.slice(0, RESULTS_MAX)
.map((result) => result.item)
: sample(fusableResults, RESULTS_MAX - guaranteedResults.length)
return guaranteedResults.concat(fusedResults)
},
],
commandSearchResultsGrouped: [
(selectors) => [selectors.commandSearchResults, selectors.activeFlow],
(commandSearchResults: CommandResult[], activeFlow: CommandFlow | null) => {
const resultsGrouped: {
[scope: string]: CommandResult[]
} = {}
if (activeFlow) {
resultsGrouped[activeFlow.scope ?? '?'] = []
}
for (const result of commandSearchResults) {
const scope: string = result.source.scope ?? '?'
if (!(scope in resultsGrouped)) {
resultsGrouped[scope] = []
} // Ensure there's an array to push to
resultsGrouped[scope].push({ ...result })
}
let rollingGroupIndex = 0
let rollingResultIndex = 0
const resultsGroupedInOrder: [string, CommandResultDisplayable[]][] = []
for (const [group, results] of Object.entries(resultsGrouped)) {
resultsGroupedInOrder.push([group, []])
for (const result of results) {
resultsGroupedInOrder[rollingGroupIndex][1].push({ ...result, index: rollingResultIndex++ })
}
rollingGroupIndex++
}
return resultsGroupedInOrder
},
],
},
events: ({ actions }) => ({
afterMount: () => {
const { push } = router.actions
const goTo: Command = {
key: 'go-to',
scope: GLOBAL_COMMAND_SCOPE,
prefixes: ['open', 'visit'],
resolver: [
{
icon: FundOutlined,
display: 'Go to Dashboards',
executor: () => {
push(urls.dashboards())
},
},
{
icon: RiseOutlined,
display: 'Go to Insights',
executor: () => {
push(urls.savedInsights())
},
},
{
icon: RiseOutlined,
display: 'Go to Trends',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.TRENDS }))
},
},
{
icon: FunnelPlotOutlined,
display: 'Go to Funnels',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.FUNNELS }))
},
},
{
icon: GatewayOutlined,
display: 'Go to Retention',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.RETENTION }))
},
},
{
icon: InteractionOutlined,
display: 'Go to Paths',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.PATHS }))
},
},
{
icon: ContainerOutlined,
display: 'Go to Events',
executor: () => {
push(urls.events())
},
},
{
icon: AimOutlined,
display: 'Go to Actions',
executor: () => {
push(urls.actions())
},
},
{
icon: UserOutlined,
display: 'Go to Persons',
synonyms: ['people'],
executor: () => {
push(urls.persons())
},
},
{
icon: UsergroupAddOutlined,
display: 'Go to Cohorts',
executor: () => {
push(urls.cohorts())
},
},
{
icon: FlagOutlined,
display: 'Go to Feature Flags',
synonyms: ['feature flags', 'a/b tests'],
executor: () => {
push(urls.featureFlags())
},
},
{
icon: MessageOutlined,
display: 'Go to Annotations',
executor: () => {
push(urls.annotations())
},
},
{
icon: TeamOutlined,
display: 'Go to Team members',
synonyms: ['organization', 'members', 'invites', 'teammates'],
executor: () => {
push(urls.organizationSettings())
},
},
{
icon: ProjectOutlined,
display: 'Go to Project settings',
executor: () => {
push(urls.projectSettings())
},
},
{
icon: SmileOutlined,
display: 'Go to My settings',
synonyms: ['account'],
executor: () => {
push(urls.mySettings())
},
},
{
icon: ApiOutlined,
display: 'Go to Plugins',
synonyms: ['integrations'],
executor: () => {
push(urls.plugins())
},
},
{
icon: DatabaseOutlined,
display: 'Go to System status page',
synonyms: ['redis', 'celery', 'django', 'postgres', 'backend', 'service', 'online'],
executor: () => {
push(urls.systemStatus())
},
},
{
icon: PlusOutlined,
display: 'Create action',
executor: () => {
push(urls.createAction())
},
},
{
icon: LogoutOutlined,
display: 'Log out',
executor: () => {
userLogic.actions.logout()
},
},
],
}
const debugClickhouseQueries: Command = {
key: 'debug-clickhouse-queries',
scope: GLOBAL_COMMAND_SCOPE,
resolver:
userLogic.values.user?.is_staff ||
userLogic.values.user?.is_impersonated ||
preflightLogic.values.preflight?.is_debug ||
preflightLogic.values.preflight?.instance_preferences?.debug_queries
? {
icon: PlusOutlined,
display: 'Debug queries (ClickHouse)',
executor: () => {
debugCHQueries()
},
}
: [],
}
const calculator: Command = {
key: 'calculator',
scope: GLOBAL_COMMAND_SCOPE,
resolver: (argument) => {
// don't try evaluating if there's no argument or if it's a plain number already
if (!argument || !isNaN(+argument)) {
return null
}
try {
const result = +Parser.evaluate(argument)
return isNaN(result)
? null
: {
icon: CalculatorOutlined,
display: `= ${result}`,
guarantee: true,
executor: () => {
copyToClipboard(result.toString(), 'calculation result')
},
}
} catch {
return null
}
},
}
const openUrls: Command = {
key: 'open-urls',
scope: GLOBAL_COMMAND_SCOPE,
prefixes: ['open', 'visit'],
resolver: (argument) => {
const results: CommandResultTemplate[] = (teamLogic.values.currentTeam?.app_urls ?? []).map(
(url: string) => ({
icon: LinkOutlined,
display: `Open ${url}`,
synonyms: [`Visit ${url}`],
executor: () => {
open(url)
},
})
)
if (argument && isURL(argument)) {
results.push({
icon: LinkOutlined,
display: `Open ${argument}`,
synonyms: [`Visit ${argument}`],
executor: () => {
open(argument)
},
})
}
results.push({
icon: LinkOutlined,
display: 'Open PostHog Docs',
synonyms: ['technical documentation'],
executor: () => {
open('https://posthog.com/docs')
},
})
return results
},
}
const createPersonalApiKey: Command = {
key: 'create-personal-api-key',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: KeyOutlined,
display: 'Create Personal API Key',
executor: () => ({
instruction: 'Give your key a label',
icon: TagOutlined,
scope: 'Creating Personal API Key',
resolver: (argument) => {
if (argument?.length) {
return {
icon: KeyOutlined,
display: `Create Key "${argument}"`,
executor: () => {
personalAPIKeysLogic.actions.createKey(argument)
push(urls.mySettings(), {}, 'personal-api-keys')
},
}
}
return null
},
}),
},
}
const createDashboard: Command = {
key: 'create-dashboard',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: FundOutlined,
display: 'Create Dashboard',
executor: () => ({
instruction: 'Name your new dashboard',
icon: TagOutlined,
scope: 'Creating Dashboard',
resolver: (argument) => {
if (argument?.length) {
return {
icon: FundOutlined,
display: `Create Dashboard "${argument}"`,
executor: () => {
dashboardsModel.actions.addDashboard({ name: argument, show: true })
},
}
}
return null
},
}),
},
}
const shareFeedback: Command = {
key: 'share-feedback',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: CommentOutlined,
display: 'Share Feedback',
synonyms: ['send opinion', 'ask question', 'message posthog', 'github issue'],
executor: () => ({
scope: 'Sharing Feedback',
resolver: [
{
display: 'Send Message Directly to PostHog',
icon: CommentOutlined,
executor: () => ({
instruction: "What's on your mind?",
icon: CommentOutlined,
resolver: (argument) => ({
icon: SendOutlined,
display: 'Send',
executor: !argument?.length
? undefined
: () => {
posthog.capture('palette feedback', { message: argument })
return {
resolver: {
icon: CheckOutlined,
display: 'Message Sent!',
executor: true,
},
}
},
}),
}),
},
{
icon: VideoCameraOutlined,
display: 'Schedule Quick Call',
executor: () => {
open('https://calendly.com/posthog-feedback')
},
},
{
icon: ExclamationCircleOutlined,
display: 'Create GitHub Issue',
executor: () => {
open('https://github.com/PostHog/posthog/issues/new/choose')
},
},
],
}),
},
}
actions.registerCommand(goTo)
actions.registerCommand(openUrls)
actions.registerCommand(debugClickhouseQueries)
actions.registerCommand(calculator)
actions.registerCommand(createPersonalApiKey)
actions.registerCommand(createDashboard)
actions.registerCommand(shareFeedback)
},
beforeUnmount: () => {
actions.deregisterCommand('go-to')
actions.deregisterCommand('open-urls')
actions.deregisterCommand('debug-clickhouse-queries')
actions.deregisterCommand('calculator')
actions.deregisterCommand('create-personal-api-key')
actions.deregisterCommand('create-dashboard')
actions.deregisterCommand('share-feedback')
},
}),
})
Example #7
| Source File: PluginCard.tsx From posthog-foss with MIT License | 4 votes |
|
export function PluginCard({
plugin,
error,
maintainer,
showUpdateButton,
order,
maxOrder,
rearranging,
DragColumn = ({ children }) => <Col className="order-handle">{children}</Col>,
unorderedPlugin = false,
}: PluginCardProps): JSX.Element {
const {
name,
description,
url,
plugin_type: pluginType,
pluginConfig,
tag,
latest_tag: latestTag,
id: pluginId,
updateStatus,
hasMoved,
is_global,
organization_id,
organization_name,
} = plugin
const {
editPlugin,
toggleEnabled,
installPlugin,
resetPluginConfigError,
rearrange,
showPluginLogs,
showPluginMetrics,
} = useActions(pluginsLogic)
const { loading, installingPluginUrl, checkingForUpdates, pluginUrlToMaintainer } = useValues(pluginsLogic)
const { user } = useValues(userLogic)
const hasSpecifiedMaintainer = maintainer || (plugin.url && pluginUrlToMaintainer[plugin.url])
const pluginMaintainer = maintainer || pluginUrlToMaintainer[plugin.url || '']
return (
<Col
style={{ width: '100%', marginBottom: 20 }}
className={`plugins-scene-plugin-card-col${rearranging ? ` rearranging` : ''}`}
data-attr={`plugin-card-${pluginConfig ? 'installed' : 'available'}`}
>
<Card className="plugins-scene-plugin-card">
<Row align="middle" className="plugin-card-row">
{typeof order === 'number' && typeof maxOrder === 'number' ? (
<DragColumn>
<div className={`arrow${order === 1 ? ' hide' : ''}`}>
<DownOutlined />
</div>
<div>
<Tag color={hasMoved ? '#bd0225' : '#555'} onClick={rearrange}>
{order}
</Tag>
</div>
<div className={`arrow${order === maxOrder ? ' hide' : ''}`}>
<DownOutlined />
</div>
</DragColumn>
) : null}
{unorderedPlugin ? (
<Tooltip title="This plugin does not do any processing in order." placement="topRight">
<Col>
<Tag color="#555">-</Tag>
</Col>
</Tooltip>
) : null}
{pluginConfig && (
<Col>
<Popconfirm
placement="topLeft"
title={`Are you sure you wish to ${
pluginConfig.enabled ? 'disable' : 'enable'
} this plugin?`}
onConfirm={() =>
pluginConfig.id
? toggleEnabled({ id: pluginConfig.id, enabled: !pluginConfig.enabled })
: editPlugin(pluginId || null, { __enabled: true })
}
okText="Yes"
cancelText="No"
disabled={rearranging}
>
<Switch checked={pluginConfig.enabled ?? false} disabled={rearranging} />
</Popconfirm>
</Col>
)}
<Col className={pluginConfig ? 'hide-plugin-image-below-500' : ''}>
<PluginImage pluginType={pluginType} url={url} />
</Col>
<Col style={{ flex: 1 }}>
<div>
<strong style={{ marginRight: 8 }}>{name}</strong>
{hasSpecifiedMaintainer && (
<CommunityPluginTag isCommunity={pluginMaintainer === 'community'} />
)}
{pluginConfig?.error ? (
<PluginError
error={pluginConfig.error}
reset={() => resetPluginConfigError(pluginConfig?.id || 0)}
/>
) : error ? (
<PluginError error={error} />
) : null}
{is_global && (
<Tag color="blue">
<GlobalOutlined /> Managed by {organization_name}
</Tag>
)}
{canInstallPlugins(user?.organization, organization_id) && (
<>
{url?.startsWith('file:') ? <LocalPluginTag url={url} title="Local" /> : null}
{updateStatus?.error ? (
<Tag color="red">
<WarningOutlined /> Error checking for updates
</Tag>
) : checkingForUpdates &&
!updateStatus &&
pluginType !== PluginInstallationType.Source &&
!url?.startsWith('file:') ? (
<Tag color="blue">
<LoadingOutlined /> Checking for updates…
</Tag>
) : url && latestTag && tag ? (
tag === latestTag ? (
<Tag color="green">
<CheckOutlined /> Up to date
</Tag>
) : (
<UpdateAvailable url={url} tag={tag} latestTag={latestTag} />
)
) : null}
{pluginType === PluginInstallationType.Source ? <SourcePluginTag /> : null}
</>
)}
</div>
<div>{endWithPunctation(description)}</div>
</Col>
<Col>
<Space>
{url && <PluginAboutButton url={url} disabled={rearranging} />}
{showUpdateButton && pluginId ? (
<PluginUpdateButton
updateStatus={updateStatus}
pluginId={pluginId}
rearranging={rearranging}
/>
) : pluginId ? (
<>
{Object.keys(plugin.metrics || {}).length > 0 ? (
<Space>
<Tooltip title="Metrics">
<Button onClick={() => showPluginMetrics(pluginId)}>
<LineChartOutlined />
</Button>
</Tooltip>
</Space>
) : null}
<Tooltip
title={
pluginConfig?.id
? 'Logs'
: 'Logs – enable the plugin for the first time to view them'
}
>
<Button
className="padding-under-500"
disabled={rearranging || !pluginConfig?.id}
onClick={() => showPluginLogs(pluginId)}
data-attr="plugin-logs"
>
<UnorderedListOutlined />
</Button>
</Tooltip>
<Tooltip title="Configure">
<Button
type="primary"
className="padding-under-500"
disabled={rearranging}
onClick={() => editPlugin(pluginId)}
data-attr="plugin-configure"
>
<SettingOutlined />
</Button>
</Tooltip>
</>
) : !pluginId ? (
<Button
type="primary"
className="padding-under-500"
loading={loading && installingPluginUrl === url}
disabled={loading && installingPluginUrl !== url}
onClick={
url ? () => installPlugin(url, PluginInstallationType.Repository) : undefined
}
icon={<CloudDownloadOutlined />}
data-attr="plugin-install"
>
<span className="show-over-500">Install</span>
</Button>
) : null}
</Space>
</Col>
</Row>
</Card>
</Col>
)
}
Example #8
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #9
| Source File: index.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
SideMenu: FC = () => {
const { t, i18n } = useTranslation();
const menuList = [
{
key: 'targets',
icon: <DatabaseOutlined />,
title: t('监控对象'),
children: [
{
key: '/targets',
title: t('对象列表'),
},
],
},
{
key: 'monitor',
icon: <LineChartOutlined />,
title: t('监控看图'),
children: [
{
key: '/metric/explorer',
title: t('即时查询'),
},
{
key: '/object/explorer',
title: t('快捷视图'),
},
{
key: '/dashboards',
title: t('监控大盘'),
},
],
},
{
key: 'alarm',
icon: <AlertOutlined />,
title: t('告警管理'),
children: [
{
key: '/alert-rules',
title: t('告警规则'),
},
{
key: '/alert-mutes',
title: t('屏蔽规则'),
},
{
key: '/alert-subscribes',
title: t('订阅规则'),
},
{
key: '/alert-cur-events',
title: t('活跃告警'),
},
{
key: '/alert-his-events',
title: t('历史告警'),
},
],
},
{
key: 'job',
icon: <CodeOutlined />,
title: t('告警自愈'),
children: [
{
key: '/job-tpls',
title: t('自愈脚本'),
},
{
key: '/job-tasks',
title: t('执行历史'),
},
],
},
{
key: 'manage',
icon: <UserOutlined />,
title: t('人员组织'),
children: [
{
key: '/users',
title: t('用户管理'),
},
{
key: '/user-groups',
title: t('团队管理'),
},
{
key: '/busi-groups',
title: t('业务组管理'),
},
],
},
{
key: 'help',
icon: <Icon component={SystemInfoSvg as any} />,
title: t('系统信息'),
children: [
{
key: '/help/version',
title: t('系统版本'),
},
{
key: '/help/contact',
title: t('联系我们'),
},
{
key: '/help/migrate',
title: t('管理员迁移'),
},
],
},
];
const [menus, setMenus] = useState(menuList);
const history = useHistory();
const location = useLocation();
const { pathname } = location;
let { profile } = useSelector<AccountRootState, accountStoreState>((state) => state.account);
const [collapsed, setCollapsed] = useState(localStorage.getItem('menuCollapsed') === '1');
const [selectedKeys, setSelectedKeys] = useState<string[]>([defaultSelectedKey(menus, pathname)]);
const [openKeys, setOpenKeys] = useState<string[]>(collapsed ? [] : [getDefaultOpenKey(menus, pathname)]);
const toggleCollapsed = () => {
setCollapsed(!collapsed);
localStorage.setItem('menuCollapsed', !collapsed ? '1' : '0');
};
const handleClick: MenuClickEventHandler = ({ key }) => {
setSelectedKeys([key as string]);
// 写两个key as string 感觉有点傻
if (key === 'changeLanguage') {
let language = i18n.language == 'en' ? 'zh' : 'en';
i18n.changeLanguage(language);
localStorage.setItem('language', language);
}
if ((key as string).startsWith('/')) {
history.push(key as string);
}
};
const hideSideMenu = () => location.pathname === '/login' || location.pathname.startsWith('/chart/') || location.pathname === '/callback';
useEffect(() => {
setSelectedKeys([defaultSelectedKey(menus, pathname)]);
if (!collapsed) {
setOpenKeys(_.union([...openKeys, getDefaultOpenKey(menus, pathname)]));
}
}, [pathname, collapsed]);
useEffect(() => {
if (profile.roles.length > 0) {
if (profile.roles.indexOf('Admin') === -1) {
getMenuPerm().then((res) => {
const { dat } = res;
const newMenus = [...menuList];
newMenus.forEach((menu) => {
menu.children = menu.children.filter((item) => dat.includes(item.key));
});
setMenus(newMenus);
});
} else {
setMenus(menuList);
}
}
}, [profile.roles]);
return hideSideMenu() ? null : (
<div
style={{
display: 'flex',
flexDirection: 'column',
}}
>
<div className={`home ${collapsed ? 'collapse' : ''}`}>
<div className='name' onClick={() => history.push('/metric/explorer')} key='overview'>
<img src={collapsed ? '/image/logo.svg' : '/image/logo-l.svg'} alt='' className='logo' />
</div>
</div>
<Menu
className='left-menu-container'
theme='dark'
inlineCollapsed={collapsed}
openKeys={openKeys}
selectedKeys={selectedKeys}
onClick={handleClick}
mode='inline'
onOpenChange={(openKeys: string[]) => {
setOpenKeys(openKeys);
}}
>
{_.map(menus, (subMenus) => {
return (
subMenus.children.length > 0 && (
<SubMenu key={subMenus.key} icon={subMenus.icon} title={subMenus.title}>
{_.map(subMenus.children, (menu) => {
return <Menu.Item key={menu.key}>{menu.title}</Menu.Item>;
})}
</SubMenu>
)
);
})}
{lazyMenu.sort((a, b) => b.weight - a.weight).map((item) => item.content)}
</Menu>
<Button type='text' onClick={toggleCollapsed} className='collapseBtn'>
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
</Button>
</div>
);
}
Example #10
| Source File: index.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
export default function Chart() {
const { t } = useTranslation();
const { ids } =
useParams<{
ids: string;
}>();
const [chartData, setChartData] = useState<
Array<{
ref: any;
dataProps: any;
highLevelConfig: HighLevelConfigType;
}>
>([]);
const [range, setRange] = useState<Range>({
num: 1,
unit: 'hour',
description: t('小时'),
});
const [step, setStep] = useState<number | null>(null);
const [chartType, setChartType] = useState<ChartType>(ChartType.Line);
const { clusters } = useSelector<RootState, CommonStoreState>((state) => state.common);
const [curCluster, setCurCluster] = useState<string>('');
useEffect(() => {
initChart();
}, []);
const initChart = () => {
GetTmpChartData(ids).then((res) => {
let data = res.dat
.filter((item) => !!item)
.map((item) => {
return { ...JSON.parse(item.configs), ref: React.createRef() };
});
const curCluster = data[0].curCluster;
setChartType(data[0].dataProps.chartType || ChartType.Line);
setStep(data[0].dataProps.step);
setRange(data[0].dataProps.range);
// TODO: 处理当前选中集群不在集群列表的情况
setCurCluster(curCluster);
localStorage.setItem('curCluster', curCluster);
setChartData(data);
});
};
const clusterMenu = (
<Menu selectedKeys={[curCluster]}>
{clusters.map((cluster) => (
<Menu.Item
key={cluster}
onClick={(_) => {
setCurCluster(cluster);
localStorage.setItem('curCluster', cluster);
chartData.forEach((item) => item.ref.current.refresh());
}}
>
{cluster}
</Menu.Item>
))}
</Menu>
);
const handleDateChange = (e) => {
if (isAbsoluteRange(e) ? !_.isEqual(e, range) : e.num !== (range as RelativeRange).num || e.unit !== (range as RelativeRange).unit) {
setRange(e);
}
};
const handleRefresh = () => {
initChart();
};
return (
<div className='chart-container'>
{chartData && chartData.length > 0 && curCluster ? (
<>
<div className='chart-container-header'>
<div className='left'></div>
<div className='right'>
<Space>
<div>
<span>集群：</span>
<Dropdown overlay={clusterMenu}>
<Button>
{curCluster} <DownOutlined />
</Button>
</Dropdown>
</div>
<DateRangePicker onChange={handleDateChange} value={chartData[0].dataProps.range} />
<Resolution onChange={(v) => setStep(v)} initialValue={step} />
{!semver.valid(chartData[0].dataProps?.version) && (
<Radio.Group
options={[
{ label: <LineChartOutlined />, value: ChartType.Line },
{ label: <AreaChartOutlined />, value: ChartType.StackArea },
]}
onChange={(e) => {
e.preventDefault();
setChartType(e.target.value);
}}
value={chartType}
optionType='button'
buttonStyle='solid'
/>
)}
</Space>
{/* <ResfeshIcon onClick={handleRefresh} className='reload-icon' /> */}
</div>
</div>
{chartData.map((item: any, index) => {
if (semver.valid(item.dataProps?.version)) {
return (
<div style={{ height: 400, border: '1px solid #efefef' }}>
<Renderer dashboardId={item.id} key={index} time={range} step={step} type={item.dataProps?.type} values={item.dataProps as any} isPreview />
</div>
);
}
const newItem = {
...item.dataProps,
range,
step,
chartType,
title: (
<Tooltip
placement='bottomLeft'
title={() => (
<div>
{item.dataProps.promqls?.map((promql) => {
return <div>{promql.current ? promql.current : promql}</div>;
})}
</div>
)}
>
<Button size='small' type='link'>
promql 语句
</Button>
</Tooltip>
),
};
return <Graph ref={item.ref} key={index} data={{ ...newItem }} graphConfigInnerVisible={false} isShowShare={false} highLevelConfig={item.highLevelConfig || {}} />;
})}
</>
) : (
<h2 className='holder'>
<FieldNumberOutlined
style={{
fontSize: '30px',
}}
/>
<span>{t('该分享链接无图表数据')}</span>
</h2>
)}
</div>
);
}
Example #11
| Source File: panel.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
Panel: React.FC<PanelProps> = ({ metrics, defaultPromQL, removePanel }) => {
const { t } = useTranslation();
const { clusters } = useSelector<CommonRootState, CommonStoreState>((state) => state.common);
const curPanelTab = useRef<PanelType>(PanelType.Table);
const graphRef = useRef(null);
const inputValue = useRef(defaultPromQL);
const lastEndTime = useRef<number | null>(null);
const abortInFlightFetch = useRef<(() => void) | null>(null);
// 公共状态
const [queryStats, setQueryStats] = useState<QueryStats | null>(null);
const [chartType, setChartType] = useState<ChartType>(ChartType.Line);
const [optionsRecord, setOptionsRecord] = useState<PanelOptions>({
type: PanelType.Table,
range: { num: 1, unit: 'hour', description: t('小时') },
endTime: null,
resolution: null,
stacked: false,
showExemplars: false,
});
const [errorContent, setErrorContent] = useState<string>('');
// Table 相关状态
const [isLoading, setIsLoading] = useState<boolean>(false);
const [vectorData, setVectorData] = useState<VectorDataType | null>(null);
// 更新输入框表达式内容
function handleExpressionChange(value: string) {
inputValue.current = value;
}
function handleTabChange(type: PanelType) {
if (optionsRecord.type !== type) {
// 同步 Table 页时间戳和 Graph 时间选择组件的时间
if (type === PanelType.Graph && lastEndTime.current !== optionsRecord.endTime) {
if (optionsRecord.endTime === null) {
setOptions({ range: { num: 1, unit: 'hour', description: 'hour' } });
} else {
setOptions({
range: {
start: optionsRecord.endTime - 60 * 60,
end: optionsRecord.endTime,
},
});
}
} else {
lastEndTime.current = optionsRecord.endTime;
}
curPanelTab.current = type;
setOptions({ type });
setQueryStats(null);
}
}
// 获取请求的结束时间戳
function getEndTime(endTime = optionsRecord.endTime): number {
return endTime === null ? moment().unix() : endTime;
}
// 更新时间戳
function handleTimestampChange(endTime: Moment | null): void {
setOptions({ endTime: endTime ? endTime?.unix() : null });
}
function setOptions(opts: Partial<PanelOptions>): void {
setOptionsRecord((optionsRecord) => ({ ...optionsRecord, ...opts }));
}
// 图表选中时间改变，触发更新
function handleGraphDateChange(range: Range) {
const prevRange = optionsRecord.range;
if (isAbsoluteRange(range) ? !_.isEqual(prevRange, range) : range.num !== (prevRange as RelativeRange).num || range.unit !== (prevRange as RelativeRange).unit) {
const endTime = range.hasOwnProperty('unit') ? null : (range as AbsoluteRange).end;
setOptions({
endTime,
range,
});
}
}
// 图表请求完成，回填请求信息
function onGraphRequestCompleted(newQueryStats: QueryStats) {
if (curPanelTab.current === PanelType.Graph) {
setQueryStats(newQueryStats);
}
}
// 触发语句查询
function executeQuery(isExecute: boolean = true) {
const expr = inputValue.current;
if (!isExecute || expr === '' || clusters.length === 0) return;
// 模式下直接调用图表组件的刷新方法
if (curPanelTab.current === PanelType.Graph) {
setQueryStats(null);
graphRef.current && (graphRef.current as any).refresh();
return;
}
// 存储查询历史
// this.props.onExecuteQuery(expr);
// 设置外部 options 参数
// if (this.props.optionsRecord.expr !== expr) {
// this.setOptions({ expr });
// }
// 如果正在进行上一个请求，那么终止
if (abortInFlightFetch.current) {
abortInFlightFetch.current();
abortInFlightFetch.current = null;
}
// 设置一个新的请求控制器
const abortController = new AbortController();
abortInFlightFetch.current = () => abortController.abort();
setIsLoading(true);
setQueryStats(null);
const queryStart = Date.now();
// 初始化参数
const endTime = getEndTime();
const params: URLSearchParams = new URLSearchParams({
query: expr,
});
// 设置请求需要的参数
let path = 'query';
params.append('time', endTime.toString());
prometheusAPI(path, params, {
cache: 'no-store',
credentials: 'same-origin',
signal: abortController.signal,
})
.then((res: any) => {
abortInFlightFetch.current = null;
setIsLoading(false);
if (curPanelTab.current === PanelType.Graph) {
return;
}
if (res.hasOwnProperty('status') && res.status === 'success') {
var tooLong = false;
var LENGTH = 10000;
var maxLength = 0;
let { resultType, result } = res.data;
if (result) {
if (result.length > LENGTH) {
tooLong = true;
maxLength = result.length;
result = result.slice(LENGTH);
}
result.forEach((item) => {
if (item.values && item.values.length > LENGTH) {
tooLong = true;
if (item.values.length > maxLength) {
maxLength = item.values.length;
}
item.values = item.values.slice(LENGTH);
}
});
}
if (tooLong) {
setErrorContent(`Warning：Fetched ${maxLength} metrics, only displaying first ${LENGTH}`);
} else {
setErrorContent('');
}
if (resultType === 'scalar' || resultType === 'string') {
setVectorData({ resultType, result: [result] });
} else {
setVectorData({ resultType, result });
}
setQueryStats({
loadTime: Date.now() - queryStart,
resultSeries: res.data.result.length,
});
} else {
setVectorData(null);
setErrorContent(res?.error || '');
}
})
.catch((error) => {
setIsLoading(false);
});
}
// 请求发生错误时，展示错误信息
function onErrorOccured(errorArr: ErrorInfoType[]) {
if (errorArr.length) {
const errInfo = errorArr[0].error;
setErrorContent(errInfo);
} else {
setErrorContent('');
}
}
// 当时间戳变更时，重新获取数据
useEffect(() => {
optionsRecord.type === PanelType.Table && executeQuery();
}, [optionsRecord.endTime, clusters]);
// 切换标签到 Table 时获取数据
useEffect(() => {
optionsRecord.type === PanelType.Table && executeQuery();
}, [optionsRecord.type, clusters]);
return (
<div className='panel'>
{/* 输入框 */}
<ExpressionInput
queryHistory={['abs(go_gc_duration_seconds)']}
value={inputValue.current}
onExpressionChange={handleExpressionChange}
metricNames={metrics}
isLoading={isLoading}
executeQuery={executeQuery}
/>
{errorContent && <Alert className='error-alert' message={errorContent} type='error' />}
{!isLoading && !errorContent && queryStats && <QueryStatsView {...queryStats} />}
<Tabs className='panel-tab-box' type='card' activeKey={optionsRecord.type} onChange={handleTabChange}>
<TabPane tab='Table' key='table'>
<div className='table-timestamp'>
Timestamp:{' '}
<DatePicker
placeholder='Evaluation time'
showTime
showNow={false}
disabledDate={(current) => current > moment()}
value={optionsRecord.endTime ? moment(optionsRecord.endTime * 1000) : null}
onChange={handleTimestampChange}
/>
</div>
<List
className='table-list'
size='small'
bordered
loading={isLoading}
dataSource={vectorData ? vectorData.result : []}
renderItem={(item) => {
const { metric, value, values } = item;
return (
<List.Item>
<div className='list-item-content'>
<div className='left'>{getListItemContent(vectorData?.resultType, metric)}</div>
{vectorData?.resultType === 'scalar' || vectorData?.resultType === 'string' ? (
item[1]
) : (
<div>
{value && value.length > 1 && <div className='right'>{value[1] || '-'}</div>}
{values && values.length > 0 && (
<div className='right'>
{values.map((value) => {
return (
<>
{value && value.length > 1 && (
<span style={{ display: 'inline-block' }}>
{value[1]} @{value[0]}
</span>
)}
<br />
</>
);
})}
</div>
)}
</div>
)}
</div>
</List.Item>
);
}}
/>
</TabPane>
<TabPane tab='Graph' key='graph'>
{/* 操作栏 */}
<div className='graph-operate-box'>
<div className='left'>
<Space>
<DateRangePicker placement='bottomRight' value={optionsRecord.range} onChange={handleGraphDateChange} />
<Resolution onChange={(v: number) => setOptions({ resolution: v })} initialValue={optionsRecord.resolution} />
<Radio.Group
options={[
{ label: <LineChartOutlined />, value: ChartType.Line },
{ label: <AreaChartOutlined />, value: ChartType.StackArea },
]}
onChange={(e) => {
e.preventDefault();
setChartType(e.target.value);
}}
value={chartType}
optionType='button'
buttonStyle='solid'
/>
</Space>
</div>
</div>
{/* 图 */}
<div>
{optionsRecord.type === PanelType.Graph && (
<Graph
ref={graphRef}
showHeader={true}
isShowRefresh={false}
data={{
step: optionsRecord.resolution,
range: optionsRecord.range,
promqls: [inputValue],
chartType: chartType,
}}
onErrorOccured={onErrorOccured}
onRequestCompleted={onGraphRequestCompleted}
/>
)}
</div>
</TabPane>
</Tabs>
<span className='remove-panel-btn' onClick={removePanel}>
<CloseCircleOutlined />
</span>
</div>
);
}
Example #12
| Source File: Graph.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
export default function Graph(props: IProps) {
const { metric, match, range, step, onClose } = props;
const newGroups = _.map(
_.filter(match.dimensionLabels, (item) => !_.isEmpty(item.value)),
'label',
);
const [refreshFlag, setRefreshFlag] = useState(_.uniqueId('refreshFlag_'));
const [calcFunc, setCalcFunc] = useState('');
const [comparison, setComparison] = useState<string[]>([]);
const [aggrFunc, setAggrFunc] = useState('avg');
const [aggrGroups, setAggrGroups] = useState<string[]>(newGroups);
const [labels, setLabels] = useState<string[]>([]);
const [series, setSeries] = useState<any[]>([]);
const [highLevelConfig, setHighLevelConfig] = useState({
shared: true,
sharedSortDirection: 'desc',
legend: true,
util: 'none',
colorRange: colors[0].value,
reverseColorOrder: false,
colorDomainAuto: true,
colorDomain: [],
chartheight: 300,
});
const [chartType, setChartType] = useState('line');
const [reduceFunc, setReduceFunc] = useState('last');
const lineGraphProps = {
custom: {
drawStyle: 'lines',
fillOpacity: 0,
stack: 'hidden',
lineInterpolation: 'smooth',
},
options: {
legend: {
displayMode: highLevelConfig.legend ? 'list' : 'hidden',
},
tooltip: {
mode: highLevelConfig.shared ? 'all' : 'single',
sort: highLevelConfig.sharedSortDirection,
},
standardOptions: {
util: highLevelConfig.util,
},
},
};
const hexbinGraphProps = {
custom: {
calc: reduceFunc,
colorRange: highLevelConfig.colorRange,
reverseColorOrder: highLevelConfig.reverseColorOrder,
colorDomainAuto: highLevelConfig.colorDomainAuto,
colorDomain: highLevelConfig.colorDomain,
},
options: {
standardOptions: {
util: highLevelConfig.util,
},
},
};
const graphStandardOptions = {
line: <LineGraphStandardOptions highLevelConfig={highLevelConfig} setHighLevelConfig={setHighLevelConfig} />,
hexbin: <HexbinGraphStandardOptions highLevelConfig={highLevelConfig} setHighLevelConfig={setHighLevelConfig} />,
};
useEffect(() => {
setAggrGroups(newGroups);
}, [JSON.stringify(newGroups)]);
useEffect(() => {
const matchStr = getMatchStr(match);
getLabels(`${metric}${matchStr}`, range).then((res) => {
setLabels(res);
});
}, [refreshFlag, JSON.stringify(match), JSON.stringify(range)]);
useEffect(() => {
getQueryRange({
metric,
match: getMatchStr(match),
range,
step,
aggrFunc,
aggrGroups,
calcFunc,
comparison,
}).then((res) => {
setSeries(res);
});
}, [refreshFlag, metric, JSON.stringify(match), JSON.stringify(range), step, calcFunc, comparison, aggrFunc, aggrGroups]);
return (
<Card
size='small'
style={{ marginBottom: 10 }}
title={metric}
className='n9e-metric-views-metrics-graph'
extra={
<Space>
<Space size={0} style={{ marginRight: 10 }}>
<LineChartOutlined
className={classNames({
'button-link-icon': true,
active: chartType === 'line',
})}
onClick={() => {
setChartType('line');
}}
/>
<Divider type='vertical' />
<HexbinIcon
className={classNames({
'button-link-icon': true,
active: chartType === 'hexbin',
})}
onClick={() => {
setChartType('hexbin');
}}
/>
</Space>
<Popover placement='left' content={graphStandardOptions[chartType]} trigger='click' autoAdjustOverflow={false} getPopupContainer={() => document.body}>
<a>
<SettingOutlined />
</a>
</Popover>
<a>
<SyncOutlined
onClick={() => {
setRefreshFlag(_.uniqueId('refreshFlag_'));
}}
/>
</a>
<a>
<ShareAltOutlined
onClick={() => {
const curCluster = localStorage.getItem('curCluster');
const dataProps = {
type: 'timeseries',
version: '2.0.0',
name: metric,
step,
range,
...lineGraphProps,
targets: _.map(
getExprs({
metric,
match: getMatchStr(match),
aggrFunc,
aggrGroups,
calcFunc,
comparison,
}),
(expr) => {
return {
expr,
};
},
),
};
setTmpChartData([
{
configs: JSON.stringify({
curCluster,
dataProps,
}),
},
]).then((res) => {
const ids = res.dat;
window.open('/chart/' + ids);
});
}}
/>
</a>
<a>
<CloseCircleOutlined onClick={onClose} />
</a>
</Space>
}
>
<div>
<Space>
<div>
计算函数：
<Dropdown
overlay={
<Menu onClick={(e) => setCalcFunc(e.key === 'clear' ? '' : e.key)} selectedKeys={[calcFunc]}>
<Menu.Item key='rate_1m'>rate_1m</Menu.Item>
<Menu.Item key='rate_5m'>rate_5m</Menu.Item>
<Menu.Item key='increase_1m'>increase_1m</Menu.Item>
<Menu.Item key='increase_5m'>increase_5m</Menu.Item>
<Menu.Divider></Menu.Divider>
<Menu.Item key='clear'>clear</Menu.Item>
</Menu>
}
>
<a className='ant-dropdown-link' onClick={(e) => e.preventDefault()}>
{calcFunc || '无'} <DownOutlined />
</a>
</Dropdown>
</div>
<div>
环比：
{comparison.map((ag) => (
<Tag
key={ag}
closable
onClose={() => {
setComparison(_.without(comparison, ag));
}}
>
{ag}
</Tag>
))}
<Dropdown
overlay={
<Menu
onClick={(e) => {
if (comparison.indexOf(e.key) === -1) {
setComparison([...comparison, e.key]);
} else {
setComparison(_.without(comparison, e.key));
}
}}
selectedKeys={comparison}
>
<Menu.Item key='1d'>1d</Menu.Item>
<Menu.Item key='7d'>7d</Menu.Item>
</Menu>
}
overlayStyle={{ maxHeight: 400, overflow: 'auto' }}
>
<a className='ant-dropdown-link' onClick={(e) => e.preventDefault()}>
<PlusCircleOutlined />
</a>
</Dropdown>
</div>
<div>
聚合函数：
<Dropdown
overlay={
<Menu onClick={(e) => setAggrFunc(e.key)} selectedKeys={[aggrFunc]}>
<Menu.Item key='sum'>sum</Menu.Item>
<Menu.Item key='avg'>avg</Menu.Item>
<Menu.Item key='max'>max</Menu.Item>
<Menu.Item key='min'>min</Menu.Item>
</Menu>
}
>
<a className='ant-dropdown-link' onClick={(e) => e.preventDefault()}>
{aggrFunc} <DownOutlined />
</a>
</Dropdown>
</div>
{aggrFunc ? (
<div className='graph-config-inner-item'>
聚合维度：
{aggrGroups.map((ag) => (
<Tag
key={ag}
closable
onClose={() => {
setAggrGroups(_.without(aggrGroups, ag));
}}
>
{ag}
</Tag>
))}
<Dropdown
overlay={
<Menu
onClick={(e) => {
if (aggrGroups.indexOf(e.key) === -1) {
setAggrGroups([...aggrGroups, e.key]);
} else {
setAggrGroups(_.without(aggrGroups, e.key));
}
}}
selectedKeys={aggrGroups}
>
{_.map(
_.filter(labels, (n) => n !== '__name__'),
(ag) => (
<Menu.Item key={ag}>{ag}</Menu.Item>
),
)}
</Menu>
}
overlayStyle={{ maxHeight: 400, overflow: 'auto' }}
>
<a className='ant-dropdown-link' onClick={(e) => e.preventDefault()}>
<PlusCircleOutlined />
</a>
</Dropdown>
</div>
) : null}
{chartType === 'hexbin' && (
<div>
取值计算：
<Dropdown
overlay={
<Menu onClick={(e) => setReduceFunc(e.key)} selectedKeys={[reduceFunc]}>
{_.map(calcsOptions, (val, key) => {
return <Menu.Item key={key}>{val.name}</Menu.Item>;
})}
</Menu>
}
>
<a className='ant-dropdown-link' onClick={(e) => e.preventDefault()}>
{calcsOptions[reduceFunc]?.name} <DownOutlined />
</a>
</Dropdown>
</div>
)}
</Space>
</div>
<div>
{chartType === 'line' && <Timeseries inDashboard={false} values={lineGraphProps as any} series={series} />}
{chartType === 'hexbin' && (
<div style={{ padding: '20px 0 0 0', height: highLevelConfig.chartheight }}>
<Hexbin values={hexbinGraphProps as any} series={series} />
</div>
)}
</div>
</Card>
);
}
Example #13
| Source File: index.tsx From surveyo with Apache License 2.0 | 4 votes |
|
function DashboardHelper() {
const {user} = useAuth0();
const [state, setState] = useState([]);
const [deleteForm] = useMutation<DeleteForm, DeleteFormVariables>(
DELETE_FORM
);
const {loading, error, data} = useQuery<GetSurveys, GetSurveysVariables>(
GET_FORMS,
{
variables: {
email: user.email,
},
onCompleted: () => {
setState((data?.getUser?.forms || []) as any);
},
}
);
if (loading) {
return <Card loading />;
}
if (error) {
console.error(error);
return <Alert message={error.message} type="warning" />;
}
async function handleDelete(id: string) {
setState(state => state.filter((form: any) => form?.id !== id));
try {
await deleteForm({
variables: {
id,
},
});
} catch (e) {
console.error(e);
message.error('Internal error: could not delete form');
}
}
const tableCols = [
{
title: 'Title',
dataIndex: 'title',
key: 'title',
render: (text: any) => text,
},
{
title: 'Responses',
dataIndex: 'responses',
key: 'responses',
render: (_text: any, record: any) => record.responses?.length || 0,
},
{
title: 'Actions',
key: 'action',
render: (_text: any, record: any) => (
<Space size="middle">
<Tooltip title="Open form">
<Link to={`/form/${record.id}`} target="_blank">
<Button type="link" icon={<ExportOutlined />} />
</Link>
</Tooltip>
<Tooltip title="Download CSV">
<DownloadCsv id={record.id} title={record.title} />
</Tooltip>
<Tooltip title="Charts">
<Link to={`/charts/${record.id}`} target="_blank">
<Button type="link" icon={<LineChartOutlined />} />
</Link>
</Tooltip>
<Tooltip title="GraphiQL">
<Link to={`/graphiql/${record.id}`} target="_blank">
<Button type="link" icon={<CodeOutlined />} />
</Link>
</Tooltip>
<Tooltip title="Delete">
<Popconfirm
title="Are you sure you want to delete this form?"
onConfirm={() => handleDelete(record.id)}
okText="Yes"
cancelText="No"
>
<Button type="link" icon={<DeleteOutlined />} />
</Popconfirm>
</Tooltip>
</Space>
),
},
];
return <Table columns={tableCols as any} dataSource={state as any} />;
}
