xref: /openbmc/webui-vue/src/views/Operations/Firmware/FirmwareFormUpdate.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
1<template>
2  <div>
3    <div class="form-background p-3">
4      <b-form @submit.prevent="onSubmitUpload">
5        <!-- Workstation Upload -->
6        <b-form-group
7          :label="$t('pageFirmware.form.updateFirmware.imageFile')"
8          label-for="image-file"
9          class="mb-3"
10        >
11          <form-file
12            id="image-file"
13            :disabled="isPageDisabled"
14            :state="getValidationState(v$.file)"
15            aria-describedby="image-file-help-block"
16            @input="onFileUpload($event)"
17          >
18            <template #invalid>
19              <b-form-invalid-feedback role="alert">
20                {{ $t('global.form.required') }}
21              </b-form-invalid-feedback>
22            </template>
23          </form-file>
24        </b-form-group>
25
26        <b-btn
27          data-test-id="firmware-button-startUpdate"
28          type="submit"
29          variant="primary"
30          :disabled="isPageDisabled"
31        >
32          {{ $t('pageFirmware.form.updateFirmware.startUpdate') }}
33        </b-btn>
34      </b-form>
35    </div>
36
37    <!-- Modals -->
38    <modal-update-firmware v-model="showUpdateModal" @ok="updateFirmware" />
39  </div>
40</template>
41
42<script>
43import { required } from 'vuelidate/lib/validators';
44
45import BVToastMixin from '@/components/Mixins/BVToastMixin';
46import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
47import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
48import { useVuelidate } from '@vuelidate/core';
49
50import FormFile from '@/components/Global/FormFile';
51import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
52import { useI18n } from 'vue-i18n';
53import i18n from '@/i18n';
54
55export default {
56  components: { FormFile, ModalUpdateFirmware },
57  mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
58  props: {
59    isPageDisabled: {
60      required: true,
61      type: Boolean,
62      default: false,
63    },
64    isServerOff: {
65      required: true,
66      type: Boolean,
67    },
68  },
69  setup() {
70    return {
71      v$: useVuelidate(),
72    };
73  },
74  data() {
75    return {
76      $t: useI18n().t,
77      loading,
78      showUpdateModal: false,
79      file: null,
80      isServerPowerOffRequired:
81        process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
82    };
83  },
84  validations: {
85    file: {
86      required,
87    },
88  },
89  created() {
90    this.$store.dispatch('firmware/getUpdateServiceSettings');
91  },
92  methods: {
93    updateFirmware() {
94      this.startLoader();
95      const timerId = setTimeout(() => {
96        this.endLoader();
97        this.infoToast(
98          i18n.global.t('pageFirmware.toast.verifyUpdateMessage'),
99          {
100            title: i18n.global.t('pageFirmware.toast.verifyUpdate'),
101            refreshAction: true,
102          },
103        );
104      }, 360000);
105      this.infoToast(i18n.global.t('pageFirmware.toast.updateStartedMessage'), {
106        title: i18n.global.t('pageFirmware.toast.updateStarted'),
107        timestamp: true,
108      });
109      this.dispatchWorkstationUpload(timerId);
110    },
111    dispatchWorkstationUpload(timerId) {
112      this.$store
113        .dispatch('firmware/uploadFirmware', {
114          image: this.file,
115        })
116        .catch(({ message }) => {
117          this.endLoader();
118          this.errorToast(message);
119          clearTimeout(timerId);
120        });
121    },
122    onSubmitUpload() {
123      this.v$.$touch();
124      if (this.v$.$invalid) return;
125      this.showUpdateModal = true;
126    },
127    onFileUpload(file) {
128      this.file = file;
129      this.v$.file.$touch();
130    },
131  },
132};
133</script>
134