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