Introduce telemetry (#2099)

* introduce analytics

* add user survey backend

* add user survey backend

* set answers on survey submit

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

* change name to personalization

* lint

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

* N8n 2495 add personalization modal (#2280)

* update modals

* add onboarding modal

* implement questions

* introduce analytics

* simplify impl

* implement survey handling

* add personalized cateogry

* update modal behavior

* add thank you view

* handle empty cases

* rename modal

* standarize modal names

* update image, add tags to headings

* remove unused file

* remove unused interfaces

* clean up footer spacing

* introduce analytics

* refactor to fix bug

* update endpoint

* set min height

* update stories

* update naming from questions to survey

* remove spacing after core categories

* fix bug in logic

* sort nodes

* rename types

* merge with be

* rename userSurvey

* clean up rest api

* use constants for keys

* use survey keys

* clean up types

* move personalization to its own file

Co-authored-by: ahsan-virani <ahsan.virani@gmail.com>

* Survey new options (#2300)

* split up options

* fix quotes

* remove unused import

* add user created workflow event (#2301)

* simplify env vars

* fix versionCli on FE

* update personalization env

* fix event User opened Credentials panel

* fix select modal spacing

* fix nodes panel event

* fix workflow id in workflow execute event

* improve telemetry error logging

* fix config and stop process events

* add flush call on n8n stop

* ready for release

* improve telemetry process exit

* fix merge

* improve n8n stop events

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Ahsan Virani
2021-10-19 05:57:49 +02:00
committed by GitHub
parent 4b857b19ac
commit 421dd72224
100 changed files with 2223 additions and 550 deletions

View File

@@ -0,0 +1,249 @@
<template>
<Modal
:name="PERSONALIZATION_MODAL_KEY"
:title="!submitted? 'Get started' : 'Thanks!'"
:subtitle="!submitted? 'These questions help us tailor n8n to you' : ''"
:centerTitle="true"
:showClose="false"
:eventBus="modalBus"
:closeOnClickModal="false"
:closeOnPressEscape="false"
width="460px"
@enter="save"
@input="onInput"
>
<template v-slot:content>
<div v-if="submitted" :class="$style.submittedContainer">
<img :class="$style.demoImage" :src="baseUrl + 'suggestednodes.png'" />
<n8n-text>Look out for things marked with a . They are personalized to make n8n more relevant to you.</n8n-text>
</div>
<div :class="$style.container" v-else>
<n8n-input-label label="Which of these areas do you mainly work in?">
<n8n-select :value="values[WORK_AREA_KEY]" placeholder="Select..." @change="(value) => onInput(WORK_AREA_KEY, value)">
<n8n-option :value="AUTOMATION_CONSULTING_WORK_AREA" label="Automation consulting" />
<n8n-option :value="FINANCE_WORK_AREA" label="Finance" />
<n8n-option :value="HR_WORK_AREA" label="HR" />
<n8n-option :value="IT_ENGINEERING_WORK_AREA" label="IT / Engineering" />
<n8n-option :value="LEGAL_WORK_AREA" label="Legal" />
<n8n-option :value="MARKETING_WORK_AREA" label="Marketing / Growth" />
<n8n-option :value="OPS_WORK_AREA" label="Operations" />
<n8n-option :value="PRODUCT_WORK_AREA" label="Product" />
<n8n-option :value="SALES_BUSINESSDEV_WORK_AREA" label="Sales / Business Development" />
<n8n-option :value="SECURITY_WORK_AREA" label="Security" />
<n8n-option :value="SUPPORT_WORK_AREA" label="Support" />
<n8n-option :value="OTHER_WORK_AREA_OPTION" label="Other (please specify)" />
</n8n-select>
</n8n-input-label>
<n8n-input
v-if="otherWorkAreaFieldVisible"
:value="values[OTHER_WORK_AREA_KEY]"
placeholder="Specify your work area"
@input="(value) => onInput(OTHER_WORK_AREA_KEY, value)"
/>
<n8n-input-label label="How are your coding skills?">
<n8n-select :value="values[CODING_SKILL_KEY]" placeholder="Select..." @change="(value) => onInput(CODING_SKILL_KEY, value)">
<n8n-option
label="0 (Never coded)"
value="0"
/>
<n8n-option
label="1"
value="1"
/>
<n8n-option
label="2"
value="2"
/>
<n8n-option
label="3"
value="3"
/>
<n8n-option
label="4"
value="4"
/>
<n8n-option
label="5 (Pro coder)"
value="5"
/>
</n8n-select>
</n8n-input-label>
<n8n-input-label label="How big is your company?">
<n8n-select :value="values[COMPANY_SIZE_KEY]" placeholder="Select..." @change="(value) => onInput(COMPANY_SIZE_KEY, value)">
<n8n-option
label="Less than 20 people"
:value="COMPANY_SIZE_20_OR_LESS"
/>
<n8n-option
label="20-99 people"
:value="COMPANY_SIZE_20_99"
/>
<n8n-option
label="100-499 people"
:value="COMPANY_SIZE_100_499"
/>
<n8n-option
label="500-999 people"
:value="COMPANY_SIZE_500_999"
/>
<n8n-option
label="1000+ people"
:value="COMPANY_SIZE_1000_OR_MORE"
/>
<n8n-option
label="I'm not using n8n for work"
:value="COMPANY_SIZE_PERSONAL_USE"
/>
</n8n-select>
</n8n-input-label>
</div>
</template>
<template v-slot:footer>
<div>
<n8n-button v-if="submitted" @click="closeDialog" label="Get started" float="right" />
<n8n-button v-else @click="save" :loading="isSaving" label="Continue" float="right" />
</div>
</template>
</Modal>
</template>
<script lang="ts">
import mixins from "vue-typed-mixins";
import {
PERSONALIZATION_MODAL_KEY,
AUTOMATION_CONSULTING_WORK_AREA,
FINANCE_WORK_AREA,
HR_WORK_AREA,
IT_ENGINEERING_WORK_AREA,
LEGAL_WORK_AREA,
MARKETING_WORK_AREA,
PRODUCT_WORK_AREA,
SALES_BUSINESSDEV_WORK_AREA,
SECURITY_WORK_AREA,
SUPPORT_WORK_AREA,
OPS_WORK_AREA,
OTHER_WORK_AREA_OPTION,
COMPANY_SIZE_20_OR_LESS,
COMPANY_SIZE_20_99,
COMPANY_SIZE_100_499,
COMPANY_SIZE_500_999,
COMPANY_SIZE_1000_OR_MORE,
COMPANY_SIZE_PERSONAL_USE,
WORK_AREA_KEY,
COMPANY_SIZE_KEY,
CODING_SKILL_KEY,
OTHER_WORK_AREA_KEY,
} from "../constants";
import { workflowHelpers } from "@/components/mixins/workflowHelpers";
import { showMessage } from "@/components/mixins/showMessage";
import Modal from "./Modal.vue";
import { IPersonalizationSurveyAnswers, IPersonalizationSurveyKeys } from "@/Interface";
import Vue from "vue";
import { mapGetters } from "vuex";
export default mixins(showMessage, workflowHelpers).extend({
components: { Modal },
name: "PersonalizationModal",
data() {
return {
submitted: false,
isSaving: false,
PERSONALIZATION_MODAL_KEY,
otherWorkAreaFieldVisible: false,
modalBus: new Vue(),
values: {
[WORK_AREA_KEY]: null,
[COMPANY_SIZE_KEY]: null,
[CODING_SKILL_KEY]: null,
[OTHER_WORK_AREA_KEY]: null,
} as IPersonalizationSurveyAnswers,
AUTOMATION_CONSULTING_WORK_AREA,
FINANCE_WORK_AREA,
HR_WORK_AREA,
IT_ENGINEERING_WORK_AREA,
LEGAL_WORK_AREA,
MARKETING_WORK_AREA,
PRODUCT_WORK_AREA,
SALES_BUSINESSDEV_WORK_AREA,
SECURITY_WORK_AREA,
SUPPORT_WORK_AREA,
OPS_WORK_AREA,
OTHER_WORK_AREA_OPTION,
COMPANY_SIZE_20_OR_LESS,
COMPANY_SIZE_20_99,
COMPANY_SIZE_100_499,
COMPANY_SIZE_500_999,
COMPANY_SIZE_1000_OR_MORE,
COMPANY_SIZE_PERSONAL_USE,
WORK_AREA_KEY,
COMPANY_SIZE_KEY,
CODING_SKILL_KEY,
OTHER_WORK_AREA_KEY,
};
},
computed: {
...mapGetters({
baseUrl: 'getBaseUrl',
}),
},
methods: {
closeDialog() {
this.modalBus.$emit('close');
},
onInput(name: IPersonalizationSurveyKeys, value: string) {
if (name === WORK_AREA_KEY && value === OTHER_WORK_AREA_OPTION) {
this.otherWorkAreaFieldVisible = true;
}
else if (name === WORK_AREA_KEY) {
this.otherWorkAreaFieldVisible = false;
this.values[OTHER_WORK_AREA_KEY] = null;
}
this.values[name] = value;
},
async save(): Promise<void> {
this.$data.isSaving = true;
try {
await this.$store.dispatch('settings/submitPersonalizationSurvey', this.values);
if (this.values[WORK_AREA_KEY] === null && this.values[COMPANY_SIZE_KEY] === null && this.values[CODING_SKILL_KEY] === null) {
this.closeDialog();
}
this.submitted = true;
} catch (e) {
this.$showError(e, 'Error while submitting results');
}
this.$data.isSaving = false;
},
},
});
</script>
<style lang="scss" module>
.container {
> div:not(:last-child) {
margin-bottom: var(--spacing-m);
}
}
.submittedContainer {
* {
margin-bottom: var(--spacing-2xs);
}
}
.demoImage {
border-radius: var(--border-radius-large);
border: var(--border-base);
width: 100%;
height: 140px;
}
</style>