Reduce the complexity of pipelines table
Where?
The pipelines table consist of two main components
app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue
Then in pipelines_table_row.vue
the column data is broken down into smaller components, such as commit, triggerer etc.
How can we reduce the complexity?
-
We could move the table to utilize GlTable
and pass the pipeline data to the table instead of looping through thepipelines_table_row.vue
component #321257 (closed) -
Work on simplifying the computed properties located in pipelines_table_row.vue
(probably can move these from this component once we useGlTable
). These computed properties are using old practices and explicitly returningundefined
. We can utilize the optional chain operator here to help us out. #321260 (closed) -
Reduce the number of props for doc paths (we can use helpPagePath
JS implementation) see issue at: #320949 (closed) -
Duplicate ci_pagination_api_mixin.js
intopipelines_pagination_api_mixin.js
andenvironments_pagination_api_mixin.js
see: #321021 (closed)
The table
Component Structure
- Entry point: ~/pipelines/pipelines_index.js
renders:
- ~/pipelines/components/pipelines_list/pipelines.vue
mixins:
- ~/pipelines/mixins/pipelines.js: pipelinesMixin
- ~/vue_shared/mixins/ci_pagination_api_mixin.js: CIPaginationMixin
renders:
- ~/vue_shared/components/navigation_tabs.vue: <navigation-tabs/>
- ~/pipelines/components/pipelines_list/nav_controls.vue: <navigation-controls/>
- ~/pipelines/components/pipelines_list/pipelines_filtered_search.vue: <pipelines_filtered_search/>
- ~/pipelines/components/pipelines_list/empty_state.vue: <empty-state/>
- ~/pipelines/components/pipelines_list/blank_state.vue: <svg-blank-state/>
- ~/pipelines/components/pipelines_list/pipelines_table.vue: <pipelines-table-component/>
renders:
- ~/pipelines/components/pipelines_list/pipelines_table_row.vue: <pipelines-table-row-component/>
renders:
- ~/vue_shared/components/ci_badge_link.vue: <ci-badge>
- ~/pipelines/components/pipelines_list/pipeline_url.vue: <pipeline-url>
- ~/pipelines/components/pipelines_list/pipeline_triggerer.vue: <pipeline-triggerer>
renders:
- ~/vue_shared/components/user_avatar/user_avatar_link.vue: <user-avatar-link>
renders:
- ~/vue_shared/components/user_avatar/user_avatar_image.vue: <user-avatar-image>
- ~/vue_shared/components/commit.vue: <commit-component>
renders:
- ~/vue_shared/components/user_avatar/user_avatar_link.vue: <user-avatar-link>
- ~/pipelines/components/pipelines_list/stage.vue: <pipeline-stage>
- ~/pipelines/components/pipelines_list/time_ago.vue: <pipelines-timeago>
mixin:
~/vue_shared/mixins/timeago.js
- ~/pipelines/components/pipelines_list/pipelines_actions.vue: <pipelines-actions-component>
- ~/pipelines/components/pipelines_list/pipeline_stop_modal.vue: <pipeline-stop-modal/>
- ~/vue_shared/components/pagination/table_pagination.vue: <table-pagination/>
- Entry point: ~/commit/pipelines/pipelines_bundle.js
renders:
- ~/commit/pipelines/pipelines_table.vue
mixins:
- ~/pipelines/mixins/pipelines.js: pipelinesMixin
- ~/vue_shared/mixins/ci_pagination_api_mixin.js: CIPaginationMixin
renders:
- ~/pipelines/components/pipelines_list/blank_state.vue: <svg-blank-state/>
- ~/pipelines/components/pipelines_list/pipelines_table.vue: <pipelines-table-component/>
renders:
- ~/pipelines/components/pipelines_list/pipelines_table_row.vue: <pipelines-table-row-component/>
renders:
- ~/vue_shared/components/ci_badge_link.vue: <ci-badge>
- ~/pipelines/components/pipelines_list/pipeline_url.vue: <pipeline-url>
- ~/pipelines/components/pipelines_list/pipeline_triggerer.vue: <pipeline-triggerer>
renders:
- ~/vue_shared/components/user_avatar/user_avatar_link.vue: <user-avatar-link>
renders:
- ~/vue_shared/components/user_avatar/user_avatar_image.vue: <user-avatar-image>
- ~/vue_shared/components/commit.vue: <commit-component>
renders:
- ~/vue_shared/components/user_avatar/user_avatar_link.vue: <user-avatar-link>
- ~/pipelines/components/pipelines_list/stage.vue: <pipeline-stage>
- ~/pipelines/components/pipelines_list/time_ago.vue: <pipelines-timeago>
mixin:
~/vue_shared/mixins/timeago.js
- ~/pipelines/components/pipelines_list/pipelines_actions.vue: <pipelines-actions-component>
- ~/pipelines/components/pipelines_list/pipeline_stop_modal.vue: <pipeline-stop-modal/>
- ~/vue_shared/components/pagination/table_pagination.vue: <table-pagination/>
Edited by Sam Beckham