Add Codesandbox metrics to usage ping

The following actions are tracked:
- The client preview setting is enabled
- Every time the preview feature is used

Move pingUsage call to Vuex clientside module

**Why create a new module?**
This call is a bit unrelated to the other
parts of the IDE. Creating a new module helps
keep this part contained + opens the door for
allowing other clientside specific parts to be
cohesively organized.

app/assets/javascripts/ide/components/preview/clientside.vue

@@ -92,6 +92,7 @@ export default {
   },
   methods: {
     ...mapActions(['getFileData', 'getRawFileData']),
+    ...mapActions('clientside', ['pingUsage']),
     loadFileContent(path) {
       return this.getFileData({ path, makeFileActive: false }).then(() =>
         this.getRawFileData({ path }),
@@ -100,6 +101,8 @@ export default {
     initPreview() {
       if (!this.mainEntry) return null;
 
+      this.pingUsage();
+
       return this.loadFileContent(this.mainEntry)
         .then(() => this.$nextTick())
         .then(() => {

app/assets/javascripts/ide/stores/index.js

@@ -10,6 +10,7 @@ import mergeRequests from './modules/merge_requests';
 import branches from './modules/branches';
 import fileTemplates from './modules/file_templates';
 import paneModule from './modules/pane';
+import clientsideModule from './modules/clientside';
 
 Vue.use(Vuex);
 
@@ -26,6 +27,7 @@ export const createStore = () =>
       branches,
       fileTemplates: fileTemplates(),
       rightPane: paneModule(),
+      clientside: clientsideModule(),
     },
   });
 

app/assets/javascripts/ide/stores/modules/clientside/actions.js

+import axios from '~/lib/utils/axios_utils';
+
+export const pingUsage = ({ rootGetters }) => {
+  const { web_url: projectUrl } = rootGetters.currentProject;
+
+  const url = `${projectUrl}/usage_ping/web_ide_clientside_preview`;
+
+  return axios.post(url);
+};
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};

app/assets/javascripts/ide/stores/modules/clientside/index.js

+import * as actions from './actions';
+
+export default () => ({
+  namespaced: true,
+  actions,
+});

app/controllers/projects/usage_ping_controller.rb

+# frozen_string_literal: true
+
+class Projects::UsagePingController < Projects::ApplicationController
+  before_action :authenticate_user!
+
+  def web_ide_clientside_preview
+    return render_404 unless Gitlab::CurrentSettings.web_ide_clientside_preview_enabled?
+
+    Gitlab::UsageDataCounters::WebIdeCounter.increment_previews_count
+
+    head(200)
+  end
+end

changelogs/unreleased/fj-24837-codesanbox-usage-ping.yml

+---
+title: Add Codesandbox metrics to usage ping
+merge_request: 19075
+author:
+type: other

config/routes/project.rb

@@ -617,6 +617,10 @@ constraints(::Constraints::ProjectUrlConstrainer.new) do
         end
       end
 
+      scope :usage_ping, controller: :usage_ping do
+        post :web_ide_clientside_preview
+      end
+
       # Since both wiki and repository routing contains wildcard characters
       # its preferable to keep it below all other project routes
       draw :wiki

lib/gitlab/usage_data.rb

@@ -131,7 +131,8 @@ module Gitlab
           omniauth_enabled: Gitlab::Auth.omniauth_enabled?,
           prometheus_metrics_enabled: Gitlab::Metrics.prometheus_metrics_enabled?,
           reply_by_email_enabled: Gitlab::IncomingEmail.enabled?,
-          signup_enabled: Gitlab::CurrentSettings.allow_signup?
+          signup_enabled: Gitlab::CurrentSettings.allow_signup?,
+          web_ide_clientside_preview_enabled: Gitlab::CurrentSettings.web_ide_clientside_preview_enabled?
         }
       end
 

lib/gitlab/usage_data_counters/web_ide_counter.rb

@@ -8,6 +8,7 @@ module Gitlab
       COMMITS_COUNT_KEY = 'WEB_IDE_COMMITS_COUNT'
       MERGE_REQUEST_COUNT_KEY = 'WEB_IDE_MERGE_REQUESTS_COUNT'
       VIEWS_COUNT_KEY = 'WEB_IDE_VIEWS_COUNT'
+      PREVIEW_COUNT_KEY = 'WEB_IDE_PREVIEWS_COUNT'
 
       class << self
         def increment_commits_count
@@ -34,11 +35,22 @@ module Gitlab
           total_count(VIEWS_COUNT_KEY)
         end
 
+        def increment_previews_count
+          return unless Gitlab::CurrentSettings.web_ide_clientside_preview_enabled?
+
+          increment(PREVIEW_COUNT_KEY)
+        end
+
+        def total_previews_count
+          total_count(PREVIEW_COUNT_KEY)
+        end
+
         def totals
           {
             web_ide_commits: total_commits_count,
             web_ide_views: total_views_count,
-            web_ide_merge_requests: total_merge_requests_count
+            web_ide_merge_requests: total_merge_requests_count,
+            web_ide_previews: total_previews_count
           }
         end
       end

spec/controllers/projects/usage_ping_controller_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe Projects::UsagePingController do
+  let_it_be(:project) { create(:project) }
+  let_it_be(:user) { create(:user) }
+
+  describe 'POST #web_ide_clientside_preview' do
+    subject { post :web_ide_clientside_preview, params: { namespace_id: project.namespace, project_id: project } }
+
+    before do
+      sign_in(user) if user
+    end
+
+    context 'when web ide clientside preview is enabled' do
+      before do
+        stub_application_setting(web_ide_clientside_preview_enabled: true)
+      end
+
+      context 'when the user is not authenticated' do
+        let(:user) { nil }
+
+        it 'returns 302' do
+          subject
+
+          expect(response).to have_gitlab_http_status(302)
+        end
+      end
+
+      context 'when the user does not have access to the project' do
+        it 'returns 404' do
+          subject
+
+          expect(response).to have_gitlab_http_status(404)
+        end
+      end
+
+      context 'when the user has access to the project' do
+        let(:user) { project.owner }
+
+        it 'increments the counter' do
+          expect do
+            subject
+          end.to change { Gitlab::UsageDataCounters::WebIdeCounter.total_previews_count }.by(1)
+        end
+      end
+    end
+
+    context 'when web ide clientside preview is not enabled' do
+      let(:user) { project.owner }
+
+      before do
+        stub_application_setting(web_ide_clientside_preview_enabled: false)
+      end
+
+      it 'returns 404' do
+        subject
+
+        expect(response).to have_gitlab_http_status(404)
+      end
+    end
+  end
+end

spec/frontend/ide/components/preview/clientside_spec.js

@@ -24,6 +24,9 @@ describe('IDE clientside preview', () => {
     getFileData: jest.fn().mockReturnValue(Promise.resolve({})),
     getRawFileData: jest.fn().mockReturnValue(Promise.resolve('')),
   };
+  const storeClientsideActions = {
+    pingUsage: jest.fn().mockReturnValue(Promise.resolve({})),
+  };
 
   const waitForCalls = () => new Promise(setImmediate);
 
@@ -42,6 +45,12 @@ describe('IDE clientside preview', () => {
         ...getters,
       },
       actions: storeActions,
+      modules: {
+        clientside: {
+          namespaced: true,
+          actions: storeClientsideActions,
+        },
+      },
     });
 
     wrapper = shallowMount(Clientside, {
@@ -76,7 +85,8 @@ describe('IDE clientside preview', () => {
   describe('with main entry', () => {
     beforeEach(() => {
       createComponent({ getters: { packageJson: dummyPackageJson } });
-      return wrapper.vm.initPreview();
+
+      return waitForCalls();
     });
 
     it('creates sandpack manager', () => {
@@ -95,6 +105,10 @@ describe('IDE clientside preview', () => {
         },
       );
     });
+
+    it('pings usage', () => {
+      expect(storeClientsideActions.pingUsage).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('computed', () => {

spec/frontend/ide/stores/modules/clientside/actions_spec.js

+import MockAdapter from 'axios-mock-adapter';
+import testAction from 'helpers/vuex_action_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+import axios from '~/lib/utils/axios_utils';
+import * as actions from '~/ide/stores/modules/clientside/actions';
+
+const TEST_PROJECT_URL = `${TEST_HOST}/lorem/ipsum`;
+const TEST_USAGE_URL = `${TEST_PROJECT_URL}/usage_ping/web_ide_clientside_preview`;
+
+describe('IDE store module clientside actions', () => {
+  let rootGetters;
+  let mock;
+
+  beforeEach(() => {
+    rootGetters = {
+      currentProject: {
+        web_url: TEST_PROJECT_URL,
+      },
+    };
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  describe('pingUsage', () => {
+    it('posts to usage endpoint', done => {
+      const usageSpy = jest.fn(() => [200]);
+
+      mock.onPost(TEST_USAGE_URL).reply(() => usageSpy());
+
+      testAction(actions.pingUsage, null, rootGetters, [], [], () => {
+        expect(usageSpy).toHaveBeenCalled();
+        done();
+      });
+    });
+  });
+});

spec/lib/gitlab/usage_data_counters/web_ide_counter_spec.rb

@@ -34,22 +34,54 @@ describe Gitlab::UsageDataCounters::WebIdeCounter, :clean_gitlab_redis_shared_st
     it_behaves_like 'counter examples'
   end
 
+  describe 'previews counter' do
+    let(:setting_enabled) { true }
+
+    before do
+      stub_application_setting(web_ide_clientside_preview_enabled: setting_enabled)
+    end
+
+    context 'when web ide clientside preview is enabled' do
+      let(:increment_counter_method) { :increment_previews_count }
+      let(:total_counter_method) { :total_previews_count }
+
+      it_behaves_like 'counter examples'
+    end
+
+    context 'when web ide clientside preview is not enabled' do
+      let(:setting_enabled) { false }
+
+      it 'does not increment the counter' do
+        expect(described_class.total_previews_count).to eq(0)
+
+        2.times { described_class.increment_previews_count }
+
+        expect(described_class.total_previews_count).to eq(0)
+      end
+    end
+  end
+
   describe '.totals' do
     commits = 5
     merge_requests = 3
     views = 2
+    previews = 4
 
     before do
+      stub_application_setting(web_ide_clientside_preview_enabled: true)
+
       commits.times { described_class.increment_commits_count }
       merge_requests.times { described_class.increment_merge_requests_count }
       views.times { described_class.increment_views_count }
+      previews.times { described_class.increment_previews_count }
     end
 
     it 'can report all totals' do
       expect(described_class.totals).to include(
         web_ide_commits: commits,
         web_ide_views: views,
-        web_ide_merge_requests: merge_requests
+        web_ide_merge_requests: merge_requests,
+        web_ide_previews: previews
       )
     end
   end

spec/lib/gitlab/usage_data_spec.rb

@@ -76,6 +76,7 @@ describe Gitlab::UsageData do
         avg_cycle_analytics
         influxdb_metrics_enabled
         prometheus_metrics_enabled
+        web_ide_clientside_preview_enabled
       ))
     end
 
@@ -93,6 +94,7 @@ describe Gitlab::UsageData do
         web_ide_views
         web_ide_commits
         web_ide_merge_requests
+        web_ide_previews
         navbar_searches
         cycle_analytics_views
         productivity_analytics_views
@@ -252,6 +254,7 @@ describe Gitlab::UsageData do
       expect(subject[:container_registry_enabled]).to eq(Gitlab.config.registry.enabled)
       expect(subject[:dependency_proxy_enabled]).to eq(Gitlab.config.dependency_proxy.enabled)
       expect(subject[:gitlab_shared_runners_enabled]).to eq(Gitlab.config.gitlab_ci.shared_runners_enabled)
+      expect(subject[:web_ide_clientside_preview_enabled]).to eq(Gitlab::CurrentSettings.web_ide_clientside_preview_enabled?)
     end
   end
 

spec/routing/project_routing_spec.rb

@@ -788,4 +788,10 @@ describe 'project routing' do
       expect(put("/gitlab/gitlabhq/-/deploy_tokens/1/revoke")).to route_to("projects/deploy_tokens#revoke", namespace_id: 'gitlab', project_id: 'gitlabhq', id: '1')
     end
   end
+
+  describe Projects::UsagePingController, 'routing' do
+    it 'routes to usage_ping#web_ide_clientside_preview' do
+      expect(post('/gitlab/gitlabhq/usage_ping/web_ide_clientside_preview')).to route_to('projects/usage_ping#web_ide_clientside_preview', namespace_id: 'gitlab', project_id: 'gitlabhq')
+    end
+  end
 end