<script>
import vulnerabilitySeveritiesCountQuery from '../graphql/project_vulnerability_severities_count.graphql';
import VulnerabilityCountListLayout from './vulnerability_count_list_layout.vue';

export default {
  components: {
    VulnerabilityCountListLayout,
  },
  props: {
    projectFullPath: {
      type: String,
      required: true,
    },
  },
  data: () => ({
    queryError: false,
    vulnerabilitiesCount: {},
  }),
  computed: {
    isLoading() {
      return this.$apollo.queries.vulnerabilitiesCount.loading;
    },
  },
  apollo: {
    vulnerabilitiesCount: {
      query: vulnerabilitySeveritiesCountQuery,
      variables() {
        return { fullPath: this.projectFullPath };
      },
      update: ({ project }) => project.vulnerabilitySeveritiesCount,
      result() {
        this.queryError = false;
      },
      error() {
        this.queryError = true;
      },
    },
  },
};
</script>

<template>
  <vulnerability-count-list-layout
    :show-error="queryError"
    :is-loading="isLoading"
    :vulnerabilities-count="vulnerabilitiesCount"
  />
</template>
