Skip to content
Snippets Groups Projects
Select Git revision
  • 6d2d8f895b23f424d1270cbda26852ffd3d62a88
  • master default protected
  • 553-semantic-recommendation
  • release-1.10 protected
  • replication_test
  • dev protected
  • release-1.9 protected
  • 551-init-broker-service-permissions
  • 549-test-oai-pmh
  • 545-saving-multiple-times-breaks-pid-metadata
  • 499-standalone-compute-service-2
  • 539-load-tests
  • hotfix/helm-chart
  • luca_ba_new_interface
  • 534-bug-when-adding-access-to-user-that-is-not-registered-at-dashboard-service
  • release-1.8 protected
  • 533-integrate-semantic-recommendation
  • feature/openshift
  • 518-spark-doesn-t-map-the-headers-correct
  • 485-fixity-checks
  • 530-various-schema-problems-with-subsets
  • v1.10.3 protected
  • v1.10.2 protected
  • v1.10.1 protected
  • v1.10.0-rc13 protected
  • v1.10.0-rc12 protected
  • v1.10.0-rc11 protected
  • v1.10.0-rc10 protected
  • v1.10.0-rc9 protected
  • v1.10.0-rc8 protected
  • v1.10.0-rc7 protected
  • v1.10.0-rc6 protected
  • v1.10.0-rc5 protected
  • v1.10.0-rc4 protected
  • v1.10.0-rc3 protected
  • v1.10.0-rc2 protected
  • v1.10.0rc1 protected
  • v1.10.0rc0 protected
  • v1.10.0 protected
  • v1.9.3 protected
  • v1.9.2 protected
41 results

TableHistory.vue

Blame
  • TableHistory.vue 5.51 KiB
    <template>
      <div>
        <v-card
          :title="$t('pages.table.subpages.versioning.title')"
          :subtitle="$t('pages.table.subpages.versioning.subtitle')"
          variant="elevated">
          <v-card-text>
            <v-text-field
              v-model="datetime"
              required
              :rules="[
                v => !!v || $t('validation.required'),
                v => v && /^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}$/.test(v) || $t('validation.pattern.timestamp')]"
              persistent-hint
              :variant="inputVariant"
              :label="$t('pages.table.subpages.versioning.timestamp.label')"
              :hint="$t('pages.table.subpages.versioning.timestamp.hint')"
              :placeholder="$t('pages.table.subpages.versioning.timestamp.placeholder')"
              :suffix="$t('pages.table.subpages.versioning.timestamp.suffix')"
              class="mb-4"
              type="text" />
            <Loading
              v-if="loading" />
            <Bar
              v-if="!loading"
              id="time-travel"
              :data="chartData"
              :options="chartOptions"
              :height="200"
              :width="400" />
            <pre>{{ history }}</pre>
            <p>
              {{ $t('pages.table.subpages.versioning.chart.legend') }}
            </p>
          </v-card-text>
          <v-card-actions>
            <v-spacer />
            <v-btn
              :variant="buttonVariant"
              :text="$t('navigation.cancel')"
              @click="cancel" />
            <v-btn
              color="tertiary"
              :variant="buttonVariant"
              :text="$t('navigation.now')"
              @click="reset" />
            <v-btn
              color="primary"
              variant="flat"
              :disabled="datetime === null || datetime === undefined || datetime === ''"
              :text="$t('navigation.continue')"
              @click="pick" />
          </v-card-actions>
        </v-card>
      </div>
    </template>
    
    <script>
    import { UTCDate } from '@date-fns/utc'
    import { Bar } from 'vue-chartjs'
    import { format } from 'date-fns'
    import { Chart as ChartJS, Title, Tooltip, BarElement, CategoryScale, LinearScale, LogarithmicScale } from 'chart.js'
    
    ChartJS.register(Title, Tooltip, BarElement, CategoryScale, LinearScale, LogarithmicScale)
    
    export default {
      components: {
        Bar
      },
      data () {
        return {
          formValid: false,
          loading: true,
          datetime: null,
          history: null,
          chartData: null,
          chartOptions: {
            responsive: true,
            onClick: this.handle,
            animations: null,
            plugins: {
              title: {
                display: true,
                text: this.$t('pages.table.subpages.versioning.chart.title')
              }
            },
            scales: {
              y: {
                display: true,
                ticks: {
                  min: 0,
                  stepSize: 1
                },
                title: {
                  display: true,
                  text: this.$t('pages.table.subpages.versioning.chart.ylabel')
                },
              },
              x: {
                display: false,
                ticks: {
                  min: 0,
                  stepSize: 1
                },
                title: {
                  display: true,
                  text: this.$t('pages.table.subpages.versioning.chart.xlabel')
                }
              }
            }
          },
          cacheStore: useCacheStore()
        }
      },
      computed: {
        table () {
          return this.cacheStore.getTable
        },
        inputVariant () {
          const runtimeConfig = useRuntimeConfig()
          return this.$vuetify.theme.global.name.toLowerCase().endsWith('contrast') ? runtimeConfig.public.variant.input.contrast : runtimeConfig.public.variant.input.normal
        },
        buttonVariant () {
          const runtimeConfig = useRuntimeConfig()
          return this.$vuetify.theme.global.name.toLowerCase().endsWith('contrast') ? runtimeConfig.public.variant.button.contrast : runtimeConfig.public.variant.button.normal
        }
      },
      mounted() {
        this.loadHistory()
      },
      methods: {
        cancel () {
          this.$emit('close', { success: false })
        },
        reset () {
          this.$emit('close', { success: true, timestamp: null })
        },
        pick () {
          this.$emit('close', {
            success: true,
            timestamp: this.datetime
          })
        },
        handle (point, event) {
          if (event.length !== 1 || event[0].index === undefined) {
            return
          }
          const idx = event[0].index
          this.datetime = this.chartData.labels[idx]
          console.debug('date time', this.datetime, 'idx', idx)
        },
        filterHistoryEventType (history, type) {
          return history.map(d => {
            if (d.event === type) {
              return d.total
            }
            return null
          })
        },
        loadHistory () {
          this.loading = true
          const tableService = useTableService()
          tableService.history(this.table.database_id, this.table.id)
            .then((history) => {
              this.loading = false
              this.chartData = {
                // labels: history ? history.map(d => format(new UTCDate(d.timestamp), 'yyyy-MM-dd HH:mm:ss.SSS')) : [],
                labels: history ? history.map(d => format(new UTCDate(d.timestamp), 'yyyy-MM-dd HH:mm:ss')) : [],
                datasets: [
                  { backgroundColor: this.$vuetify.theme.current.colors.success, data: this.filterHistoryEventType(history, 'insert') },
                  { backgroundColor: this.$vuetify.theme.current.colors.error, data: this.filterHistoryEventType(history, 'delete') }
                ]
              }
            })
            .catch(({message}) => {
              this.loading = false
              const toast = useToastInstance()
              if (typeof code !== 'string') {
                return
              }
              toast.error(message)
            })
        }
      }
    }
    </script>