diff options
author | Mike Greiling <mike@pixelcog.com> | 2017-08-30 00:16:23 -0500 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2017-08-30 00:16:23 -0500 |
commit | 147d55d24f602411fd3db5fa6aacbf12046efbc8 (patch) | |
tree | 3fab6c3daf54e6a18db367133c425ec44700ebed /app/assets/javascripts/monitoring | |
parent | 4138c20c30a92c29f22e7e85d56ffcb17f725efa (diff) | |
download | gitlab-ce-147d55d24f602411fd3db5fa6aacbf12046efbc8.tar.gz |
extract prometheus graph group elements into their own component
Diffstat (limited to 'app/assets/javascripts/monitoring')
-rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard.vue | 29 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph_group.vue | 21 |
2 files changed, 34 insertions, 16 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 04f86d0fd40..74244faa5d9 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -3,6 +3,7 @@ import _ from 'underscore'; import statusCodes from '../../lib/utils/http_status'; import MonitoringService from '../services/monitoring_service'; + import GraphGroup from './graph_group.vue'; import GraphRow from './graph_row.vue'; import EmptyState from './empty_state.vue'; import MonitoringStore from '../stores/monitoring_store'; @@ -31,6 +32,7 @@ }, components: { + GraphGroup, GraphRow, EmptyState, }, @@ -120,29 +122,24 @@ <template> <div v-if="!showEmptyState" class="prometheus-graphs"> - <div + <graph-group v-for="(groupData, index) in store.groups" :key="index" - class="panel panel-default prometheus-panel" + :name="groupData.group" > - <div class="panel-heading"> - <h4>{{groupData.group}}</h4> - </div> - <div class="panel-body"> - <graph-row - v-for="(row, index) in groupData.metrics" - :key="index" - :row-data="row" - :update-aspect-ratio="updateAspectRatio" - :deployment-data="store.deploymentData" - /> - </div> - </div> + <graph-row + v-for="(row, index) in groupData.metrics" + :key="index" + :row-data="row" + :update-aspect-ratio="updateAspectRatio" + :deployment-data="store.deploymentData" + /> + </graph-group> </div> <empty-state + v-else :selected-state="state" :documentation-path="documentationPath" :settings-path="settingsPath" - v-else /> </template> diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue new file mode 100644 index 00000000000..32c90fda8cc --- /dev/null +++ b/app/assets/javascripts/monitoring/components/graph_group.vue @@ -0,0 +1,21 @@ +<script> +export default { + props: { + name: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <div class="panel panel-default prometheus-panel"> + <div class="panel-heading"> + <h4>{{name}}</h4> + </div> + <div class="panel-body"> + <slot /> + </div> + </div> +</template> |