xref: /openbmc/webui-vue/src/views/Logs/Dumps/DumpsForm.vue (revision e1420032fef78a490fb2be7b407c4a6bd82b1b02) 
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
32      :require-confirmation="selectedDumpType === 'system'"
33      @ok="createSystemDump"
34    />
35  </div>
36</template>
37
38<script>
39import { useVuelidate } from '@vuelidate/core';
40import { required } from '@vuelidate/validators';
41import ModalConfirmation from './DumpsModalConfirmation';
42import Alert from '@/components/Global/Alert';
43import BVToastMixin from '@/components/Mixins/BVToastMixin';
44import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
45import i18n from '@/i18n';
46import { useI18n } from 'vue-i18n';
47
48export default {
49  components: { Alert, ModalConfirmation },
50  mixins: [BVToastMixin, VuelidateMixin],
51  setup() {
52    return {
53      v$: useVuelidate(),
54    };
55  },
56  data() {
57    return {
58      $t: useI18n().t,
59      selectedDumpType: null,
60      dumpTypeOptions: [
61        { value: 'bmc', text: i18n.global.t('pageDumps.dumpTypes.bmcDump') },
62        {
63          value: 'system',
64          text: i18n.global.t('pageDumps.dumpTypes.systemDump'),
65        },
66      ],
67    };
68  },
69  validations() {
70    return {
71      selectedDumpType: { required },
72    };
73  },
74  methods: {
75    handleSubmit() {
76      this.v$.$touch();
77      if (this.v$.$invalid) return;
78
79      // System dump initiation
80      if (this.selectedDumpType === 'system') {
81        this.showConfirmationModal();
82      }
83      // BMC dump initiation
84      else if (this.selectedDumpType === 'bmc') {
85        this.$store
86          .dispatch('dumps/createBmcDump')
87          .then(() =>
88            this.infoToast(
89              i18n.global.t('pageDumps.toast.successStartBmcDump'),
90              {
91                title: i18n.global.t(
92                  'pageDumps.toast.successStartBmcDumpTitle',
93                ),
94                timestamp: true,
95              },
96            ),
97          )
98          .catch(({ message }) => this.errorToast(message));
99      }
100    },
101    showConfirmationModal() {
102      this.$bvModal.show('modal-confirmation');
103    },
104    createSystemDump() {
105      this.$store
106        .dispatch('dumps/createSystemDump')
107        .then(() =>
108          this.infoToast(
109            i18n.global.t('pageDumps.toast.successStartSystemDump'),
110            {
111              title: i18n.global.t(
112                'pageDumps.toast.successStartSystemDumpTitle',
113              ),
114              timestamp: true,
115            },
116          ),
117        )
118        .catch(({ message }) => this.errorToast(message));
119    },
120  },
121};
122</script>
123