[go: nahoru, domu]
Skip to content

Commit

Permalink
ui: refactor the component play session
Browse files Browse the repository at this point in the history 
This commit refactors the component to block click actions on the listing when
the user does not have permission. Also, tests are modified to accommodate the
changes made.

Signed-off-by: Leonardo R.S. Joao <leonardo.joao@ossystems.com.br>
  • Loading branch information
@leonardojoao @otavio
leonardojoao authored and otavio committed Feb 21, 2022
1 parent d3a90d4 commit 4082743
Show file tree
Hide file tree
Showing 9 changed files with 539 additions and 215 deletions.
53 changes: 42 additions & 11 deletions ui/src/components/session/SessionDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,17 +61,34 @@
</template>

<v-card>
<v-list-item
v-if="session.recorded && isEnterprise"
@click.stop="openDialog('sessionPlayDialog')"
<v-tooltip
bottom
:disabled="hasAuthorizationPlay"
>
<SessionPlay
:uid="session.uid"
:recorded="session.authenticated && session.recorded"
:show.sync="sessionPlayDialog"
data-test="sessionPlay-component"
/>
</v-list-item>
<template #activator="{ on, attrs }">
<div
v-bind="attrs"
v-on="on"
>
<v-list-item
v-if="session.recorded && isEnterprise"
:disabled="!hasAuthorizationPlay"
@click.stop="openDialog('sessionPlayDialog')"
>
<SessionPlay
:uid="session.uid"
:recorded="session.authenticated && session.recorded"
:show.sync="sessionPlayDialog"
data-test="sessionPlay-component"
/>
</v-list-item>
</div>
</template>

<span>
You don't have this kind of authorization.
</span>
</v-tooltip>

<v-list-item
v-if="session.active"
Expand Down Expand Up @@ -229,6 +246,7 @@ import SessionPlay from '@/components/session/SessionPlay';
import SessionClose from '@/components/session/SessionClose';
import SessionDeleteRecord from '@/components/session/SessionDeleteRecord';
import { formatDate, lastSeen } from '@/components/filter/date';
import hasPermission from '@/components/filter/permission';
export default {
name: 'SessionDetailsComponent',
Expand All @@ -239,7 +257,7 @@ export default {
SessionDeleteRecord,
},
filters: { formatDate, lastSeen },
filters: { formatDate, lastSeen, hasPermission },
data() {
return {
Expand All @@ -250,13 +268,26 @@ export default {
sessionCloseDialog: false,
sessionDeleteRecord: false,
hide: true,
playAction: 'play',
};
},
computed: {
isEnterprise() {
return this.$env.isEnterprise;
},
hasAuthorizationPlay() {
const role = this.$store.getters['auth/role'];
if (role !== '') {
return hasPermission(
this.$authorizer.role[role],
this.$actions.session[this.playAction],
);
}
return false;
},
},
async created() {
Expand Down
53 changes: 42 additions & 11 deletions ui/src/components/session/SessionList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,17 +129,34 @@
</v-list-item-title>
</v-list-item>

<v-list-item
v-if="item.authenticated && item.recorded && isEnterprise"
@click.stop="showSessionPlay(getListSessions.indexOf(item))"
<v-tooltip
bottom
:disabled="hasAuthorizationPlay"
>
<SessionPlay
:recorded="item.authenticated && item.recorded"
:uid="item.uid"
:show.sync="sessionPlayShow[getListSessions.indexOf(item)]"
data-test="sessionPlay-component"
/>
</v-list-item>
<template #activator="{ on, attrs }">
<div
v-bind="attrs"
v-on="on"
>
<v-list-item
v-if="item.authenticated && item.recorded && isEnterprise"
:disabled="!hasAuthorizationPlay"
@click.stop="showSessionPlay(getListSessions.indexOf(item))"
>
<SessionPlay
:recorded="item.authenticated && item.recorded"
:uid="item.uid"
:show.sync="sessionPlayShow[getListSessions.indexOf(item)]"
data-test="sessionPlay-component"
/>
</v-list-item>
</div>
</template>

<span>
You don't have this kind of authorization.
</span>
</v-tooltip>

<v-list-item
v-if="item.active"
Expand All @@ -166,6 +183,7 @@
import SessionClose from '@/components/session/SessionClose';
import SessionPlay from '@/components/session/SessionPlay';
import { formatDateCompact, lastSeen } from '@/components/filter/date';
import hasPermission from '@/components/filter/permission';
export default {
name: 'SessionListComponent',
Expand All @@ -175,14 +193,15 @@ export default {
SessionPlay,
},
filters: { formatDateCompact, lastSeen },
filters: { formatDateCompact, lastSeen, hasPermission },
data() {
return {
menu: false,
pagination: {},
sessionPlayShow: [],
sessionCloseShow: [],
playAction: 'play',
headers: [
{
text: 'Active',
Expand Down Expand Up @@ -240,6 +259,18 @@ export default {
isEnterprise() {
return this.$env.isEnterprise;
},
hasAuthorizationPlay() {
const role = this.$store.getters['auth/role'];
if (role !== '') {
return hasPermission(
this.$authorizer.role[role],
this.$actions.session[this.playAction],
);
}
return false;
},
},
watch: {
Expand Down
79 changes: 25 additions & 54 deletions ui/src/components/session/SessionPlay.vue
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,20 @@
<template>
<fragment>
<v-tooltip
v-if="recorded"
:disabled="hasAuthorization"
bottom
>
<template #activator="{ on }">
<span v-on="on">
<v-list-item-title data-test="play-item">
Play
</v-list-item-title>
</span>

<span v-on="on">
<v-icon
:disabled="!hasAuthorization"
left
data-test="play-icon"
v-on="on"
>
mdi-play-circle
</v-icon>
</span>
</template>

<span v-if="!hasAuthorization">
You don't have this kind of authorization.
</span>
</v-tooltip>
<v-list-item-icon class="mr-0">
<v-icon
left
data-test="play-icon"
v-text="'mdi-play-circle'"
/>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title
class="text-left"
data-test="play-title"
v-text="'Play'"
/>
</v-list-item-content>

<v-dialog
v-model="dialog"
Expand All @@ -45,10 +32,13 @@
data-test="close-btn"
@click="close"
>
<v-icon>close</v-icon>
<v-icon v-text="'close'" />
</v-btn>

<v-toolbar-title>Watch Session</v-toolbar-title>
<v-toolbar-title
data-test="text-title"
v-text="'Watch Session'"
/>

<v-spacer />
</v-toolbar>
Expand All @@ -74,9 +64,8 @@
color="primary"
data-test="pause-icon"
@click="pauseHandler"
>
mdi-pause-circle
</v-icon>
v-text="'mdi-pause-circle'"
/>

<v-icon
v-else
Expand All @@ -85,9 +74,8 @@
color="primary"
data-test="play-icon"
@click="pauseHandler"
>
mdi-play-circle
</v-icon>
v-text="'mdi-play-circle'"
/>
</v-card>
</v-col>

Expand Down Expand Up @@ -153,13 +141,9 @@ import moment from 'moment';
import 'moment-duration-format';
import 'xterm/css/xterm.css';
import hasPermission from '@/components/filter/permission';
export default {
name: 'SessionPlayComponent',
filters: { hasPermission },
props: {
uid: {
type: String,
Expand Down Expand Up @@ -191,7 +175,6 @@ export default {
frames: [],
defaultSpeed: 1,
transition: false,
action: 'play',
};
},
Expand All @@ -203,26 +186,14 @@ export default {
nowTimerDisplay() {
return this.getTimerNow;
},
hasAuthorization() {
const role = this.$store.getters['auth/role'];
if (role !== '') {
return hasPermission(
this.$authorizer.role[role],
this.$actions.session[this.action],
);
}
return false;
},
},
watch: {
show(value) {
if (!value) {
this.close();
this.dialog = false;
} else if (this.hasAuthorization) {
} else {
this.displayDialog();
}
},
Expand Down
Loading

0 comments on commit 4082743

Please sign in to comment.