From 46dee08ab32347047dfd8248d8ec3cf9783e3d57 Mon Sep 17 00:00:00 2001 From: Kyle Knight Date: Wed, 23 Nov 2016 15:10:32 -0600 Subject: [PATCH] Query Select Target Dropdown (#499) --- .sass-lint.yml | 2 +- assets/fonts/kolidecons/kolidecons.woff | Bin 9680 -> 12276 bytes .../forms/fields/InputField/_styles.scss | 2 +- .../SelectTargetsDropdown.jsx | 31 +- .../SelectTargetsInput/SelectTargetsInput.jsx | 6 +- .../SelectTargetsMenu/SelectTargetsMenu.jsx | 20 +- .../SelectTargetsMenu/_styles.scss | 45 +++ .../TargetDetails/TargetDetails.jsx | 184 ++++++----- .../TargetDetails/_styles.scss | 181 +++++++++++ .../TargetOption/TargetOption.jsx | 8 +- .../TargetOption/_styles.scss | 45 ++- .../fields/SelectTargetsDropdown/_styles.scss | 169 ++++++++++ .../queries/QueryComposer/QueryComposer.jsx | 5 +- .../queries/QueryComposer/_styles.scss | 18 +- frontend/styles/global/_icons.scss | 306 +++++++++++------- frontend/styles/var/mixins.scss | 13 + 16 files changed, 807 insertions(+), 228 deletions(-) create mode 100644 frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss create mode 100644 frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/_styles.scss create mode 100644 frontend/styles/var/mixins.scss diff --git a/.sass-lint.yml b/.sass-lint.yml index 967dabe2ee..9e991d882c 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -69,7 +69,7 @@ rules: no-css-comments: 1 no-duplicate-properties: 1 no-empty-rulesets: 1 - no-extends: 1 + no-extends: 0 no-ids: 1 no-important: 1 no-invalid-hex: 1 diff --git a/assets/fonts/kolidecons/kolidecons.woff b/assets/fonts/kolidecons/kolidecons.woff index 0cd13cc0b035a43b3313eb18159ce465e4124d8d..62a532bc51b4e973d50e29a6b00f06b10d2671d1 100644 GIT binary patch delta 10313 zcmX|{b8wwcxW`Yd#%$cENn_i#ZQDBGiP6|*V>V41+cp~8PEM?w-^{)Do%znr_p|%V zKD&SHzO(a8%YqHDJQXD*01$xBj}Z(&{jZfJO~9f7-Mkqnsxq>9+003D1$5MLjt;~(hKmY)x+2^3o1OOZ;dNcf1pY)TZ ze|pkSQ6NgdnOoVr0Y6#ur_cCI1`F2(j?>Q3^m81Q+9!+tPw5}OJnfBvpA%DUeR|UW z1c8et;9zWT4gh@rv=HAub#Ne(W9#JT`ngzYicgP@{Fzmeh|WyClZ*LhFk?uP90UR8 zXf=||6f}Sj05bvr09Qz8s-ZR`! z{8B|t=sb>asOQ|5qn$f_4|{=J&$*vy>#$CHZt-ob6e_{er;yUq!oBN%i`p3tT;fFe9tP4Uc`PXN>A+E@zJP@W= z?~HHbku(roC@G6Jwz~O3>{r$KO?b)K3H^1u>WnA=H?Np*#F7_c@+W)p?qsdmBw zv&I5vRSzHAsGE-xEpyG+*BafP_fMzGm&2ynfJa2=t2=diG0J+$k(|9rWpZ(xIDDUR zmEcay!-v^=I@{h`DH3IRF*0zfHB)M6Vx493Yk$bc@>9n+H>SZfeUXe5ItZ4j;3A#4 zeCESWWcgC-Me-4CM8vJvpL3m-lx+cHE1|SfKG(ZBrh6_SIpmfc3n}GKY4Re5wDR@i zuOcb7;xb?GU6ghqsiCEB(lNIfE$$d=SFsE#4Q|TLxZ}5Jxu0~>Yd!g;?}BT>SxbW! z_V#)m8FzmAuB}^bG;?hpC!muFyR%c4$|XzhCX5A9&1UrleGsHhBB*w@vjo zA94~Y`s20(a95!U>eq1I@Z%|{%@vQ?&=#v=Z2F5yITqhjY!Y&A{@Ik;5y!>Q|MntF zP^k8hIgN(iwF@LS<^#Fl*0msu~6 z$Lh%S@!sGK@p)5`Xl!qXhZI8gzB}ALtH_y}XQY zz8t&Wv8Jh^#X0{bVfa(qwYX{cYsnBCajO>SWZHBZbEkE&JELFtfFvg zO@BvW3j_4 zi?FqszPNZd(`aUga$s6SGOHS9CM}pj;so@&XpO#p*wT^4yxynv8P;2K5k&qQ82U^Y zBxHx9U9^{0{qvKGkQu@7prC>4TMD$CC%n3WQvti{Qn z*DgC4J4VSQC(RV%r-K`jF6nQWReXk*sW{0oIPJX@&=O2ORCGu2`<;b87$Qw}mF$pZ zKSBG~eiE2OJ{U{4d_k=cL(n*w=)e^X^rg}nU)%@c|)Ml<6fN;>A8$` zl8^tExqPijsu$RtsgbNE9JBP&GQOfY7BZTZrc}P}D}t5k#EeG5Jrs&lf3ZTx{Z-+` zhRS^tOoE%0?a_80^@6j}X_~O);K_k~Oi&p^@)bl7O_HM8GR4Q&`7s3RxzoS5cLHUL zxG*brTyw~qw#lUTBN=g_7ymgji{w4HE984JK%j~h2r)kNVQf%CHdnNF?BH|eKn{B8SS(D;syf->_BL|Um>RX)iCiz z8?rwZREpJL5m_Pr*ttj&=aE56MP6f?9sK7{;2VrS6K;|RdO*d#MBT*H5p=l}y zu^4Ip$nqNz+GW_wCbpn0Q)jcEiB-lhumD zIBC2hM+)zx&@4lghV=49#3)dz`bfc?K`>pgEy-EJa0lj*B^m(8KpY%ENm2y$V9o)O(-GlI3pz8MBM_)Q&3#dPD= z8=sdpb62Wj(>D?uVnNO6F;H?VB0@)D;w8ap%PE$u77Q6Q7y&{Y30P*y#~yb{riO4o zCe&@9oc!tV3V8S-+#B=}BO0}e=BPDbj)&=AN&b#dC%g7V1 z3Z=eM<4e#KB(wAeGxT97M$U;q1Skbw^KEu0>ENi%>h>Vpve}xvLme zi`PNG8$)&`()^N31d5mi;V!aJ@#ecC@~^SLcUj0Rx>i*4!)Z( z+$tQ4zhuhrNV~&9&=Wb3AmkOILJIiyHK9}hOht_4m%2Te9ub%=*re(p>T9y@9;84m zv*m4UI*qW`aMWn?M5K5rJXFpdbO=3(Fs2~75(*p`2lQMRXsXC@(^9Uu_F*KC6Gun+ z<=>o$uP&`;$-_oW0ZPOpyW-j!`KrX3P*V^{WMk0ijaz)ZK!bQ3&{jPS`LIX28j=Pn zLZKP+6N(_&^n|X_eSs@yofcitN%wt3QOZcjo9WPGiIlBvk+r1%)OoT-oQK%uiQ)1zg77E`}%;Wi0 zakfy!#8ROT+?o2nP;ShIV48)tpq-H=0D;IyB1|Tv;b9wKsJeNt9K6gRrUIgbnnJ&mF|gaJOg$Qml068O z2S7F`qv3#zPywA$h$^gND`v>o{_lo-Y&_ma1BwE!r`1!h(~q2mA80a77t8gf{+rY8 zsEmT%Aa|~;FFXu+ZI@d&;kBlgX@Y-zfWQZGrMz=RhU}&|dpzF99ls5JpErAZs2~n$ELg)2z%UD=VrDK@D#L8Lhn`>QcRzj&0gx`(p zx4dX(_9arUmxp`4%PpBLx0tRm%!>uqHrxKpiAwsqZ-=^E$D!b6SJcV2uz0VLOTPp zB2bt79eDhsGTR*|GbcjAChsW}0i}Wag$X(xoKt-2_$v7K!*8zDIU`N@pXM5`{}u%` z3g~O-63}(sSm}!|II|#hNn-tv@6}7~`?-1=WBlsAn!thcd#&3ld%ap|8J6+2Zjgd461K zI~DKagZpsLK;`MM%zyp28q;vS-6slUIV8_Hm7zD=7+iIv$GSG(W+Lu*QxUns51KNH zswD+7a`HR&t_CzAEox$p>rx*%N8y3ud&ir*R49nasN8q16UfkWBdm1xf~R(C#E;0d!bqch(hPrq4vy8%V}OY|&k&PJ ze0Ndb`LoPDwAiGW=l=p;N4<#+*fbf)BGu`(eYy({61~>0Mn${_*q9}}AsUFpz&Pgf zJ%P>^PlT)6bbmS85{muynFNKdO9?W$MsaLaOzqizA=7p5&Wq-h6zK`r1nqkKt2XLI zupF`Uvlz_RQlLx@dA1xa9ZB+$Jh{!#<83-JjRM<7ZQ*;p^h7xX3>4mWSq>d91uW5% zrYs&JRbS_;zNSCP8==Uh%WN36CxzZgjqAk+8L3`#w#^j($X(&)Y@o93_<2p4^(q^+ zVDnUL_lxnL*>2GeyFuLu7$g8RAaPpS1pg4mT|ZXGs=d&Krc1(w0KV~g&6?=$DMu$= zL9-MD%Vk4kI5{I+uuPMZVn*SN%Y?0$yzk3ni_5!nts8q%_hhu1X5LdbMd%L5lbx?F(Gi?4yr##A zBC@N+yi=2q%NRhmfTqX%e7V(o9|cF_?Px}W7unotCaIkOK^TjQ0U9dlJE4O4-X%%- zXk_}+-ENlt<_|y5ISfg+FhiG)YLFzlZnfi%AVY49O9xx!b-pnM-A)^? zFztr>vDJqL#+)Vm+y&Mmd5v0!UxiakW^rMCQT9JoW1rK?www8@0ygYAYNYfu;?^+( z-VX^%g^SWguJ4uFF^JCO9@5)&-QI0UH%Xi{7`l<2ed0Zrs?u|umgV$&u_66gq3P4+ z!yI5BG@)p|fOgfS!>x4sxD;k9jSNS->naS?g`2RL!Ic#lA#rlyT)859tHKqDxfl5i zkP~hZ;reV60HKPCK)g_;uDtlJ7T2-Vr*)#+&J||Qi`Eth5bKlS!!1K+?G?9YD_57% z0$m>Mz4V2sClfkkTIbHUCWG`%zk=se?6fRTeV^)aP}|yoZI($*iCyCeHj;u#$N5SJ z#$~GIViIc8T8nrkT?Pn4B5QRf*|UP2DdH~GB=4;CoP)3hh=ih?pvRH+*kZ!@#bqkg zW_Ln=I!!Ri-eoA03JG`cH@1g9UY}t72AF*D_XnK6SbS74$qZr8G}1(tAxm|zzi?WB zkxEJy=#S;u!hyxE9Zo)q5{E_@4A`g%#qT2dffa@*hD47@U@7{|rY`iABJDhk zT7D;{3F$G@b`QSv4L66@$#3mDlOz{kQ&Zv;6?O(DgS&-Xh9q_vW^8NkxO6GLNZeu} z;sE3`l~QW=A}oHzHpWzVHok$2+e`obFWInlkUWh!*_%v7D1= zJyHlq&XC4`s09owCP)RWk+*@kWwOjBI`dJ}era}P_;DMC9bGd1#(Xl0hS8JjW~R8E zAisPb`xim{+OLDQDh$zw9T6Gc*s1Vzcv=|XhC0_BlS8JbQQC!LL3|F6_mSVM8(Fp< zyj9D=;BgoN1lvV(I9FOFz533O@036c;vhq6$M1fF)-FU|y;At4+WlI>xunj!FByCp z_G{uFwbykPs4m9IBJZLC6=sQLoTSF6O3Y!K}Zb)gUCk9juGvdve^#DYQS^EOW^_vN-me zY`F)&6ssW<|9apMmChSd$d&Sxy`c^W~&4%l`wA}(M3b%NZhhj zBHT5;!9_1mpG~3ixni?bG7x6nzim-Y!#1~qNT2OjgL{40Sc*r_8&_t=IA?vN6Mba& zJfk0ft<~XTRg}fgmmmx+<_O|ybv<9f*Y0V7zf@fZboAMC`TW5P zzlH=_-j2t{IZtC9+x>HtT>lQPvCmEq9dw34pIQUxF5yphpZabO?m?cRW?|1-N=_tS zOh&9FG0A0%x8(}MgD!vWN3AKYWz+W}ecs!`_%iu*ykiRT_)tk_0fp8-o%%LBP3zTKA{g}hZm!TLOK zJh5lJChDR@aBI`@L~ePE!|COvWt*R~qn~(DHN8mQ)u105srsp<+*^7W-VXMawH}iW zucpYG*4Z?saaZurBel%9Ukzc8UwhC=amsvQIM+09#svr~Z%CF{&HfY(H~Xi%N~{i!iUba{OG zC*2*rf!<~+y^}mJH|j7WQxWBq@Z~YkwaMwM(`0qZ2sM*tN`Kd72=; z)UKuX?|!KgC7aL7Xu;3g)nVGxAI|r1c`ap)AwA0;GwQH{BRxy)%Y#_YGE^QnL=91O zrU5gZF>Yi6cnCPZ)mMiyt2l4+7v4}^MGdAiu|`@44m8t!TnVX#ZGz~^SWq`ek+9J{ zHm{(2<2s;q9>?6n&BgZ-s0c%uwds(y&iZ;{UyG0%P2N0HI|w#!Z&bD%J3OvjJh{CJ zjJxjix&<$wHa}gsRoW3~)m!9u(7#ty-FO__up{)aZa&<)sLsu1Njd-nnqKBfKT0qD z(qlFzfW(*e^Q0~ki@B?5p(2{QXWMfBu{NiC%WAN&WD$Ipqq0OqXHk&cio@&)@D6x8!iTMl@18! zNs6}p?9~78Zhn94d}VgnLb`mHdrEj?h#UI5d3?3w6HQ z9jiLBzV9ZP*LOSILlVGa<;MmqPxF4=PlmXB4eZ>2e59H&>W)K_hAmJCFleE0!WAfq z1-)@@4-4#?&jv5!@9s-X9_$>h82bC+5I@KZZbiMz(hj$LU_iT91*>v}zJ+Y`q_l7w z$)*Yuwx_NR+iy4aRCK1Uj=f>y5=5*yz2&YaX}(6D;btc<VZ*6b0Y z@S!S4pwBZY2*@&x{rh)t*8QhNH;v&t6UZ^doAt*H9%>&(YM~3WBu|7^hDM6Gc%{M3 zf~D_uM)lnt9OU|&F-<-Aq}C38WFk>EI*jo3XL1AqXnbv`_17=M)N_RqNtoI`+Q>UY zD$xS7G6`RmZUWnpI|@~EZ50-e+Vu;5R)Nm*-S^4ZxTGO^$j!9_IR+i>Y}SV{IuPFi z&MHjpRwIHy!M~z^RrhBiIq(jiO7;Snz0QM1cyVXRW(Txhd@?X_b(m9+;JfPb&A}&* zdlWyI#jeLH#ok-(=0k4tvWa$%6>~W)jqzxRRqmIYO3710ye{K)-|L#l*_2zp<(n-X zm*C5az?l)hF~-ev#DN-~+51Re7tp#AUR#sXL+*!9V`}I7wO3t#^5wZR?>7{oO@dn! z1j>XT-^Y{Kd-G^EWev+UhXo0iW@!gcE#KFm{NC&YF?=q?o1#of$3ZyPuj2iesm!pg z)Y;i6W`0(+({(>GTX1jFN$~!VT^-GKD>D?$g@Ro}_hls(qgRugyE^`ATZ8PsYGyLV zU}Vj~%Os09kKCNgih3v2|6ParjdWAjc#!czim`F)dUB%(01`2y-Q?#dX#!@92{ z!`;^DQIsC)upr)5Dd((*QB@ISMLbYseBZcUC5JXQ;`9RGE=o}OGM#71DJ!}Un9(i~gEEBq|` zCni4M->|_|svL&6M$4>NP*jQRsl+nXmp&vcgAFzt|3zjaUXlKND8D=jqh41T;t-(_ zpILU)1|lxjNLr~U#7dfp=qPWftOg6__DXbs?7I9m~500E+#g4DvN-@c{+0!sMY zsiC#JF6*H5%Fm5Zme zFxSXscKj*cH|3!R5tooJZ;TUlowyKai91eY6aHMrd4wPd1s1nGf4FR2znq1L@;*$v zsFGag>yg*kI0w0^W%UURcIpaB3S4>+tkM^&iD45ZPT_m(MNG4Lsy1BWg#j^g0ZvlQ z;iy0agS>g)9L+uY>$1M{CHlo*k=i>q9O1e)_qwkdmAnPFEFLxBCIvbB^WZ5iV;->nyrm<8O?r^aE38qFToeX#eBmHRFf8R zQwFiZ73^*%*PH5`;`N{vYaLsrsO+YfEjQ}W#CM%%!*%u{-7Yy~bFzU&vN+XGZgild zP{9Q5RKedo`G!`tc+xBVsWPImU8JAOzp=cEWYreW@7G^xz@1L^;*&K(cmL5kWOL#p zrrq0p8S}HaWIX$Fbr#yw)8p8O=fF+|KMBG)GDN0YbEXP)S$M0Ps5481f$L(mf@IoA z83_KuV90cAA^jr@-cE{Q_eK5aC@4Fae$7aymu_i@UW}WB@Mx5BM_#y=`gLSbV@gdb zzsN`j(+Db3vRiayq~Wvtp}c++EhGq_qLhB54etl7TXyy>8N5QHy1|K>hqqzJmjjwi zsMEt=6qC=GW68yL!DDABc^>quK#mL7V~pZ(sqy%E725*_dQS^0?$5@!i;~D5hH*L) z6HgV-aR&g8l*p1|NLZ+b(-qbI3dsumRX-Dtzc0ayeFT=1pa+2pJV8pCf4}w&YMt#VSI^CL3IdPc-M@U%qgeWjb59g)!kaxow z7En-$l+=A3_vI^f4x8?7AF&>{rl(I0&V3R)qxwA|+^)cx#lSC6a# z%fSI>lR{==sq}aLY8cd)AU?st$vRptMxgJFYsJ(^*3AW3VXn+69rA1qBB=Z3ruc*S zn!x9_$+!Bh&D~lF@qLHhk@j0Fcy0G#^W(8*k5OaY?V{D%3HAL5WW0n?jpSX6v8IBv} zIi0y*5UW>0%-qe^b5k6>cc6OttRo_Y%kYmKccO>ZBjYqn)3>$j%UJ|q6GG>pK&|bC zURv6@i&sa@N=H@4{fVyQ#MPd^rknCm(P>VZBR3omLdrX`jelkt!;t>?N)~&tV1NX3dk| z?Qf)O#!Y`G_kQCzsr)$nfE$`8_^dbjul&c%$Oy2b&#=_6`()qA;=~F9{AALLbU6*0 zt$+V`b?oDSpquQW?S{sH0azy^JO6)>f>C-m+62e;$JEEiG8Gd*Tq%GSkl_K_oPKhcq6x6P;bwtA>79K(pME`ruWcvFj9xaMB{t#8EF zXj~-++*k0BwShwooIid&W-jxi1d=QGqVjER#C41AJ$@lny(I#M;J!j1fb0uP*Ekfa zCR_hXb~L6eAIC7XRam*`^5V$St7S%pUWo^(L?%a$?yZs7yU*e4B1tc+a5XXVSfZAA zn7AY!+nuPl$B9D?aaKEpNsPS?H(OL0{U&!jqU1S%`3oXq=k>K5$qW$r8SO0Gbq4u+y17(%-o0BtgQMA#94OH9e=b)o#8pongO_Q(1N@=_#G2!ApLJhf`_-{ z{a2gE{-BWPXqmDQ9(7o}qCqtGu&>6+%!3(5i8Lh{#;M!~+C~YKpj2(+6!yhsqa^yq zW#csdd+x1x@>uTeWY)gA(WrKOWdA--H(~2AUOU`x6)+sRYoI#0a z#(llYLN3+jUY2hXljDti=ZNPM!_%q#eH1& NpD6|P$RvHR{{vg5=tTek delta 7716 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 S@$P=UKLV(?dLgEE`2PTejEimn diff --git a/frontend/components/forms/fields/InputField/_styles.scss b/frontend/components/forms/fields/InputField/_styles.scss index b72379e5b9..f736dc7df0 100644 --- a/frontend/components/forms/fields/InputField/_styles.scss +++ b/frontend/components/forms/fields/InputField/_styles.scss @@ -4,7 +4,7 @@ border-radius: 2px; background-color: $white; border: solid 1px $accent-medium; - font-size: $base; + font-size: 16px; padding: $pad-xsmall $pad-base; color: $text-dark; font-family: 'Oxygen', sans-serif; diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsDropdown.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsDropdown.jsx index 5702f003f7..16c255b289 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsDropdown.jsx +++ b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsDropdown.jsx @@ -1,5 +1,6 @@ import React, { Component, PropTypes } from 'react'; import { isEqual, noop } from 'lodash'; +import classnames from 'classnames'; import Kolide from 'kolide'; import targetInterface from 'interfaces/target'; @@ -22,6 +23,7 @@ class SelectTargetsDropdown extends Component { super(props); this.state = { + isEmpty: false, isLoadingTargets: false, moreInfoTarget: null, query: '', @@ -57,8 +59,6 @@ class SelectTargetsDropdown extends Component { const currentMoreInfoTarget = this.state.moreInfoTarget || {}; if (isEqual(moreInfoTarget.display_text, currentMoreInfoTarget.display_text)) { - this.setState({ moreInfoTarget: null }); - return false; } @@ -75,13 +75,18 @@ class SelectTargetsDropdown extends Component { }); } - this.setState({ moreInfoTarget }); return false; }; } + onBackToResults = () => { + this.setState({ + moreInfoTarget: null, + }); + } + fetchTargets = (query, selectedTargets = this.props.selectedTargets) => { const { onFetchTargets } = this.props; @@ -93,6 +98,14 @@ class SelectTargetsDropdown extends Component { targets, } = response; + if (targets.length === 0) { + // We don't want the lib's default "No Results" so we fake it + targets.push({}); + this.setState({ isEmpty: true }); + } else { + this.setState({ isEmpty: false }); + } + onFetchTargets(query, response); this.setState({ isLoadingTargets: false, targets }); @@ -107,13 +120,19 @@ class SelectTargetsDropdown extends Component { } render () { - const { isLoadingTargets, moreInfoTarget, targets } = this.state; - const { fetchTargets, onInputClose, onTargetSelectMoreInfo } = this; + const { isEmpty, isLoadingTargets, moreInfoTarget, targets } = this.state; + const { fetchTargets, onBackToResults, onInputClose, onTargetSelectMoreInfo } = this; const { onSelect, selectedTargets } = this.props; - const menuRenderer = Menu(onTargetSelectMoreInfo, moreInfoTarget); + const menuRenderer = Menu(onTargetSelectMoreInfo, moreInfoTarget, onBackToResults); + + const inputClasses = classnames({ + 'show-preview': moreInfoTarget, + 'is-empty': isEmpty, + }); return ( diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/SelectTargetsMenu.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/SelectTargetsMenu.jsx index 84a2ea4882..952ac09efb 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/SelectTargetsMenu.jsx +++ b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/SelectTargetsMenu.jsx @@ -6,8 +6,9 @@ import targetInterface from 'interfaces/target'; import TargetDetails from '../TargetDetails'; import TargetOption from '../TargetOption'; +const baseClass = 'target-list'; -const SelectTargetsMenuWrapper = (onMoreInfoClick, moreInfoTarget) => { +const SelectTargetsMenuWrapper = (onMoreInfoClick, moreInfoTarget, handleBackToResults) => { const SelectTargetsMenu = ({ focusedOption, instancePrefix, @@ -21,9 +22,14 @@ const SelectTargetsMenuWrapper = (onMoreInfoClick, moreInfoTarget) => { onOptionRef, }) => { const Option = optionComponent; + const renderTargets = (targetType) => { const targets = filter(options, { target_type: targetType }); + if (targets.length === 0) { + return Unable to find any matching {targetType}.; + } + return targets.map((target, index) => { const { disabled: isDisabled } = target; const isSelected = includes(valueArray, target); @@ -61,14 +67,14 @@ const SelectTargetsMenuWrapper = (onMoreInfoClick, moreInfoTarget) => { }; return ( -
-
-
hosts
- {renderTargets('hosts')} -
labels
+
+
+

labels

{renderTargets('labels')} +

hosts

+ {renderTargets('hosts')}
- +
); }; diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss new file mode 100644 index 0000000000..2ac4dbed79 --- /dev/null +++ b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss @@ -0,0 +1,45 @@ +.target-list { + &__type { + background-color: $bg-medium; + line-height: $larger; + padding: 0 $base; + margin: 0; + text-transform: uppercase; + font-weight: $light; + font-size: $mini; + color: $text-dark; + letter-spacing: 0.5px; + } + + &__options { + width: 57%; + float: left; + overflow-y: auto; + box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.15); + min-height: 500px; + position: relative; + z-index: 2; + background-color: $bg-light; + } + + &__spotlight { + width: 43%; + float: right; + overflow-y: auto; + background-color: $white; + min-height: 500px; + position: relative; + z-index: 1; + } + + &__not-found { + font-size: $small; + font-weight: $bold; + line-height: 2.64; + text-align: left; + color: $text-dark; + text-transform: uppercase; + display: block; + padding: 0 $large; + } +} diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx index d705a11fc0..46fc4dbc4a 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx +++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx @@ -1,10 +1,9 @@ -import React, { Component } from 'react'; +import React, { Component, PropTypes } from 'react'; +import { noop } from 'lodash'; import AceEditor from 'react-ace'; import classnames from 'classnames'; import hostHelpers from 'components/hosts/HostDetails/helpers'; -import ShadowBox from 'components/ShadowBox'; -import ShadowBoxInput from 'components/forms/fields/ShadowBoxInput'; import targetInterface from 'interfaces/target'; const baseClass = 'target-details'; @@ -12,10 +11,28 @@ const baseClass = 'target-details'; class TargetDetails extends Component { static propTypes = { target: targetInterface, + className: PropTypes.string, + handleBackToResults: PropTypes.func, + }; + + static defaultProps = { + handleBackToResults: noop, + }; + + onlineHosts = (labelBaseClass, online) => { + if (online > 0) { + return ( + ({online}% ONLINE) + ); + } + + return false; }; renderHost = () => { + const { className, handleBackToResults, target } = this.props; const { + display_text: displayText, ip, mac, memory, @@ -23,7 +40,7 @@ class TargetDetails extends Component { osVersion, platform, status, - } = this.props.target; + } = target; const hostBaseClass = 'host-target'; const isOnline = status === 'online'; const isOffline = status === 'offline'; @@ -34,63 +51,104 @@ class TargetDetails extends Component { ); return ( -
-

{status}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
IP Address{ip}
MAC Address{mac}
Platform - - {platform} -
Operating System{osVersion}
Osquery Version{osqueryVersion}
Memory{hostHelpers.humanMemory(memory)}
- +
+ + +

+ + {displayText} +

+

+ {isOnline && } + {isOffline && } + {status} +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
IP Address{ip}
MAC Address{mac}
Platform + + {platform} +
Operating System{osVersion}
Osquery Version{osqueryVersion}
Memory{hostHelpers.humanMemory(memory)}
-
- +

+ Labels -

+

+
    +
  • Engineering
    • +
  • DevOps
    • +
  • ElCapDev
    • +
  • Workstation
    • +
); } renderLabel = () => { - const { hosts, query } = this.props.target; + const { onlineHosts } = this; + const { handleBackToResults, className, target } = this.props; + const { + count, + description, + display_text: displayText, + online, + query, + } = target; const labelBaseClass = 'label-target'; return ( -
-
+
+ + +

+ + {displayText} +

+ +

+ {count}HOSTS + { onlineHosts(labelBaseClass, online) } +

+ +

{description || 'No Description'}

+ +
-
- -
- {hosts.length} HOSTS -
-
- - - - - - - - - - - - - {hosts.map((host) => { - return ( - - - - - - - - ); - })} - -
HostnameStatusPlatformLocationMAC
{host.hostname}{host.status}{host.ip}{host.mac}
-
); } diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/_styles.scss new file mode 100644 index 0000000000..109a0be625 --- /dev/null +++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/_styles.scss @@ -0,0 +1,181 @@ +.host-target, +.label-target { + padding: $pad-large; + + &__back { + color: $text-dark; + font-size: $xsmall; + display: none; + + @include breakpoint(tablet) { + display: inline-block; + position: absolute; + top: 10px; + left: 10px; + padding: 10px; + + &:active { + top: 10px; + } + } + } + + @include breakpoint(tablet) { + padding-top: $pad-most; + } +} + +.host-target { + &__display-text { + font-size: $medium; + font-weight: $bold; + letter-spacing: 0.6px; + color: $text-ultradark; + margin: 0; + } + + &__icon { + color: $accent-text; + margin-right: $pad-small; + width: 21px; + + &--online { + color: $success; + } + + &--offline { + color: $alert; + } + } + + &__status { + margin: $pad-xsmall 0; + font-size: $small; + font-weight: $bold; + letter-spacing: 1.3px; + text-transform: uppercase; + + &--is-online { + color: $success; + } + + &--is-offline { + color: $alert; + } + } + + &__labels-wrapper { + position: absolute; + bottom: $pad-large; + } + + &__labels-header { + font-size: $small; + font-weight: $bold; + letter-spacing: 0.9px; + color: $text-dark; + text-transform: uppercase; + margin: 0; + } + + &__labels-list { + font-size: $small; + font-weight: $normal; + line-height: 1.85; + letter-spacing: 0.5px; + color: $text-medium; + list-style: none; + margin: 0; + padding: 0; + + li { + display: inline-block; + + &::after { + content: ','; + margin-right: 3px; + } + + &:last-child { + &::after { + content: ''; + margin: 0; + } + } + } + } + + &__platform-text { + text-transform: capitalize; + } + + &__mac-address { + text-transform: uppercase; + } +} + +.label-target { + &__display-text { + font-size: $medium; + font-weight: $bold; + letter-spacing: 0.6px; + color: $text-ultradark; + margin: 0; + } + + &__icon { + color: $accent-text; + margin-right: $pad-small; + width: 21px; + } + + &__hosts { + margin: $pad-xsmall 0; + letter-spacing: 0.4px; + font-size: $small; + font-weight: $normal; + } + + &__hosts-count { + font-weight: $bold; + color: $text-dark; + + strong { + min-width: 21px; + text-align: center; + font-weight: $bold; + display: inline-block; + margin-right: $pad-small; + } + } + + &__hosts-online { + color: $success; + } + + &__description { + font-size: $pad-medium; + font-weight: $normal; + line-height: 1.71; + color: $text-dark; + margin: 0 0 $pad-small; + } +} + +.target-details { + &__table { + border-collapse: collapse; + border-spacing: 0; + text-align: left; + font-size: $small; + width: 100%; + margin-bottom: $pad-medium; + + th { + font-weight: $bold; + line-height: 2.3; + color: $text-dark; + padding-right: $pad-half; + } + } +} diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx index c5da62e29d..f6d1dd5005 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx +++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx @@ -29,7 +29,12 @@ class TargetOption extends Component { const { count, ip, target_type: targetType } = target; if (targetType === 'hosts') { - return {ip}; + return ( + + • + {ip} + + ); } return {count} hosts; @@ -57,7 +62,6 @@ class TargetOption extends Component { {targetType === 'hosts' && } {targetType === 'labels' && } {displayText} - • {renderTargetDetail()}
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss index 8f03982987..506b90a037 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss +++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss @@ -7,13 +7,41 @@ font-size: 15px; } + &__add-btn { + color: $accent-medium; + font-size: $medium; + padding: 0 $pad-half; + } + + &__wrapper { + @include display(flex); + @include align-items(stretch); + @include align-content(stretch); + cursor: default; + } + + &__target-content, + &__add-btn { + line-height: 34px; + font-size: $small; + font-weight: $normal; + text-transform: none; + } + + &__target-content { + @include flex-grow(1); + text-align: left; + padding-right: $pad-half; + } + &__count { background-color: $text-medium; border-radius: $border-radius; color: $white; - font-size: $small; + font-size: 13px; font-weight: bold; padding: 5px; + margin-left: $pad-half; } &__delimeter { @@ -24,25 +52,24 @@ &__icon { color: $text-medium; - font-size: $base; - margin: 0 0 0 $pad-base; + font-size: $small; } &__ip { - color: $link; + color: $text-dark; font-size: $small; } &__label-host { color: $link; font-size: $base; - margin-left: $pad-xsmall; + margin-left: $pad-half; } &__label-label { color: $text-medium; - font-size: $base; - margin-left: $pad-xsmall; + font-size: 14px; + margin-left: $pad-half; .all-hosts { font-weight: $bold; @@ -65,8 +92,4 @@ &__target-modal { width: 1000px; } - - &__wrapper { - cursor: default; - } } diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss index 0e5713dbd5..89b8bc5199 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss +++ b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss @@ -1,26 +1,45 @@ .target-select { &.Select { .Select-control { + @include transition(border 150ms ease-in-out, box-shadow 150ms ease-in-out); height: 48px; } + .Select-arrow { + border-width: 8px 8px 2.5px; + } + .Select-input { height: 46px; + margin: 0 0 0 $pad-base; > input { line-height: 30px; padding: 8px 0; + color: $text-ultradark; + font-size: 16px; } } .Select-placeholder { line-height: 46px; + font-size: 16px; + padding: 0 $pad-base; + } + + .Select-arrow-zone { + padding-right: 19px; } &.Select--multi { .Select-option { + padding: 0; + background-color: $bg-light; + &.is-disabled { &.is-focused { + background-color: $brand-light; + .target-option__label-label, .target-option__target-icon, .target-option__delimeter, @@ -29,13 +48,163 @@ .target-option__icon { color: $white; } + + .target-option__add-btn { + color: $brand-ultralight; + } + + .target-option__count { + background-color: $white; + color: $brand; + } } } + + &:last-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } } .Select-value { line-height: 1.9; } } + + &.is-focused { + .Select-control { + border: 1px solid $accent-medium; + border-bottom-color: $brand; + box-shadow: inset 0 0 8px 0 rgba($black, 0.1); + } + } + } + + .Select-menu-outer { + max-height: 500px; + height: 500px; + overflow: hidden; + box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.15); + + .Select-menu { + height: 498px; + max-height: 498px; + overflow: hidden; + position: relative; + + &::after { + @extend %kolidecon; + content: '\f03c'; + font-size: 150px; + position: absolute; + left: 57%; + top: 50%; + margin-top: -75px; + opacity: 0.25; + width: 43%; + text-align: center; + } + } + + .target-list { + height: 100%; + } + } + + .Select-value { + border-radius: 2px; + background-color: $white; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 0 0 $accent-dark; + border: solid 1px $accent-dark; + + .Select-value-icon { + border: 0; + float: right; + visibility: hidden; + position: relative; + padding: 0 $pad-medium; + line-height: 34px; + + &::after { + @extend %kolidecon; + @include transition(color 150ms ease-in-out); + @include transform(translate(-50%, -50%)); + content: '\f036'; + position: absolute; + top: 50%; + left: 50%; + visibility: visible; + font-size: 20px; + color: $accent-dark; + } + + &:hover { + &::after { + color: $accent-text; + } + } + } + + .Select-value-label { + font-size: 16px; + font-weight: $normal; + color: $text-dark; + padding: 0 0 0 $pad-medium; + line-height: 34px; + } + } + + .Select-clear { + font-size: 28px; + margin-right: 10px; + color: $text-dark; + + &:hover { + color: $alert; + } + } + + .Select-loading-zone { + padding-right: 10px; + } + + &.is-empty { + .Select-menu-outer { + .Select-menu { + &::after { + content: '\f049'; + font-size: 180px; + margin-top: -90px; + color: $accent-medium; + } + } + } + } + + @include breakpoint(tablet) { + .Select-menu-outer { + .Select-menu { + min-width: 665px; + + &::after { + display: none; + } + } + } + + &.show-preview { + .Select-menu-outer { + .Select-menu { + left: auto; + right: 0; + } + } + + .Select-menu { + left: 0; + right: auto; + position: absolute; + } + } } } diff --git a/frontend/components/queries/QueryComposer/QueryComposer.jsx b/frontend/components/queries/QueryComposer/QueryComposer.jsx index f0f1326aa2..7052a95465 100644 --- a/frontend/components/queries/QueryComposer/QueryComposer.jsx +++ b/frontend/components/queries/QueryComposer/QueryComposer.jsx @@ -91,9 +91,9 @@ class QueryComposer extends Component { return (
-

+

Select Targets - {selectedTargetsCount} unique hosts + {selectedTargetsCount} unique {selectedTargetsCount === 1 ? 'host' : 'hosts' }

+

New Query