summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
blob: 405339b3d365cf229dc3a8e3c683d9a412fe9acf (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<script>
import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
import { INSTALL_AGENT_MODAL_ID } from '../constants';

export default {
  modalId: INSTALL_AGENT_MODAL_ID,
  components: {
    GlButton,
    GlEmptyState,
    GlLink,
    GlSprintf,
    GlAlert,
  },
  directives: {
    GlModalDirective,
  },
  inject: [
    'emptyStateImage',
    'projectPath',
    'agentDocsUrl',
    'installDocsUrl',
    'getStartedDocsUrl',
    'integrationDocsUrl',
  ],
  props: {
    hasConfigurations: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    repositoryPath() {
      return `/${this.projectPath}`;
    },
  },
};
</script>

<template>
  <gl-empty-state
    :svg-path="emptyStateImage"
    :title="s__('ClusterAgents|Integrate Kubernetes with a GitLab Agent')"
    class="empty-state--agent"
  >
    <template #description>
      <p class="mw-460 gl-mx-auto">
        <gl-sprintf
          :message="
            s__(
              'ClusterAgents|The GitLab Kubernetes Agent allows an Infrastructure as Code, GitOps approach to integrating Kubernetes clusters with GitLab. %{linkStart}Learn more.%{linkEnd}',
            )
          "
        >
          <template #link="{ content }">
            <gl-link :href="agentDocsUrl" target="_blank" data-testid="agent-docs-link">
              {{ content }}
            </gl-link>
          </template>
        </gl-sprintf>
      </p>

      <p class="mw-460 gl-mx-auto">
        <gl-sprintf
          :message="
            s__(
              'ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}',
            )
          "
        >
          <template #link="{ content }">
            <gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link">
              {{ content }}
            </gl-link>
          </template>
        </gl-sprintf>
      </p>

      <gl-alert
        v-if="!hasConfigurations"
        variant="warning"
        class="gl-mb-5 text-left"
        :dismissible="false"
      >
        {{
          s__(
            'ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process.',
          )
        }}

        <template #actions>
          <gl-button
            category="primary"
            variant="info"
            :href="getStartedDocsUrl"
            target="_blank"
            class="gl-ml-0!"
          >
            {{ s__('ClusterAgents|Read more about getting started') }}
          </gl-button>
          <gl-button category="secondary" variant="info" :href="repositoryPath">
            {{ s__('ClusterAgents|Go to the repository') }}
          </gl-button>
        </template>
      </gl-alert>
    </template>

    <template #actions>
      <gl-button
        v-gl-modal-directive="$options.modalId"
        :disabled="!hasConfigurations"
        data-testid="integration-primary-button"
        category="primary"
        variant="success"
      >
        {{ s__('ClusterAgents|Integrate with the GitLab Agent') }}
      </gl-button>
    </template>
  </gl-empty-state>
</template>