Skip to content

add info icon with hover details to workspace toolbar #2361

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
+38 −4
Open

add info icon with hover details to workspace toolbar #2361

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
10d51be
add owner@host to toolbar
dwsutherland Nov 13, 2025
3755b6c
move to info icon hover
dwsutherland Nov 20, 2025
1e17cea
changelog entry
dwsutherland Nov 20, 2025
7d94d7c
ronnie & misc
dwsutherland Nov 25, 2025
38ca379
reinstate toolbar cylc version on diff
dwsutherland Nov 26, 2025
6522cd6
address activator warnings
dwsutherland Nov 26, 2025
aeadf36
inject placement and tidy
dwsutherland Nov 27, 2025
8f02b5d
inject var test fix
dwsutherland Nov 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions changes.d/2361.feat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
An information icon containing workflow details (via hover over) has been added to the workspace toolbar.
38 changes: 34 additions & 4 deletions src/components/cylc/workspace/Toolbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</v-menu>
</v-btn>

<!-- workflow info icon -->
<v-tooltip v-if="isRunning" :activator="$event => $event.target.closest('span')">
<template v-slot:activator="{ props }">
<span v-bind="props">
<v-icon :icon="$options.icons.info"/>
</span>
</template>
<dl>
<dt><strong>Owner:</strong> {{ currentWorkflow.node.owner }}</dt>
<dt><strong>Host:</strong> {{ currentWorkflow.node.host }}</dt>
<dt><strong>Cylc version:</strong> {{ currentWorkflow.node.cylcVersion }}</dt>
</dl>
</v-tooltip>

<!-- workflow status message -->
<span class="status-msg text-body-2">
{{ statusAndVersion }}
{{ statusMessage }}
</span>

<!-- workflow version if different from UIS cylc-flow version -->
<span class="version-pop text-body-2">
{{ versionPopup }}
</span>

<v-spacer class="mx-0" />
Expand Down Expand Up @@ -221,6 +240,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</template>

<script>
import { inject } from 'vue'
import { mapState } from 'vuex'
import {
mdiCog,
Expand All @@ -233,6 +253,7 @@ import {
mdiAccount,
mdiChevronDown,
mdiArrowULeftTop,
mdiInformationOutline,
} from '@mdi/js'
import { startCase } from 'lodash'
import { until } from '@/utils/reactivity'
Expand Down Expand Up @@ -266,6 +287,8 @@ subscription Workflow ($workflowId: ID) {

fragment WorkflowData on Workflow {
id
host
owner
status
statusMsg
nEdgeDistance
Expand Down Expand Up @@ -373,9 +396,15 @@ export default {
this.currentWorkflow.node.status === WorkflowState.STOPPED.name
)
},
statusAndVersion () {
let ret = upperFirst(this.currentWorkflow.node.statusMsg || '')
if (this.currentWorkflow.node.cylcVersion) {
statusMessage () {
return upperFirst(this.currentWorkflow.node.statusMsg || '')
},
versionPopup () {
let ret = ''
if (
this.currentWorkflow.node.cylcVersion &&
this.currentWorkflow.node.cylcVersion !== inject('versionInfo').value?.['cylc-flow']
) {
ret += ` • Cylc ${this.currentWorkflow.node.cylcVersion}`
}
return ret
Expand Down Expand Up @@ -493,6 +522,7 @@ export default {
icons: {
add: mdiPlusBoxMultiple,
hold: mdiPause,
info: mdiInformationOutline,
list: mdiViewList,
menu: mdiMicrosoftXboxControllerMenu,
run: mdiPlay,
Expand Down