Skip to content

Commit 43c77de

Browse files
committed
perf: merge branch 'bug/amb-boost-performance' of https://github.com/sniperadmin/ambianic-ui into nasr-365
2 parents f22a1e8 + 1783063 commit 43c77de

25 files changed

+1229
-1310
lines changed

Diff for: .github/workflows/lighthouse.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ on: [pull_request]
88

99
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
1010
jobs:
11-
# This workflow contains a single job called "build"
12-
build:
11+
# This workflow contains a single job
12+
lighthouse:
1313
# The type of runner that the job will run on
1414
runs-on: ubuntu-latest
1515

Diff for: cypress/integration/ambianic-tests/about.spec.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/// <reference types="cypress" />
2+
context('AboutPage', () => {
3+
beforeEach(() => {
4+
cy.visit('/about')
5+
})
6+
7+
it('Loads title and subtitle', () => {
8+
9+
cy.get('#about-title > .v-list-item__content > .v-list-item__title')
10+
.should('contain.text', 'Cozy at Home')
11+
12+
cy.get('#about-title > .v-list-item__content > .v-list-item__subtitle')
13+
.should('contain.text', 'via Ambient Intelligence')
14+
})
15+
16+
it('Loads timeline button', () => {
17+
cy.get('#btn-timeline > .v-btn__content')
18+
.should('contain.text', 'View Timeline')
19+
.click()
20+
21+
cy.url().should('include', '/timeline')
22+
})
23+
24+
it('Loads settings button', () => {
25+
cy.get('#btn-settings > .v-btn__content')
26+
.should('contain.text', 'Settings')
27+
.click()
28+
29+
cy.url().should('include', '/settings')
30+
})
31+
32+
it('Loads version info', () => {
33+
cy.get('#version-info > .v-list-item__content > .v-list-item__subtitle')
34+
.should('contain.text', 'Release Version')
35+
.click()
36+
})
37+
38+
39+
})

Diff for: cypress/integration/ambianic-tests/feedback.spec.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/// <reference types="cypress" />
2+
context('FeedbackPage', () => {
3+
beforeEach(() => {
4+
cy.visit('/feedback')
5+
})
6+
7+
8+
it('Look at page title and subtitle', () => {
9+
10+
cy.get('#feedback-title > .v-list-item__content > .v-list-item__title')
11+
.contains('Send Feedback', { matchCase: false })
12+
13+
cy.get('#feedback-title > .v-list-item__content > .v-list-item__subtitle')
14+
.contains('We currently use github to gather user feedbaack', { matchCase: false })
15+
})
16+
17+
it('Check feedback button', () => {
18+
let btn = cy.get('#btn-feedback')
19+
btn.should('have.attr', 'href', 'https://github.com/ambianic/ambianic-ui/issues')
20+
btn.get('.v-btn__content')
21+
.contains('Open Feedback Page', { matchCase: false })
22+
})
23+
24+
})

Diff for: cypress/integration/ambianic-tests/help.spec.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/// <reference types="cypress" />
2+
context('HelpPage', () => {
3+
beforeEach(() => {
4+
cy.visit('/help')
5+
})
6+
7+
8+
9+
it('Look at page title and subtitle', () => {
10+
cy.get('#help-title > .v-list-item__content > .v-list-item__title')
11+
.contains('Need Help with Ambianic?', { matchCase: false })
12+
13+
cy.get('#help-title > .v-list-item__content > .v-list-item__subtitle')
14+
.contains('Please reference our online docs or connect on Twitter', { matchCase: false })
15+
})
16+
17+
it('Check docs button', () => {
18+
let btn = cy.get('#btn-docs')
19+
btn.should('have.attr', 'href', 'https://docs.ambianic.ai')
20+
btn.get('.v-btn__content')
21+
.contains('Documentation', { matchCase: false })
22+
})
23+
24+
it('Check community button', () => {
25+
let btn = cy.get('#btn-community')
26+
btn.should('have.attr', 'href', 'https://twitter.com/ambianicai')
27+
btn.get('.v-btn__content')
28+
.contains('Twitter', { matchCase: false })
29+
})
30+
31+
})

Diff for: package-lock.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
"reporter": [
9292
"text",
9393
"json"
94-
]
94+
],
95+
"extension": [".js", ".vue"]
9596
}
9697
}

Diff for: src/App.vue

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
11
<!-- App.vue -->
22
<template>
3-
<router-view />
3+
<v-lazy>
4+
<amb-app-frame v-if="$route.name !== 'home'">
5+
<keep-alive>
6+
<router-view />
7+
</keep-alive>
8+
</amb-app-frame>
9+
10+
<v-app v-else>
11+
<router-view />
12+
</v-app>
13+
</v-lazy>
414
</template>
515

616
<script>
17+
import AmbAppFrame from './components/AppFrame.vue'
718
export default {
819
name: 'App',
920
components: {
21+
AmbAppFrame
1022
}
1123
}
1224
</script>

Diff for: src/components/AppFrame.vue

+6-208
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,8 @@
11
<!-- App.vue -->
22
<template>
33
<v-app>
4-
<v-navigation-drawer
5-
v-model="drawer"
6-
:clipped="$vuetify.breakpoint.lgAndUp"
7-
app
8-
>
9-
<v-list dense>
10-
<template v-for="item in items">
11-
<v-row
12-
v-if="item.heading"
13-
:key="item.heading"
14-
align="center"
15-
:class="item.class"
16-
>
17-
<v-col cols="6">
18-
<v-subheader v-if="item.heading">
19-
{{ item.heading }}
20-
</v-subheader>
21-
</v-col>
22-
<v-col
23-
cols="6"
24-
class="text-center"
25-
>
26-
<a
27-
href="#!"
28-
class="body-2 black--text"
29-
>EDIT</a>
30-
</v-col>
31-
</v-row>
32-
<v-list-group
33-
v-else-if="item.children"
34-
:key="item.text"
35-
v-model="item.model"
36-
:prepend-icon="item.model ? item.icon : item['icon-alt']"
37-
append-icon=""
38-
:class="item.class"
39-
>
40-
<template v-slot:activator>
41-
<v-list-item>
42-
<v-list-item-content>
43-
<v-list-item-title>
44-
{{ item.text }}
45-
</v-list-item-title>
46-
</v-list-item-content>
47-
</v-list-item>
48-
</template>
49-
<v-list-item
50-
v-for="(child, i) in item.children"
51-
:key="i"
52-
>
53-
<v-list-item-action v-if="child.icon">
54-
<v-icon>{{ child.icon }}</v-icon>
55-
</v-list-item-action>
56-
<v-list-item-content>
57-
<v-list-item-title>
58-
{{ child.text }}
59-
</v-list-item-title>
60-
</v-list-item-content>
61-
</v-list-item>
62-
</v-list-group>
63-
<v-list-item
64-
v-else
65-
:key="item.text"
66-
:to="item.link"
67-
:class="item.class"
68-
>
69-
<v-list-item-action>
70-
<v-icon>{{ item.icon }}</v-icon>
71-
</v-list-item-action>
72-
<v-list-item-content>
73-
<v-list-item-title>
74-
{{ item.text }}
75-
</v-list-item-title>
76-
</v-list-item-content>
77-
</v-list-item>
78-
</template>
79-
</v-list>
80-
</v-navigation-drawer>
81-
82-
<v-app-bar
83-
:clipped-left="$vuetify.breakpoint.lgAndUp"
84-
app
85-
color="blue darken-3"
86-
dark
87-
>
88-
<v-toolbar-title
89-
style="width: 300px"
90-
class="ml-0 pl-4"
91-
>
92-
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
93-
<span class="hidden-sm-and-down">Ambianic</span>
94-
</v-toolbar-title>
95-
<v-text-field
96-
flat
97-
solo-inverted
98-
hide-details
99-
prepend-inner-icon="search"
100-
label="Search"
101-
class="hidden-sm-and-down"
102-
/>
103-
<v-spacer />
104-
<v-btn
105-
icon
106-
v-if="!isEdgeConnected"
107-
@click="$router.push('edge-connect')"
108-
>
109-
<v-icon>
110-
mdi-download-off
111-
</v-icon>
112-
</v-btn>
113-
<v-btn
114-
icon
115-
>
116-
<v-badge
117-
top
118-
right
119-
overlap
120-
color="error lighten-1"
121-
class="align-self-center"
122-
:content="newFavorites"
123-
:value="newFavorites"
124-
show="false"
125-
>
126-
<v-icon>mdi-heart</v-icon>
127-
</v-badge>
128-
</v-btn>
129-
<v-btn icon>
130-
<v-badge
131-
top
132-
right
133-
overlap
134-
color="error lighten-1"
135-
class="align-self-center"
136-
:content="newAlerts"
137-
:value="newAlerts"
138-
>
139-
<v-icon>mdi-bell</v-icon>
140-
</v-badge>
141-
</v-btn>
142-
<v-btn
143-
icon
144-
to="about"
145-
>
146-
<v-avatar
147-
size="32px"
148-
item
149-
>
150-
<v-img
151-
src="@/assets/logo5.svg"
152-
alt="Ambianic.ai logo"
153-
/>
154-
</v-avatar>
155-
</v-btn>
156-
</v-app-bar>
4+
<!-- nav goes here -->
5+
<NavBar />
1576

1587
<v-content>
1598
<v-container
@@ -177,66 +26,15 @@
17726
</template>
17827

17928
<script>
180-
import { mapState } from 'vuex'
181-
import {
182-
PEER_CONNECTED
183-
} from '@/store/mutation-types'
184-
import UpdateNotification from './UpdateNotification'
29+
import NavBar from './NavBar.vue'
18530

18631
export default {
18732
name: 'AppFrame',
18833
components: {
189-
UpdateNotification
190-
},
191-
props: {
34+
UpdateNotification: () => import('./UpdateNotification'), NavBar
19235
},
19336
data: () => ({
194-
dialog: false,
195-
drawer: null,
196-
newFavorites: 0,
197-
newAlerts: 2,
198-
on: true,
199-
items: [
200-
{ icon: 'history', text: 'Timeline', link: '/timeline' },
201-
// { icon: 'mdi-account-heart-outline', text: 'People', link: '/people' },
202-
// class: 'hidden-sm-and-down' ensures that an item is not shown
203-
// on small screens. For example flows are only visible on screens with
204-
// enough space for a smooth user experience.
205-
// { icon: 'mdi-pipe', text: 'Flows', link: '/flows' },
206-
// {
207-
// icon: 'keyboard_arrow_up',
208-
// 'icon-alt': 'keyboard_arrow_down',
209-
// text: 'Labels',
210-
// model: true,
211-
// children: [
212-
// { icon: 'add', text: 'Create label' }
213-
// ]
214-
// },
215-
// {
216-
// icon: 'keyboard_arrow_up',
217-
// 'icon-alt': 'keyboard_arrow_down',
218-
// text: 'More',
219-
// model: false,
220-
// children: [
221-
// { text: 'Sources' },
222-
// { text: 'Components' },
223-
// { text: 'Integrations' }
224-
// ]
225-
// },
226-
{ icon: 'mdi-video-input-antenna', text: 'Connect', link: '/edge-connect' },
227-
// { icon: 'settings', text: 'Settings', link: '/settings' },
228-
{ icon: 'chat_bubble', text: 'Send feedback', link: '/feedback' },
229-
{ icon: 'help', text: 'Help', link: '/help' },
230-
{ icon: 'info', text: 'About Ambianic', link: '/about' }
231-
]
232-
}),
233-
computed: {
234-
...mapState({
235-
isEdgeConnected: function (state) {
236-
console.debug(`app frame: state.pnp.peerConnectionStatus: ${state.pnp.peerConnectionStatus}`)
237-
return state.pnp.peerConnectionStatus === PEER_CONNECTED
238-
}
239-
})
240-
}
37+
// ...
38+
})
24139
}
24240
</script>

0 commit comments

Comments
 (0)