RSE-1002: Fix: Slowness clicking the job name (migrate job scm status badge and scm action buttons to vue)

functional-test/src/test/groovy/org/rundeck/tests/functional/selenium/pages/jobs/JobCreatePage.groovy

@@ -103,7 +103,7 @@ class JobCreatePage extends BasePage {
     void addSimpleCommandStep(String command, int number) {
         executeScript "window.location.hash = '#addnodestep'"
         stepLink 'exec-command', StepType.NODE click()
-        waitForElementToBeClickable adhocRemoteStringField
+        byAndWaitClickable adhocRemoteStringBy
         adhocRemoteStringField.click()
         waitForNumberOfElementsToBeOne floatBy
         adhocRemoteStringField.sendKeys command

rundeckapp/grails-app/controllers/rundeck/controllers/ScheduledExecutionController.groovy

@@ -240,8 +240,6 @@ class ScheduledExecutionController  extends ControllerBase{
     @GrailsCompileStatic
     def actionMenuFragment(){
         ScheduledExecution scheduledExecution = authorizingJob.resource
-        String project = scheduledExecution.project
-        AuthorizingProject authorizingProject = authorizingProject(project)
 
         def model=[
                 scheduledExecution  : scheduledExecution,
@@ -250,15 +248,6 @@ class ScheduledExecutionController  extends ControllerBase{
                 isScheduled         : scheduledExecutionService.isScheduled(scheduledExecution)
         ]
 
-        if (authorizingProject.isAuthorized(RundeckAccess.Project.APP_SCM_EXPORT)) {
-            def scmExportOptions = scheduledExecutionService.scmActionMenuOptions(project, authorizingProject.authContext, scheduledExecution) as LinkedHashMap<String, Object>
-            model << scmExportOptions
-        }
-        if (authorizingProject.isAuthorized(RundeckAccess.Project.APP_SCM_IMPORT)) {
-            def scmImportOptions = scheduledExecutionService.scmActionMenuOptions(project, authorizingProject.authContext, scheduledExecution) as LinkedHashMap<String, Object>
-            model << scmImportOptions
-        }
-
         render(template: '/scheduledExecution/jobActionButtonMenuContent', model: model)
     }
 
@@ -471,30 +460,6 @@ class ScheduledExecutionController  extends ControllerBase{
         if (params.opt && (params.opt instanceof Map)) {
             dataMap.selectedoptsmap = params.opt
         }
-        //add scm export status
-        def projectResource = rundeckAuthContextProcessor.authResourceForProject(params.project)
-        if (rundeckAuthContextProcessor.authorizeApplicationResourceAny(authContext,
-                                                             projectResource,
-                                                             [AuthConstants.ACTION_ADMIN, AuthConstants.ACTION_APP_ADMIN, AuthConstants.ACTION_EXPORT,
-                                                              AuthConstants.ACTION_SCM_EXPORT])) {
-            def scmExportActionsForShowDropdown = scheduledExecutionService.scmActionMenuOptions(
-                    scheduledExecution.project,
-                    authContext,
-                    scheduledExecution
-            )
-            dataMap << scmExportActionsForShowDropdown
-        }
-        if (rundeckAuthContextProcessor.authorizeApplicationResourceAny(authContext,
-                                                             projectResource,
-                                                             [AuthConstants.ACTION_ADMIN, AuthConstants.ACTION_APP_ADMIN, AuthConstants.ACTION_IMPORT,
-                                                              AuthConstants.ACTION_SCM_IMPORT])) {
-            def scmImportActionsForShowDropdown = scheduledExecutionService.scmActionMenuOptions(
-                    scheduledExecution.project,
-                    authContext,
-                    scheduledExecution
-            )
-            dataMap << scmImportActionsForShowDropdown
-        }
 
         withFormat{
             html{

rundeckapp/grails-app/views/menu/_jobslist.gsp

@@ -114,7 +114,7 @@
                                             <g:message code="actions" />
                                         <span class="caret"></span>
                                     </button>
-                                    <ul class="dropdown-menu" role="menu">
+                                    <ul id="action-menu-jobrow_${scheduledExecution.id}" class="dropdown-menu" role="menu">
                                         <li role="presentation" class="dropdown-header"><g:message code="loading.text" /></li>
                                     </ul>
                                 </div>

rundeckapp/grails-app/views/menu/jobs.gsp

@@ -17,6 +17,7 @@
 <%@ page import="org.rundeck.core.auth.AuthConstants;grails.util.Environment" %>
 <html>
 <head>
+    <asset:javascript src="static/pages/job/head/scm-action-buttons.js" asset-defer="true" />
     <g:set var="rkey" value="${g.rkey()}" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta name="layout" content="base"/>

rundeckapp/grails-app/views/scheduledExecution/_jobActionButtonMenuContent.gsp

@@ -15,6 +15,8 @@
   --}%
 
 <%@ page import="org.rundeck.core.auth.AuthConstants" %>
+<asset:javascript src="static/pages/job/head/scm-action-buttons.js" asset-defer="true" />
+
 <g:set var="authUpdate" value="${auth.jobAllowedTest(job: scheduledExecution, action: [AuthConstants.ACTION_UPDATE])}"/>
 <g:set var="authRead" value="${auth.jobAllowedTest(job: scheduledExecution, any: true, action: [AuthConstants.ACTION_READ])}"/>
 <g:set var="authDelete" value="${auth.jobAllowedTest(job: scheduledExecution, action: [AuthConstants.ACTION_DELETE])}"/>
@@ -195,119 +197,12 @@
     </li>
 </g:if>
 
-<g:if test="${scmExportEnabled && scmExportStatus?.get(scheduledExecution.extid)}">
-    %{renderedActions++}%
-    <g:if test="${authRead}">
-        <li class="divider"></li>
-    </g:if>
-
-    <li class="dropdown-header"><g:message code="scm.export.plugin" /></li>
-
-    <g:set var="jobstatus" value="${scmExportStatus?.get(scheduledExecution.extid)}"/>
-    <g:set var="exportStateClean" value="${jobstatus?.synchState?.toString()=='CLEAN'}"/>
-    <g:set var="exportStateCreate" value="${'CREATE_NEEDED'==jobstatus?.synchState?.toString()}"/>
-    <g:each in="${jobstatus?.actions}" var="action">
-        <g:if test="${action.id == '-'}">
-            <li class="divider"></li>
-        </g:if>
-        <g:else>
-            <li>
-                <g:render template="/scm/actionLink"
-                          model="[action:action,
-                                  integration:'export',
-                                  project:params.project,
-                                  linkparams:[id: scheduledExecution.extid]]"
-                />
-
-            </li>
-        </g:else>
-    </g:each>
-    <g:unless test="${exportStateCreate}">
-        <li><g:link controller="scm"
-                    params="[project: scheduledExecution.project,id:scheduledExecution.extid,integration: 'export']"
-                    action="diff"
-                    >
-            <g:render template="/scm/statusBadge"
-                      model="[exportStatus: jobstatus?.synchState?.toString(),
-                              importStatus: null,
-                              text  : '',
-                              notext: true,
-                              integration: 'export',
-                              icon:'glyphicon-eye-open',
-                              exportCommit  : jobstatus?.commit]"/>
-            <g:if test="${exportStateClean}">
-                <g:message code="scm.action.diff.clean.button.label" default="View Commit Info"/>
-            </g:if>
-            <g:else>
-                <g:message code="scm.action.diff.button.label" default="Diff Changes"/>
-            </g:else>
-        </g:link>
-        </li>
-    </g:unless>
-</g:if>
-
-<g:if test="${scmImportEnabled && scmImportStatus?.get(scheduledExecution.extid)}">
-    %{renderedActions++}%
+<div class="scm-section">
+    <div class="vue-ui-socket dropdown-menu ${dropdownClass?:''}" id="scmActionsButtons" style="width: 100%; margin-top: 0;">
+        <ui-socket section="job-head" location="job-action-button" socket-data="${enc(attr: [ jobUuid: scheduledExecution.uuid ].encodeAsJSON())}"></ui-socket>
+    </div>
+</div>
 
-
-    <g:set var="jobstatus" value="${scmImportStatus?.get(scheduledExecution.extid)}"/>
-    <g:set var="importStateClean" value="${jobstatus?.synchState?.toString()=='CLEAN'}"/>
-
-    <g:set var="importStateUnknown" value="${'UNKNOWN'==jobstatus?.synchState?.toString()}"/>
-        <g:if test="${authRead}">
-            <li class="divider"></li>
-        </g:if>
-        <li class="dropdown-header"><g:message code="scm.import.plugin" /></li>
-    <g:each in="${jobstatus?.actions}" var="action">
-        <g:if test="${action.id == '-'}">
-            <li class="divider"></li>
-        </g:if>
-        <g:else>
-            <li>
-                <g:render template="/scm/actionLink"
-                          model="[action:action,
-                                  integration:'import',
-                                  project:params.project,
-                                  linkparams:[id: scheduledExecution.extid]]"
-                />
-
-            </li>
-        </g:else>
-    </g:each>
-    <g:unless test="${importStateUnknown}">
-    <li>
-        <g:link controller="scm"
-                params="[project: scheduledExecution.project,id:scheduledExecution.extid,integration: 'import']"
-                action="diff">
-            <g:render template="/scm/statusBadge"
-                  model="[importStatus: jobstatus?.synchState?.toString(),
-                          text  : '',
-                          notext: true,
-                          integration: 'import',
-                          icon:'glyphicon-eye-open',
-                          exportCommit  : jobstatus?.commit]"/>
-            <g:if test="${importStateClean}">
-                <g:message code="scm.action.diff.clean.button.label" default="View Commit Info"/>
-            </g:if>
-            <g:else>
-                <g:message code="scm.action.diff.button.label" default="Diff Changes"/>
-            </g:else>
-        </g:link>
-    </li>
-    </g:unless>
-    <g:if test="${importStateUnknown}">
-        <li class="dropdown-header">
-            <g:render template="/scm/statusBadge"
-                      model="[importStatus: jobstatus?.synchState?.toString(),
-                              exportStatus:null,
-                              text: '',
-                              notext: false,
-                              integration: 'import',
-                              importCommit: jobstatus?.commit]"
-            />
-        </li>
-    </g:if>
-</g:if>
 <g:if test="${renderedActions<1}">
     <li class="dropdown-header">
         <g:message code="scheduledExecution.action.menu.none-available" />

rundeckapp/grails-app/views/scheduledExecution/_show.gsp

@@ -34,10 +34,7 @@
                               jobDescriptionMode: 'expanded',
                               jobActionButtons  : false,
                               linkCss           : 'text-h4',
-                              scmExportEnabled  : scmExportEnabled,
-                              scmExportStatus   : scmExportStatus,
-                              scmImportEnabled  : scmImportEnabled,
-                              scmImportStatus   : scmImportStatus
+                              includeStatusBadge : true
                       ]"/>
 
             <section class="section-space">

rundeckapp/grails-app/views/scheduledExecution/_showHead.gsp

@@ -15,6 +15,7 @@
   --}%
 
 <%@ page import="org.rundeck.core.auth.AuthConstants; rundeck.ScheduledExecution" %>
+<asset:javascript src="static/pages/job/head/scm-status-badge.js" asset-defer="true" />
 
 <div class="jobInfoSection">
     <g:if test="${scheduledExecution.groupPath}">
@@ -37,9 +38,6 @@
             any: true,
             name: scheduledExecution.project
     )}"/>
-    <g:set var="exportStatus" value="${authProjectExport && scmExportEnabled ? scmExportStatus?.get(scheduledExecution.extid) :null}"/>
-    <g:set var="importStatus" value="${authProjectImport && scmImportEnabled ? scmImportStatus?.get(scheduledExecution.extid):null}"/>
-
       <span>
       <g:if test="${includeExecStatus}">
           <b class="exec-status icon "
@@ -60,20 +58,12 @@
           </div>
         </g:if>
       </span>
-      <g:render template="/scm/statusBadge"
-                model="[
-                        showClean:true,
-                        linkClean:true,
-                        exportStatus: exportStatus?.synchState?.toString(),
-                        importStatus: importStatus?.synchState?.toString(),
-                        text  : '',
-                        notext: false,
-                        link: true,
-                        integration:'export',
-                        job:scheduledExecution,
-                        exportCommit  : exportStatus?.commit,
-                        importCommit  : importStatus?.commit,
-                ]"/>
+
+      <g:if test="${includeStatusBadge}">
+          <span class="vue-ui-socket">
+              <ui-socket section="job-head" location="job-status-badge" socket-data="${enc(attr: [ jobUuid: scheduledExecution.uuid ].encodeAsJSON())}"></ui-socket>
+          </span>
+      </g:if>
 
       <g:if test="${ !scheduledExecution.hasExecutionEnabled()}">
           <span class=" label label-warning has_tooltip" data-toggle="tooltip"

rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobListScmStatus.vue

@@ -51,6 +51,7 @@ import {
   JobPageStoreInjectionKey,
 } from "@/library/stores/JobPageStore";
 import { defineComponent, inject } from "vue";
+import {ScmTextUtilities} from "../../../../library/utilities/scm/scmTextUtilities";
 
 export default defineComponent({
   name: "JobListScmStatus",
@@ -63,6 +64,11 @@ export default defineComponent({
       jobPageStore,
     };
   },
+  data(){
+    return {
+      scmTextProcessor: new ScmTextUtilities(this.$t)
+    }
+  },
   computed: {
     scmImport: function () {
       return this.jobPageStore.findMeta("scmImport");
@@ -120,14 +126,10 @@ export default defineComponent({
       }
     },
     importDisplayText() {
-      return this.importState
-        ? this.$t(`scm.import.status.${this.importState}.display.text`)
-        : "";
+      return this.scmTextProcessor.importDisplayText(this.importState);
     },
     exportDisplayText() {
-      return this.exportState
-        ? this.$t(`scm.export.status.${this.exportState}.display.text`)
-        : "";
+      return this.scmTextProcessor.exportDisplayText(this.exportState);
     },
     exportMessage() {
       return this.scmExport?.status?.message;

rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/tree/BrowserJobItem.vue

@@ -110,7 +110,7 @@ export default defineComponent({
         //only emit if the click was not within a button,input or link
         eventBus.emit(`browser-job-item-click:${this.job.id}`, this.job);
         if (this.loadMeta && !this.job.meta) {
-          await this.jobPageStore.getJobBrowser().loadJobMeta(this.job);
+          this.job.meta = await this.jobPageStore.getJobBrowser().loadJobMeta(this.job.id);
         }
       }
     },

rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/tree/JobScmActions.vue

@@ -33,6 +33,21 @@
         {{ action.title }}
       </a>
     </li>
+    <li v-if="importSynchState !== 'UNKNOWN'">
+      <a :href="scmDiffHref('import')">
+        <job-scm-status-badge
+            :notext="true"
+            icon="glyphicon-eye-open"
+            :exportStatus="importSynchState"
+        />
+        <template v-if="importSynchState === 'CLEAN'">
+          {{ $t("scm.action.diff.clean.button.label") }}
+        </template>
+        <template v-else>
+          {{ $t("scm.action.diff.button.label") }}
+        </template>
+      </a>
+    </li>
   </template>
 </template>