UI: Show per-host ISP info

#302

Author: stenya

ui/src/components/Component-Servers.vue

@@ -204,6 +204,7 @@
                 isFastestServerConfig === true ? '202px' : null
               "
               :server="server"
+              :isCanShowIspInfo="this.$store.state.settings.showHosts !== true || isFastestServerConfig === true"
               :isFavoriteServersView="isFavoritesView"
               :isCountryFirst="sortTypeStr === 'Country'"
               :onExpandClick="onServerExpandClick"
@@ -282,6 +283,17 @@
                     </div>
                   </div>
                 </div>
+                <!-- per-host ISP info -->
+                <div v-if="host.isp && showISPInfo" style="
+                  display: flex;
+                  font-size: 12px;
+                  color: grey;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  padding-left: 40px; margin-bottom: 4px; margin-top: -2px;">
+                  ISP: {{ host.isp }}
+                </div>
+                
               </button>
             </div>
           </div>
@@ -388,6 +400,9 @@ export default {
     isShowFavoriteDescriptionBlock: function () {
       return this.isFavoritesView === true && this.favorites.length == 0;
     },
+    showISPInfo: function () {
+      return this.$store.state.settings.showISPInfo;
+    },
     servers: function () {
       return this.$store.getters["vpnState/activeServers"];
     },

ui/src/components/blocks/block-selected-server.vue

@@ -23,6 +23,7 @@
               :isLargeText="true"
               :server="this.server"
               :serverHostName="this.serverHostName"
+              :isCanShowIspInfo="true"
               :isFastestServer="isFastestServer"
               :isRandomServer="isRandomServer"
               :isShowPingPicture="!(isFastestServer || isRandomServer)"

ui/src/components/controls/control-server-name.vue

@@ -82,6 +82,8 @@ export default {
     isFastestServer: Boolean,
     isRandomServer: Boolean,
 
+    isCanShowIspInfo: Boolean,
+    
     onExpandClick: Function,
     isExpanded: Boolean,
     SecondLineMaxWidth: String,
@@ -116,16 +118,40 @@ export default {
         return `${this.server.city}, ${this.server.country_code}`;
       }
     },
+    selectedHost: function () {
+      if (!this.serverHostName) return null;
+      const hostId  = this.serverHostName.split(".")[0];
+      if (this.server && this.server.hosts && hostId) {
+        return this.server.hosts.find((h) => h.hostname.startsWith(hostId+"."));
+      }
+      return null;
+    },
     selectedHostInfo: function () {
       if (!this.serverHostName) return "";
       return "(" + this.serverHostName.split(".")[0] + ")";
     },
     isp: function () {
-      if (!this.server || !this.server.isp) return "";
-      return "(ISP: " + this.server.isp + ")";
+      const selectedHost = this.selectedHost;
+      if (selectedHost && selectedHost.isp) 
+      {
+        // return ISP info for selected host
+        return "(ISP: " + selectedHost.isp + ")";
+      } 
+      else if (this.server && this.server.isp) 
+      {
+        // check if all hosts have the same ISP
+        // if yes, return ISP info for the server
+        const allSameISP = this.server.hosts.every(
+          (h) => h.isp === this.server.hosts[0].isp
+        );
+        if (allSameISP) 
+          return "(ISP: " + this.server.isp + ")";
+         else 
+          return "";       
+      }
     },
     showISPInfo: function () {
-      return this.$store.state.settings.showISPInfo;
+      return this.$store.state.settings.showISPInfo && this.isCanShowIspInfo === true;
     },
 
     multilineFirstLine: function () {