From ac26407e305a62f0eaf7aea9bc13b01d449968f3 Mon Sep 17 00:00:00 2001
From: wh1te909 <dcparsi@gmail.com>
Date: Sun, 29 Mar 2020 01:41:41 +0000
Subject: [PATCH] improvements to the edit agent modal

---
 src/assets/email-alert.png                 | Bin 639 -> 0 bytes
 src/assets/patches-pending.png             | Bin 484 -> 0 bytes
 src/assets/remote-bg.png                   | Bin 448 -> 0 bytes
 src/assets/server-failing.png              | Bin 508 -> 0 bytes
 src/assets/server-passing.png              | Bin 273 -> 0 bytes
 src/assets/sms-alert.png                   | Bin 645 -> 0 bytes
 src/assets/take-control.png                | Bin 615 -> 0 bytes
 src/components/AgentTable.vue              |  23 +-
 src/components/modals/agents/EditAgent.vue | 556 +++++++++++----------
 9 files changed, 298 insertions(+), 281 deletions(-)
 delete mode 100644 src/assets/email-alert.png
 delete mode 100644 src/assets/patches-pending.png
 delete mode 100644 src/assets/remote-bg.png
 delete mode 100644 src/assets/server-failing.png
 delete mode 100644 src/assets/server-passing.png
 delete mode 100644 src/assets/sms-alert.png
 delete mode 100644 src/assets/take-control.png

diff --git a/src/assets/email-alert.png b/src/assets/email-alert.png
deleted file mode 100644
index 8627b75372b18c8ff5e603b20778421f3ebed602..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 639
zcmV-_0)YLAP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!~g&e!~vBn4jTXf0u)I^K~y+TrIKAp
zQ*ju^pR<p%?d-$QcJ$0akZ#8*GKA=Bt~5bp5M(&|U_pXiN_kNs2oYpjA)<I86fP1J
zS2u+fm7*7e-DL@FG<Rc8p>6`916{N_=iNEg#xSAZ&HKUgKJUx_9OkDC{(}O8?(QBn
z+nH$eftmpZH4?u128!3N_E9Y6?!8ep`$NG6njn?@K(Uxo3&>z-=nm59wOwDJEbw|g
z=<mOtH;^O=@puC7-mm@^6vHqK>U{N-`~8gw1dhOFwdM^525#W;m0oOSx3I9dgj_C1
zLJgfxht5+c@%+Ur918~EatRn4pTOX)o6so&vxSq3VVF!T&YtN4$8j{Map>Ry)YR<9
zrJjpmStAB-55pqQD3AfmvZxXSOitcMGMU1K$T?K<JP9hw%h9;68c)I<kh1HTpMMEK
zaM6qc87L@cR=eGJ{bm8N*kgplr{VL7Xm4*rCN_=3Rs%9KQ;5jsdc9tq`pZCr=PR-P
zX#*o8qi8uEL>Yd-_%;sr)Kl2ft1y4tMpKhtRhKYOa5&0fcQ{}$81Zp7iYkkV9@c4Q
zk(qmlVDnMf?KaYuG*AeII`IAT7TA>p7`dJeHB+BUtw7q`z=_rts>#6V+)IT<o#=(v
zQ;W2`UEoaAJO6B%A}?RDCig|rLv_KgTuiDrf(mJy^2O{Iw7K(N=BsTF#IZ+|?`ZIE
ZfM2aFsmDnzf;|8L002ovPDHLkV1k3m9_j!9

diff --git a/src/assets/patches-pending.png b/src/assets/patches-pending.png
deleted file mode 100644
index 5af8ff250887986c58286e35d0180fbc0af6b304..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 484
zcmV<A0UQ2_P)<h;3K|Lk000e1NJLTq000mG000sQ1^@s6QafI100001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!~g&e!~vBn4jTXf0eMM8K~y+T#gxrU
z0#Ovj&mCvXFl72b3{libf()&Qg8qf5RkUyuMB7>iA=O@@g?~d7Z32mQwX85&v`T8B
z(Fa69L}}zWy?OJRF<dm%qTlAcdwB26z08{-oq<0f3H>!z2fLYWZa8IX?T)JzpyhkG
z;S|@z71uwH;5dN7Gobi_sB9bsQ2QV#v5Mzfhj46u4ruWMLpeN_j!{0$2-C(6AeSku
zO{-N&0fuv^Rw}s6&!ayiwi~{{3eaUA*Qb{{r1+v4lvsi8?Zw%48maI*i1-%NWz}3T
ztN_g&;QCNl$HhU`3<*u+bZZU+UAItN;xt2Rjfz!cfG^249#l{-Zt#%vy=6q?6L>xL
zqz0NgB32C-sd|3|rI6;PLGk7TZiNu>%fb<m1Z{jDZq>YaR<tKD2I?FYmDx$tVTLi*
z*I|S2y(P0iTTB$qkeUMemPBRJ^f~LbH=w);{dx!bYl-b3kT(VjPJ*Jd?2+~>H2ClT
a0q_YBMP{JTqdSfO0000<MNUMnLSTXg)XRwg

diff --git a/src/assets/remote-bg.png b/src/assets/remote-bg.png
deleted file mode 100644
index e384315b922eadd96910a9e99b63d06de2ae8530..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 448
zcmV;x0YCnUP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!~g&e!~vBn4jTXf0aZyvK~y+TWBd;U
z3={yyl<8al&)av2;UAJY%uI|7ATCIZkr5(>ZVeMqBF)u+fsr|P)&IXdVhsP=?7<Q&
zHHR4fwAg{!Ow|V&{<T8H8LJM0X=EVq>n#J*Umj5~=kWE%499Lh0owYHVgHqf3_C8|
z1KWD&+GB>DKsGk;pGTO1k)iSc#BooqfP@$rWONxAo?Zo733R)Z7DSwpiGe{H$VLPF
zY(O>qjYmM?NEYC)Klq=C;oo1VdE^10+aQ23w4I@F!5%1&cmOwGQc)bkq|<LmHUw@!
zuB9}?k~AlVY3JUOWC+{<5P1Lg4Z~kv2?jwi38)BR05$*=-}NgGGh{D2$<W}Uz)<I<
z1C}HPuz-k9-+wYR?SIJ79_!3dVJ`=k00k;C_`kXm%0dHz4F{pIN;&|g1ID<OSN|_w
qvk@b+5CWitniL+$Kw)-fU;qFpsq6UnIOrPy0000<MNUMnLSTa4?68*r

diff --git a/src/assets/server-failing.png b/src/assets/server-failing.png
deleted file mode 100644
index 573b1559a4c6eaa518a4f8d97bba0eb87b454061..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 508
zcmV<Y0R#StP)<h;3K|Lk000e1NJLTq000jF000sQ1^@s6gr0;C00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!~g&e!~vBn4jTXf0g*{WK~y+TWBd;U
z3{bGd)f~#g1g6==3}>eGGeqw?4i#ZwV1m+M;O%J7z`zJ(V8QAEVJI5G0Aw=^yiD?i
zvWNpH&VH5b$FS@1ODGQ&#Oyi=Wg!8u5l}FMZH9p_zyB~?c=LgQm5GVLKtzB+cEJ{?
z3<97;6*9QXEyUn6e+`4vgt-h?euLr*6X4Wr-O$bOp(=yn|HYFGj$Kp1VqaFyMR6Sq
zl*Rz8zkV>hvUFt-+qQ;*>;FH7&%b{&eBZN~;kmsJgBVl|PCqjV3N!GPv@l%VvYtWu
z_%5&*NTYsS8kh|NIGz3d&1;5Zo%IZcDLD+RimD8(YT76oK>(-b>;G67EXo>z{+!3~
z`~Gc)-?y$Zd|kf;DhmNPHJjCSGQ8injp5s_4Ghn$Js2LFIx&3RvWnsP>V;4hXqrF%
z`VD0<FmUtnGcfPl%<vSb(I6>{!8oG;Yyk6)wNMpk0k%CiiQ(<dt6;W(qB4VHQy&Aj
yxCEGw4WMZ5?dyZGP=T$jErXe<DU=5T3=9AROGYMeR;O?P0000<MNUMnLSTaR$JZ4A

diff --git a/src/assets/server-passing.png b/src/assets/server-passing.png
deleted file mode 100644
index 34af1eb1c5ede56e82e1ea9c20ce9123ae33b7b2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 273
zcmeAS@N?(olHy`uVBq!ia0vp^d_XM7!3HGXo|royNHG=%xjQkeJ16rJ$YDu$^mSxl
z*x1kgCy^D%=PdAuECy;i0>X?_wfUrhg3CNz978PplmGCu@HkAktI4~lplRh(f5~t2
z<{jPeGl2bY%cE+Zf?kCU|C}@q&zpOEflbJRSBa+u7VKv_#mqFpO=3o&hv=z8EH8>Q
z%+A@YIacuUMz{vQ=!?ig<0ZH6HGOJeSR>2THlz0k!=_%JfLSR9s|5KKR(yPQa(#p_
zYuB;$^Zz+Tau}?9qG{p1@bp5J2F}w?5_$G^d`}lLiAol?9ePn3AjiziuyyH6^@yAR
Qkf#|uUHx3vIVCg!0Dui+i2wiq

diff --git a/src/assets/sms-alert.png b/src/assets/sms-alert.png
deleted file mode 100644
index 3b7495156e4e555f5ef07dba9847a54eae9c966f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 645
zcmV;00($+4P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!~g&e!~vBn4jTXf0vbs~K~y+TrISxg
z6G0fo-`Z_qTUw+oMF?Rj7YkgGCY*o<4M-GBFV=u5F(y5lSQ0r)V)VcbA`;6*+Q@|p
z{w2l(MpPsmjBbL}v>1b6Y-vn;Fs-ojbr&hc1Mzp*H}iJBx8Ll}a@#Wa5Ap(Hu{F%i
zJ%l7lNTt$>o5Ntx!{KnCtE&@rb#}$w6R@!G5~0vE%FJeYu>l&5h8Cz~vst9mDa7M(
zoa^m@%hg8y5q612qnMeQMU5!JWHJ>LGni*Injng`c>LrkB9YJJQwO)lCy-43B4f~h
zh4f$Cyfs2<EHS|6yPONSK70c@T@l@oK7JtG565v}yRC0%q<JQj!O%57cxLjvmP|$<
zFrkbNM(seW&DHQM*<vvxk=P=`>%By}myQk>Jf8CihaV^oV6&Bz^6XOYIF46~Z^+o+
z!RXi>oOCu}+I<SG!z0-I@sl3LY8dnm*nWb+`&j?JQSc7@gIAH74Wd$7#<$uASo?f<
zx3mnmyO+KUb-?pH8PDdQQ;~|@E}}}%A-3`w)%PAD*>@Uce}3;4Gw2*J1VO;rGu;^Q
z_S2k&y4qW@8VsOPUnGA4puAXzNN6(eoa_duSgjUPr}G53tvHI`zoq$9XA7xbT0!DV
zgvN}507gZH4bJ8!tWMp<F(G$8JmD9lHo1#Wa#tz`23+jFKwCJv@l|nvP*1xu0!lak
f`gwoj;Q@94W&O8e1teLa00000NkvXXu0mjfTeKZm

diff --git a/src/assets/take-control.png b/src/assets/take-control.png
deleted file mode 100644
index ce1eb4968c8af871565bd17c6bef72a3db0d8a1c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 615
zcmV-t0+{`YP)<h;3K|Lk000e1NJLTq000mG000pP1^@s6)UPbW00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!~g&e!~vBn4jTXf0sKisK~y+Tosm6A
z8(|#ApG#uTBoa-PprEG~4PtZ<bP!UoICSuXEG~+J#HHxa%}ErOQo9rctz9a1Dl{N!
z5ru*}D57yuBPt>$h>;}PHs<rpop+bFxm;pJ`Ws%}=i$BQ|8d|m*g3uAIgW@Yph6nn
zUm?7DHwXLF4<tCAxH31PD6W2oh)SXe__*Xmu+WSzt}yy07Zo9g7XdH>(_jWaWA(sI
z+>C&Qlc3<J0fPx&k7DSZm`{bQ?74AUT#tBZ19m;vk|#ombC5gep%ui{G*JRUKe}G1
z&||Gb_skY7mRh{5$j4Y~IrOwfdXfqdPkML_EGPLgw|*(8y`>r7d+I=I6iv$`P!v#U
z)Do3OUJ+1I11cT{1$ifbQN*>I4dj;1!u};}9~_9Xcf?7e2zYB{pv_UXm_q*?OWtR&
zjXMyIvBb;>C^PCX(NRUz1L%!d_T{28EhMX)y|Dz-HgndpQs@fsGoZtmV?&aP-?;Ab
zfK4ROT3><FKm_mCJ(zR(;R_|JsZ|u383X!-BE1bJsKm{S0V4C;$Gq15iP!W^@srC=
z;wJG1WBmC|l#j3p;>buH%&zUhKD&uKQ?*b>NcEjz^mR2xx~x*=$50nEwT-^{<^(5x
zObK&~Z3)X-b-6)B{-DLekf#r$*unqsk5xYv;2zQE771V9V?zJ{002ovPDHLkV1ig^
B3_}0_

diff --git a/src/components/AgentTable.vue b/src/components/AgentTable.vue
index 010edff..37d5acf 100644
--- a/src/components/AgentTable.vue
+++ b/src/components/AgentTable.vue
@@ -51,7 +51,7 @@
             <q-list dense style="min-width: 200px">
               <q-item clickable v-close-popup @click="showEditAgentModal = true">
                 <q-item-section avatar>
-                  <q-icon style="font-size: 0.9rem;" name="edit" />
+                  <q-icon name="fas fa-edit" />
                 </q-item-section>
                 <q-item-section>Edit {{ props.row.hostname }}</q-item-section>
               </q-item>
@@ -64,7 +64,7 @@
                 @click.stop.prevent="takeControl(props.row.id)"
               >
                 <q-item-section avatar>
-                  <q-icon style="font-size: 0.8rem;" name="fas fa-desktop" />
+                  <q-icon name="fas fa-desktop" />
                 </q-item-section>
 
                 <q-item-section>Take Control</q-item-section>
@@ -77,22 +77,24 @@
                 @click="toggleSendCommand(props.row.id, props.row.hostname)"
               >
                 <q-item-section avatar>
-                  <q-icon style="font-size: 0.8rem;" name="fas fa-terminal" />
+                  <q-icon name="fas fa-terminal" />
                 </q-item-section>
                 <q-item-section>Send Command</q-item-section>
               </q-item>
 
               <q-separator />
               <q-item clickable v-close-popup @click.stop.prevent="remoteBG(props.row.id)">
-                <q-item-section class="remote-bg" side></q-item-section>
+                <q-item-section avatar>
+                  <q-icon name="fas fa-cogs" />
+                </q-item-section>
                 <q-item-section>Remote Background</q-item-section>
               </q-item>
               
               <!-- patch management -->
               <q-separator />
               <q-item clickable>
-                <q-item-section side>
-                  <q-icon name="power_settings_new" />
+                <q-item-section avatar>
+                  <q-icon name="system_update" />
                 </q-item-section>
                 <q-item-section>Patch Management</q-item-section>
                 <q-item-section side>
@@ -116,7 +118,7 @@
 
               <q-separator />
               <q-item clickable>
-                <q-item-section side>
+                <q-item-section avatar>
                   <q-icon name="power_settings_new" />
                 </q-item-section>
                 <q-item-section>Reboot</q-item-section>
@@ -150,7 +152,7 @@
 
               <q-separator />
               <q-item clickable v-close-popup @click.stop.prevent="removeAgent(props.row.id, props.row.hostname)">
-                <q-item-section side><q-icon name="delete" /></q-item-section>
+                <q-item-section avatar><q-icon name="delete" /></q-item-section>
                 <q-item-section>Remove Agent</q-item-section>
               </q-item>
 
@@ -475,11 +477,6 @@ export default {
 .highlight {
   background-color: #c9e6ff;
 }
-.remote-bg {
-  background: url("../assets/remote-bg.png") no-repeat center;
-  width: 16px;
-  margin-right: 10px;
-}
 .agent-offline {
   background: gray !important
 }
diff --git a/src/components/modals/agents/EditAgent.vue b/src/components/modals/agents/EditAgent.vue
index c90334c..d1c3466 100644
--- a/src/components/modals/agents/EditAgent.vue
+++ b/src/components/modals/agents/EditAgent.vue
@@ -1,6 +1,6 @@
 <template>
-  <q-card style="min-width: 700px">
-    <q-splitter v-model="splitterModel" style="height: 700px">
+  <q-card style="min-width: 800px" v-if="agentLoaded && clientsLoaded">
+    <q-splitter v-model="splitterModel">
       <template v-slot:before>
         <q-tabs dense v-model="tab" vertical class="text-primary">
           <q-tab name="general" label="General" />
@@ -10,214 +10,279 @@
       <template v-slot:after>
         <q-form @submit.prevent="editAgent">
           <q-card-section class="row items-center">
-            <div class="text-h6">Edit {{ hostname }}</div>
+            <div class="text-h6">Edit {{ agent.hostname }}</div>
             <q-space />
             <q-btn icon="close" flat round dense v-close-popup />
           </q-card-section>
-          <q-tab-panels v-model="tab" animated transition-prev="jump-up" transition-next="jump-up">
-            <!-- general -->
-            <q-tab-panel name="general">
-              <q-card-section>
-                <q-select
-                  @input="site = sites[0]"
-                  dense
-                  outlined
-                  v-model="client"
-                  :options="Object.keys(tree)"
-                  label="Client"
-                />
-              </q-card-section>
-              <q-card-section>
-                <q-select dense outlined v-model="site" :options="sites" label="Site" />
-              </q-card-section>
-              <q-card-section>
-                <q-select
-                  dense
-                  outlined
-                  v-model="monType"
-                  :options="monTypes"
-                  label="Monitoring mode"
-                />
-              </q-card-section>
-              <q-card-section>
-                <q-input
-                  outlined
-                  dense
-                  v-model="desc"
-                  label="Description"
-                  :rules="[val => !!val || '*Required']"
-                />
-              </q-card-section>
-              <q-card-section>
-                <q-input
-                  dense
-                  outlined
-                  v-model.number="checkInterval"
-                  label="Interval for checks (seconds)"
-                  :rules="[ 
+          <q-scroll-area :thumb-style="thumbStyle" style="height: 500px;">
+            <q-tab-panels
+              v-model="tab"
+              animated
+              transition-prev="jump-up"
+              transition-next="jump-up"
+            >
+              <!-- general -->
+              <q-tab-panel name="general">
+                <q-card-section class="row">
+                  <div class="col-2">Client:</div>
+                  <div class="col-2"></div>
+                  <q-select
+                    @input="agent.site = sites[0]"
+                    dense
+                    outlined
+                    v-model="agent.client"
+                    :options="Object.keys(tree)"
+                    class="col-8"
+                  />
+                </q-card-section>
+                <q-card-section class="row">
+                  <div class="col-2">Site:</div>
+                  <div class="col-2"></div>
+                  <q-select class="col-8" dense outlined v-model="agent.site" :options="sites" />
+                </q-card-section>
+                <q-card-section class="row">
+                  <div class="col-2">Type:</div>
+                  <div class="col-2"></div>
+                  <q-select
+                    dense
+                    outlined
+                    v-model="agent.monitoring_type"
+                    :options="monTypes"
+                    class="col-8"
+                  />
+                </q-card-section>
+                <q-card-section class="row">
+                  <div class="col-2">Description:</div>
+                  <div class="col-2"></div>
+                  <q-input
+                    outlined
+                    dense
+                    v-model="agent.description"
+                    class="col-8"
+                    :rules="[val => !!val || '*Required']"
+                  />
+                </q-card-section>
+                <q-card-section class="row">
+                  <div class="col-10">Check interval:</div>
+                  <q-input
+                    dense
+                    type="number"
+                    filled
+                    label="Seconds"
+                    v-model.number="agent.check_interval"
+                    class="col-2"
+                    :rules="[ 
                       val => !!val || '*Required',
                       val => val >= 60 || 'Minimum is 60 seconds',
                       val => val <= 3600 || 'Maximum is 3600 seconds'
                   ]"
-                />
-              </q-card-section>
-              <q-card-section>
-                <q-input
-                  dense
-                  outlined
-                  v-model.number="overdueTime"
-                  label="Send an overdue alert if the server has not reported in after (minutes)"
-                  :rules="[ 
+                  />
+                </q-card-section>
+                <q-card-section class="row">
+                  <div
+                    class="col-10"
+                  >Send an overdue alert if the server has not reported in after:</div>
+                  <q-input
+                    dense
+                    type="number"
+                    filled
+                    label="Minutes"
+                    v-model.number="agent.overdue_time"
+                    class="col-2"
+                    :rules="[ 
                       val => !!val || '*Required',
                       val => val >= 5 || 'Minimum is 5 minutes',
                       val => val < 9999999 || 'Maximum is 9999999 minutes'
                   ]"
-                />
-              </q-card-section>
-              <q-card-section>
-                <q-checkbox v-model="emailAlert" label="Get overdue email alerts" />
-                <q-space />
-                <q-checkbox v-model="textAlert" label="Get overdue text alerts" />
-              </q-card-section>
-            </q-tab-panel>
-            <!-- patch -->
-            <q-tab-panel name="patch">
-              <!-- Auto Approval -->
-              <div class="text-subtitle2">Auto Approval</div>
-              <hr />
-              <q-card-section class="row">
-                <div class="col-3">Severity</div>
-                <div class="col-4"></div>
-                <div class="col-5">Action</div>
-              </q-card-section>
-              <q-card-section class="row">
-                <div class="col-3">Critical:</div>
-                <div class="col-4"></div>
-                <q-select
-                  dense
-                  class="col-5"
-                  outlined
-                  v-model="critical"
-                  :options="severityOptions"
-                  emit-value
-                  map-options
-                />
-              </q-card-section>
-              <q-card-section class="row">
-                <div class="col-3">Important:</div>
-                <div class="col-4"></div>
-                <q-select
-                  dense
-                  class="col-5"
-                  outlined
-                  v-model="important"
-                  :options="severityOptions"
-                  emit-value
-                  map-options
-                />
-              </q-card-section>
-              <q-card-section class="row">
-                <div class="col-3">Moderate:</div>
-                <div class="col-4"></div>
-                <q-select
-                  dense
-                  class="col-5"
-                  outlined
-                  v-model="moderate"
-                  :options="severityOptions"
-                  emit-value
-                  map-options
-                />
-              </q-card-section>
-              <q-card-section class="row">
-                <div class="col-3">Low:</div>
-                <div class="col-4"></div>
-                <q-select
-                  dense
-                  class="col-5"
-                  outlined
-                  v-model="low"
-                  :options="severityOptions"
-                  emit-value
-                  map-options
-                />
-              </q-card-section>
-              <q-card-section class="row">
-                <div class="col-3">Other:</div>
-                <div class="col-4"></div>
-                <q-select
-                  dense
-                  class="col-5"
-                  outlined
-                  v-model="other"
-                  :options="severityOptions"
-                  emit-value
-                  map-options
-                />
-              </q-card-section>
-              <!-- Installation Schedule -->
-              <div class="text-subtitle2">Installation Schedule</div>
-              <hr />
-              <q-card-section class="row">
-                <div class="col-3">Scheduled Time:</div>
-                <div class="col-4"></div>
-                <q-select
-                  dense
-                  class="col-5"
-                  outlined
-                  v-model="scheduledTime"
-                  :options="timeOptions"
-                  emit-value
-                  map-options
-                />
-              </q-card-section>
-              <q-card-section>
-                <div class="q-gutter-sm">
-                  <q-checkbox v-model="dayOptions" :val="0" label="Monday" />
-                  <q-checkbox v-model="dayOptions" :val="1" label="Tuesday" />
-                  <q-checkbox v-model="dayOptions" :val="2" label="Wednesday" />
-                  <q-checkbox v-model="dayOptions" :val="3" label="Thursday" />
-                  <q-checkbox v-model="dayOptions" :val="4" label="Friday" />
-                  <q-checkbox v-model="dayOptions" :val="5" label="Saturday" />
-                  <q-checkbox v-model="dayOptions" :val="6" label="Sunday" />
-                </div>
-              </q-card-section>
-              <!-- Reboot After Installation -->
-              <div class="text-subtitle2">Reboot After Installation</div>
-              <hr />
-              <q-card-section class="row">
-                <div class="q-gutter-sm">
-                  <q-radio v-model="rebootAfterInstall" val="never" label="Never" />
-                  <q-radio v-model="rebootAfterInstall" val="required" label="When Required" />
-                  <q-radio v-model="rebootAfterInstall" val="always" label="Always" />
-                </div>
-              </q-card-section>
-              <!-- Failed Patches -->
-              <div class="text-subtitle2">Failed Patches</div>
-              <hr />
-              <q-card-section class="row">
-                <div class="col-5">
-                  <q-checkbox v-model="reprocessFailed" label="Reprocess failed patches" />
-                </div>
-
-                <div class="col-3">
-                  <q-input
-                    dense
-                    v-model.number="reprocessFailedTimes"
-                    type="number"
-                    filled
-                    label="Times"
-                    :rules="[ val => val > 0 || 'Must be greater than 0']"
                   />
-                </div>
-                <div class="col-3"></div>
-                <q-checkbox
-                  v-model="emailIfFail"
-                  label="Send an email when patch installation fails"
-                />
-              </q-card-section>
-            </q-tab-panel>
-          </q-tab-panels>
+                </q-card-section>
+                <q-card-section class="row">
+                  <q-checkbox v-model="agent.overdue_email_alert" label="Get overdue email alerts" />
+                  <q-checkbox v-model="agent.overdue_text_alert" label="Get overdue sms alerts" />
+                </q-card-section>
+              </q-tab-panel>
+              <!-- patch -->
+              <q-tab-panel name="patch">
+                <!-- Auto Approval -->
+                <div class="text-subtitle2">Auto Approval</div>
+                <hr />
+                <q-card-section class="row">
+                  <div class="col-3">Severity</div>
+                  <div class="col-4"></div>
+                  <div class="col-5">Action</div>
+                </q-card-section>
+                <q-card-section class="row">
+                  <div class="col-3">Critical:</div>
+                  <div class="col-4"></div>
+                  <q-select
+                    dense
+                    class="col-5"
+                    outlined
+                    v-model="agent.winupdatepolicy[0].critical"
+                    :options="severityOptions"
+                    emit-value
+                    map-options
+                  />
+                </q-card-section>
+                <q-card-section class="row">
+                  <div class="col-3">Important:</div>
+                  <div class="col-4"></div>
+                  <q-select
+                    dense
+                    class="col-5"
+                    outlined
+                    v-model="agent.winupdatepolicy[0].important"
+                    :options="severityOptions"
+                    emit-value
+                    map-options
+                  />
+                </q-card-section>
+                <q-card-section class="row">
+                  <div class="col-3">Moderate:</div>
+                  <div class="col-4"></div>
+                  <q-select
+                    dense
+                    class="col-5"
+                    outlined
+                    v-model="agent.winupdatepolicy[0].moderate"
+                    :options="severityOptions"
+                    emit-value
+                    map-options
+                  />
+                </q-card-section>
+                <q-card-section class="row">
+                  <div class="col-3">Low:</div>
+                  <div class="col-4"></div>
+                  <q-select
+                    dense
+                    class="col-5"
+                    outlined
+                    v-model="agent.winupdatepolicy[0].low"
+                    :options="severityOptions"
+                    emit-value
+                    map-options
+                  />
+                </q-card-section>
+                <q-card-section class="row">
+                  <div class="col-3">Other:</div>
+                  <div class="col-4"></div>
+                  <q-select
+                    dense
+                    class="col-5"
+                    outlined
+                    v-model="agent.winupdatepolicy[0].other"
+                    :options="severityOptions"
+                    emit-value
+                    map-options
+                  />
+                </q-card-section>
+                <!-- Installation Schedule -->
+                <div class="text-subtitle2">Installation Schedule</div>
+                <hr />
+                <q-card-section class="row">
+                  <div class="col-3">Scheduled Time:</div>
+                  <div class="col-4"></div>
+                  <q-select
+                    dense
+                    class="col-5"
+                    outlined
+                    v-model="agent.winupdatepolicy[0].run_time_hour"
+                    :options="timeOptions"
+                    emit-value
+                    map-options
+                  />
+                </q-card-section>
+                <q-card-section>
+                  <div class="q-gutter-sm">
+                    <q-checkbox
+                      v-model="agent.winupdatepolicy[0].run_time_days"
+                      :val="0"
+                      label="Monday"
+                    />
+                    <q-checkbox
+                      v-model="agent.winupdatepolicy[0].run_time_days"
+                      :val="1"
+                      label="Tuesday"
+                    />
+                    <q-checkbox
+                      v-model="agent.winupdatepolicy[0].run_time_days"
+                      :val="2"
+                      label="Wednesday"
+                    />
+                    <q-checkbox
+                      v-model="agent.winupdatepolicy[0].run_time_days"
+                      :val="3"
+                      label="Thursday"
+                    />
+                    <q-checkbox
+                      v-model="agent.winupdatepolicy[0].run_time_days"
+                      :val="4"
+                      label="Friday"
+                    />
+                    <q-checkbox
+                      v-model="agent.winupdatepolicy[0].run_time_days"
+                      :val="5"
+                      label="Saturday"
+                    />
+                    <q-checkbox
+                      v-model="agent.winupdatepolicy[0].run_time_days"
+                      :val="6"
+                      label="Sunday"
+                    />
+                  </div>
+                </q-card-section>
+                <!-- Reboot After Installation -->
+                <div class="text-subtitle2">Reboot After Installation</div>
+                <hr />
+                <q-card-section class="row">
+                  <div class="q-gutter-sm">
+                    <q-radio
+                      v-model="agent.winupdatepolicy[0].reboot_after_install"
+                      val="never"
+                      label="Never"
+                    />
+                    <q-radio
+                      v-model="agent.winupdatepolicy[0].reboot_after_install"
+                      val="required"
+                      label="When Required"
+                    />
+                    <q-radio
+                      v-model="agent.winupdatepolicy[0].reboot_after_install"
+                      val="always"
+                      label="Always"
+                    />
+                  </div>
+                </q-card-section>
+                <!-- Failed Patches -->
+                <div class="text-subtitle2">Failed Patches</div>
+                <hr />
+                <q-card-section class="row">
+                  <div class="col-5">
+                    <q-checkbox
+                      v-model="agent.winupdatepolicy[0].reprocess_failed"
+                      label="Reprocess failed patches"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      v-model.number="agent.winupdatepolicy[0].reprocess_failed_times"
+                      type="number"
+                      filled
+                      label="Times"
+                      :rules="[ val => val > 0 || 'Must be greater than 0']"
+                    />
+                  </div>
+                  <div class="col-3"></div>
+                  <q-checkbox
+                    v-model="agent.winupdatepolicy[0].email_if_fail"
+                    label="Send an email when patch installation fails"
+                  />
+                </q-card-section>
+              </q-tab-panel>
+            </q-tab-panels>
+          </q-scroll-area>
           <q-card-section class="row items-center">
             <q-btn label="Save" color="primary" type="submit" />
             <q-btn label="Cancel" v-close-popup />
@@ -238,19 +303,11 @@ export default {
   mixins: [mixins],
   data() {
     return {
-      pk: null,
-      hostname: "",
-      client: "",
-      site: "",
-      monType: "",
+      agentLoaded: false,
+      clientsLoaded: false,
+      agent: {},
       monTypes: ["server", "workstation"],
-      desc: "",
-      overdueTime: null,
-      checkInterval: null,
-      emailAlert: null,
-      textAlert: null,
       tree: {},
-      updatePolicy: [],
       splitterModel: 15,
       tab: "general",
       severityOptions: [
@@ -259,74 +316,35 @@ export default {
         { label: "Ignore", value: "ignore" }
       ],
       timeOptions: scheduledTimes,
-      dayOptions: [],
-      scheduledTime: null,
-      rebootAfterInstall: null,
-      reprocessFailed: null,
-      reprocessFailedTimes: null,
-      emailIfFail: null,
-      critical: null,
-      important: null,
-      moderate: null,
-      low: null,
-      other: null
+      thumbStyle: {
+        right: "2px",
+        borderRadius: "5px",
+        backgroundColor: "#027be3",
+        width: "5px",
+        opacity: 0.75
+      }
     };
   },
   methods: {
     getAgentInfo() {
       axios.get(`/agents/${this.selectedAgentPk}/agentdetail/`).then(r => {
-        this.pk = r.data.id;
-        this.hostname = r.data.hostname;
-        this.client = r.data.client;
-        this.site = r.data.site;
-        this.monType = r.data.monitoring_type;
-        this.desc = r.data.description;
-        this.overdueTime = r.data.overdue_time;
-        this.checkInterval = r.data.check_interval;
-        this.emailAlert = r.data.overdue_email_alert;
-        this.textAlert = r.data.overdue_text_alert;
-        this.updatePolicy = r.data.winupdatepolicy;
-        this.critical = r.data.winupdatepolicy[0].critical;
-        this.important = r.data.winupdatepolicy[0].important;
-        this.moderate = r.data.winupdatepolicy[0].moderate;
-        this.low = r.data.winupdatepolicy[0].low;
-        this.other = r.data.winupdatepolicy[0].other;
-        this.scheduledTime = r.data.winupdatepolicy[0].run_time_hour;
-        this.dayOptions = r.data.winupdatepolicy[0].run_time_days;
-        this.rebootAfterInstall =
-          r.data.winupdatepolicy[0].reboot_after_install;
-        this.reprocessFailed = r.data.winupdatepolicy[0].reprocess_failed;
-        this.reprocessFailedTimes =
-          r.data.winupdatepolicy[0].reprocess_failed_times;
-        this.emailIfFail = r.data.winupdatepolicy[0].email_if_fail;
+        this.agent = r.data;
+        this.agentLoaded = true;
       });
     },
     getClientsSites() {
-      axios.get("/clients/loadclients/").then(r => (this.tree = r.data));
+      axios.get("/clients/loadclients/").then(r => {
+        this.tree = r.data;
+        this.clientsLoaded = true;
+      });
     },
     editAgent() {
-      const data = {
-        pk: this.pk,
-        client: this.client,
-        site: this.site,
-        montype: this.monType,
-        desc: this.desc,
-        overduetime: this.overdueTime,
-        checkinterval: this.checkInterval,
-        emailalert: this.emailAlert,
-        textalert: this.textAlert,
-        critical: this.critical,
-        important: this.important,
-        moderate: this.moderate,
-        low: this.low,
-        other: this.other,
-        scheduledtime: this.scheduledTime,
-        dayoptions: this.dayOptions,
-        rebootafterinstall: this.rebootAfterInstall,
-        reprocessfailed: this.reprocessFailed,
-        reprocessfailedtimes: this.reprocessFailedTimes,
-        emailiffail: this.emailIfFail
-      };
+      let data = this.agent;
+      delete data.services;
+      delete data.wmi_detail;
+      delete data.disks;
+      delete data.local_ip;
+
       axios
         .patch("/agents/editagent/", data)
         .then(r => {
@@ -340,7 +358,9 @@ export default {
   computed: {
     ...mapGetters(["selectedAgentPk"]),
     sites() {
-      return this.tree[this.client];
+      if (this.agentLoaded && this.clientsLoaded) {
+        return this.tree[this.agent.client];
+      }
     }
   },
   created() {