Received: from malur.postgresql.org ([217.196.149.56]) by arkaria.postgresql.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_CBC_SHA384:256) (Exim 4.89) (envelope-from ) id 1etGMZ-0006qo-4a for pgadmin-hackers@arkaria.postgresql.org; Tue, 06 Mar 2018 17:26:55 +0000 Received: from localhost ([127.0.0.1] helo=malur.postgresql.org) by malur.postgresql.org with esmtp (Exim 4.89) (envelope-from ) id 1etGMX-00088I-Lo for pgadmin-hackers@arkaria.postgresql.org; Tue, 06 Mar 2018 17:26:53 +0000 Received: from makus.postgresql.org ([2001:4800:1501:1::229]) by malur.postgresql.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_CBC_SHA384:256) (Exim 4.89) (envelope-from ) id 1etGMX-000888-4W for pgadmin-hackers@lists.postgresql.org; Tue, 06 Mar 2018 17:26:53 +0000 Received: from mail-io0-x229.google.com ([2607:f8b0:4001:c06::229]) by makus.postgresql.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_CBC_SHA1:256) (Exim 4.89) (envelope-from ) id 1etGMS-0004lD-QZ for pgadmin-hackers@postgresql.org; Tue, 06 Mar 2018 17:26:51 +0000 Received: by mail-io0-x229.google.com with SMTP id h23so22874742iob.11 for ; Tue, 06 Mar 2018 09:26:48 -0800 (PST) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=pivotal-io.20150623.gappssmtp.com; s=20150623; h=mime-version:references:in-reply-to:from:date:message-id:subject:to :cc; bh=QJb8VlalJk8T4yoTm4L9SwexK+STllyN0P4g9afN01w=; b=KAXBkGU0Jwt80YXSbdTXGA52g5TXiR+CUsB6YrqHdYxyJzvF1Vxgka+JVxhlYEbnc9 wemMSg5cdlnpvodnMkXEqtVzKqfv5HSMejl3WSdrBdskYX4UpveFU+dUz4pvXI5TSZ8P RclqNli7cxxnu0tMu28QbZkmdqxjZAtodcR3bhVeL5qGAhYjoTcz6Q1wpxOFix2G9chX kP4kNpl54otKweiaU9O4SFDPNFxWUYy+Tg6hoOPbEVEgPB1wrd7bsA3FLJgjUHMZUMPv TvE+9ScJYFJruRXxf98bEi+l+M5NHYlv6JgoRbMCyWG4R9HSLlvgEWQNtnC1tpNJdsFL Jnjw== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20161025; h=x-gm-message-state:mime-version:references:in-reply-to:from:date :message-id:subject:to:cc; bh=QJb8VlalJk8T4yoTm4L9SwexK+STllyN0P4g9afN01w=; b=JSO9URontLHftc0owA/Zgkrk3vLmuxphXrR1T9dUrl10HaFAlfFMwRhyYiOn8jzoVz hRuL9IRdEzLnL/RPUVAe0DlftAhMM2EaBUjMdvGEHfBMiFICcx8nw305kgByOBGIenoY SBtRbNksZkjtGHWuu5cv0sO8Q/TH9FlVmZiFbCz52nwbMDRfkBAbPbPa14DDetPdfRfx or/U+LhzE6UhSTZ5iWyv3TppZpWIsvILiDJ24sH1k6AXG7GBNWn5WXJDHlzRQjBodxam r9v8F8mKgZsqP/7OwA/PmFZlbd3AH3SDqNHxP+CTgvxIReBPj0/RHCCraJ7odJ2z0z+u Jxjg== X-Gm-Message-State: APf1xPAg+sSRZ9whpa1RQG6EPTA57wYI4iCnb4UXPhbWswMuncNtM5C/ tgznMZS+jJAUwvYOE8Nc808oyJWv7UDSCiCypY6GUA== X-Google-Smtp-Source: AG47ELs7NvEL2JSBsISnZSIpWvmH2KTc/H2V89cadwv5/rNORN7vdRJp3KYOOlYmk8HHV8yL5IuFvn7N3eJT+WPWOA8= X-Received: by 10.107.38.80 with SMTP id m77mr22692930iom.69.1520357206457; Tue, 06 Mar 2018 09:26:46 -0800 (PST) MIME-Version: 1.0 References: In-Reply-To: From: Joao De Almeida Pereira Date: Tue, 06 Mar 2018 17:26:35 +0000 Message-ID: Subject: Re: [pgAdmin4][RM#3037] Allow user to disable Gravatar image To: Dave Page Cc: Murtuza Zabuawala , pgadmin-hackers Content-Type: multipart/alternative; boundary="001a1140c2843932070566c1bfa7" List-Id: List-Help: List-Subscribe: List-Post: List-Owner: List-Archive: Precedence: bulk --001a1140c2843932070566c1bfa7 Content-Type: text/plain; charset="UTF-8" Hello, I just sent a video that talks exactly about this, in the journey to have a more maintainable code and easier to navigate, we sometimes increase complexity for a period of time in order to get to the state that we want to be. In particular in this example I tried the following: 1. Demonstrate that we do not need templates to get things done 2. How to get the information we need to the place where it is needed, like moving the information of the server mode to the front end where decisions should be made Sometimes just because we can do a simple change, doesn't mean we should do it because it might bit us in the future. The PoC looks like a huge amount of code that is not even related to Gravatar, when we could just change a template file or 2, I hear that. But what I am talking about is a change of paradigm and Architecture where the Frontend is responsible for displaying the application and the Backend is only responsible for giving information that the Frontend Requires. Instead of the current mixed architecture where some things are done in the Frontend some things are done in the Backend a more predictable architecture would benefit the application and specially the developers. That is why I always insist in refactor code as much as possible to ensure that the code is readable and helps people follow it. This doesn't mean abstracting classes of functions to make to code more generic, it means as an example to split 1 functions of 500 lines into 10 functions of 50 lines each or even 50 functions of 10 lines each but that are readable and not a "goat trails" of ifs and elses that are very hard to read and follow. Thanks Joao On Tue, Mar 6, 2018 at 4:49 AM Dave Page wrote: > Hi > > On Tue, Mar 6, 2018 at 6:59 AM, Murtuza Zabuawala < > murtuza.zabuawala@enterprisedb.com> wrote: > >> Hi Joao, >> >> Your suggestion is good but in my own opinion it is overkill just to >> replace code {{ username| gravatar }} as rest of the syntax is pure >> HTML, This makes code much simpler and easy to understand. >> Apart from that we will be rendering 'index.html' template anyways and I >> don't see any extra overhead. >> > > For this particular issue, I'm inclined to agree. > > I do however, like the idea of caching preferences (no-brainer really, > assuming we ensure we update/invalidate the cache when needed), and using > promises for accessing them. > > >> >> I may be wrong, Let's wait for the input from other community members. >> >> Regards, >> Murtuza >> >> On Tue, Mar 6, 2018 at 1:17 AM, Joao De Almeida Pereira < >> jdealmeidapereira@pivotal.io> wrote: >> >>> Hello, >>> I understand that, but what do we win by using it? As you have noticed >>> by now I am not very fond of using templates for everything, and I believe >>> this is one of the things that we can skip templates. >>> We might even shift this to a frontend concern and if we want there are >>> node libraries to get gravatars. >>> >>> I was able to create a PoC as a sample of what I was talking about: >>> - Add gravatar library to package.json >>> - Created a Preferences cache. (js/preferences.js) >>> - So this was the concept I was talking about in a previous email we >>> talked about caching. >>> the getConfiguration and the getAllConfiguration are not great >>> names, but they return a Promise that is consumed in the load_gravatar. The >>> idea here is that we are caching the pgAdmin settings and when need need to >>> consume them, we wait for it to be available. >>> - load_gravatar is using the pattern to retrieve the configuration from >>> a possible cache and then apply the gravatar >>> >>> >>> Things that need to be revisited in the PoC: >>> - No tests, just some spiked code >>> - Did not retrieve the username from the backend, we need to create an >>> endpoint that give us this >>> - The url is hardcoded to get the configuration >>> - Maybe the Preferences is not the correct place to get server_mode >>> configuration not sure, what do you think? >>> >>> >>> Thanks >>> Joao >>> >>> On Mon, Mar 5, 2018 at 11:21 AM Murtuza Zabuawala < >>> murtuza.zabuawala@enterprisedb.com> wrote: >>> >>>> Hi Joao, >>>> >>>> We are using Flask-Gravatar >>>> module for this and it is designed to work with template only. >>>> >>>> -- >>>> Regards, >>>> Murtuza Zabuawala >>>> EnterpriseDB: http://www.enterprisedb.com >>>> The Enterprise PostgreSQL Company >>>> >>>> >>>> On Mon, Mar 5, 2018 at 8:57 PM, Joao De Almeida Pereira < >>>> jdealmeidapereira@pivotal.io> wrote: >>>> >>>>> Hi Murtuza, >>>>> >>>>> Why are we doing this using templates? Can this be done with a request >>>>> to the backend to get the image and then retrieve the Gravatar if it is >>>>> defined or return a static image if not? >>>>> >>>>> + >>>>> +{% if config.SERVER_MODE %} >>>>> window.onload = function(e){ >>>>> setTimeout(function() { >>>>> - var gravatarImg = '>>>> height="18" alt="Gravatar image for {{ username }}"> {{ username }} >>>> class="caret">'; >>>>> + var gravatarImg = {{ IMG.PREPARE_HTML()|safe }} >>>>> //$('#navbar-menu .navbar-right > li > a').html(gravatarImg); >>>>> var navbarRight = >>>>> document.getElementById("navbar-menu").getElementsByClassName("navbar-right")[0]; >>>>> if (navbarRight) { >>>>> >>>>> what if we have >>>>> >>>>> var gravatarImg = '>>>> height="18" alt="Gravatar image for {{ username }}"> {{ username }} >>>> class="caret">'; >>>>> >>>>> And then the endpoint >>>>> /user/{{username}}/gravatar >>>>> would be responsible for returning a Gravatar or not depending on the >>>>> configuration? >>>>> >>>>> >>>>> Thanks >>>>> Joao >>>>> >>>>> On Mon, Mar 5, 2018 at 3:13 AM Murtuza Zabuawala < >>>>> murtuza.zabuawala@enterprisedb.com> wrote: >>>>> >>>>>> Hi, >>>>>> >>>>>> PFA patch to disable Gravatar image in Server mode. >>>>>> >>>>>> Requirments & Issues: >>>>>> - For security reasons. >>>>>> - For systems which do not have internet access. >>>>>> - Hangs pgAdmin4 while loading the page if connection has no internet >>>>>> access (as described in the ticket) >>>>>> >>>>>> -- >>>>>> Regards, >>>>>> Murtuza Zabuawala >>>>>> EnterpriseDB: http://www.enterprisedb.com >>>>>> The Enterprise PostgreSQL Company >>>>>> >>>>>> >>>> >> > > > -- > Dave Page > Blog: http://pgsnake.blogspot.com > Twitter: @pgsnake > > EnterpriseDB UK: http://www.enterprisedb.com > The Enterprise PostgreSQL Company > --001a1140c2843932070566c1bfa7 Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable
Hello,

I just sent a video that talks e= xactly about this, in the journey to have a more maintainable code and easi= er to navigate, we sometimes increase complexity for a period of time in or= der to get to the state that we want to be.

In par= ticular in this example I tried the following:
1. Demonstrate tha= t we do not need templates to get things done
2. How to get the i= nformation we need to the place where it is needed, like moving the informa= tion of the server mode to the front end where decisions should be made

Sometimes just because we can do a simple change, doe= sn't mean we should do it because it might bit us in the future.
<= div>

The PoC looks like a huge amount of code = that is not even related to Gravatar, when we could just change a template = file or 2, I hear that. But what I am talking about is a change of paradigm= and Architecture where the Frontend is responsible for displaying the appl= ication and the Backend is only responsible for giving information that the= Frontend Requires. Instead of the current mixed architecture where some th= ings are done in the Frontend some things are done in the Backend a more pr= edictable architecture would benefit the application and specially the deve= lopers.

That is why I always insist in refactor co= de as much as possible to ensure that the code is readable and helps people= follow it. This doesn't mean abstracting classes of functions to make = to code more generic, it means as an example to split 1 functions of 500 li= nes into 10 functions of 50 lines each or even 50 functions of 10 lines eac= h but that are readable and not a "goat trails"=C2=A0of ifs and e= lses that are very hard to read and follow.

Thanks
Joao

On Tue, Mar 6, 2018 at 4:49 AM Dave Page <dpage@pgadmin.org> wrote:
Hi
<= br>
On Tue, Mar 6, 2018 at 6:59 AM,= Murtuza Zabuawala <murtuza.zabuawala@enterprisedb.com> wrote:
=

For this particular issue, I'm inclined to agree.
I do however, like the idea of caching preferences (no-brainer = really, assuming we ensure we update/invalidate the cache when needed), and= using promises for accessing them.
=C2=A0

I may be wrong, Let's wait for the= input from other community members.

Regards,=C2=A0
Murtuza

On Tue, Mar 6, 2018 at 1:17 AM, Joao De Alme= ida Pereira <jdealmeidapereira@pivotal.io> wrote:=
Hello,
I understand that, but what do we win by using it? As you have= noticed by now I am not very fond of using templates for everything, and I= believe this is one of the things that we can skip templates.=C2=A0
We= might even shift this to a frontend concern and if we want there are node = libraries to get gravatars.

I was able to create a= PoC as a sample of what I was talking about:
=C2=A0- Add gravata= r library to package.json
=C2=A0- Created a Preferences cache. (j= s/preferences.js)
=C2=A0 =C2=A0- So this was the concept I was ta= lking about in a previous email we talked about caching.
=C2=A0 = =C2=A0 =C2=A0 the getConfiguration and the getAllConfiguration are not grea= t names, but they return a Promise that is consumed in the load_gravatar. T= he idea here is that we are caching the pgAdmin settings and when need need= to consume them, we wait for it to be available.
=C2=A0- load_gr= avatar is using the pattern to retrieve the configuration from a possible c= ache and then apply the gravatar


Th= ings that need to be revisited in the PoC:
- No tests, just some = spiked code
- Did not retrieve the username from the backend, we = need to create an endpoint that give us this
- The url is hardcod= ed to get the configuration
- Maybe the Preferences is not the co= rrect place to get server_mode configuration not sure, what do you think?


Thanks
Joao

Hi Joao= ,
W= e are using Flask-Gravatar module for this and it is designed to work with = template only.

<= div dir=3D"ltr">
--
Regards,
Murtuza Zabuaw= ala
EnterpriseDB:=C2=A0http://www.enterprisedb.com
The Enterpr= ise PostgreSQL Company


On Mon, Mar= 5, 2018 at 8:57 PM, Joao De Almeida Pereira <jdealmeidapereir= a@pivotal.io> wrote:
Hi Murtuza,

Why are we doi= ng this using templates? Can this be done with a request to the backend to = get the image and then retrieve the Gravatar if it is defined or return a s= tatic image if not?

+
+{% if config= .SERVER_MODE %}
=C2=A0window.onload =3D function(e){
= =C2=A0 setTimeout(function() {
-=C2=A0 =C2=A0var gravatarImg =3D = '<img src=3D"{{ username | gravatar }}" width=3D"18&q= uot; height=3D"18" alt=3D"Gravatar image for {{ username }}&= quot;> {{ username }} <span class=3D"caret"></span>= ;';
+=C2=A0 =C2=A0var gravatarImg =3D {{ IMG.PREPARE_HTML()|s= afe }}
=C2=A0 =C2=A0 //$('#navbar-menu .navbar-right > li = > a').html(gravatarImg);
=C2=A0 =C2=A0 var navbarRight =3D= document.getElementById("navbar-menu").getElementsByClassName(&q= uot;navbar-right")[0];
=C2=A0 =C2=A0 if (navbarRight) {

what if we have=C2=A0

v= ar gravatarImg =3D '<img src=3D"/user/{{username}}/gravatar&quo= t; width=3D"18" height=3D"18" alt=3D"Gravatar imag= e for {{ username }}"> {{ username }} <span class=3D"caret&= quot;></span>';

And then the endp= oint
/user/{{username}}/gravatar=C2=A0
would be respons= ible for returning a Gravatar or not depending on the configuration?
<= div>

Thanks
Joao

On Mon, Mar 5, 2018 at 3:13 AM Murt= uza Zabuawala <murtuza.zabuawala@enterprisedb.com> wrote:
<= blockquote class=3D"gmail_quote" style=3D"margin:0px 0px 0px 0.8ex;border-l= eft:1px solid rgb(204,204,204);padding-left:1ex">
Hi,

PFA patch to disa= ble Gravatar image in Server mode.

Requirments & Issues:
- For security reas= ons.
- For systems which do not h= ave internet access.
- Hangs pgAdmin4 while loading the page if connec= tion has no internet access (as described in the ticket)

<= div dir=3D"ltr">
--
Regards,
Murtuza Zabuaw= ala
EnterpriseDB:=C2=A0http://www.enterprisedb.com
The Enterpr= ise PostgreSQL Company



=


--
Dave Page
Blog: = http://pgsnake.bl= ogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com<= br>The Enterprise PostgreSQL Company
--001a1140c2843932070566c1bfa7--