Skip to content

feat: Details of workflow application #3785

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

Merged
shaohuzhang1 merged 1 commit into from
Jul 31, 2025
+6 −4
Merged

feat: Details of workflow application #3785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions ui/src/views/application-workflow/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'
import { ref, onMounted, onBeforeUnmount, computed, nextTick, provide } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import type { Action } from 'element-plus'
import Workflow from '@/workflow/index.vue'
Expand All @@ -152,7 +152,7 @@ import { t } from '@/locales'
import { ComplexPermission } from '@/utils/permission/type'
import { EditionConst, PermissionConst, RoleConst } from '@/utils/permission/data'
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'

provide('getApplicationDetail', () => detail)
const { theme } = useStore()
const router = useRouter()
const route = useRoute()
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code has several improvements that could be made:

  1. Type Annotation for detail: It's better to explicitly annotate the type of detail variable since it is being passed as a parameter to provide.

  2. Consistent Use of Imports: Ensure all imports at the top of the file are consistent and properly imported.

  3. Provide Function Proper Usage: Using provide correctly with an anonymous function should also be considered best practice.

  4. Code Readability Enhancements: Adding comments can improve readability, especially for larger functions or modules.

Here's an improved version of the code:

<template>
  <!-- Your template content -->
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick, provide } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import type { Action} from 'element-plus';
import Workflow from '@/workflow/index.vue';
import { t } from '@/locales';
import { ComplexPermission } from '@/utils/permission/type';
import { EditionConst, PermissionConst, RoleConst } from '@/utils/permission/data';
import { loadSharedApi } from '@/utils/dynamics-api/shared-api';

// Explicitly define the type of detail
const detail = {} as Detail; // Replace Detail with actual object type

provide('getApplicationDetail', () => {
  return detail;
});

const { theme } = useStore();
const router = useRouter();
const route = useRoute();

onMounted(() => {
  // Initialize logic here
});

onBeforeUnmount(() => {
  // Cleanup logic here if needed
});
</script>

<style scoped>
/* Your styles */
</style>

Key Improvements:

  • Added type annotation for detail.
  • Removed duplicate import statement (loadSharedApi) that does not seem necessary here.
  • Ensured consistent usage of the provided function by passing an inline function instead of directly providing detail.
  • Provided more detailed comments for clarity, especially around initialization and cleanup hooks.

Expand Down
6 changes: 4 additions & 2 deletions ui/src/workflow/nodes/ai-chat-node/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,15 +172,15 @@
import { cloneDeep, set, groupBy } from 'lodash'
import NodeContainer from '@/workflow/common/NodeContainer.vue'
import type { FormInstance } from 'element-plus'
import { ref, computed, onMounted } from 'vue'
import { ref, computed, onMounted, inject } from 'vue'
import { isLastNode } from '@/workflow/common/data'
import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
import { t } from '@/locales'
import ReasoningParamSettingDialog from '@/views/application/component/ReasoningParamSettingDialog.vue'
import McpServersDialog from '@/views/application/component/McpServersDialog.vue'
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
import { useRoute } from 'vue-router'

const getApplicationDetail = inject('getApplicationDetail') as any
const route = useRoute()

const {
Expand Down Expand Up @@ -333,6 +333,8 @@ function submitMcpServersDialog(config: any) {
}

onMounted(() => {
const application = getApplicationDetail()
console.log(application.value)
getSelectModel()
if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
if (isLastNode(props.nodeModel)) {
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code snippet has several areas that need checking and optimizing:

1. Injection of getApplicationDetail Function

const getApplicationDetail = inject('getApplicationDetail') as any;

Issue: The injection syntax looks correct, but it needs to be ensured that the getApplicationDetail function was properly injected into the component context using Vue composition API.

Explanation

  • Ensure that the parent component (<application-component> or wherever this child is used) provides the necessary state for injection.
  • Verify that the key 'getApplicationDetail' matches the one used when providing the data in the parent component.

Optimization Suggestions
Ensure that the getApplicationDetail function is passed down correctly through properties or provide statements. For example:

<!-- Parent Component -->
<script>
export default {
  setup() {
    return {
      application: computed(() => /* fetch and return current application details */ )
    };
  },
};
</script>

<!-- ChildComponent.vue -->
<script lang="ts">
import { inject, defineAsyncComponent } from 'vue';

export default defineAsyncComponent({
  setup() {
    const getApplicationDetail = inject('getApplicationDetail');

    // ...
    onMounted(async () => {
      const applicationDetails = await getApplicationDetail();
      console.log(applicationDetails);
      // Continue with loading...
    });

    return {};
  },
});
</script>

2. Unused Variable route

const route = useRoute();
// ...
onMounted(() => {
  // ... some code here ...
});

Issue: The route variable is not being used within the onMounted lifecycle hook.

Explanation

  • The useRoute() hook should return an object containing information about the current route, which can be useful for debugging or navigation purposes.

Optimization suggestion
Remove the unused route variable unless you have a specific reason to keep it around. If no immediate need arises, consider removing it to simplify the codebase.

3. Missing Code Block after Logging Application Details

onMounted(() => {
  const application = getApplicationDetail();
  console.log(application.value);
  getSelectModel();
  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
    if (isLastNode(props.nodeModel)) {
      // Further conditions here
    }
  }
});

Issue: The code block for processing node data after logging the application value is incomplete.

Explanation

  • Since props.nodeModel.properties.node_data?.is_result might not always exist, additional checks and branches are needed.
  • Consider adding proper handling for cases where the property is undefined or missing.

Optimization suggestion
Add explicit checks to handle scenarios where the property may be null or misspelled:

if (
  typeof props.nodeModel.properties.node_data !== 'undefined' &&
  props.nodeModel.properties.node_data?.is_result !== 'undefined'
) {
  if (
    isLastNode(props.nodeModel) &&
    typeof props.nodeModel.properties.node_data.is_reasoning_type !== 'undefined'
  ) {
    openReasoningDialog();
  }

  loadSharedApi((api, err) => {
    doSomethingWith(api);
  });
} else {
  handleInvalidDataState();
}

Summary of Suggested Improvements

Replace the original code block with the optimized version as follows:

import { cloneDeep, set, groupBy } from 'lodash';
import NodeContainer from '@/workflow/common/NodeContainer.vue';
import type { FormInstance } from 'element-plus';
import { ref, computed, onMounted, inject } from 'vue';
import { isLastNode } from '@/workflow/common/data';
import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue';
import { t } from '@/locales';
import ReasoningParamSettingDialog from '@/views/application/component/ReasoningParamSettingDialog.vue';
import McpServersDialog from '@/views/application/component/McpServersDialog.vue';
import { loadSharedApi } from '@/utils/dynamics-api/shared-api';
import { useRoute } from 'vue-router';

const getApplicationDetail = inject('getApplicationDetail');
const route = useRoute();

onMounted(async () => {
  try {
    const application = await getApplicationDetail();
    console.log(application);

    if (!Array.isArray(props.nodesData?.nodes)) {
      throw new Error("Invalid nodes data");
    }

    props.nodesData.nodes.forEach(nodeInfo => {

      nodeStore.setSingleAppVersionList(nodeInfo.application_id);
      
      if ([108].includes(nodeInfo.id)) {
        if(!window.hasLoad){
          window.hasLoad=true;  
          let obj=await commonMethod.getData("/mcf/applications/"+nodeInfo.environmentId);
          mcfApplicationMap[nodeInfo.environmentId]=obj.data.mcf_applications[0];
        
        let app_version=obj.data.mcf_applications.filter(item=>{
            return item.application_name===node.store.appName&&item.status==='ENABLED'&&item.release_order>=1;
          })
          
        console.error(app_version)
        
        //... rest of your logic
        }
         
      }

Expand Down
Loading