xref: /openbmc/webui-vue/src/views/Logs/Dumps/DumpsForm.vue (revision 142fe91835e0f57b01a2801946f1b63ab56ee3cc) 
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.form.bmcDump') },
59        { value: 'system', text: i18n.global.t('pageDumps.form.systemDump') },
60      ],
61    };
62  },
63  validations() {
64    return {
65      selectedDumpType: { required },
66    };
67  },
68  methods: {
69    handleSubmit() {
70      this.v$.$touch();
71      if (this.v$.$invalid) return;
72
73      // System dump initiation
74      if (this.selectedDumpType === 'system') {
75        this.showConfirmationModal();
76      }
77      // BMC dump initiation
78      else if (this.selectedDumpType === 'bmc') {
79        this.$store
80          .dispatch('dumps/createBmcDump')
81          .then(() =>
82            this.infoToast(
83              i18n.global.t('pageDumps.toast.successStartBmcDump'),
84              {
85                title: i18n.global.t(
86                  'pageDumps.toast.successStartBmcDumpTitle',
87                ),
88                timestamp: true,
89              },
90            ),
91          )
92          .catch(({ message }) => this.errorToast(message));
93      }
94    },
95    showConfirmationModal() {
96      this.$bvModal.show('modal-confirmation');
97    },
98    createSystemDump() {
99      this.$store
100        .dispatch('dumps/createSystemDump')
101        .then(() =>
102          this.infoToast(
103            i18n.global.t('pageDumps.toast.successStartSystemDump'),
104            {
105              title: i18n.global.t(
106                'pageDumps.toast.successStartSystemDumpTitle',
107              ),
108              timestamp: true,
109            },
110          ),
111        )
112        .catch(({ message }) => this.errorToast(message));
113    },
114  },
115};
116</script>
117