diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/alert_details/index.js')
-rw-r--r-- | app/assets/javascripts/vue_shared/alert_details/index.js | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/alert_details/index.js b/app/assets/javascripts/vue_shared/alert_details/index.js new file mode 100644 index 00000000000..3ea43d7a843 --- /dev/null +++ b/app/assets/javascripts/vue_shared/alert_details/index.js @@ -0,0 +1,83 @@ +import { defaultDataIdFromObject } from 'apollo-cache-inmemory'; +import produce from 'immer'; +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import AlertDetails from './components/alert_details.vue'; +import { PAGE_CONFIG } from './constants'; +import sidebarStatusQuery from './graphql/queries/alert_sidebar_status.query.graphql'; +import createRouter from './router'; + +Vue.use(VueApollo); + +export default (selector) => { + const domEl = document.querySelector(selector); + const { alertId, projectPath, projectIssuesPath, projectId, page } = domEl.dataset; + const router = createRouter(); + + const resolvers = { + Mutation: { + toggleSidebarStatus: (_, __, { cache }) => { + const sourceData = cache.readQuery({ query: sidebarStatusQuery }); + const data = produce(sourceData, (draftData) => { + // eslint-disable-next-line no-param-reassign + draftData.sidebarStatus = !draftData.sidebarStatus; + }); + cache.writeQuery({ query: sidebarStatusQuery, data }); + }, + }, + }; + + const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(resolvers, { + cacheConfig: { + dataIdFromObject: (object) => { + // eslint-disable-next-line no-underscore-dangle + if (object.__typename === 'AlertManagementAlert') { + return object.iid; + } + return defaultDataIdFromObject(object); + }, + }, + assumeImmutableResults: true, + }), + }); + + apolloProvider.clients.defaultClient.cache.writeData({ + data: { + sidebarStatus: false, + }, + }); + + const provide = { + projectPath, + alertId, + page, + projectIssuesPath, + projectId, + }; + + if (page === PAGE_CONFIG.OPERATIONS.TITLE) { + const { TRACK_ALERTS_DETAILS_VIEWS_OPTIONS, TRACK_ALERT_STATUS_UPDATE_OPTIONS } = PAGE_CONFIG[ + page + ]; + provide.trackAlertsDetailsViewsOptions = TRACK_ALERTS_DETAILS_VIEWS_OPTIONS; + provide.trackAlertStatusUpdateOptions = TRACK_ALERT_STATUS_UPDATE_OPTIONS; + } else if (page === PAGE_CONFIG.THREAT_MONITORING.TITLE) { + provide.isThreatMonitoringPage = true; + } + + // eslint-disable-next-line no-new + new Vue({ + el: selector, + components: { + AlertDetails, + }, + provide, + apolloProvider, + router, + render(createElement) { + return createElement('alert-details', {}); + }, + }); +}; |