AppHeader.vue (68cbbe9014cbdcf7229a878f564d38f6d6199f25) AppHeader.vue (4dd7eabfa4476e264e051dc0178a333452a6b175)
1<template>
2 <div>
3 <header id="page-header">
4 <a
5 class="link-skip-nav btn btn-light"
6 href="#main-content"
7 @click="setFocus"
8 >

--- 27 unchanged lines hidden (view full) ---

36 data-test-id="appHeader-container-overview"
37 >
38 <img
39 class="header-logo"
40 src="@/assets/images/logo-header.svg"
41 :alt="altLogo"
42 />
43 </b-navbar-brand>
1<template>
2 <div>
3 <header id="page-header">
4 <a
5 class="link-skip-nav btn btn-light"
6 href="#main-content"
7 @click="setFocus"
8 >

--- 27 unchanged lines hidden (view full) ---

36 data-test-id="appHeader-container-overview"
37 >
38 <img
39 class="header-logo"
40 src="@/assets/images/logo-header.svg"
41 :alt="altLogo"
42 />
43 </b-navbar-brand>
44 <div v-if="assetTag" class="asset-tag">
45 <span class="pr-2">|</span>
46 <span>{{ assetTag }}</span>
44 <div v-if="isNavTagPresent" class="pl-2 nav-tags">
45 <span>|</span>
46 <span class="pl-3 asset-tag">{{ assetTag }}</span>
47 <span class="pl-3">{{ modelType }}</span>
48 <span class="pl-3">{{ serialNumber }}</span>
47 </div>
48 </b-navbar-nav>
49 <!-- Right aligned nav items -->
50 <b-navbar-nav class="ml-auto helper-menu">
51 <b-nav-item
52 to="/logs/event-logs"
53 data-test-id="appHeader-container-health"
54 >

--- 72 unchanged lines hidden (view full) ---

127 mixins: [BVToastMixin],
128 data() {
129 return {
130 isNavigationOpen: false,
131 altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`,
132 };
133 },
134 computed: {
49 </div>
50 </b-navbar-nav>
51 <!-- Right aligned nav items -->
52 <b-navbar-nav class="ml-auto helper-menu">
53 <b-nav-item
54 to="/logs/event-logs"
55 data-test-id="appHeader-container-health"
56 >

--- 72 unchanged lines hidden (view full) ---

129 mixins: [BVToastMixin],
130 data() {
131 return {
132 isNavigationOpen: false,
133 altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`,
134 };
135 },
136 computed: {
137 isNavTagPresent() {
138 return this.assetTag || this.modelType || this.serialNumber;
139 },
135 assetTag() {
136 return this.$store.getters['global/assetTag'];
137 },
140 assetTag() {
141 return this.$store.getters['global/assetTag'];
142 },
143 modelType() {
144 return this.$store.getters['global/modelType'];
145 },
146 serialNumber() {
147 return this.$store.getters['global/serialNumber'];
148 },
138 isAuthorized() {
139 return this.$store.getters['global/isAuthorized'];
140 },
141 serverStatus() {
142 return this.$store.getters['global/serverStatus'];
143 },
144 healthStatus() {
145 return this.$store.getters['eventLog/healthStatus'];

--- 35 unchanged lines hidden (view full) ---

181 });
182 }
183 },
184 },
185 created() {
186 // Reset auth state to check if user is authenticated based
187 // on available browser cookies
188 this.$store.dispatch('authentication/resetStoreState');
149 isAuthorized() {
150 return this.$store.getters['global/isAuthorized'];
151 },
152 serverStatus() {
153 return this.$store.getters['global/serverStatus'];
154 },
155 healthStatus() {
156 return this.$store.getters['eventLog/healthStatus'];

--- 35 unchanged lines hidden (view full) ---

192 });
193 }
194 },
195 },
196 created() {
197 // Reset auth state to check if user is authenticated based
198 // on available browser cookies
199 this.$store.dispatch('authentication/resetStoreState');
189 this.getServerInfo();
200 this.getSystemInfo();
190 this.getEvents();
191 },
192 mounted() {
193 this.$root.$on(
194 'change-is-navigation-open',
195 (isNavigationOpen) => (this.isNavigationOpen = isNavigationOpen)
196 );
197 },
198 methods: {
201 this.getEvents();
202 },
203 mounted() {
204 this.$root.$on(
205 'change-is-navigation-open',
206 (isNavigationOpen) => (this.isNavigationOpen = isNavigationOpen)
207 );
208 },
209 methods: {
199 getServerInfo() {
200 this.$store.dispatch('global/getServerStatus');
210 getSystemInfo() {
211 this.$store.dispatch('global/getSystemInfo');
201 },
202 getEvents() {
203 this.$store.dispatch('eventLog/getEventLogData');
204 },
205 refresh() {
206 this.$emit('refresh');
207 },
208 logout() {

--- 70 unchanged lines hidden (view full) ---

279 .nav-link:focus,
280 .btn:focus {
281 @include focus-box-shadow($gray-800);
282 }
283 }
284
285 .responsive-text {
286 @include media-breakpoint-down(xs) {
212 },
213 getEvents() {
214 this.$store.dispatch('eventLog/getEventLogData');
215 },
216 refresh() {
217 this.$emit('refresh');
218 },
219 logout() {

--- 70 unchanged lines hidden (view full) ---

290 .nav-link:focus,
291 .btn:focus {
292 @include focus-box-shadow($gray-800);
293 }
294 }
295
296 .responsive-text {
297 @include media-breakpoint-down(xs) {
287 display: none;
298 @include sr-only;
288 }
289 }
290 }
291 }
292
293 .navbar-nav {
299 }
300 }
301 }
302 }
303
304 .navbar-nav {
294 padding: 0 $spacer;
305 @include media-breakpoint-up($responsive-layout-bp) {
306 padding: 0 $spacer;
307 }
295 align-items: center;
296
297 .navbar-brand,
298 .nav-link {
299 transition: $focus-transition;
300 }
308 align-items: center;
309
310 .navbar-brand,
311 .nav-link {
312 transition: $focus-transition;
313 }
301 .asset-tag {
314 .nav-tags {
302 color: theme-color-level(light, 3);
315 color: theme-color-level(light, 3);
316 @include media-breakpoint-down(xs) {
317 @include sr-only;
318 }
319 .asset-tag {
320 @include media-breakpoint-down($responsive-layout-bp) {
321 @include sr-only;
322 }
323 }
303 }
304 }
305
306 .nav-trigger {
307 fill: theme-color('light');
308 width: $header-height;
309 height: $header-height;
310 transition: none;

--- 47 unchanged lines hidden --- 		324 }
325 }
326
327 .nav-trigger {
328 fill: theme-color('light');
329 width: $header-height;
330 height: $header-height;
331 transition: none;

--- 47 unchanged lines hidden ---