IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Small UX updates (#37694)

Browse Source
This commit is contained in:
Ivana Huckova 2021-08-11 03:56:23 -04:00 committed by GitHub
parent 36c798eb2f
commit 4cf097c4e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
View File

@ -36,7 +36,7 @@ const LOGQL_EXAMPLES = [
export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<LokiQuery>, { userExamples: string[] }> { export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<LokiQuery>, { userExamples: string[] }> {
declare userLabelTimer: NodeJS.Timeout; declare userLabelTimer: NodeJS.Timeout;
state = { state = {
userExamples: DEFAULT_EXAMPLES, userExamples: [],
}; };
componentDidMount() { componentDidMount() {
@ -81,23 +81,28 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
render() { render() {
const { userExamples } = this.state; const { userExamples } = this.state;
const hasUserExamples = userExamples.length > 0;
return ( return (
<div> <div>
<h2>Loki Cheat Sheet</h2> <h2>Loki Cheat Sheet</h2>
<div className="cheat-sheet-item"> <div className="cheat-sheet-item">
<div className="cheat-sheet-item__title">See your logs</div> <div className="cheat-sheet-item__title">See your logs</div>
<div className="cheat-sheet-item__label">Start by selecting a log stream from the Log labels selector.</div>
<div className="cheat-sheet-item__label"> <div className="cheat-sheet-item__label">
Alternatively, you can write a stream selector into the query field: Start by selecting a log stream from the Log browser, or alternatively you can write a stream selector into
the query field.
</div> </div>
{this.renderExpression('{job="default/prometheus"}')} {hasUserExamples ? (
{userExamples !== DEFAULT_EXAMPLES && userExamples.length > 0 ? (
<div> <div>
<div className="cheat-sheet-item__label">Here are some example streams from your logs:</div> <div className="cheat-sheet-item__label">Here are some example streams from your logs:</div>
{userExamples.map((example) => this.renderExpression(example))} {userExamples.map((example) => this.renderExpression(example))}
</div> </div>
) : null} ) : (
<div>
<div className="cheat-sheet-item__label">Here is an example of a log stream:</div>
{this.renderExpression(DEFAULT_EXAMPLES[0])}
</div>
)}
</div> </div>
<div className="cheat-sheet-item"> <div className="cheat-sheet-item">
<div className="cheat-sheet-item__title">Combine stream selectors</div> <div className="cheat-sheet-item__title">Combine stream selectors</div>

6
public/app/plugins/datasource/loki/language_provider.ts
View File

@ -424,7 +424,11 @@ export default class LokiLanguageProvider extends LanguageProvider {
const res = await this.request(url, timeRange); const res = await this.request(url, timeRange);
if (Array.isArray(res)) { if (Array.isArray(res)) {
this.labelKeys = res.slice().sort(); const labels = res
.slice()
.sort()
.filter((label) => label !== '__name__');
this.labelKeys = labels;
} }
return []; return [];