Merge pull request #20404 from dannon/it-panel-polish

[25.0] Fix minor IT panel/display issues

Author: mvdbeek

client/src/components/InteractiveTools/InteractiveTools.vue

@@ -125,22 +125,21 @@ onMounted(() => {
                     :name="row.item.name"
                     @click.prevent="openInteractiveTool(row.item.id)"
                     >{{ row.item.name }}
-                    <FontAwesomeIcon :icon="faExternalLinkAlt" />
                 </a>
-                <!-- Add a direct link option as well -->
                 <a
+                    v-if="row.item.target"
                     :id="createId('external-link', row.item.id)"
                     v-b-tooltip
                     class="ml-2"
                     title="Open in new tab"
                     :href="row.item.target"
                     target="_blank">
-                    <small>(new tab)</small>
+                    <FontAwesomeIcon :icon="faExternalLinkAlt" />
                 </a>
             </template>
             <template v-slot:cell(job_info)="row">
-                <label v-if="row.item.active"> running </label>
-                <label v-else> stopped </label>
+                <label v-if="row.item.active"> Running </label>
+                <label v-else> Starting </label>
             </template>
             <template v-slot:cell(created_time)="row">
                 <UtcDate :date="row.item.created_time" mode="elapsed" />

client/src/components/Panels/InteractiveToolsPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faStop, faTools } from "@fortawesome/free-solid-svg-icons";
+import { faExternalLinkAlt, faStop, faTools } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
@@ -88,12 +88,22 @@ function openInteractiveTool(toolId: string) {
                                 | Created <UtcDate :date="tool.created_time" mode="elapsed" />
                             </div>
                         </div>
-                        <button
-                            class="btn btn-sm btn-link text-danger"
-                            title="Stop this interactive tool"
-                            @click="stopInteractiveTool(tool.id, tool.name)">
-                            <FontAwesomeIcon :icon="faStop" />
-                        </button>
+                        <div class="d-flex align-items-center">
+                            <a
+                                v-if="tool.target"
+                                :href="tool.target"
+                                target="_blank"
+                                class="btn btn-sm btn-link text-muted me-1"
+                                title="Open in new tab">
+                                <FontAwesomeIcon :icon="faExternalLinkAlt" />
+                            </a>
+                            <button
+                                class="btn btn-sm btn-link text-danger"
+                                title="Stop this interactive tool"
+                                @click="stopInteractiveTool(tool.id, tool.name)">
+                                <FontAwesomeIcon :icon="faStop" />
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>