archive/alerta_alerta-webui
0
0
Fork 0
mirror of https://github.com/alerta/alerta-webui.git synced 2025-03-18 06:12:51 +00:00
Code Issues Projects Releases Wiki Activity

Add alert actions for mobile

Browse source
This commit is contained in:
Nick Satterly 2019-01-28 01:37:23 +01:00
parent c58168bfcc
commit 4d6653f90f
38 changed files with 651 additions and 481 deletions

60
src/App.vue
View file

@ -1,17 +1,21 @@
<template>
<v-app id="alerta" :dark="isDark">
<v-navigation-drawer
v-model="drawer"
:clipped="$vuetify.breakpoint.lgAndUp"
fixed
app
>
<v-toolbar flat>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-side-icon
@click.stop="drawer = !drawer"
></v-toolbar-side-icon>
<img v-if="$config.site_logo_url" :src="$config.site_logo_url" height="48">
<img
v-if="$config.site_logo_url"
:src="$config.site_logo_url"
height="48"
/>
<v-toolbar-title v-else class="logo">
alerta
</v-toolbar-title>
@ -20,12 +24,7 @@
<v-divider></v-divider>
<v-list dense>
<template v-for="item in items">
<v-layout
v-if="item.heading"
:key="item.heading"
row
align-center
>
<v-layout v-if="item.heading" :key="item.heading" row align-center>
<v-flex xs6>
<v-subheader v-if="item.heading">
{{ item.heading }}
@ -49,10 +48,7 @@
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile
v-for="(child, i) in item.children"
:key="i"
>
<v-list-tile v-for="(child, i) in item.children" :key="i">
<v-list-tile-action v-if="child.icon">
<v-icon>{{ child.icon }}</v-icon>
</v-list-tile-action>
@ -63,7 +59,12 @@
</v-list-tile-content>
</v-list-tile>
</v-list-group>
<v-list-tile v-else :key="item.text" v-has-perms="item.perms" :to="item.path">
<v-list-tile
v-else
:key="item.text"
v-has-perms="item.perms"
:to="item.path"
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
@ -79,8 +80,12 @@
<v-toolbar>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<img v-if="$config.site_logo_url" :src="$config.site_logo_url" height="48">
<img
v-if="$config.site_logo_url"
:src="$config.site_logo_url"
height="48"
/>
<v-toolbar-title v-else class="logo">
alerta
</v-toolbar-title>
@ -104,7 +109,7 @@
></v-text-field>
<v-spacer></v-spacer>
<!-- <v-btn icon>
<v-icon>search</v-icon>
</v-btn> -->
@ -138,28 +143,19 @@
offset-x
:disabled="!isLoggedIn"
>
<v-btn
slot="activator"
:disabled="!isLoggedIn"
icon
>
<v-btn slot="activator" :disabled="!isLoggedIn" icon>
<v-icon>{{ navbar.signin.icon }}</v-icon>
</v-btn>
<profile-me
v-if="profile"
:profile="profile"
@close="menu = false"
/>
<profile-me v-if="profile" :profile="profile" @close="menu = false" />
</v-menu>
</v-toolbar>
<v-content>
<banner/>
<router-view/>
<snackbar/>
<banner />
<router-view />
<snackbar />
</v-content>
</v-app>
</template>

505
src/components/AlertDetail.vue
View file

@ -13,222 +13,325 @@
</v-toolbar-side-icon>
<v-toolbar-title>Alert details</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat icon><v-icon>more_vert</v-icon></v-btn>
<v-toolbar-items>
<v-btn flat icon @click="sheet = true"
><v-icon>more_vert</v-icon></v-btn
>
</v-toolbar-items>
</v-toolbar>
<v-card>
<v-tabs
v-model="active"
color="secondary"
grow
>
<v-tab
ripple
>
<v-tabs v-model="active" color="secondary" grow>
<v-tab ripple>
Details
</v-tab>
<v-tab-item
:transition="false"
:reverse-transition="false"
>
<v-tab-item :transition="false" :reverse-transition="false">
<v-card>
<v-card-text>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Alert ID</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.id }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Alert ID</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.id }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Last Receive Alert ID</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.lastReceiveId }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">
Last Receive Alert ID
</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">
{{ item.lastReceiveId }}
</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Create Time</div> </div>
<div class="flex xs9 text-xs-left"> <div class="font-weight-regular">
<date-time :value="item.createTime" format="longDate"/> ({{ item.createTime | timeago }})
</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Create Time</div>
</div>
<div class="flex xs9 text-xs-left">
<div class="font-weight-regular">
<date-time :value="item.createTime" format="longDate" />
({{ item.createTime | timeago }})
</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Receive Time</div> </div>
<div class="flex xs9 text-xs-left"> <div class="font-weight-regular">
<date-time :value="item.receiveTime" format="longDate"/> ({{ item.receiveTime | timeago }})
</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Receive Time</div>
</div>
<div class="flex xs9 text-xs-left">
<div class="font-weight-regular">
<date-time
:value="item.receiveTime"
format="longDate"
/>
({{ item.receiveTime | timeago }})
</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Last Receive Time</div> </div>
<div class="flex xs9 text-xs-left"> <div class="font-weight-regular">
<date-time :value="item.lastReceiveTime" format="longDate"/> ({{ item.lastReceiveTime | timeago }})
</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">
Last Receive Time
</div>
</div>
<div class="flex xs9 text-xs-left">
<div class="font-weight-regular">
<date-time
:value="item.lastReceiveTime"
format="longDate"
/>
({{ item.lastReceiveTime | timeago }})
</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Customer</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.customer }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Customer</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.customer }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Service</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">
<v-chip
v-for="service in item.service"
:key="service"
outline
small
>
{{ service }}
</v-chip>
</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Service</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">
<v-chip
v-for="service in item.service"
:key="service"
outline
small
>
{{ service }}
</v-chip>
</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Environment</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.environment }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Environment</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">
{{ item.environment }}
</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Resource</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.resource }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Resource</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.resource }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Event</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.event }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Event</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.event }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Correlate</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.correlate }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Correlate</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">
{{ item.correlate }}
</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Group</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.group }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Group</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.group }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Severity</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">
<v-chip small>
{{ item.previousSeverity }}
</v-chip>&nbsp;&rarr;&nbsp;
<v-chip small>
{{ item.severity }}
</v-chip>
</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Severity</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">
<v-chip small> {{ item.previousSeverity }} </v-chip
>&nbsp;&rarr;&nbsp;
<v-chip small>
{{ item.severity }}
</v-chip>
</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Status</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.status }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Status</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.status }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Value</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.value }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Value</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.value }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Text</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.text }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Text</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.text }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Trend Indication</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.trendIndication }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">
Trend Indication
</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">
{{ item.trendIndication }}
</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Timeout</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.timeout }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Timeout</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.timeout }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Type</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.type }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Type</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.type }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Duplicate Count</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.duplicateCount }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Duplicate Count</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">
{{ item.duplicateCount }}
</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Repeat</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.repeat }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Repeat</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.repeat }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Origin</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.origin }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Origin</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">{{ item.origin }}</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Tags</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">
<v-chip
v-for="tag in item.tags"
:key="tag"
label
small
>
<v-icon left>label</v-icon>{{ tag }}
</v-chip>
</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Tags</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">
<v-chip v-for="tag in item.tags" :key="tag" label small>
<v-icon left>label</v-icon>{{ tag }}
</v-chip>
</div>
</div>
</div>
</div>
<div class="flex xs12">
<div class="d-flex align-top">
<div class="flex xs3 text-xs-left"> <div class="header font-weight-bold">Attributes</div> </div>
<div class="flex xs6 text-xs-left"> <div class="font-weight-regular">{{ item.attributes }}</div> </div>
<div class="flex xs3 text-xs-left">
<div class="header font-weight-bold">Attributes</div>
</div>
<div class="flex xs6 text-xs-left">
<div class="font-weight-regular">
{{ item.attributes }}
</div>
</div>
</div>
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab
ripple
>
<v-tab ripple>
History
</v-tab>
<v-tab-item
:transition="false"
:reverse-transition="false"
>
<v-tab-item :transition="false" :reverse-transition="false">
<div class="tab-item-wrapper">
<v-data-table
:headers="headers"
:headers="headersByScreenSize"
:items="history"
item-key="index"
:pagination.sync="pagination"
@ -236,28 +339,43 @@
hide-actions
>
<template slot="items" slot-scope="props">
<td>{{ props.item.id | shortId }}</td>
<td class="text-xs-left" nowrap>
<date-time :value="props.item.updateTime" format="mediumDate"/>
<td class="hidden-sm-and-down">
{{ props.item.id | shortId }}
</td>
<td class="text-xs-right">
<td class="text-xs-right hidden-sm-and-down" nowrap>
<date-time
:value="props.item.updateTime"
format="mediumDate"
/>
</td>
<td class="text-xs-left hidden-md-and-up" nowrap>
<date-time
:value="props.item.updateTime"
format="shortTime"
/>
</td>
<td class="text-xs-right hidden-sm-and-down">
<v-chip small>
{{ props.item.severity | capitalize }}
</v-chip>
</td>
<td class="text-xs-right">
<td class="text-xs-right hidden-sm-and-down">
<v-chip small>
{{ props.item.status | capitalize }}
</v-chip>
</td>
<td class="text-xs-right">
<td class="text-xs-left">
<v-chip small>
{{ props.item.type || 'unknown' | capitalize }}
</v-chip>
</td>
<td class="text-xs-right">{{ props.item.event }}</td>
<td class="text-xs-right">{{ props.item.value }}</td>
<td class="text-xs-right">{{ props.item.text }}</td>
<td class="text-xs-right hidden-sm-and-down">
{{ props.item.event }}
</td>
<td class="text-xs-right hidden-sm-and-down">
{{ props.item.value }}
</td>
<td class="text-xs-left">{{ props.item.text }}</td>
</template>
</v-data-table>
</div>
@ -265,12 +383,8 @@
</v-tabs>
</v-card>
<v-card-actions>
<v-btn
color="green"
class="white--text"
@click="takeAction('open')"
>
<v-card-actions class="hidden-sm-and-down">
<v-btn color="green" class="white--text" @click="takeAction('open')">
<v-icon>refresh</v-icon>&nbsp;Open
</v-btn>
@ -339,20 +453,13 @@
<v-icon>highlight_off</v-icon>&nbsp;Close
</v-btn>
<v-btn
color="red"
class="white--text"
@click="deleteAlert"
>
<v-btn color="red" class="white--text" @click="deleteAlert">
<v-icon>delete_forever</v-icon>&nbsp;Delete
</v-btn>
<v-spacer></v-spacer>
<v-btn
color="white"
@click="takeAction('note')"
>
<v-btn color="white" @click="takeAction('note')">
<v-icon>note_add</v-icon>&nbsp;Add&nbsp;note
</v-btn>
</v-card-actions>
@ -369,6 +476,115 @@
</v-card-text>
</v-card>
<v-bottom-sheet v-model="sheet">
<v-list>
<v-subheader>Actions</v-subheader>
<v-list-tile @click="takeAction('open')">
<v-list-tile-avatar>
<v-avatar size="32px" tile>
<v-icon color="green">refresh</v-icon>
</v-avatar>
</v-list-tile-avatar>
<v-list-tile-title>Open</v-list-tile-title>
</v-list-tile>
<v-list-tile v-show="!isWatched" @click="watchAlert">
<v-list-tile-avatar>
<v-avatar size="32px" tile>
<v-icon color="black">visibility</v-icon>
</v-avatar>
</v-list-tile-avatar>
<v-list-tile-title>Watch</v-list-tile-title>
</v-list-tile>
<v-list-tile v-show="isWatched" @click="unwatchAlert">
<v-list-tile-avatar>
<v-avatar size="32px" tile>
<v-icon color="black">visibility_off</v-icon>
</v-avatar>
</v-list-tile-avatar>
<v-list-tile-title>Unwatch</v-list-tile-title>
</v-list-tile>
<v-list-tile
v-show="item.status != 'shelved'"
:disabled="item.status == 'closed'"
@click="shelveAlert()"
>
<v-list-tile-avatar>
<v-avatar size="32px" tile>
<v-icon color="blue">schedule</v-icon>
</v-avatar>
</v-list-tile-avatar>
<v-list-tile-title>Shelve</v-list-tile-title>
</v-list-tile>
<v-list-tile
v-show="item.status == 'shelved'"
@click="takeAction('unshelve')"
>
<v-list-tile-avatar>
<v-avatar size="32px" tile>
<v-icon color="blue">schedule</v-icon>
</v-avatar>
</v-list-tile-avatar>
<v-list-tile-title>Unshelve</v-list-tile-title>
</v-list-tile>
<v-list-tile
v-show="item.status != 'ack'"
:disabled="item.status == 'shelved' || item.status == 'closed'"
@click="takeAction('ack')"
>
<v-list-tile-avatar>
<v-avatar size="32px" tile>
<v-icon color="blue darken-2">check_circle_outline</v-icon>
</v-avatar>
</v-list-tile-avatar>
<v-list-tile-title>Ack</v-list-tile-title>
</v-list-tile>
<v-list-tile v-show="item.status == 'ack'" @click="takeAction('unack')">
<v-list-tile-avatar>
<v-avatar size="32px" tile>
<v-icon color="blue darken-2">check_circle_outline</v-icon>
</v-avatar>
</v-list-tile-avatar>
<v-list-tile-title>Unack</v-list-tile-title>
</v-list-tile>
<v-list-tile
:disabled="item.status == 'closed'"
@click="takeAction('close')"
>
<v-list-tile-avatar>
<v-avatar size="32px" tile>
<v-icon color="orange">highlight_off</v-icon>
</v-avatar>
</v-list-tile-avatar>
<v-list-tile-title>Close</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="deleteAlert">
<v-list-tile-avatar>
<v-avatar size="32px" tile>
<v-icon color="red">delete_forever</v-icon>
</v-avatar>
</v-list-tile-avatar>
<v-list-tile-title>Delete</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="takeAction('note')">
<v-list-tile-avatar>
<v-avatar size="32px" tile>
<v-icon color="black">add</v-icon>
</v-avatar>
</v-list-tile-avatar>
<v-list-tile-title>Add Note</v-list-tile-title>
</v-list-tile>
</v-list>
</v-bottom-sheet>
</v-dialog>
</template>
@ -388,19 +604,29 @@ export default {
data() {
return {
dialog: true,
sheet: false,
tiles1: [
{ img: 'keep.png', title: 'Keep' },
{ img: 'inbox.png', title: 'Inbox' },
{ img: 'hangouts.png', title: 'Hangouts' },
{ img: 'messenger.png', title: 'Messenger' },
{ img: 'google.png', title: 'Google+' }
],
tiles: [],
active: null,
pagination: {
rowsPerPage: 10,
sortBy: 'updateTime'
},
headers: [
{ text: 'Alert ID', value: 'id' },
{ text: 'Update Time', value: 'updateTime' },
{ text: 'Severity', value: 'severity' },
{ text: 'Status', value: 'status' },
{ text: 'Alert ID', value: 'id', hide: 'smAndDown' },
{ text: 'Update Time', value: 'updateTime', hide: 'smAndDown' },
{ text: 'Updated', value: 'updateTime', hide: 'mdAndUp' },
{ text: 'Severity', value: 'severity', hide: 'smAndDown' },
{ text: 'Status', value: 'status', hide: 'smAndDown' },
{ text: 'Type', value: 'type' },
{ text: 'Event', value: 'event' },
{ text: 'Value', value: 'value' },
{ text: 'Event', value: 'event', hide: 'smAndDown' },
{ text: 'Value', value: 'value', hide: 'smAndDown' },
{ text: 'Text', value: 'text' }
],
text: null
@ -423,6 +649,11 @@ export default {
return this.item.tags
? this.item.tags.indexOf(`watch:${user}`) > -1
: false
},
headersByScreenSize() {
return this.headers.filter(
h => !h.hide || !this.$vuetify.breakpoint[h.hide]
)
}
},
created() {
@ -436,6 +667,7 @@ export default {
this.$store
.dispatch('alerts/takeAction', [this.item.id, action, this.text])
.then(() => this.getAlert(this.item.id))
this.sheet = false
},
shelveAlert() {
this.$store
@ -446,6 +678,7 @@ export default {
this.shelveTimeout
])
.then(() => this.getAlert(this.item.id))
this.sheet = false
},
watchAlert() {
let user = this.$store.getters['auth/getPayload'].name
@ -455,6 +688,7 @@ export default {
{ tags: [`watch:${user}`] }
])
.then(() => this.getAlert(this.item.id))
this.sheet = false
},
unwatchAlert() {
let user = this.$store.getters['auth/getPayload'].name
@ -464,10 +698,12 @@ export default {
{ tags: [`watch:${user}`] }
])
.then(() => this.getAlert(this.item.id))
this.sheet = false
},
deleteAlert() {
confirm('Are you sure you want to delete this item?') &&
this.$store.dispatch('alerts/deleteAlert', this.item.id)
this.sheet = false
},
close() {
this.$emit('close')
@ -476,5 +712,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

8
src/components/AlertList.vue
View file

@ -14,7 +14,7 @@
>
<template slot="items" slot-scope="props">
<tr
:style="{'background-color': severityColor(props.item.severity)}"
:style="{ 'background-color': severityColor(props.item.severity) }"
@click="selectItem(props.item.id)"
>
<td>
@ -28,7 +28,10 @@
</v-chip>
</td>
<td>
<date-time :value="props.item.lastReceiveTime" format="mediumDate"/>
<date-time
:value="props.item.lastReceiveTime"
format="mediumDate"
/>
</td>
<td>{{ props.item.environment }}</td>
<td class="text-xs-right">{{ props.item.service.join(', ') }}</td>
@ -40,7 +43,6 @@
</tr>
</template>
</v-data-table>
</div>
</template>

18
src/components/AlertListFilter.vue
View file

@ -7,9 +7,7 @@
width="300"
right
>
<v-card
tile
>
<v-card tile>
<v-toolbar card dense>
<v-toolbar-title class="body-2 grey--text">Filters</v-toolbar-title>
<v-spacer></v-spacer>
@ -23,14 +21,8 @@
</v-menu>
</v-toolbar>
<v-container
fluid
grid-list-xl
>
<v-layout
align-center
wrap
>
<v-container fluid grid-list-xl>
<v-layout align-center wrap>
<v-flex>
<v-select
v-model="selectedStatus"
@ -78,7 +70,6 @@
</v-layout>
</v-container>
</v-card>
</v-navigation-drawer>
</template>
@ -210,5 +201,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

72
src/components/ApiKeyList.vue
View file

@ -42,11 +42,9 @@
multiple
>
<template slot="selection" slot-scope="data">
<v-chip
:selected="data.selected"
close
>
<strong>{{ data.item }}</strong>&nbsp;
<v-chip :selected="data.selected" close>
<strong>{{ data.item }}</strong
>&nbsp;
<span>(scope)</span>
</v-chip>
</template>
@ -72,13 +70,16 @@
></v-text-field>
<v-date-picker
v-model="pickerDate"
:min="new Date().toISOString().slice(0,10)"
:min="new Date().toISOString().slice(0, 10)"
@input="menu = false"
></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs12 sm6 md12>
<v-text-field v-model="editedItem.text" label="Comment"></v-text-field>
<v-text-field
v-model="editedItem.text"
label="Comment"
></v-text-field>
</v-flex>
</v-layout>
</v-container>
@ -117,46 +118,36 @@
sort-icon="arrow_drop_down"
>
<template slot="items" slot-scope="props">
<td monospace nowrap
>{{ props.item.key }}
<td monospace nowrap>
{{ props.item.key }}
<v-tooltip :key="copyIconText" top>
<v-icon slot="activator" :value="props.item.key" style="font-size: 16px;" @click="clipboardCopy(props.item.key)">content_copy</v-icon>
<v-icon
slot="activator"
:value="props.item.key"
style="font-size: 16px;"
@click="clipboardCopy(props.item.key)"
>content_copy</v-icon
>
<span>{{ copyIconText }}</span>
</v-tooltip>
</td>
<td>
<v-tooltip
v-if="!isExpired(props.item.expires)"
top
>
<v-icon
slot="activator"
color="primary"
small
>check_circle</v-icon>
<v-tooltip v-if="!isExpired(props.item.expires)" top>
<v-icon slot="activator" color="primary" small
>check_circle</v-icon
>
<span>Active</span>
</v-tooltip>
<v-tooltip
v-if="isExpired(props.item.expires)"
top
>
<v-icon
slot="activator"
small
>error_outline</v-icon>
<v-tooltip v-if="isExpired(props.item.expires)" top>
<v-icon slot="activator" small>error_outline</v-icon>
<span>Expired</span>
</v-tooltip>
</td>
<td>{{ props.item.user }}</td>
<td>
<v-chip
v-for="scope in props.item.scopes"
:key="scope"
small
>
<strong>{{ scope }}</strong>&nbsp;
<v-chip v-for="scope in props.item.scopes" :key="scope" small>
<strong>{{ scope }}</strong
>&nbsp;
<span>(scope)</span>
</v-chip>
</td>
@ -166,11 +157,7 @@
<td>{{ props.item.lastUsedTime | timeago }}</td>
<td>{{ props.item.customer }}</td>
<td class="justify-center layout px-0">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
<v-icon small class="mr-2" @click="editItem(props.item)">
edit
</v-icon>
<v-icon
@ -185,9 +172,7 @@
:href="`data:text/plain;base64,${toData(props.item)}`"
:download="`key_${props.item.id}.json`"
>
<v-icon
small
>
<v-icon small>
get_app
</v-icon>
</a>
@ -205,7 +190,6 @@
</v-card>
<list-button-add @add-to-list="dialog = true" />
</div>
</template>

3
src/components/Banner.vue
View file

@ -40,5 +40,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

79
src/components/BlackoutList.vue
View file

@ -45,7 +45,11 @@
label="Start Date"
prepend-icon="event"
></v-text-field>
<v-date-picker v-model="editedItem.period.startDate" no-title @input="menu1 = false"></v-date-picker>
<v-date-picker
v-model="editedItem.period.startDate"
no-title
@input="menu1 = false"
></v-date-picker>
</v-menu>
</v-flex>
@ -79,7 +83,11 @@
v-model="editedItem.period.endDate"
label="End Date"
></v-text-field>
<v-date-picker v-model="editedItem.period.endDate" no-title @input="menu2 = false"></v-date-picker>
<v-date-picker
v-model="editedItem.period.endDate"
no-title
@input="menu2 = false"
></v-date-picker>
</v-menu>
</v-flex>
@ -95,13 +103,22 @@
></v-select>
</v-flex>
<v-flex xs12 sm6 md12>
<v-text-field v-model="editedItem.resource" label="Resource"></v-text-field>
<v-text-field
v-model="editedItem.resource"
label="Resource"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 md12>
<v-text-field v-model="editedItem.event" label="Event"></v-text-field>
<v-text-field
v-model="editedItem.event"
label="Event"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 md12>
<v-text-field v-model="editedItem.group" label="Group"></v-text-field>
<v-text-field
v-model="editedItem.group"
label="Group"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 md12>
@ -112,10 +129,7 @@
multiple
chips
>
<template
slot="selection"
slot-scope="data"
>
<template slot="selection" slot-scope="data">
<v-chip
:key="JSON.stringify(data.item)"
:selected="data.selected"
@ -132,7 +146,10 @@
</v-flex>
<v-flex xs12 sm6 md12>
<v-text-field v-model="editedItem.text" label="Reason"></v-text-field>
<v-text-field
v-model="editedItem.text"
label="Reason"
></v-text-field>
</v-flex>
</v-layout>
</v-container>
@ -187,12 +204,7 @@
<td>{{ props.item.event }}</td>
<td>{{ props.item.group }}</td>
<td>
<v-chip
v-for="tag in props.item.tags"
:key="tag"
label
small
>
<v-chip v-for="tag in props.item.tags" :key="tag" label small>
<v-icon left>label</v-icon>{{ tag }}
</v-chip>
</td>
@ -208,7 +220,7 @@
</v-icon>
<v-icon
v-if="props.item.status == 'active'"
v-if="props.item.status == 'active'"
slot="activator"
color="primary"
small
@ -216,19 +228,18 @@
</v-icon>
<v-icon
v-if="props.item.status == 'expired'"
v-if="props.item.status == 'expired'"
slot="activator"
small
>block
</v-icon>
</v-tooltip>
</td>
<td class="text-xs-left">
<date-time :value="props.item.startTime" format="mediumDate"/>
<date-time :value="props.item.startTime" format="mediumDate" />
</td>
<td class="text-xs-left">
<date-time :value="props.item.endTime" format="mediumDate"/>
<date-time :value="props.item.endTime" format="mediumDate" />
</td>
<td class="text-xs-left" nowrap>{{ props.item.endTime | until }}</td>
<td class="text-xs-left">{{ props.item.user }}</td>
@ -237,24 +248,13 @@
</td> -->
<td class="text-xs-left">{{ props.item.text }}</td>
<td class="justify-center layout px-0">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
<v-icon small class="mr-2" @click="editItem(props.item)">
edit
</v-icon>
<v-icon
small
class="mr-2"
@click="copyItem(props.item)"
>
<v-icon small class="mr-2" @click="copyItem(props.item)">
content_copy
</v-icon>
<v-icon
small
@click="deleteItem(props.item)"
>
<v-icon small @click="deleteItem(props.item)">
delete
</v-icon>
</td>
@ -270,8 +270,10 @@
</v-data-table>
</v-card>
<list-button-add v-has-perms="'write:blackouts'" @add-to-list="dialog = true" />
<list-button-add
v-has-perms="'write:blackouts'"
@add-to-list="dialog = true"
/>
</div>
</template>
@ -519,5 +521,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

27
src/components/CustomerList.vue
View file

@ -17,8 +17,13 @@
persistent-hint
></v-text-field>
<v-flex xs12 sm6 md12>
<v-chip v-show="editedItem.customer" close @click="editedItem.customer = null">
<strong>{{ editedItem.customer }}</strong>&nbsp;
<v-chip
v-show="editedItem.customer"
close
@click="editedItem.customer = null"
>
<strong>{{ editedItem.customer }}</strong
>&nbsp;
<span>(customer)</span>
</v-chip>
</v-flex>
@ -67,22 +72,16 @@
<td>{{ props.item.match }}</td>
<td>
<v-chip>
<strong>{{ props.item.customer }}</strong>&nbsp;
<strong>{{ props.item.customer }}</strong
>&nbsp;
<span>(customer)</span>
</v-chip>
</td>
<td class="justify-center layout px-0">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
<v-icon small class="mr-2" @click="editItem(props.item)">
edit
</v-icon>
<v-icon
small
@click="deleteItem(props.item)"
>
<v-icon small @click="deleteItem(props.item)">
delete
</v-icon>
</td>
@ -99,7 +98,6 @@
</v-card>
<list-button-add @add-to-list="dialog = true" />
</div>
</template>
@ -201,5 +199,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

3
src/components/DateTime.vue
View file

@ -24,5 +24,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

23
src/components/HeartbeatList.vue
View file

@ -27,29 +27,23 @@
<td>{{ props.item.origin }}</td>
<td>{{ props.item.customer }}</td>
<td>
<v-chip
v-for="tag in props.item.tags"
:key="tag"
label
small
>
<v-chip v-for="tag in props.item.tags" :key="tag" label small>
<v-icon left>label</v-icon>{{ tag }}
</v-chip>
</td>
<td>
<date-time :value="props.item.createTime" format="mediumDate"/>
<date-time :value="props.item.createTime" format="mediumDate" />
</td>
<td>
<date-time :value="props.item.receiveTime" format="mediumDate"/>
<date-time :value="props.item.receiveTime" format="mediumDate" />
</td>
<td>
{{ diffTime(props.item.createTime, props.item.receiveTime) }} ms
</td>
<td>{{ diffTime(props.item.createTime, props.item.receiveTime) }} ms</td>
<td>{{ props.item.timeout | hhmmss }}</td>
<td>{{ props.item.receiveTime | timeago }}</td>
<td class="justify-center layout px-0">
<v-icon
small
@click="deleteItem(props.item)"
>
<v-icon small @click="deleteItem(props.item)">
delete
</v-icon>
</td>
@ -132,5 +126,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

13
src/components/ListButtonAdd.vue
View file

@ -1,14 +1,6 @@
<template>
<v-fab-transition>
<v-btn
key="add"
color="accent"
fab
fixed
bottom
right
@click="addToList"
>
<v-btn key="add" color="accent" fab fixed bottom right @click="addToList">
<v-icon color="white">add</v-icon>
<v-icon>close</v-icon>
</v-btn>
@ -25,5 +17,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

3
src/components/Manifest.vue
View file

@ -22,5 +22,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

37
src/components/PermList.vue
View file

@ -10,8 +10,13 @@
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md12>
<v-chip v-show="editedItem.match" close @click="editedItem.match = null">
<strong>{{ editedItem.match }}</strong>&nbsp;
<v-chip
v-show="editedItem.match"
close
@click="editedItem.match = null"
>
<strong>{{ editedItem.match }}</strong
>&nbsp;
<span>(role)</span>
</v-chip>
</v-flex>
@ -30,11 +35,9 @@
multiple
>
<template slot="selection" slot-scope="data">
<v-chip
:selected="data.selected"
close
>
<strong>{{ data.item }}</strong>&nbsp;
<v-chip :selected="data.selected" close>
<strong>{{ data.item }}</strong
>&nbsp;
<span>(scope)</span>
</v-chip>
</template>
@ -78,10 +81,9 @@
>
<template slot="items" slot-scope="props">
<td>
<v-chip
small
>
<strong>{{ props.item.match }}</strong>&nbsp;
<v-chip small>
<strong>{{ props.item.match }}</strong
>&nbsp;
<span>(role)</span>
</v-chip>
<v-tooltip top>
@ -95,12 +97,9 @@
</v-tooltip>
</td>
<td>
<v-chip
v-for="scope in props.item.scopes"
:key="scope"
small
>
<strong>{{ scope }}</strong>&nbsp;
<v-chip v-for="scope in props.item.scopes" :key="scope" small>
<strong>{{ scope }}</strong
>&nbsp;
<span>(scope)</span>
</v-chip>
</td>
@ -134,7 +133,6 @@
</v-card>
<list-button-add @add-to-list="dialog = true" />
</div>
</template>
@ -248,5 +246,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

18
src/components/Preferences.vue
View file

@ -1,6 +1,5 @@
<template>
<div>
<v-switch
label="Dark theme"
:input-value="editedItem.isDark"
@ -18,15 +17,13 @@
>
</v-switch>
dates => <pre>{{ dates }}</pre>
dates =>
<pre>{{ dates }}</pre>
<v-form>
<v-container>
<v-layout>
<v-flex
xs12
md4
>
<v-flex xs12 md4>
<v-text-field
v-model="editedItem.shortTime"
label="Short Time"
@ -52,19 +49,15 @@
label="Refresh Interval"
hint="Seconds"
></v-text-field>
<v-btn
@click="save"
>
<v-btn @click="save">
Save
</v-btn>
</v-flex>
</v-layout>
</v-container>
</v-form>
<pre>{{ payload }}</pre>
</div>
</template>
@ -141,5 +134,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

15
src/components/ProfileMe.vue
View file

@ -4,12 +4,16 @@
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{ profile.name }}</v-list-tile-title>
<v-list-tile-sub-title>{{ profile.preferred_username }}</v-list-tile-sub-title>
<v-list-tile-sub-title>{{
profile.preferred_username
}}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-tooltip v-if="profile.provider && profile.provider != 'basic'" top>
<v-icon slot="activator">{{ provider[profile.provider].icon }}</v-icon>
<v-icon slot="activator">{{
provider[profile.provider].icon
}}</v-icon>
<span>{{ provider[profile.provider].text }}</span>
</v-tooltip>
<v-tooltip v-else-if="profile.email_verified" top>
@ -42,13 +46,13 @@
<v-list-tile-sub-title>Organizations</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile v-if="profile.groups">
<v-list-tile v-if="profile.groups">
<v-list-tile-content>
<v-list-tile-title>{{ profile.groups }}</v-list-tile-title>
<v-list-tile-sub-title>Groups</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile v-if="profile.roles">
<v-list-tile v-if="profile.roles">
<v-list-tile-content>
<v-list-tile-title>{{ profile.roles }}</v-list-tile-title>
<v-list-tile-sub-title>Roles</v-list-tile-sub-title>
@ -114,5 +118,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

3
src/components/Setting.vue
View file

@ -32,5 +32,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

8
src/components/Snackbar.vue
View file

@ -6,10 +6,7 @@
:timeout="snackbar.timeout"
>
{{ snackbar.text | capitalize }}
<v-btn
flat
@click="close"
>
<v-btn flat @click="close">
{{ snackbar.action }}
</v-btn>
</v-snackbar>
@ -46,5 +43,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

3
src/components/Status.vue
View file

@ -38,5 +38,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

84
src/components/UserList.vue
View file

@ -18,7 +18,12 @@
></v-text-field>
</v-flex>
<v-flex xs12 sm6 md3>
<v-switch v-model="editedItem.status" true-value="active" false-value="inactive" label="Active"></v-switch>
<v-switch
v-model="editedItem.status"
true-value="active"
false-value="inactive"
label="Active"
></v-switch>
</v-flex>
<v-flex xs12 sm6 md9>
<v-text-field
@ -28,13 +33,18 @@
></v-text-field>
</v-flex>
<v-flex xs12 sm6 md3>
<v-checkbox v-model="editedItem.email_verified" label="Verified"></v-checkbox>
<v-checkbox
v-model="editedItem.email_verified"
label="Verified"
></v-checkbox>
</v-flex>
<v-flex xs12 sm6>
<v-text-field
v-model="editedItem.password"
:append-icon="showPassword ? 'visibility_off' : 'visibility'"
:append-icon="
showPassword ? 'visibility_off' : 'visibility'
"
:rules="[rules.min]"
:type="showPassword ? 'text' : 'password'"
name="input-10-2"
@ -45,7 +55,9 @@
</v-flex>
<v-flex xs12 sm6>
<v-text-field
:append-icon="showPassword ? 'visibility_off' : 'visibility'"
:append-icon="
showPassword ? 'visibility_off' : 'visibility'
"
:rules="[rules.passwordMatch]"
:type="showPassword ? 'text' : 'password'"
name="input-10-2"
@ -66,18 +78,19 @@
multiple
>
<template slot="selection" slot-scope="data">
<v-chip
:selected="data.selected"
close
>
<strong>{{ data.item }}</strong>&nbsp;
<v-chip :selected="data.selected" close>
<strong>{{ data.item }}</strong
>&nbsp;
<span>(role)</span>
</v-chip>
</template>
</v-combobox>
</v-flex>
<v-flex xs12 sm6 md12>
<v-text-field v-model="editedItem.text" label="Comment"></v-text-field>
<v-text-field
v-model="editedItem.text"
label="Comment"
></v-text-field>
</v-flex>
</v-layout>
</v-container>
@ -124,7 +137,9 @@
slot="activator"
:color="props.item.status == 'active' ? 'primary' : ''"
@click="toggleUserStatus(props.item)"
>{{ props.item.status === 'active' ? 'toggle_on' : 'toggle_off' }}
>{{
props.item.status === 'active' ? 'toggle_on' : 'toggle_off'
}}
</v-icon>
<span>{{ props.item.status | capitalize }}</span>
</v-tooltip>
@ -132,38 +147,45 @@
<td>{{ props.item.email }}</td>
<td>
<v-tooltip top>
<v-icon slot="activator" @click="toggleEmailVerified(props.item)">{{ props.item.email_verified ? 'check_box' : 'check_box_outline_blank' }}</v-icon>
<span>{{ props.item.email_verified ? 'Email Verified' : 'Email not verified' }}</span>
<v-icon
slot="activator"
@click="toggleEmailVerified(props.item)"
>{{
props.item.email_verified
? 'check_box'
: 'check_box_outline_blank'
}}</v-icon
>
<span>{{
props.item.email_verified
? 'Email Verified'
: 'Email not verified'
}}</span>
</v-tooltip>
</td>
<td>
<v-chip
v-for="role in props.item.roles"
:key="role"
>
<strong>{{ role }}</strong>&nbsp;
<v-chip v-for="role in props.item.roles" :key="role">
<strong>{{ role }}</strong
>&nbsp;
<span>(role)</span>
</v-chip>
</td>
<td class="text-xs-right">
<date-time :value="props.item.createTime" format="mediumDate"/>
<date-time :value="props.item.createTime" format="mediumDate" />
</td>
<td class="text-xs-right">
<date-time v-if="props.item.lastLogin" :value="props.item.lastLogin" format="mediumDate"/>
<date-time
v-if="props.item.lastLogin"
:value="props.item.lastLogin"
format="mediumDate"
/>
</td>
<td class="text-xs-right">{{ props.item.text }}</td>
<td class="justify-center layout px-0">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
<v-icon small class="mr-2" @click="editItem(props.item)">
edit
</v-icon>
<v-icon
small
@click="deleteItem(props.item)"
>
<v-icon small @click="deleteItem(props.item)">
delete
</v-icon>
</td>
@ -180,7 +202,6 @@
</v-card>
<list-button-add @add-to-list="dialog = true" />
</div>
</template>
@ -337,5 +358,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

6
src/components/auth/UserConfirm.vue
View file

@ -9,7 +9,8 @@
</div>
<div v-show="error">
<p class="text-xs-center headline font-weight-medium">
Sorry, there was a problem confirming your email address <a href="/">Please try again</a>
Sorry, there was a problem confirming your email address
<a href="/">Please try again</a>
</p>
<p class="text-xs-center subheading font-weight-medium">
Error: {{ error }}
@ -36,5 +37,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

9
src/components/auth/UserForgot.vue
View file

@ -21,10 +21,12 @@
block
color="primary"
type="submit"
>Send</v-btn>
>Send</v-btn
>
</v-form>
<div class="text-xs-center">
<span class="body-2">Already have an account?</span> <v-btn flat color="primary" to="/login">Sign In</v-btn>
<span class="body-2">Already have an account?</span>
<v-btn flat color="primary" to="/login">Sign In</v-btn>
</div>
</v-flex>
<v-flex xs12 sm8 offset-xs0 offset-sm2></v-flex>
@ -60,5 +62,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

21
src/components/auth/UserLogin.vue
View file

@ -28,21 +28,13 @@
<v-btn block color="primary" type="submit">Sign In</v-btn>
</v-form>
<div class="text-xs-center">
<v-btn
flat
color="primary"
to="/signup"
:disabled="!signupEnabled"
>Create Account</v-btn>
<v-btn
flat
color="primary"
to="/forgot"
>Forgot Password?</v-btn>
<v-btn flat color="primary" to="/signup" :disabled="!signupEnabled"
>Create Account</v-btn
>
<v-btn flat color="primary" to="/forgot">Forgot Password?</v-btn>
</div>
</v-flex>
<v-flex xs12 sm8 offset-xs0 offset-sm2>
</v-flex>
<v-flex xs12 sm8 offset-xs0 offset-sm2> </v-flex>
</v-layout>
</v-container>
</template>
@ -89,5 +81,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

12
src/components/auth/UserReset.vue
View file

@ -26,14 +26,11 @@
@click:append="showPassword = !showPassword"
>
</v-text-field>
<v-btn
block
color="primary"
type="submit"
>Reset Password</v-btn>
<v-btn block color="primary" type="submit">Reset Password</v-btn>
</v-form>
<div class="text-xs-center">
<span class="body-2">Already have an account?</span> <v-btn flat color="primary" to="/login">Sign In</v-btn>
<span class="body-2">Already have an account?</span>
<v-btn flat color="primary" to="/login">Sign In</v-btn>
</div>
</v-flex>
<v-flex xs12 sm8 offset-xs0 offset-sm2></v-flex>
@ -63,5 +60,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

19
src/components/auth/UserSignup.vue
View file

@ -4,7 +4,9 @@
<v-flex xs12 sm8 offset-xs0 offset-sm2>
<p class="text-xs-center headline font-weight-medium">
<span v-show="signupEnabled">Create your Alerta account</span>
<span v-show="!signupEnabled">Sorry, sign up is not currently available</span>
<span v-show="!signupEnabled"
>Sorry, sign up is not currently available</span
>
</p>
<v-form @submit.prevent="signup()">
<v-text-field
@ -57,15 +59,13 @@
outline
>
</v-text-field>
<v-btn
block
color="primary"
type="submit"
:disabled="!signupEnabled"
>Sign Up</v-btn>
<v-btn block color="primary" type="submit" :disabled="!signupEnabled"
>Sign Up</v-btn
>
</v-form>
<div class="text-xs-center">
<span class="body-2">Already have an account?</span> <v-btn flat color="primary" to="/login">Sign In</v-btn>
<span class="body-2">Already have an account?</span>
<v-btn flat color="primary" to="/login">Sign In</v-btn>
</div>
</v-flex>
<v-flex xs12 sm8 offset-xs0 offset-sm2></v-flex>
@ -115,5 +115,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

4
src/views/About.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="about">
<manifest/>
<status/>
<manifest />
<status />
</div>
</template>

5
src/views/Alert.vue
View file

@ -1,9 +1,6 @@
<template>
<div class="alert">
<alert-detail
:id="id"
@close="$router.push({name: 'alerts'})"
/>
<alert-detail :id="id" @close="$router.push({ name: 'alerts' })" />
</div>
</template>

51
src/views/Alerts.vue
View file

@ -1,6 +1,10 @@
<template>
<div class="alerts">
<audio v-if="playSound && !isMute" :src="$config.audio.new" autoplay></audio>
<audio
v-if="playSound && !isMute"
:src="$config.audio.new"
autoplay
></audio>
<alert-list-filter
:value="sidesheet"
@ -20,16 +24,14 @@
@click="setEnv(env.environment)"
>
<v-badge color="grey">
<span slot="badge">{{ environmentCounts[env.environment] || 0 }}</span>
<span slot="badge">{{
environmentCounts[env.environment] || 0
}}</span>
{{ env.environment }}&nbsp;
</v-badge>
</v-tab>
<v-spacer></v-spacer>
<v-btn
flat
icon
@click="sidesheet = !sidesheet"
>
<v-btn flat icon @click="sidesheet = !sidesheet">
<v-icon>filter_list</v-icon>
</v-btn>
<span class="pr-2"></span>
@ -42,13 +44,10 @@
:transition="false"
:reverse-transition="false"
>
<alert-list
:alerts="alerts"
/>
<alert-list :alerts="alerts" />
</v-tab-item>
</v-tabs-items>
</v-tabs>
</div>
</template>
@ -96,23 +95,20 @@ export default {
alerts() {
if (this.filter) {
return this.$store.getters['alerts/alerts']
.filter(
alert =>
this.filter.environment
? alert.environment === this.filter.environment
: true
.filter(alert =>
this.filter.environment
? alert.environment === this.filter.environment
: true
)
.filter(
alert =>
this.filter.service
? alert.service.some(x => this.filter.service.includes(x))
: true
.filter(alert =>
this.filter.service
? alert.service.some(x => this.filter.service.includes(x))
: true
)
.filter(
alert =>
this.filter.status
? this.filter.status.includes(alert.status)
: true
.filter(alert =>
this.filter.status
? this.filter.status.includes(alert.status)
: true
)
.filter(alert => {
if (this.filter.dateRange) {
@ -224,5 +220,4 @@ export default {
}
</script>
<style>
</style>
<style></style>

2
src/views/ApiKeys.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="keys">
<api-key-list/>
<api-key-list />
</div>
</template>

2
src/views/Blackouts.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="blackouts">
<blackout-list/>
<blackout-list />
</div>
</template>

2
src/views/Confirm.vue
View file

@ -1,5 +1,5 @@
<template>
<user-confirm/>
<user-confirm />
</template>
<script lang="ts">

2
src/views/Customers.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="customers">
<customer-list/>
<customer-list />
</div>
</template>

2
src/views/Forgot.vue
View file

@ -1,5 +1,5 @@
<template>
<user-forgot/>
<user-forgot />
</template>
<script lang="ts">

2
src/views/Login.vue
View file

@ -1,5 +1,5 @@
<template>
<user-login/>
<user-login />
</template>
<script lang="ts">

2
src/views/Perms.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="perms">
<perm-list/>
<perm-list />
</div>
</template>

2
src/views/Reset.vue
View file

@ -1,5 +1,5 @@
<template>
<user-reset/>
<user-reset />
</template>
<script lang="ts">

3
src/views/Settings.vue
View file

@ -1,7 +1,6 @@
<template>
<div class="settings">
<preferences/>
<preferences />
<h2>Server config settings</h2>
<pre>{{ $config }}</pre>

2
src/views/Signup.vue
View file

@ -1,5 +1,5 @@
<template>
<user-signup/>
<user-signup />
</template>
<script lang="ts">

2
src/views/Users.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="users">
<user-list/>
<user-list />
</div>
</template>