Added basic Log datetime filter
This commit is contained in:
parent
d2ef43f2bb
commit
233b1cffe7
|
@ -28,7 +28,8 @@
|
||||||
</template>
|
</template>
|
||||||
</v-tooltip>
|
</v-tooltip>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
|
<DateTimePicker v-model="dateIn" class="ma-6" label="Início" />
|
||||||
|
<DateTimePicker v-model="dateOut" class="ma-4" label="Fim" />
|
||||||
<v-checkbox v-model="polling" label="Atualizar automaticamente" />
|
<v-checkbox v-model="polling" label="Atualizar automaticamente" />
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
|
||||||
|
@ -86,10 +87,12 @@
|
||||||
<script>
|
<script>
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
import { format, subDays } from 'date-fns'
|
import { format, subDays } from 'date-fns'
|
||||||
|
import DateTimePicker from '../components/ui/DatetimePicker'
|
||||||
|
|
||||||
import VueJsonPretty from 'vue-json-pretty'
|
import VueJsonPretty from 'vue-json-pretty'
|
||||||
|
|
||||||
import 'vue-json-pretty/lib/styles.css'
|
import 'vue-json-pretty/lib/styles.css'
|
||||||
|
import DatetimePicker from '../components/ui/DatetimePicker.vue'
|
||||||
|
|
||||||
const LOGS_QUERY = gql`
|
const LOGS_QUERY = gql`
|
||||||
query($search: String, $dateIn: String, $dateOut: String, $limit: Int) {
|
query($search: String, $dateIn: String, $dateOut: String, $limit: Int) {
|
||||||
|
@ -105,7 +108,7 @@ const LOGS_QUERY = gql`
|
||||||
`
|
`
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { VueJsonPretty },
|
components: { VueJsonPretty, DateTimePicker },
|
||||||
data: () => ({
|
data: () => ({
|
||||||
showLow: true,
|
showLow: true,
|
||||||
showInfo: true,
|
showInfo: true,
|
223
web/src/components/ui/DatetimePicker.vue
Normal file
223
web/src/components/ui/DatetimePicker.vue
Normal file
|
@ -0,0 +1,223 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-dialog v-model="display" :width="dialogWidth">
|
||||||
|
<template #activator="{ on }">
|
||||||
|
<v-text-field
|
||||||
|
v-bind="textFieldProps"
|
||||||
|
:disabled="disabled"
|
||||||
|
:loading="loading"
|
||||||
|
:label="label"
|
||||||
|
:value="formattedDatetime"
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
v-on="on"
|
||||||
|
>
|
||||||
|
<template #progress>
|
||||||
|
<slot name="progress">
|
||||||
|
<v-progress-linear
|
||||||
|
color="primary"
|
||||||
|
indeterminate
|
||||||
|
absolute
|
||||||
|
height="2"
|
||||||
|
></v-progress-linear>
|
||||||
|
</slot>
|
||||||
|
</template>
|
||||||
|
</v-text-field>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-card>
|
||||||
|
<v-card-text class="px-0 py-0">
|
||||||
|
<v-tabs v-model="activeTab" fixed-tabs>
|
||||||
|
<v-tab key="calendar">
|
||||||
|
<slot name="dateIcon">
|
||||||
|
<v-icon>mdi-calendar</v-icon>
|
||||||
|
</slot>
|
||||||
|
</v-tab>
|
||||||
|
<v-tab key="timer" :disabled="dateSelected">
|
||||||
|
<slot name="timeIcon">
|
||||||
|
<v-icon>mdi-clock</v-icon>
|
||||||
|
</slot>
|
||||||
|
</v-tab>
|
||||||
|
|
||||||
|
<v-tab-item key="calendar">
|
||||||
|
<v-date-picker
|
||||||
|
v-model="date"
|
||||||
|
v-bind="datePickerProps"
|
||||||
|
full-width
|
||||||
|
@input="showTimePicker"
|
||||||
|
/>
|
||||||
|
</v-tab-item>
|
||||||
|
<v-tab-item key="timer">
|
||||||
|
<v-time-picker
|
||||||
|
ref="timer"
|
||||||
|
v-model="time"
|
||||||
|
class="v-time-picker-custom"
|
||||||
|
v-bind="timePickerProps"
|
||||||
|
full-width
|
||||||
|
></v-time-picker>
|
||||||
|
</v-tab-item>
|
||||||
|
</v-tabs>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<slot name="actions" :parent="this">
|
||||||
|
<v-btn color="grey lighten-1" text @click.native="clearHandler">{{
|
||||||
|
clearText
|
||||||
|
}}</v-btn>
|
||||||
|
<v-btn color="green darken-1" text @click="okHandler">{{
|
||||||
|
okText
|
||||||
|
}}</v-btn>
|
||||||
|
</slot>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { format, parse } from 'date-fns'
|
||||||
|
const DEFAULT_DATE = ''
|
||||||
|
const DEFAULT_TIME = '00:00:00'
|
||||||
|
const DEFAULT_DATE_FORMAT = 'yyyy-MM-dd'
|
||||||
|
const DEFAULT_TIME_FORMAT = 'HH:mm:ss'
|
||||||
|
const DEFAULT_DIALOG_WIDTH = 340
|
||||||
|
const DEFAULT_CLEAR_TEXT = 'CLEAR'
|
||||||
|
const DEFAULT_OK_TEXT = 'OK'
|
||||||
|
export default {
|
||||||
|
name: 'VDatetimePicker',
|
||||||
|
model: {
|
||||||
|
prop: 'datetime',
|
||||||
|
event: 'input'
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
datetime: {
|
||||||
|
type: [Date, String],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
dialogWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: DEFAULT_DIALOG_WIDTH
|
||||||
|
},
|
||||||
|
dateFormat: {
|
||||||
|
type: String,
|
||||||
|
default: DEFAULT_DATE_FORMAT
|
||||||
|
},
|
||||||
|
timeFormat: {
|
||||||
|
type: String,
|
||||||
|
default: 'HH:mm'
|
||||||
|
},
|
||||||
|
clearText: {
|
||||||
|
type: String,
|
||||||
|
default: DEFAULT_CLEAR_TEXT
|
||||||
|
},
|
||||||
|
okText: {
|
||||||
|
type: String,
|
||||||
|
default: DEFAULT_OK_TEXT
|
||||||
|
},
|
||||||
|
textFieldProps: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
datePickerProps: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
timePickerProps: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
display: false,
|
||||||
|
activeTab: 0,
|
||||||
|
date: DEFAULT_DATE,
|
||||||
|
time: DEFAULT_TIME
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
dateTimeFormat() {
|
||||||
|
return this.dateFormat + ' ' + this.timeFormat
|
||||||
|
},
|
||||||
|
defaultDateTimeFormat() {
|
||||||
|
return DEFAULT_DATE_FORMAT + ' ' + DEFAULT_TIME_FORMAT
|
||||||
|
},
|
||||||
|
formattedDatetime() {
|
||||||
|
return this.selectedDatetime
|
||||||
|
? format(this.selectedDatetime, this.dateTimeFormat)
|
||||||
|
: ''
|
||||||
|
},
|
||||||
|
selectedDatetime() {
|
||||||
|
if (this.date && this.time) {
|
||||||
|
let datetimeString = this.date + ' ' + this.time
|
||||||
|
if (this.time.length === 5) {
|
||||||
|
datetimeString += ':00'
|
||||||
|
}
|
||||||
|
return parse(datetimeString, this.defaultDateTimeFormat, new Date())
|
||||||
|
} else {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dateSelected() {
|
||||||
|
return !this.date
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
datetime: function () {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
if (!this.datetime) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let initDateTime
|
||||||
|
if (this.datetime instanceof Date) {
|
||||||
|
initDateTime = this.datetime
|
||||||
|
} else if (
|
||||||
|
typeof this.datetime === 'string' ||
|
||||||
|
this.datetime instanceof String
|
||||||
|
) {
|
||||||
|
// see https://stackoverflow.com/a/9436948
|
||||||
|
initDateTime = parse(this.datetime, this.dateTimeFormat, new Date())
|
||||||
|
}
|
||||||
|
this.date = format(initDateTime, DEFAULT_DATE_FORMAT)
|
||||||
|
this.time = format(initDateTime, DEFAULT_TIME_FORMAT)
|
||||||
|
},
|
||||||
|
okHandler() {
|
||||||
|
this.resetPicker()
|
||||||
|
this.$emit('input', this.selectedDatetime)
|
||||||
|
},
|
||||||
|
clearHandler() {
|
||||||
|
this.resetPicker()
|
||||||
|
this.date = DEFAULT_DATE
|
||||||
|
this.time = DEFAULT_TIME
|
||||||
|
this.$emit('input', null)
|
||||||
|
},
|
||||||
|
resetPicker() {
|
||||||
|
this.display = false
|
||||||
|
this.activeTab = 0
|
||||||
|
if (this.$refs.timer) {
|
||||||
|
this.$refs.timer.selectingHour = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showTimePicker() {
|
||||||
|
this.activeTab = 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -81,12 +81,6 @@ export default {
|
||||||
groupTitle: 'Sistema',
|
groupTitle: 'Sistema',
|
||||||
|
|
||||||
items: [
|
items: [
|
||||||
{
|
|
||||||
title: 'Logs',
|
|
||||||
icon: 'mdi-clipboard-text-search',
|
|
||||||
route: { name: 'logs' },
|
|
||||||
role: 'superAdmin'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Administração',
|
title: 'Administração',
|
||||||
icon: 'mdi-shield-account',
|
icon: 'mdi-shield-account',
|
||||||
|
|
|
@ -177,16 +177,6 @@ const routes = [
|
||||||
import(/* webpackChunkName: "wifi-users" */ '../views/WifiUsers.vue')
|
import(/* webpackChunkName: "wifi-users" */ '../views/WifiUsers.vue')
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
|
||||||
path: '/logs',
|
|
||||||
name: 'logs',
|
|
||||||
meta: {
|
|
||||||
title: 'Logs',
|
|
||||||
superAdmin: true
|
|
||||||
},
|
|
||||||
component: () => import(/* webpackChunkName: "logs" */ '../views/Logs.vue')
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/system-administration',
|
path: '/system-administration',
|
||||||
name: 'system-administration',
|
name: 'system-administration',
|
||||||
|
|
|
@ -1,59 +1,95 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container>
|
<div>
|
||||||
<v-row>
|
<v-tabs v-model="tab">
|
||||||
<v-col cols="12">
|
<v-tab> Logs </v-tab>
|
||||||
<v-card outlined>
|
<v-tab> Manutenção </v-tab>
|
||||||
<v-card-title class="headline">
|
</v-tabs>
|
||||||
Importação de usuários do Active Directory
|
<v-tabs-items v-model="tab">
|
||||||
</v-card-title>
|
<v-tab-item><Logs /> </v-tab-item>
|
||||||
|
<v-tab-item>
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-card outlined>
|
||||||
|
<v-card-title class="headline">
|
||||||
|
Importação de usuários do Active Directory
|
||||||
|
</v-card-title>
|
||||||
|
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
Os usuários são importados automaticamente uma vez ao dia. Se você
|
Os usuários são importados automaticamente uma vez ao dia. Se
|
||||||
necessita que sejam atualizados agora, clique no botão abaixo.
|
você necessita que sejam atualizados agora, clique no botão
|
||||||
<v-alert color="info" class="my-4 text-justify" icon="mdi-alert">
|
abaixo.
|
||||||
ATENÇÃO! O processo leva vários minutos! Não repita este processo
|
<v-alert
|
||||||
em um curto espaço de tempo. Você pode acompanhar o progresso no
|
color="info"
|
||||||
log do servidor.
|
class="my-4 text-justify"
|
||||||
</v-alert>
|
icon="mdi-alert"
|
||||||
<v-alert color="warning" class="my-4 text-justify" icon="mdi-alert">
|
>
|
||||||
ATENÇÃO! Não é necessário executar essa ação para atualização de
|
ATENÇÃO! O processo leva vários minutos! Não repita este
|
||||||
permissões (roles). As permissões são sempre atualizadas a cada
|
processo em um curto espaço de tempo. Você pode acompanhar o
|
||||||
requisição assíncronamente.
|
progresso no log do servidor.
|
||||||
</v-alert>
|
</v-alert>
|
||||||
</v-card-text>
|
<v-alert
|
||||||
|
color="warning"
|
||||||
|
class="my-4 text-justify"
|
||||||
|
icon="mdi-alert"
|
||||||
|
>
|
||||||
|
ATENÇÃO! Não é necessário executar essa ação para
|
||||||
|
atualização de permissões (roles). As permissões são sempre
|
||||||
|
atualizadas a cada requisição assíncronamente.
|
||||||
|
</v-alert>
|
||||||
|
</v-card-text>
|
||||||
|
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-btn color="primary" large :elevation="0" @click="importUsers">
|
<v-btn
|
||||||
Importar agora!
|
color="primary"
|
||||||
</v-btn>
|
large
|
||||||
</v-card-actions>
|
:elevation="0"
|
||||||
</v-card>
|
@click="importUsers"
|
||||||
</v-col>
|
>
|
||||||
<v-col cols="12">
|
Importar agora!
|
||||||
<v-card outlined>
|
</v-btn>
|
||||||
<v-card-title class="headline"> Tokens expirados </v-card-title>
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-card outlined>
|
||||||
|
<v-card-title class="headline"> Tokens expirados </v-card-title>
|
||||||
|
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
Tokens expirados não podem ser utilizados, porém são mantidos no
|
Tokens expirados não podem ser utilizados, porém são mantidos
|
||||||
banco de dados para consultas. Você pode apagar os tokens expirados
|
no banco de dados para consultas. Você pode apagar os tokens
|
||||||
usando o botão abaixo.
|
expirados usando o botão abaixo.
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
|
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-btn color="primary" large :elevation="0"> Apagar tokens </v-btn>
|
<v-btn color="primary" large :elevation="0">
|
||||||
</v-card-actions>
|
Apagar tokens
|
||||||
</v-card></v-col
|
</v-btn>
|
||||||
>
|
</v-card-actions>
|
||||||
</v-row>
|
</v-card></v-col
|
||||||
</v-container>
|
>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</v-tab-item>
|
||||||
|
</v-tabs-items>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Logs from '../components/Logs'
|
||||||
|
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SystemAdministration',
|
name: 'SystemAdministration',
|
||||||
|
components: {
|
||||||
|
Logs
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
tab: 0
|
||||||
|
}),
|
||||||
methods: {
|
methods: {
|
||||||
async importUsers() {
|
async importUsers() {
|
||||||
const response = await this.$apollo.mutate({
|
const response = await this.$apollo.mutate({
|
||||||
|
|
Loading…
Reference in New Issue
Block a user