Skip to main content

Interface (States & Input blocks)

Overview

This Vue component, named StateTable, provides a user interface for managing state files and input files. It allows users to view, search, filter, and interact with these files in a tabular format.

Key Features

  1. Tabbed interface for States and Inputs
  2. Searchable and filterable table
  3. Expandable rows with detailed file content
  4. Ability to start workflows
  5. File status management
  6. File deletion

Component Structure

Data Properties

  • activeTab: Controls which tab is currently active (0 for States, 1 for Inputs)
  • pagination: Controls table pagination
  • tabs: Defines the available tabs and their configurations
  • apiBaseUrl: Base URL for API requests
  • search: Stores the current search term
  • workerStatusOptions: Available status options for workers
  • selectedStatus, selectedGroup: For filtering in respective tabs
  • rows: Stores the main data displayed in the table

Computed Properties

  • filteredData: Returns the filtered and searched data for the table
  • filteredWorkerFields: Filters specific fields from worker data for display

Methods

  1. selectTab(index): Switches between States and Inputs tabs
  2. fetchApiData(endpoint): Fetches data from the API
  3. refreshFiles(): Refreshes the file list
  4. startWorkflow(user_code, payload): Initiates a new workflow
  5. checkWorkflowStatus(workflowID, resolve, reject): Checks the status of a running workflow
  6. fetchFiles(): Fetches and processes the list of files
  7. fetchFileContent(filePath, row): Retrieves detailed content for a specific file
  8. startWorkflowForRow(row, activeTab): Starts a workflow for a specific row
  9. toggleExpand(row): Expands/collapses a row to show/hide details
  10. saveStatus(row): Saves the current status of a file
  11. uploadFile(jsonData, fileName, path, currentFileIndex, totalFiles): Uploads a file to the server
  12. deleteFile(row): Deletes a file from the server

Usage Guide

Viewing Files

  1. The component displays two tabs: "States" and "Inputs"
  2. Each tab shows a table with relevant information about the files
  3. Use the search bar to filter files by any field
  4. Use the status/group dropdown (depending on the active tab) to filter files

Interacting with Files

  1. Click the '+' button on a row to expand and view detailed information
  2. In the expanded view:
    • For States: You can view worker details and their individual states
    • For Inputs: You can view the structure of the input file

File Actions

  1. Start Workflow:

    • Click "Start Workflow" in the expanded view to initiate a workflow for that file
    • For States, it uses the workflow-manager user code
    • For Inputs, it uses the generate-state user code

  2. Save State (States tab only):

    • Click "Save State" to update the file on the server with any changes

  3. Delete State (States tab only):

    • Click "Delete State" to remove the file from the server

Managing Worker and Item States

  1. In the expanded view, each worker and item has a status dropdown
  2. Click on the status to open the dropdown and select a new status

Refreshing Data

  • Click the refresh button (circular arrow icon) to fetch the latest data from the server

API Integration

The component interacts with several API endpoints:

  1. File listing: ${apiBaseUrl}/api/v1/explorer/view/?path=components/states_files.json or ${apiBaseUrl}/api/v1/explorer/view/?path=components/inputs_files.json
  2. File content: ${apiBaseUrl}/api/v1/explorer/view/?path=${filePath}
  3. Workflow start: ${apiBaseUrl}/workflow/api/workflow/run-workflow/
  4. Workflow status check: ${apiBaseUrl}/workflow/api/workflow/${workflowID}/
  5. File upload: ${apiBaseUrl}/api/v1/explorer/upload/
  6. File deletion: ${apiBaseUrl}/api/v1/explorer/delete/?path=${filePath}&is_dir=false

Notes for Developers

  • The component uses custom icons (IconRefresh, IconCopy, IconDownload, IconTabActive) which should be properly imported
  • Authorization is handled by the authorization() function from @/utils/customFetch
  • The component relies on the Quasar framework for UI components (e.g., q-table, q-input, q-select)
  • Error handling is implemented for API calls, but you may want to enhance user feedback for errors

Potential Enhancements

  1. Implement pagination on the server-side for better performance with large datasets
  2. Add more robust error handling and user notifications
  3. Implement a more sophisticated state management system (e.g., Vuex) for complex state interactions
  4. Add unit and integration tests to ensure reliability
Back to top