xref: /openbmc/webui-vue/src/main.js (revision 24b377db47a05f742b1f3db77606f6bae845f637)
1 import { createApp } from 'vue';
2 
3 import App from './App.vue';
4 import i18n from './i18n';
5 
6 import router from './router';
7 
8 import { format } from 'date-fns-tz';
9 
10 //Do not change store import.
11 //Exact match alias set to support
12 //dotenv customizations.
13 import store from './store';
14 import eventBus from './eventBus';
15 
16 import {
17   BootstrapVue,
18   AlertPlugin,
19   BadgePlugin,
20   ButtonPlugin,
21   BVConfigPlugin,
22   CardPlugin,
23   CollapsePlugin,
24   DropdownPlugin,
25   FormPlugin,
26   FormCheckboxPlugin,
27   FormDatepickerPlugin,
28   FormFilePlugin,
29   FormGroupPlugin,
30   FormInputPlugin,
31   FormRadioPlugin,
32   FormSelectPlugin,
33   FormTagsPlugin,
34   InputGroupPlugin,
35   LayoutPlugin,
36   LinkPlugin,
37   ListGroupPlugin,
38   ModalPlugin,
39   NavbarPlugin,
40   NavPlugin,
41   PaginationPlugin,
42   ProgressPlugin,
43   TablePlugin,
44   TabsPlugin,
45   ToastPlugin,
46   TooltipPlugin,
47 } from 'bootstrap-vue';
48 
49 const app = createApp({
50   router,
51   store,
52   render: (h) => h(App),
53 });
54 app.use(i18n);
55 
56 app.use(router);
57 app.use(store);
58 
59 // Plugins
60 app.use(BootstrapVue);
61 app.use(AlertPlugin);
62 app.use(BadgePlugin);
63 app.use(ButtonPlugin);
64 app.use(BVConfigPlugin, {
65   BFormText: { textVariant: 'secondary' },
66   BTable: {
67     headVariant: 'light',
68     footVariant: 'light',
69   },
70   BFormTags: {
71     tagVariant: 'primary',
72     addButtonVariant: 'link-primary',
73   },
74   BBadge: {
75     variant: 'primary',
76   },
77 });
78 
79 app.use(CardPlugin);
80 app.use(CollapsePlugin);
81 app.use(DropdownPlugin);
82 app.use(FormPlugin);
83 app.use(FormCheckboxPlugin);
84 app.use(FormDatepickerPlugin);
85 app.use(FormFilePlugin);
86 app.use(FormGroupPlugin);
87 app.use(FormInputPlugin);
88 app.use(FormRadioPlugin);
89 app.use(FormSelectPlugin);
90 app.use(FormTagsPlugin);
91 app.use(InputGroupPlugin);
92 app.use(LayoutPlugin);
93 app.use(LayoutPlugin);
94 app.use(LinkPlugin);
95 app.use(ListGroupPlugin);
96 app.use(ModalPlugin);
97 app.use(NavbarPlugin);
98 app.use(NavPlugin);
99 app.use(PaginationPlugin);
100 app.use(ProgressPlugin);
101 app.use(TablePlugin);
102 app.use(TabsPlugin);
103 app.use(ToastPlugin);
104 app.use(TooltipPlugin);
105 
106 app.mount('#app');
107 app.prototype.$eventBus = eventBus;
108 //Filters
109 const filter = {
110   formatDate(value) {
111     const isUtcDisplay = store.getters['global/isUtcDisplay'];
112 
113     if (value instanceof Date) {
114       if (isUtcDisplay) {
115         return value.toISOString().substring(0, 10);
116       }
117       const pattern = `yyyy-MM-dd`;
118       const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
119       return format(value, pattern, { timezone });
120     }
121   },
122   formatTime(value) {
123     const isUtcDisplay = store.getters['global/isUtcDisplay'];
124 
125     if (value instanceof Date) {
126       if (isUtcDisplay) {
127         let timeOptions = {
128           timeZone: 'UTC',
129           hourCycle: 'h23',
130         };
131         return `${value.toLocaleTimeString('default', timeOptions)} UTC`;
132       }
133       const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
134       const shortTz = this.shortTimeZone(value);
135       const pattern = `HH:mm:ss ('${shortTz}' O)`;
136       return format(value, pattern, { timezone }).replace('GMT', 'UTC');
137     }
138   },
139   shortTimeZone(value) {
140     const longTZ = value
141       .toString()
142       .match(/\((.*)\)/)
143       .pop();
144     const regexNotUpper = /[*a-z ]/g;
145     return longTZ.replace(regexNotUpper, '');
146   },
147 };
148 app.config.globalProperties.$filters = filter;
149