Add console button tooltip and document link when button disabled (backport #1111)

pkg/harvester/components/UpgradeInfo.vue

@@ -1,5 +1,6 @@
 <script>
 import { Banner } from '@components/Banner';
+import { DOC_LINKS } from '../config/doc-links';
 
 export default {
   name: 'HarvesterUpgradeInfo',
@@ -16,6 +17,10 @@ export default {
   computed: {
     releaseVersion() {
       return !!this.version ? `https://github.com/harvester/harvester/releases/tag/${ this.version }` : `https://github.com/harvester/harvester/releases`;
+    },
+
+    upgradeLink() {
+      return DOC_LINKS.UPGRADE_URL;
     }
   },
 };
@@ -26,15 +31,14 @@ export default {
     <Banner color="warning">
       <div>
         <strong>{{ t('harvester.upgradePage.upgradeInfo.warning') }}:</strong>
-        <p v-clean-html="t('harvester.upgradePage.upgradeInfo.doc', {}, true)" class="mb-5">
-        </p>
+        <p v-clean-html="t('harvester.upgradePage.upgradeInfo.doc', {url: upgradeLink}, true)" class="mb-5"></p>
 
         <p class="mb-5">
           {{ t('harvester.upgradePage.upgradeInfo.tip') }}
         </p>
 
         <p class="mb-5">
-          {{ t('harvester.upgradePage.upgradeInfo.moreNotes') }} <a :href="releaseVersion" target="_blank">{{ t('generic.moreInfo') }} </a>
+          {{ t('harvester.upgradePage.upgradeInfo.moreNotes') }} <a :href="releaseVersion" target="_blank">{{ t('generic.moreInfo') }}</a>
         </p>
       </div>
     </Banner>

pkg/harvester/components/settings/storage-network.vue

@@ -10,6 +10,7 @@ import Tip from '@shell/components/Tip';
 import { HCI } from '../../types';
 import { allHash } from '@shell/utils/promise';
 import { NODE } from '@shell/config/types';
+import { DOC_LINKS } from '../../config/doc-links';
 
 export default {
   name: 'HarvesterEditStorageNetwork',
@@ -85,6 +86,9 @@ export default {
   },
 
   computed: {
+    storageNetworkExampleLink() {
+      return DOC_LINKS.STORAGE_NETWORK_EXAMPLE;
+    },
     clusterNetworkOptions() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const clusterNetworks = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER_NETWORK) || [];
@@ -206,8 +210,8 @@ export default {
         :placeholder="t('harvester.setting.storageNetwork.range.placeholder')"
         label-key="harvester.setting.storageNetwork.range.label"
       />
-      <Tip class="mb-20" icon="icon icon-info" :text="t('harvester.setting.storageNetwork.tip')">
-        <t k="harvester.setting.storageNetwork.tip" :raw="true" />
+      <Tip class="mb-20" icon="icon icon-info">
+        <t k="harvester.setting.storageNetwork.tip" :raw="true" :url="storageNetworkExampleLink" />
       </Tip>
 
       <ArrayList

pkg/harvester/config/doc-links.js

@@ -0,0 +1,12 @@
+import { version } from '../package.json';
+import semver from 'semver';
+
+const docVersion = `v${ semver.major(version) }.${ semver.minor(version) }`;
+
+export const DOC_LINKS = {
+  CONSOLE_URL:             `https://docs.harvesterhci.io/${ docVersion }/host/`,
+  RANCHER_INTEGRATION_URL: `https://docs.harvesterhci.io/${ docVersion }/rancher/rancher-integration`,
+  STORAGE_NETWORK_EXAMPLE: `https://docs.harvesterhci.io/${ docVersion }/advanced/storagenetwork#configuration-example`,
+  KSMTUNED_MODE:           `https://docs.harvesterhci.io/${ docVersion }/host/#ksmtuned-mode`,
+  UPGRADE_URL:             `https://docs.harvesterhci.io/${ docVersion }/upgrade/index`
+};

pkg/harvester/edit/harvesterhci.io.host/HarvesterKsmtuned.vue

@@ -5,6 +5,7 @@ import UnitInput from '@shell/components/form/UnitInput';
 import { RadioGroup } from '@components/Form/Radio';
 import { Checkbox } from '@components/Form/Checkbox';
 import { HCI } from '../../types';
+import { DOC_LINKS } from '../../config/doc-links';
 
 export const ksmtunedMode = [{
   value: 'standard',
@@ -86,6 +87,10 @@ export default {
 
     showKsmt() {
       return this.spec.run === 'run';
+    },
+
+    ksmtunedLink() {
+      return DOC_LINKS.KSMTUNED_MODE;
     }
   },
 
@@ -135,7 +140,7 @@ export default {
       <Checkbox v-model="enableMergeAcrossNodes" :mode="mode" class="check mb-20" type="checkbox" :label="t('harvester.host.ksmtuned.enableMergeNodes')" />
 
       <h3>
-        <t k="harvester.host.ksmtuned.modeLink" :raw="true" />
+        <t k="harvester.host.ksmtuned.modeLink" :raw="true" :url="ksmtunedLink" />
       </h3>
       <RadioGroup
         v-model="spec.mode"

pkg/harvester/l10n/en-us.yaml

@@ -307,6 +307,7 @@ harvester:
     console: Console
     label: Hosts
     inconsistentIP: "Host IP is inconsistent, current IP: { currentIP }, initial IP: { initIP }"
+    noConsoleUrl: 'Console URL not specified'
     promote:
       none: ' '
       running: promoting
@@ -362,7 +363,7 @@ harvester:
       run: Run Strategy
       configure: Configure
       mode: Mode
-      modeLink: Mode <a href="https://docs.harvesterhci.io/v1.4/host/#ksmtuned-mode" target="_blank"><i class="icon icon-info" /></a>
+      modeLink: Mode <a href="{url}" target="_blank"><i class="icon icon-info" /></a>
       thresCoef: Threshold Coefficient
       enableMergeNodes: Enable Merge Across Nodes
       enable: Enable
@@ -762,7 +763,7 @@ harvester:
     dismissMessage: Dismiss it
     upgradeInfo:
       warning: WARNING
-      doc: Read the <a href="https://docs.harvesterhci.io/v1.4/upgrade/index" target="_blank">documentation</a> before starting the upgrade process. Ensure that you complete procedures that are relevant to your environment and the version you are upgrading to.
+      doc: Read the <a href="{url}" target="_blank">documentation</a> before starting the upgrade process. Ensure that you complete procedures that are relevant to your environment and the version you are upgrading to.
       tip: Unmet system requirements and incorrectly performed procedures may cause complete upgrade failure and other issues that require manual workarounds.
       moreNotes: For more details about the release notes, please visit - 
 
@@ -879,7 +880,7 @@ harvester:
         invalid: '"Exclude list" is invalid.'
         addIp: Add Exclude IP
       warning: 'WARNING: <br/> Any change to storage-network requires shutting down all VMs before applying this setting. <br/> Users have to ensure the Cluster Network is configured and VLAN Config will cover all nodes and ensure the network connectivity is working and expected in all nodes.'
-      tip: 'Specify an IP range in the IPv4 CIDR format. <code>Number of IPs Required = Number of Nodes * 4 + Number of Disks * 2 + Number of Images to Download/Upload </code>. For more information about storage network settings, see the <a href="https://docs.harvesterhci.io/v1.4/advanced/storagenetwork#configuration-example" target="_blank">documentation</a>.'
+      tip: 'Specify an IP range in the IPv4 CIDR format. <code>Number of IPs Required = Number of Nodes * 4 + Number of Disks * 2 + Number of Images to Download/Upload </code>. For more information about storage network settings, see the <a href="{url}" target="_blank">documentation</a>.'
     vmForceDeletionPolicy:
       period: Period
     autoRotateRKE2Certs:
@@ -950,7 +951,7 @@ harvester:
     internal:
       rancher:
         title: Access Embedded Rancher UI
-        titleDescription: You can only use the embedded Rancher UI for debugging and validation purposes. For more information about how Harvester integrates with Rancher, see the <a target="_blank" href="https://docs.harvesterhci.io/v1.4/rancher/rancher-integration" rel="noopener noreferrer nofollow">documentation</a>.
+        titleDescription: You can only use the embedded Rancher UI for debugging and validation purposes. For more information about how Harvester integrates with Rancher, see the <a target="_blank" href="{url}" rel="noopener noreferrer nofollow">documentation</a>.
       longhorn:
         title: Access Embedded Longhorn UI
         titleDescription: We only support to use the embedded Longhorn UI for debugging and validation purpose.

pkg/harvester/list/harvesterhci.io.host.vue

@@ -6,6 +6,7 @@ import {
   CAPI, METRIC, NODE, SCHEMA, LONGHORN, POD
 } from '@shell/config/types';
 import { HCI } from '../types';
+import { DOC_LINKS } from '../config/doc-links';
 import { allHash } from '@shell/utils/promise';
 import metricPoller from '@shell/mixins/metric-poller';
 
@@ -143,15 +144,20 @@ export default {
         name:  'console',
         label: ' ',
         align: 'right',
-        width: 65,
+        width: 80,
       });
 
       return out;
     },
 
     schema() {
       return schema;
+    },
+
+    consoleDocLink() {
+      return DOC_LINKS.CONSOLE_URL;
     }
+
   },
   methods: {
     async loadMetrics() {
@@ -169,7 +175,15 @@ export default {
 
     goto(row) {
       window.open(row.consoleUrl, '_blank');
-    }
+    },
+
+    consoleTooltip(row) {
+      if (!row.consoleUrl) {
+        return this.t('harvester.host.noConsoleUrl');
+      }
+
+      return '';
+    },
   },
 
   typeDisplay() {
@@ -199,10 +213,19 @@ export default {
       v-on="$listeners"
     >
       <template #cell:console="{row}">
-        <button type="button" class="btn btn-sm role-primary" :disabled="!row.consoleUrl" @click="goto(row)">
-          {{ t('harvester.host.console') }}
-        </button>
+        <div class="console-button">
+          <button v-clean-tooltip="consoleTooltip(row)" type="button" class="mr-5 btn btn-sm role-primary" :disabled="!row.consoleUrl" @click="goto(row)">
+            {{ t('harvester.host.console') }}
+          </button>
+          <a v-if="!row.consoleUrl" :href="consoleDocLink" target="_blank"><i class="icon icon-info" /></a>
+        </div>
       </template>
     </ResourceTable>
   </div>
 </template>
+
+<style lang="scss" scoped>
+  .console-button {
+    display: flex;
+  }
+</style>

pkg/harvester/package.json

@@ -1,7 +1,7 @@
 {
   "name": "harvester",
   "description": "Cloud-Native Hyperconverged Infrastructure",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "private": false,
   "rancher": true,
   "license": "Apache-2.0",

pkg/harvester/pages/c/_cluster/support/index.vue

@@ -7,6 +7,7 @@ import HarvesterSupportBundle from '../../../../dialog/HarvesterSupportBundle';
 import CommunityLinks from '@shell/components/CommunityLinks';
 import { SCHEMA } from '@shell/config/types';
 import { HCI } from '../../../../types';
+import { DOC_LINKS } from '../../../../config/doc-links';
 
 export default {
   layout: 'default',
@@ -73,13 +74,18 @@ export default {
       const { host, params } = this.internalPrefix;
 
       return `https://${ host }/k8s/clusters/${ params.cluster }/api/v1/namespaces/longhorn-system/services/http:longhorn-frontend:80/proxy/#/dashboard`;
-    }
+    },
+
+    rancherIntegrationLink() {
+      return DOC_LINKS.RANCHER_INTEGRATION_URL;
+    },
   },
 
   methods: {
     open() {
       this.$store.commit('harvester-common/toggleBundleModal', true);
-    }
+    },
+
   }
 };
 </script>
@@ -132,7 +138,7 @@ export default {
               </h2>
               <div>
                 <p class="warning">
-                  <t k="harvester.support.internal.rancher.titleDescription" :raw="true" />
+                  <t k="harvester.support.internal.rancher.titleDescription" :raw="true" :url="rancherIntegrationLink" />
                 </p>
               </div>
             </div>