feat: add date math for filters #1342
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<card class="has-no-shadow how-it-works-modal"
|
||||
:title="$t('input.datepickerRange.math.title')">
|
||||
<p>
|
||||
{{ $t('input.datepickerRange.math.intro') }}
|
||||
</p>
|
||||
konrad marked this conversation as resolved
Outdated
|
||||
<p>
|
||||
<i18n-t keypath="input.datepickerRange.math.expression">
|
||||
<code>now</code>
|
||||
<code>||</code>
|
||||
</i18n-t>
|
||||
</p>
|
||||
<p>
|
||||
<i18n-t keypath="input.datepickerRange.math.similar">
|
||||
<a href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
|
||||
rel="noreferrer noopener nofollow" target="_blank">
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
use BaseButton use BaseButton
konrad
commented
Done. Done.
|
||||
Grafana
|
||||
</a>
|
||||
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.
|
||||
<a href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math"
|
||||
rel="noreferrer noopener nofollow" target="_blank">
|
||||
Elasticsearch
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
use BaseButton use BaseButton
|
||||
</a>
|
||||
</i18n-t>
|
||||
</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>
|
||||
</ul>
|
||||
<p>{{ $t('input.datepickerRange.math.supportedUnits') }}</p>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>s</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.seconds') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>m</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.minutes') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>h</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>H</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>d</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.days') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>w</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.weeks') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>M</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.months') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>y</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.years') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>{{ $t('input.datepickerRange.math.someExamples') }}</p>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>now</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.now') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now+24h</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.in24h') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now/d</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.today') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now/w</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.beginningOfThisWeek') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now/w+1w</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.endOfThisWeek') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now+30d</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.in30Days') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>{{ exampleDate }}||+1M/d</code></td>
|
||||
<td>
|
||||
<i18n-t keypath="input.datepickerRange.math.examples.datePlusMonth">
|
||||
<code>{{ exampleDate }}</code>
|
||||
</i18n-t>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {format} from 'date-fns'
|
||||
|
||||
const exampleDate = format(new Date(), 'yyyy-MM-dd')
|
||||
</script>
|
|
@ -60,111 +60,7 @@
|
|||
:overflow="true"
|
||||
variant="hint-modal"
|
||||
>
|
||||
<card class="has-no-shadow how-it-works-modal"
|
||||
:title="$t('input.datepickerRange.math.title')">
|
||||
<p>
|
||||
{{ $t('input.datepickerRange.math.intro') }}
|
||||
</p>
|
||||
<p>
|
||||
<i18n-t keypath="input.datepickerRange.math.expression">
|
||||
<code>now</code>
|
||||
<code>||</code>
|
||||
</i18n-t>
|
||||
</p>
|
||||
<p>
|
||||
<i18n-t keypath="input.datepickerRange.math.similar">
|
||||
<a href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
|
||||
rel="noreferrer noopener nofollow" target="_blank">
|
||||
Grafana
|
||||
</a>
|
||||
<a href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math"
|
||||
rel="noreferrer noopener nofollow" target="_blank">
|
||||
Elasticsearch
|
||||
</a>
|
||||
</i18n-t>
|
||||
</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>
|
||||
</ul>
|
||||
<p>{{ $t('input.datepickerRange.math.supportedUnits') }}</p>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>s</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.seconds') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>m</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.minutes') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>h</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>H</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>d</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.days') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>w</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.weeks') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>M</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.months') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>y</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.units.years') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>{{ $t('input.datepickerRange.math.someExamples') }}</p>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>now</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.now') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now+24h</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.in24h') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now/d</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.today') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now/w</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.beginningOfThisWeek') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now/w+1w</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.endOfThisWeek') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>now+30d</code></td>
|
||||
<td>{{ $t('input.datepickerRange.math.examples.in30Days') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>{{ exampleDate }}||+1M/d</code></td>
|
||||
<td>
|
||||
<i18n-t keypath="input.datepickerRange.math.examples.datePlusMonth">
|
||||
<code>{{ exampleDate }}</code>
|
||||
</i18n-t>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</card>
|
||||
<DatemathHelp/>
|
||||
</modal>
|
||||
</div>
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
The whole explanation card should be its own component. The whole explanation card should be its own component.
konrad
commented
Done! Done!
|
||||
</div>
|
||||
|
@ -179,11 +75,11 @@ import 'flatpickr/dist/flatpickr.css'
|
|||
import {computed, ref, watch} from 'vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
dpschen marked this conversation as resolved
Outdated
dpschen
commented
I think it's really cool, that we support this, but it would be cool, if we could break this down and explain it in our / simpler terms. I think it's really cool, that we support this, but it would be cool, if we could break this down and explain it in our / simpler terms.
konrad
commented
I think I'm already doing that but wanted to highlight for people who know the syntax from Elasticsearch or Grafana they can use it here as well. Was there anything in the explanation you noticed as not quite understandable? I think I'm already doing that but wanted to highlight for people who know the syntax from Elasticsearch or Grafana they can use it here as well.
Was there anything in the explanation you noticed as not quite understandable?
dpschen
commented
I didn't even check to be honest. I didn't even check to be honest.
Was just something I though of while reading this.
|
||||
import {store} from '@/store'
|
||||
import {format} from 'date-fns'
|
||||
import Popup from '@/components/misc/popup.vue'
|
||||
|
||||
import {dateRanges} from '@/components/date/dateRanges'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import DatemathHelp from '@/components/date/datemathHelp.vue'
|
||||
|
||||
const {t} = useI18n()
|
||||
|
||||
|
@ -204,7 +100,6 @@ const flatPickerConfig = computed(() => ({
|
|||
}))
|
||||
|
||||
const showHowItWorks = ref(false)
|
||||
const exampleDate = format(new Date(), 'yyyy-MM-dd')
|
||||
|
||||
const flatpickrRange = ref('')
|
||||
|
||||
|
|
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!