Show Cylc object ID, type and status at top of mutations menu

CHANGES.md

@@ -22,6 +22,9 @@ Convert to use the new Cylc "Universal Identifier".
 [#873](https://github.com/cylc/cylc-ui/pull/873) - Header now displays hostname
 rather than 'development'.
 
+[#891](https://github.com/cylc/cylc-ui/pull/891) - Clicking on cycles, tasks
+or jobs now shows the relevant ID and status.
+
 [#839](https://github.com/cylc/cylc-ui/pull/839) - Appearance improvements.
 
 -------------------------------------------------------------------------------

src/components/cylc/cylcObject/Menu.vue

@@ -20,63 +20,73 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- dropdown menu -->
     <v-menu
       offset-y
-      class="c-mutation-menu"
+      content-class="c-mutation-menu"
       v-model="showMenu"
       :position-x="x"
       :position-y="y"
-      v-on:show-mutations-menu="showMutationsMenu"
+      @show-mutations-menu="showMutationsMenu"
       :disabled="!interactive"
       @input="closeMenu"
+      dark
     >
-      <v-list
-        dark
-        class="c-mutation-menu-list"
-      >
-        <v-list-item
-          v-for="[mutation, requiresInfo, authorised] in displayMutations"
-          :key="mutation.name"
-          :disabled=!authorised
-          @click.stop="enact(mutation, requiresInfo)"
-          class="c-mutation"
+      <v-card>
+        <v-card-title class="text-h6">
+          {{ id }}
+        </v-card-title>
+        <v-card-subtitle>
+          {{ typeAndStatusText }}
+        </v-card-subtitle>
+        <v-divider v-if="displayMutations.length"></v-divider>
+        <v-list
+          v-if="displayMutations.length"
+          class="c-mutation-menu-list"
         >
-          <v-list-item-avatar>
-            <v-icon :disabled=!authorised large>{{ mutation._icon }}</v-icon>
-          </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title v-html="mutation._title" />
-            <!--
-            don't use v-list-item-description here, vuetify will standardise
-            line heights and cuts off text that overspills this way we can
-            have the required number of lines of text.
-            -->
-            <span class="c-description">{{ mutation._shortDescription }}</span>
-          </v-list-item-content>
-          <v-list-item-action>
-            <v-icon
-             :disabled=!authorised
-             medium
-             class="float-right"
-             @click.stop="openDialog(mutation)"
-            >
-              {{ icons.pencil }}
-            </v-icon>
-          </v-list-item-action>
-        </v-list-item>
-        <v-list-item
-          v-if="canExpand"
-        >
-          <v-list-item-content
-            @click="expandCollapse"
-            @click.stop.prevent
+          <v-list-item
+            v-for="[mutation, requiresInfo, authorised] in displayMutations"
+            :key="mutation.name"
+            :disabled=!authorised
+            @click.stop="enact(mutation, requiresInfo)"
+            class="c-mutation"
+          >
+            <v-list-item-avatar>
+              <v-icon :disabled=!authorised large>{{ mutation._icon }}</v-icon>
+            </v-list-item-avatar>
+            <v-list-item-content>
+              <v-list-item-title v-html="mutation._title" />
+              <!--
+              don't use v-list-item-description here, vuetify will standardise
+              line heights and cuts off text that overspills this way we can
+              have the required number of lines of text.
+              -->
+              <span class="c-description">{{ mutation._shortDescription }}</span>
+            </v-list-item-content>
+            <v-list-item-action>
+              <v-icon
+                :disabled=!authorised
+                medium
+                class="float-right"
+                @click.stop="openDialog(mutation)"
+              >
+                {{ icons.pencil }}
+              </v-icon>
+            </v-list-item-action>
+          </v-list-item>
+          <v-list-item
+            v-if="canExpand"
           >
-            <v-btn id="less-more-button"
-              rounded
+            <v-list-item-content
+              @click="expandCollapse"
+              @click.stop.prevent
             >
-              {{ expanded ? 'See Less' : 'See More' }}
-            </v-btn>
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
+              <v-btn id="less-more-button"
+                rounded
+              >
+                {{ expanded ? 'See Less' : 'See More' }}
+              </v-btn>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-card>
     </v-menu>
     <v-dialog
       v-model="dialog"
@@ -127,10 +137,12 @@ export default {
       dialogMutation: null,
       expanded: false,
       id: '',
+      node: {},
       mutations: [],
       showMenu: false,
       tokens: [],
       types: [],
+      type: '',
       x: 0,
       y: 0,
       icons: {
@@ -185,6 +197,27 @@ export default {
         )
       }
       return this.authorizedMutations
+    },
+    typeAndStatusText () {
+      let ret = this.type
+      if (ret === 'task' && !('isHeld' in this.node)) {
+        // TODO: better way of checking if a 'task' is actually a family?
+        ret = 'family'
+      }
+      if (ret !== 'workflow') {
+        ret += ' - '
+        ret += this.node.state || 'state unknown'
+        if (this.node.isHeld) {
+          ret += ' (held)'
+        }
+        if (this.node.isQueued) {
+          ret += ' (queued)'
+        }
+        if (this.node.isRunahead) {
+          ret += ' (runahead)'
+        }
+      }
+      return ret
     }
   },
 
@@ -219,11 +252,12 @@ export default {
       this.showMenu = false
     },
 
-    showMutationsMenu ({ id, type, types, tokens, mutations, event }) {
+    showMutationsMenu ({ id, type, types, tokens, mutations, node, event }) {
       this.id = id
       this.type = type
       this.types = types
       this.tokens = tokens
+      this.node = node
       this.mutations = mutations.sort(
         (a, b) => a[0].name.localeCompare(b[0].name)
       )

src/components/cylc/cylcObject/plugin.js

@@ -29,7 +29,7 @@ function bind (el, binding, vnode) {
   const types = vnode.context.$workflowService.types
   // a closure to use the variables above in the event listener
   listener = function (e) {
-    const cylcId = binding.value
+    const cylcId = binding.value.id
     const tokens = tokenise(cylcId)
     const type = getType(tokens)
     const componentMutations = filterAssociations(
@@ -43,6 +43,7 @@ function bind (el, binding, vnode) {
       types: types,
       tokens: tokens,
       mutations: componentMutations,
+      node: binding.value,
       event: e
     })
   }

src/components/cylc/table/Table.vue

@@ -134,7 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div class="d-flex align-content-center flex-nowrap">
                     <div class="mr-1">
                       <Task
-                        v-cylc-object="item.id"
+                        v-cylc-object="item.node"
                         :status="item.node.state"
                         :isHeld="item.node.isHeld"
                         :isQueued="item.node.isQueued"
@@ -145,6 +145,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </div>
                     <div class="mr-1">
                       <Job
+                        v-cylc-object="item.node"
                         :status="item.node.state"
                         :previous-state="item.jobs.length > 1 ? item.jobs[1].state : ''"
                       />
@@ -179,8 +180,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <td>
                   <div class="d-flex align-content-center flex-nowrap">
                     <div class="mr-1">
-                      <job
-                        v-cylc-object="job.id"
+                      <Job
+                        v-cylc-object="job"
                         :key="`${job.id}-summary-${index}`"
                         :status="job.state"
                         style="margin-left: 1.3em;"

src/components/cylc/tree/TreeItem.vue

@@ -37,7 +37,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <slot name="cyclepoint" v-if="node.type === 'cyclepoint'">
         <div :class="getNodeDataClass()" @click="nodeClicked">
           <task
-            v-cylc-object="node.node.id"
+            v-cylc-object="node.node"
             :key="node.node.id"
             :status="node.node.state"
             :isHeld="node.node.isHeld"
@@ -50,7 +50,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <slot name="family-proxy" v-else-if="node.type === 'family-proxy'">
         <div :class="getNodeDataClass()" @click="nodeClicked">
           <task
-            v-cylc-object="node.node.id"
+            v-cylc-object="node.node"
             :key="node.node.id"
             :status="node.node.state"
             :isHeld="node.node.isHeld"
@@ -64,7 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div :class="getNodeDataClass()" @click="nodeClicked">
           <!-- Task summary -->
           <task
-            v-cylc-object="node.node.id"
+            v-cylc-object="node.node"
             :key="node.node.id"
             :status="node.node.state"
             :isHeld="node.node.isHeld"
@@ -77,7 +77,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- most recent job summary -->
             <job
               v-for="(job, index) in node.children.slice(0, 1)"
-              v-cylc-object="job.id"
+              v-cylc-object="job.node"
               :key="`${job.id}-summary-${index}`"
               :status="job.node.state"
               :previous-state="node.children.length > 1 ? node.children[1].node.state : ''"
@@ -90,7 +90,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <slot name="job" v-else-if="node.type === 'job'">
         <div :class="getNodeDataClass()" @click="nodeClicked">
           <job
-            v-cylc-object="node.node.id"
+            v-cylc-object="node.node"
             :key="node.node.id"
             :status="node.node.state"
           />

src/components/cylc/workflow/Toolbar.vue

@@ -47,7 +47,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-icon
         id="workflow-mutate-button"
         color="#5E5E5E"
-        v-cylc-object="currentWorkflow.id"
+        v-cylc-object="currentWorkflow"
       >
         {{ svgPaths.menu }}
       </v-icon>

src/components/graphqlFormGenerator/FormGenerator.vue

@@ -31,13 +31,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <v-expansion-panels
      accordion
      flat
-     v-bind="longDescription ? { hover: true } : { readonly: true }"
+     v-bind="extendedDescription ? { hover: true } : { readonly: true }"
     >
       <v-expansion-panel
         class="mutation-desc"
       >
         <v-expansion-panel-header
-          v-bind="longDescription ? {} : {
+          v-bind="extendedDescription ? {} : {
             expandIcon: null,
             style: {
               cursor: 'default'
@@ -50,10 +50,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </v-expansion-panel-header>
         <v-expansion-panel-content
-          v-if="longDescription"
+          v-if="extendedDescription"
         >
           <vue-markdown
-           :source="longDescription"
+           :source="extendedDescription"
            :breaks="false"
           />
         </v-expansion-panel-content>
@@ -108,7 +108,11 @@ import cloneDeep from 'lodash/cloneDeep'
 import { mdiHelpCircleOutline } from '@mdi/js'
 
 import FormInput from '@/components/graphqlFormGenerator/FormInput'
-import { getNullValue } from '@/utils/aotf'
+import {
+  getNullValue,
+  getMutationShortDesc,
+  getMutationExtendedDesc
+} from '@/utils/aotf'
 
 export default {
   name: 'form-generator',
@@ -163,11 +167,11 @@ export default {
 
     /* Return the first line of the description. */
     shortDescription () {
-      return this.mutation.description?.split('\n\n', 1)[0] || ''
+      return getMutationShortDesc(this.mutation.description)
     },
     /* Return the subsequent lines of the description */
-    longDescription () {
-      return this.mutation.description?.split('\n\n').slice(1).join('\n\n')
+    extendedDescription () {
+      return getMutationExtendedDesc(this.mutation.description)
     }
   },
 

src/styles/cylc/_aotf.scss → src/styles/cylc/_menu.scss

@@ -15,18 +15,27 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-.c-menu {
-  width: 25em;
-  max-height: 60vh;
-  overflow-y: scroll;
+.c-mutation-menu {
+  max-width: 600px;
 
-  .c-title {
-    font-size: 1rem;
+  .v-card__title {
+    font-size: 1.1rem !important;
+    line-height: 1.5rem;
   }
 
-  .c-description {
-    opacity: 0.7;
-    font-size: 0.9rem;
-    line-height: 1.35;
+  .v-card__title + .v-card__subtitle {
+    margin-top: -0.8rem;
+  }
+
+  .c-mutation {
+    .c-title {
+      font-size: 1rem;
+    }
+
+    .c-description {
+      opacity: 0.7;
+      font-size: 0.9rem;
+      line-height: 1.35;
+    }
   }
 }

src/styles/index.scss

@@ -19,7 +19,6 @@
 
 @import "cylc/variables";
 
-@import "cylc/aotf";
 @import "cylc/dashboard";
 @import "cylc/drawer";
 @import "cylc/gscan";
@@ -34,6 +33,7 @@
 @import "cylc/workflow";
 @import "cylc/tooltip";
 @import "cylc/mutation_form";
+@import "cylc/menu";
 
 .theme--light.v-application {
   background-color: transparent;