xref: /openbmc/webui-vue/src/views/Logs/Dumps/DumpsForm.vue (revision d2483622fc31f6b965a052d0c4f999ad963d0a0f) 
1<template>
2  <div class="form-background p-3">
3    <b-form id="form-new-dump" novalidate @submit.prevent="handleSubmit">
4      <b-form-group
5        :label="$t('pageDumps.form.selectDumpType')"
6        label-for="selectDumpType"
7      >
8        <b-form-select
9          id="selectDumpType"
10          v-model="selectedDumpType"
11          :options="dumpTypeOptions"
12          :state="getValidationState(v$.selectedDumpType)"
13        >
14          <template #first>
15            <b-form-select-option :value="null" disabled>
16              {{ $t('global.form.selectAnOption') }}
17            </b-form-select-option>
18          </template>
19        </b-form-select>
20        <b-form-invalid-feedback role="alert">
21          {{ $t('global.form.required') }}
22        </b-form-invalid-feedback>
23      </b-form-group>
24      <alert variant="info" class="mb-3" :show="selectedDumpType === 'system'">
25        {{ $t('pageDumps.form.systemDumpInfo') }}
26      </alert>
27      <b-button variant="primary" type="submit" form="form-new-dump">
28        {{ $t('pageDumps.form.initiateDump') }}
29      </b-button>
30    </b-form>
31    <modal-confirmation @ok="createSystemDump" />
32  </div>
33</template>
34
35<script>
36import { useVuelidate } from '@vuelidate/core';
37import { required } from '@vuelidate/validators';
38import ModalConfirmation from './DumpsModalConfirmation';
39import Alert from '@/components/Global/Alert';
40import BVToastMixin from '@/components/Mixins/BVToastMixin';
41import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
42import i18n from '@/i18n';
43import { useI18n } from 'vue-i18n';
44
45export default {
46  components: { Alert, ModalConfirmation },
47  mixins: [BVToastMixin, VuelidateMixin],
48  setup() {
49    return {
50      v$: useVuelidate(),
51    };
52  },
53  data() {
54    return {
55      $t: useI18n().t,
56      selectedDumpType: null,
57      dumpTypeOptions: [
58        { value: 'bmc', text: i18n.global.t('pageDumps.dumpTypes.bmcDump') },
59        {
60          value: 'system',
61          text: i18n.global.t('pageDumps.dumpTypes.systemDump'),
62        },
63      ],
64    };
65  },
66  validations() {
67    return {
68      selectedDumpType: { required },
69    };
70  },
71  methods: {
72    handleSubmit() {
73      this.v$.$touch();
74      if (this.v$.$invalid) return;
75
76      // System dump initiation
77      if (this.selectedDumpType === 'system') {
78        this.showConfirmationModal();
79      }
80      // BMC dump initiation
81      else if (this.selectedDumpType === 'bmc') {
82        this.$store
83          .dispatch('dumps/createBmcDump')
84          .then(() =>
85            this.infoToast(
86              i18n.global.t('pageDumps.toast.successStartBmcDump'),
87              {
88                title: i18n.global.t(
89                  'pageDumps.toast.successStartBmcDumpTitle',
90                ),
91                timestamp: true,
92              },
93            ),
94          )
95          .catch(({ message }) => this.errorToast(message));
96      }
97    },
98    showConfirmationModal() {
99      this.$bvModal.show('modal-confirmation');
100    },
101    createSystemDump() {
102      this.$store
103        .dispatch('dumps/createSystemDump')
104        .then(() =>
105          this.infoToast(
106            i18n.global.t('pageDumps.toast.successStartSystemDump'),
107            {
108              title: i18n.global.t(
109                'pageDumps.toast.successStartSystemDumpTitle',
110              ),
111              timestamp: true,
112            },
113          ),
114        )
115        .catch(({ message }) => this.errorToast(message));
116    },
117  },
118};
119</script>
120