feat: add date math for filters #1342
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<card
|
||||
class="has-no-shadow how-it-works-modal"
|
||||
:title="$t('input.datepickerRange.math.title')">
|
||||
:title="$t('input.datemathHelp.title')">
|
||||
<p>
|
||||
{{ $t('input.datepickerRange.math.intro') }}
|
||||
{{ $t('input.datemathHelp.intro') }}
|
||||
konrad marked this conversation as resolved
Outdated
|
||||
</p>
|
||||
<p>
|
||||
<i18n-t keypath="input.datepickerRange.math.expression">
|
||||
<i18n-t keypath="input.datemathHelp.expression">
|
||||
<code>now</code>
|
||||
<code>||</code>
|
||||
</i18n-t>
|
||||
</p>
|
||||
<p>
|
||||
<i18n-t keypath="input.datepickerRange.math.similar">
|
||||
<i18n-t keypath="input.datemathHelp.similar">
|
||||
<BaseButton
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
use BaseButton use BaseButton
konrad
commented
Done. Done.
|
||||
href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
|
||||
target="_blank">
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Remove rel attribute here and below. Remove rel attribute here and below.
Show we also add `target="_blank"` as default for the BaseButton is a link case?
konrad
commented
Mh I think there will still be cases where we want to control this so right now I think we should not add one. > Show we also add target="_blank" as default for the BaseButton is a link case?
Mh I think there will still be cases where we want to control this so right now I think we should not add one.
|
||||
|
@ -27,79 +27,79 @@
|
|||
</p>
|
||||
<p>{{ $t('misc.forExample') }}</p>
|
||||
<ul>
|
||||
<li><code>+1d</code>{{ $t('input.datepickerRange.math.add1Day') }}</li>
|
||||
<li><code>-1d</code>{{ $t('input.datepickerRange.math.minus1Day') }}</li>
|
||||
<li><code>/d</code>{{ $t('input.datepickerRange.math.roundDay') }}</li>
|
||||
<li><code>+1d</code>{{ $t('input.datemathHelp.add1Day') }}</li>
|
||||
<li><code>-1d</code>{{ $t('input.datemathHelp.minus1Day') }}</li>
|
||||
<li><code>/d</code>{{ $t('input.datemathHelp.roundDay') }}</li>
|
||||
</ul>
|
||||
<p>{{ $t('input.datepickerRange.math.supportedUnits') }}</p>
|
||||
<p>{{ $t('input.datemathHelp.supportedUnits') }}</p>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>s</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.seconds') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.units.seconds') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>m</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.minutes') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.units.minutes') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>h</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.units.hours') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>H</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.units.hours') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>d</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.days') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.units.days') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>w</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.weeks') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.units.weeks') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>M</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.months') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.units.months') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>y</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.years') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.units.years') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>{{ $t('input.datepickerRange.math.someExamples') }}</p>
|
||||
<p>{{ $t('input.datemathHelp.someExamples') }}</p>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>now</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.now') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.examples.now') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now+24h</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.in24h') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.examples.in24h') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now/d</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.today') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.examples.today') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now/w</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.beginningOfThisWeek') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.examples.beginningOfThisWeek') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now/w+1w</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.endOfThisWeek') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.examples.endOfThisWeek') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now+30d</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.in30Days') }}</td>
|
||||
<td>{{ $t('input.datemathHelp.examples.in30Days') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>{{ exampleDate }}||+1M/d</code></td>
|
||||
<td>
|
||||
<i18n-t keypath="input.datepickerRange.math.examples.datePlusMonth">
|
||||
<i18n-t keypath="input.datemathHelp.examples.datePlusMonth">
|
||||
<code>{{ exampleDate }}</code>
|
||||
</i18n-t>
|
||||
</td>
|
||||
|
|
|
@ -47,9 +47,9 @@
|
|||
/>
|
||||
|
||||
<p>
|
||||
{{ $t('input.datepickerRange.math.canuse') }}
|
||||
{{ $t('input.datemathHelp.canuse') }}
|
||||
<BaseButton class="has-text-primary" @click="showHowItWorks = true">
|
||||
{{ $t('input.datepickerRange.math.learnhow') }}
|
||||
{{ $t('input.datemathHelp.learnhow') }}
|
||||
</BaseButton>
|
||||
</p>
|
||||
|
||||
konrad marked this conversation as resolved
dpschen
commented
Use BaseButton Use BaseButton
konrad
commented
Done. Done.
|
||||
|
|
|
@ -530,7 +530,26 @@
|
|||
"to": "To",
|
||||
"from": "From",
|
||||
"fromto": "{from} to {to}",
|
||||
"math": {
|
||||
"ranges": {
|
||||
"today": "Today",
|
||||
|
||||
"thisWeek": "This Week",
|
||||
"restOfThisWeek": "The Rest of This Week",
|
||||
"nextWeek": "Next Week",
|
||||
"next7Days": "Next 7 Days",
|
||||
"lastWeek": "Last Week",
|
||||
|
||||
"thisMonth": "This Month",
|
||||
"restOfThisMonth": "The Rest of This Month",
|
||||
"nextMonth": "Next Month",
|
||||
"next30Days": "Next 30 Days",
|
||||
"lastMonth": "Last Month",
|
||||
|
||||
"thisYear": "This Year",
|
||||
"restOfThisYear": "The Rest of This Year"
|
||||
}
|
||||
},
|
||||
"datemathHelp": {
|
||||
"canuse": "You can use date math to filter for relative dates.",
|
||||
"learnhow": "Check out how it works",
|
||||
"title": "Date Math",
|
||||
|
@ -560,25 +579,6 @@
|
|||
"in30Days": "In 30 days",
|
||||
"datePlusMonth": "{0} plus one month at 00:00 of that day"
|
||||
}
|
||||
},
|
||||
"ranges": {
|
||||
"today": "Today",
|
||||
|
||||
"thisWeek": "This Week",
|
||||
"restOfThisWeek": "The Rest of This Week",
|
||||
"nextWeek": "Next Week",
|
||||
"next7Days": "Next 7 Days",
|
||||
"lastWeek": "Last Week",
|
||||
|
||||
"thisMonth": "This Month",
|
||||
"restOfThisMonth": "The Rest of This Month",
|
||||
"nextMonth": "Next Month",
|
||||
"next30Days": "Next 30 Days",
|
||||
"lastMonth": "Last Month",
|
||||
|
||||
"thisYear": "This Year",
|
||||
"restOfThisYear": "The Rest of This Year"
|
||||
}
|
||||
}
|
||||
},
|
||||
"task": {
|
||||
|
|
Reference in New Issue
Block a user
The naming of this feels wrong now that it's not part of the component anymore.
If this help is specific to datepickerRange maybe we should also show that via the component name.
Changed!