xref: /openbmc/webui-vue/src/main.js (revision 24b377db47a05f742b1f3db77606f6bae845f637)
1import { createApp } from 'vue';
2
3import App from './App.vue';
4import i18n from './i18n';
5
6import router from './router';
7
8import { format } from 'date-fns-tz';
9
10//Do not change store import.
11//Exact match alias set to support
12//dotenv customizations.
13import store from './store';
14import eventBus from './eventBus';
15
16import {
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
49const app = createApp({
50  router,
51  store,
52  render: (h) => h(App),
53});
54app.use(i18n);
55
56app.use(router);
57app.use(store);
58
59// Plugins
60app.use(BootstrapVue);
61app.use(AlertPlugin);
62app.use(BadgePlugin);
63app.use(ButtonPlugin);
64app.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
79app.use(CardPlugin);
80app.use(CollapsePlugin);
81app.use(DropdownPlugin);
82app.use(FormPlugin);
83app.use(FormCheckboxPlugin);
84app.use(FormDatepickerPlugin);
85app.use(FormFilePlugin);
86app.use(FormGroupPlugin);
87app.use(FormInputPlugin);
88app.use(FormRadioPlugin);
89app.use(FormSelectPlugin);
90app.use(FormTagsPlugin);
91app.use(InputGroupPlugin);
92app.use(LayoutPlugin);
93app.use(LayoutPlugin);
94app.use(LinkPlugin);
95app.use(ListGroupPlugin);
96app.use(ModalPlugin);
97app.use(NavbarPlugin);
98app.use(NavPlugin);
99app.use(PaginationPlugin);
100app.use(ProgressPlugin);
101app.use(TablePlugin);
102app.use(TabsPlugin);
103app.use(ToastPlugin);
104app.use(TooltipPlugin);
105
106app.mount('#app');
107app.prototype.$eventBus = eventBus;
108//Filters
109const 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};
148app.config.globalProperties.$filters = filter;
149