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[] }> {
declare userLabelTimer: NodeJS.Timeout;
state = {
userExamples: DEFAULT_EXAMPLES,
userExamples: [],
};
componentDidMount() {
@ -81,23 +81,28 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
render() {
const { userExamples } = this.state;
const hasUserExamples = userExamples.length > 0;
return (
<div>
<h2>Loki Cheat Sheet</h2>
<div className="cheat-sheet-item">
<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">
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>
{this.renderExpression('{job="default/prometheus"}')}
{userExamples !== DEFAULT_EXAMPLES && userExamples.length > 0 ? (
{hasUserExamples ? (
<div>
<div className="cheat-sheet-item__label">Here are some example streams from your logs:</div>
{userExamples.map((example) => this.renderExpression(example))}
</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 className="cheat-sheet-item">
<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);
if (Array.isArray(res)) {
this.labelKeys = res.slice().sort();
const labels = res
.slice()
.sort()
.filter((label) => label !== '__name__');
this.labelKeys = labels;
}
return [];