JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: use analytics pinia module instead of direct API requests

Browse Source 
Start using analytics pinia module instead of making direct API requests from components.
We do this to not mix transport layer logic with view logic.

Issue:
https://github.com/storj/storj/issues/6122

Change-Id: Idb1902aec0635df4f0e682ba50bcc97b240ac4a9
This commit is contained in:
Vitalii 2023-08-03 14:04:24 +03:00 committed by Storj Robot
parent e5bcb8b209
commit e2e437dd95
91 changed files with 464 additions and 545 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/satellite/src/api/analytics.ts
View File

@ -19,7 +19,7 @@ export class AnalyticsHttpApi {
* @param eventName - name of the event * @param eventName - name of the event
* @param props - additional properties to send with the event * @param props - additional properties to send with the event
*/ */
public async eventTriggered(eventName: string, props?: {[p:string]:string}): Promise<void> { public async eventTriggered(eventName: string, props?: {[p: string]: string}): Promise<void> {
try { try {
const path = `${this.ROOT_PATH}/event`; const path = `${this.ROOT_PATH}/event`;
const body = { const body = {

15
web/satellite/src/components/accessGrants/AccessGrants.vue
View File

@ -78,7 +78,7 @@
<CLIIcon /> <CLIIcon />
</div> </div>
<div class="access-grants__flows-area__title">API Key</div> <div class="access-grants__flows-area__title">API Key</div>
<div class="access-grants__flows-area__summary">Use it for generating S3 credentials and access grants programatically. </div> <div class="access-grants__flows-area__summary">Use it for generating S3 credentials and access grants programmatically. </div>
<br> <br>
<div class="access-grants__flows-area__button-container"> <div class="access-grants__flows-area__button-container">
<a <a
@ -158,7 +158,6 @@ import AccessGrantsHeader from './AccessGrantsHeader.vue';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AccessGrant } from '@/types/accessGrants'; import { AccessGrant } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AccessType } from '@/types/createAccessGrant'; import { AccessType } from '@/types/createAccessGrant';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
@ -166,6 +165,7 @@ import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import AccessGrantsItem from '@/components/accessGrants/AccessGrantsItem.vue'; import AccessGrantsItem from '@/components/accessGrants/AccessGrantsItem.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -179,8 +179,7 @@ import S3Icon from '@/../static/images/accessGrants/s3.svg';
const FIRST_PAGE = 1; const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const agStore = useAccessGrantsStore(); const agStore = useAccessGrantsStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
@ -290,7 +289,7 @@ async function fetch(searchQuery: string): Promise<void> {
* Access grant button click. * Access grant button click.
*/ */
function accessGrantClick(): void { function accessGrantClick(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_ACCESS_GRANT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.CREATE_ACCESS_GRANT_CLICKED);
trackPageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path); trackPageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path);
router.push({ router.push({
name: RouteConfig.CreateAccessModal.name, name: RouteConfig.CreateAccessModal.name,
@ -302,7 +301,7 @@ function accessGrantClick(): void {
* S3 Access button click.. * S3 Access button click..
*/ */
function s3Click(): void { function s3Click(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_S3_CREDENTIALS_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.CREATE_S3_CREDENTIALS_CLICKED);
trackPageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path); trackPageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path);
router.push({ router.push({
name: RouteConfig.CreateAccessModal.name, name: RouteConfig.CreateAccessModal.name,
@ -314,7 +313,7 @@ function s3Click(): void {
* CLI Access button click. * CLI Access button click.
*/ */
function cliClick(): void { function cliClick(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_KEYS_FOR_CLI_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.CREATE_KEYS_FOR_CLI_CLICKED);
trackPageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path); trackPageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path);
router.push({ router.push({
name: RouteConfig.CreateAccessModal.name, name: RouteConfig.CreateAccessModal.name,
@ -326,7 +325,7 @@ function cliClick(): void {
* Sends "trackPageVisit" event to segment and opens link. * Sends "trackPageVisit" event to segment and opens link.
*/ */
function trackPageVisit(link: string): void { function trackPageVisit(link: string): void {
analytics.pageVisit(link); analyticsStore.pageVisit(link);
} }
onMounted(async () => { onMounted(async () => {

12
web/satellite/src/components/accessGrants/createFlow/CreateAccessGrantFlow.vue
View File

@ -124,12 +124,12 @@ import {
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants'; import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore'; import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
@ -144,6 +144,7 @@ import CLIAccessCreatedStep from '@/components/accessGrants/createFlow/steps/CLI
import S3CredentialsCreatedStep from '@/components/accessGrants/createFlow/steps/S3CredentialsCreatedStep.vue'; import S3CredentialsCreatedStep from '@/components/accessGrants/createFlow/steps/S3CredentialsCreatedStep.vue';
import ConfirmDetailsStep from '@/components/accessGrants/createFlow/steps/ConfirmDetailsStep.vue'; import ConfirmDetailsStep from '@/components/accessGrants/createFlow/steps/ConfirmDetailsStep.vue';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const agStore = useAccessGrantsStore(); const agStore = useAccessGrantsStore();
@ -202,7 +203,6 @@ const accessGrant = ref<string>('');
const edgeCredentials = ref<EdgeCredentials>(new EdgeCredentials()); const edgeCredentials = ref<EdgeCredentials>(new EdgeCredentials());
const FIRST_PAGE = 1; const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Selects access type. * Selects access type.
@ -498,7 +498,7 @@ async function createCLIAccess(): Promise<void> {
if (notAfter.value) permissionsMsg = Object.assign(permissionsMsg, { 'notAfter': notAfter.value.toISOString() }); if (notAfter.value) permissionsMsg = Object.assign(permissionsMsg, { 'notAfter': notAfter.value.toISOString() });
await worker.value.postMessage(permissionsMsg); worker.value.postMessage(permissionsMsg);
const grantEvent: MessageEvent = await new Promise(resolve => { const grantEvent: MessageEvent = await new Promise(resolve => {
if (worker.value) { if (worker.value) {
@ -512,7 +512,7 @@ async function createCLIAccess(): Promise<void> {
cliAccess.value = grantEvent.data.value; cliAccess.value = grantEvent.data.value;
if (selectedAccessTypes.value.includes(AccessType.APIKey)) { if (selectedAccessTypes.value.includes(AccessType.APIKey)) {
analytics.eventTriggered(AnalyticsEvent.API_ACCESS_CREATED); analyticsStore.eventTriggered(AnalyticsEvent.API_ACCESS_CREATED);
} }
} }
@ -566,7 +566,7 @@ async function createAccessGrant(): Promise<void> {
accessGrant.value = accessEvent.data.value; accessGrant.value = accessEvent.data.value;
if (selectedAccessTypes.value.includes(AccessType.AccessGrant)) { if (selectedAccessTypes.value.includes(AccessType.AccessGrant)) {
analytics.eventTriggered(AnalyticsEvent.ACCESS_GRANT_CREATED); analyticsStore.eventTriggered(AnalyticsEvent.ACCESS_GRANT_CREATED);
} }
} }
@ -575,7 +575,7 @@ async function createAccessGrant(): Promise<void> {
*/ */
async function createEdgeCredentials(): Promise<void> { async function createEdgeCredentials(): Promise<void> {
edgeCredentials.value = await agStore.getEdgeCredentials(accessGrant.value); edgeCredentials.value = await agStore.getEdgeCredentials(accessGrant.value);
analytics.eventTriggered(AnalyticsEvent.GATEWAY_CREDENTIALS_CREATED); analyticsStore.eventTriggered(AnalyticsEvent.GATEWAY_CREDENTIALS_CREATED);
} }
/** /**

6
web/satellite/src/components/accessGrants/createFlow/components/LinkButton.vue
View File

@ -15,7 +15,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import LearnIcon from '@/../static/images/accessGrants/newCreateFlow/learn.svg'; import LearnIcon from '@/../static/images/accessGrants/newCreateFlow/learn.svg';
@ -27,13 +27,13 @@ const props = withDefaults(defineProps<{
withIcon: false, withIcon: false,
}); });
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
/** /**
* Sends "trackPageVisit" event to segment. * Sends "trackPageVisit" event to segment.
*/ */
function trackPageVisit(): void { function trackPageVisit(): void {
analytics.pageVisit(props.link); analyticsStore.pageVisit(props.link);
} }
</script> </script>

8
web/satellite/src/components/accessGrants/createFlow/components/ValueWithBlur.vue
View File

@ -46,7 +46,7 @@ import { ref } from 'vue';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VInfo from '@/components/common/VInfo.vue'; import VInfo from '@/components/common/VInfo.vue';
@ -67,9 +67,9 @@ const props = withDefaults(defineProps<{
const notify = useNotify(); const notify = useNotify();
const isValueShown = ref<boolean>(false); const analyticsStore = useAnalyticsStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const isValueShown = ref<boolean>(false);
/** /**
* Makes blurred value to be shown. * Makes blurred value to be shown.
@ -83,7 +83,7 @@ function showValue(): void {
*/ */
function onCopy(): void { function onCopy(): void {
navigator.clipboard.writeText(props.value); navigator.clipboard.writeText(props.value);
analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
notify.success(`${props.title} was copied successfully`); notify.success(`${props.title} was copied successfully`);
} }
</script> </script>

10
web/satellite/src/components/accessGrants/createFlow/steps/AccessCreatedStep.vue
View File

@ -68,9 +68,9 @@ import { useRouter } from 'vue-router';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { Download } from '@/utils/download'; import { Download } from '@/utils/download';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AccessType } from '@/types/createAccessGrant'; import { AccessType } from '@/types/createAccessGrant';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue'; import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue';
@ -87,11 +87,11 @@ const props = defineProps<{
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const analyticsStore = useAnalyticsStore();
const isCopied = ref<boolean>(false); const isCopied = ref<boolean>(false);
const isDownloaded = ref<boolean>(false); const isDownloaded = ref<boolean>(false);
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Indicates if there are S3 credentials to show. * Indicates if there are S3 credentials to show.
*/ */
@ -105,7 +105,7 @@ const hasNextStep = computed((): boolean => {
function onCopy(): void { function onCopy(): void {
navigator.clipboard.writeText(props.accessGrant); navigator.clipboard.writeText(props.accessGrant);
isCopied.value = true; isCopied.value = true;
analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
notify.success(`Access Grant was copied successfully`); notify.success(`Access Grant was copied successfully`);
} }
@ -115,7 +115,7 @@ function onCopy(): void {
function onDownload(): void { function onDownload(): void {
isDownloaded.value = true; isDownloaded.value = true;
Download.file(props.accessGrant, `Storj-access-${props.name}-${new Date().toISOString()}.txt`); Download.file(props.accessGrant, `Storj-access-${props.name}-${new Date().toISOString()}.txt`);
analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
} }
/** /**

9
web/satellite/src/components/accessGrants/createFlow/steps/CLIAccessCreatedStep.vue
View File

@ -74,9 +74,9 @@ import { useRouter } from 'vue-router';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { Download } from '@/utils/download'; import { Download } from '@/utils/download';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue'; import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue';
@ -88,6 +88,7 @@ const props = defineProps<{
apiKey: string; apiKey: string;
}>(); }>();
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
@ -95,8 +96,6 @@ const router = useRouter();
const isCopied = ref<boolean>(false); const isCopied = ref<boolean>(false);
const isDownloaded = ref<boolean>(false); const isDownloaded = ref<boolean>(false);
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Returns the web address of this satellite from the store. * Returns the web address of this satellite from the store.
*/ */
@ -110,7 +109,7 @@ const satelliteAddress = computed((): string => {
function onCopy(): void { function onCopy(): void {
navigator.clipboard.writeText(`${satelliteAddress.value} ${props.apiKey}`); navigator.clipboard.writeText(`${satelliteAddress.value} ${props.apiKey}`);
isCopied.value = true; isCopied.value = true;
analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
notify.success(`CLI access was copied successfully`); notify.success(`CLI access was copied successfully`);
} }
@ -122,7 +121,7 @@ function onDownload(): void {
const fileContent = `Satellite address:\n${satelliteAddress.value}\n\nAPI Key:\n${props.apiKey}`; const fileContent = `Satellite address:\n${satelliteAddress.value}\n\nAPI Key:\n${props.apiKey}`;
Download.file(fileContent, `Storj-CLI-access-${props.name}-${new Date().toISOString()}.txt`); Download.file(fileContent, `Storj-CLI-access-${props.name}-${new Date().toISOString()}.txt`);
analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
} }
/** /**

6
web/satellite/src/components/accessGrants/createFlow/steps/CreateNewAccessStep.vue
View File

@ -102,7 +102,7 @@
import { computed } from 'vue'; import { computed } from 'vue';
import { AccessType, FUNCTIONAL_CONTAINER_ICON_AND_TITLE, FunctionalContainer } from '@/types/createAccessGrant'; import { AccessType, FUNCTIONAL_CONTAINER_ICON_AND_TITLE, FunctionalContainer } from '@/types/createAccessGrant';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import ContainerWithIcon from '@/components/accessGrants/createFlow/components/ContainerWithIcon.vue'; import ContainerWithIcon from '@/components/accessGrants/createFlow/components/ContainerWithIcon.vue';
import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue'; import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue';
@ -119,7 +119,7 @@ const props = defineProps<{
onContinue: () => void; onContinue: () => void;
}>(); }>();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
/** /**
* Indicates if button should be disabled. * Indicates if button should be disabled.
@ -132,7 +132,7 @@ const isButtonDisabled = computed((): boolean => {
* Sends "trackPageVisit" event to segment. * Sends "trackPageVisit" event to segment.
*/ */
function trackPageVisit(link: string): void { function trackPageVisit(link: string): void {
analytics.pageVisit(link); analyticsStore.pageVisit(link);
} }
</script> </script>

8
web/satellite/src/components/accessGrants/createFlow/steps/EncryptionInfoStep.vue
View File

@ -46,7 +46,7 @@
import { ref } from 'vue'; import { ref } from 'vue';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue'; import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue';
import Toggle from '@/components/accessGrants/createFlow/components/Toggle.vue'; import Toggle from '@/components/accessGrants/createFlow/components/Toggle.vue';
@ -57,15 +57,15 @@ const props = defineProps<{
onContinue: () => void; onContinue: () => void;
}>(); }>();
const isDontShow = ref<boolean>(false); const analyticsStore = useAnalyticsStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const isDontShow = ref<boolean>(false);
/** /**
* Sends "trackPageVisit" event to segment. * Sends "trackPageVisit" event to segment.
*/ */
function trackPageVisit(): void { function trackPageVisit(): void {
analytics.pageVisit('https://docs.storj.io/dcs/concepts/encryption-key/design-decision-server-side-encryption/'); analyticsStore.pageVisit('https://docs.storj.io/dcs/concepts/encryption-key/design-decision-server-side-encryption/');
} }
/** /**

10
web/satellite/src/components/accessGrants/createFlow/steps/PassphraseGeneratedStep.vue
View File

@ -84,7 +84,7 @@ import { computed, ref } from 'vue';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { Download } from '@/utils/download'; import { Download } from '@/utils/download';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue'; import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue';
import ValueWithBlur from '@/components/accessGrants/createFlow/components/ValueWithBlur.vue'; import ValueWithBlur from '@/components/accessGrants/createFlow/components/ValueWithBlur.vue';
@ -101,14 +101,14 @@ const props = withDefaults(defineProps<{
isProjectPassphrase: false, isProjectPassphrase: false,
}); });
const analyticsStore = useAnalyticsStore();
const notify = useNotify(); const notify = useNotify();
const isPassphraseSaved = ref<boolean>(false); const isPassphraseSaved = ref<boolean>(false);
const isPassphraseCopied = ref<boolean>(false); const isPassphraseCopied = ref<boolean>(false);
const isPassphraseDownloaded = ref<boolean>(false); const isPassphraseDownloaded = ref<boolean>(false);
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Indicates if continue button is disabled. * Indicates if continue button is disabled.
*/ */
@ -129,7 +129,7 @@ function togglePassphraseSaved(): void {
function onCopy(): void { function onCopy(): void {
isPassphraseCopied.value = true; isPassphraseCopied.value = true;
navigator.clipboard.writeText(props.passphrase); navigator.clipboard.writeText(props.passphrase);
analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
notify.success(`Passphrase was copied successfully`); notify.success(`Passphrase was copied successfully`);
} }
@ -139,7 +139,7 @@ function onCopy(): void {
function onDownload(): void { function onDownload(): void {
isPassphraseDownloaded.value = true; isPassphraseDownloaded.value = true;
Download.file(props.passphrase, `passphrase-${props.name}-${new Date().toISOString()}.txt`); Download.file(props.passphrase, `passphrase-${props.name}-${new Date().toISOString()}.txt`);
analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
} }
</script> </script>

10
web/satellite/src/components/accessGrants/createFlow/steps/S3CredentialsCreatedStep.vue
View File

@ -81,9 +81,9 @@ import { useRouter } from 'vue-router';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { Download } from '@/utils/download'; import { Download } from '@/utils/download';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { EdgeCredentials } from '@/types/accessGrants'; import { EdgeCredentials } from '@/types/accessGrants';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue'; import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue';
@ -98,11 +98,11 @@ const props = defineProps<{
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const analyticsStore = useAnalyticsStore();
const isCopied = ref<boolean>(false); const isCopied = ref<boolean>(false);
const isDownloaded = ref<boolean>(false); const isDownloaded = ref<boolean>(false);
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Saves CLI access to clipboard. * Saves CLI access to clipboard.
*/ */
@ -111,7 +111,7 @@ function onCopy(): void {
navigator.clipboard.writeText(`${credentials.accessKeyId} ${credentials.secretKey} ${credentials.endpoint}`); navigator.clipboard.writeText(`${credentials.accessKeyId} ${credentials.secretKey} ${credentials.endpoint}`);
isCopied.value = true; isCopied.value = true;
analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
notify.success(`S3 credentials were copied successfully`); notify.success(`S3 credentials were copied successfully`);
} }
@ -123,7 +123,7 @@ function onDownload(): void {
const fileContent = `Access Key:\n${props.credentials.accessKeyId}\n\nSecret Key:\n${props.credentials.secretKey}\n\nEndpoint:\n${props.credentials.endpoint}`; const fileContent = `Access Key:\n${props.credentials.accessKeyId}\n\nSecret Key:\n${props.credentials.secretKey}\n\nEndpoint:\n${props.credentials.endpoint}`;
Download.file(fileContent, `Storj-S3-credentials-${props.name}-${new Date().toISOString()}.txt`); Download.file(fileContent, `Storj-S3-credentials-${props.name}-${new Date().toISOString()}.txt`);
analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
} }
/** /**

13
web/satellite/src/components/account/billing/BillingArea.vue
View File

@ -44,22 +44,21 @@ import { computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps'; import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { NavigationLink } from '@/types/navigation'; import { NavigationLink } from '@/types/navigation';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore'; import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const billingStore = useBillingStore(); const billingStore = useBillingStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Indicates if free credits dropdown shown. * Indicates if free credits dropdown shown.
*/ */
@ -114,7 +113,7 @@ function closeDropdown(): void {
function routeToOverview(): void { function routeToOverview(): void {
const overviewPath = baseAccountRoute.value.with(RouteConfig.Billing).with(RouteConfig.BillingOverview).path; const overviewPath = baseAccountRoute.value.with(RouteConfig.Billing).with(RouteConfig.BillingOverview).path;
if (route.path !== overviewPath) { if (route.path !== overviewPath) {
analytics.pageVisit(overviewPath); analyticsStore.pageVisit(overviewPath);
router.push(overviewPath); router.push(overviewPath);
} }
} }
@ -122,7 +121,7 @@ function routeToOverview(): void {
function routeToPaymentMethods(): void { function routeToPaymentMethods(): void {
const payMethodsPath = baseAccountRoute.value.with(RouteConfig.Billing).with(RouteConfig.BillingPaymentMethods).path; const payMethodsPath = baseAccountRoute.value.with(RouteConfig.Billing).with(RouteConfig.BillingPaymentMethods).path;
if (route.path !== payMethodsPath) { if (route.path !== payMethodsPath) {
analytics.pageVisit(payMethodsPath); analyticsStore.pageVisit(payMethodsPath);
router.push(payMethodsPath); router.push(payMethodsPath);
} }
} }
@ -130,7 +129,7 @@ function routeToPaymentMethods(): void {
function routeToBillingHistory(): void { function routeToBillingHistory(): void {
const billingPath = baseAccountRoute.value.with(RouteConfig.Billing).with(RouteConfig.BillingHistory).path; const billingPath = baseAccountRoute.value.with(RouteConfig.Billing).with(RouteConfig.BillingHistory).path;
if (route.path !== billingPath) { if (route.path !== billingPath) {
analytics.pageVisit(billingPath); analyticsStore.pageVisit(billingPath);
router.push(billingPath); router.push(billingPath);
} }
} }
@ -138,7 +137,7 @@ function routeToBillingHistory(): void {
function routeToCoupons(): void { function routeToCoupons(): void {
const couponsPath = baseAccountRoute.value.with(RouteConfig.Billing).with(RouteConfig.BillingCoupons).path; const couponsPath = baseAccountRoute.value.with(RouteConfig.Billing).with(RouteConfig.BillingCoupons).path;
if (route.path !== couponsPath) { if (route.path !== couponsPath) {
analytics.pageVisit(couponsPath); analyticsStore.pageVisit(couponsPath);
router.push(couponsPath); router.push(couponsPath);
} }
} }

7
web/satellite/src/components/account/billing/billingTabs/BillingHistoryItem.vue
View File

@ -44,25 +44,24 @@
<script setup lang="ts"> <script setup lang="ts">
import { centsToDollars } from '@/utils/strings'; import { centsToDollars } from '@/utils/strings';
import { PaymentsHistoryItem, PaymentsHistoryItemStatus } from '@/types/payments'; import { PaymentsHistoryItem, PaymentsHistoryItemStatus } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useResize } from '@/composables/resize'; import { useResize } from '@/composables/resize';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import CheckIcon from '@/../static/images/billing/check-green-circle.svg'; import CheckIcon from '@/../static/images/billing/check-green-circle.svg';
import Calendar from '@/../static/images/billing/calendar.svg'; import Calendar from '@/../static/images/billing/calendar.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
item: PaymentsHistoryItem; item: PaymentsHistoryItem;
}>(), { }>(), {
item: () => new PaymentsHistoryItem('', '', 0, 0, PaymentsHistoryItemStatus.Pending, '', new Date(), new Date(), 0, 0), item: () => new PaymentsHistoryItem('', '', 0, 0, PaymentsHistoryItemStatus.Pending, '', new Date(), new Date(), 0, 0),
}); });
const analyticsStore = useAnalyticsStore();
const { isMobile, isTablet } = useResize(); const { isMobile, isTablet } = useResize();
function downloadInvoice() { function downloadInvoice() {
analytics.eventTriggered(AnalyticsEvent.INVOICE_DOWNLOADED); analyticsStore.eventTriggered(AnalyticsEvent.INVOICE_DOWNLOADED);
if (isMobile.value || isTablet.value) { if (isMobile.value || isTablet.value) {
window.open(props.item.link, '_blank', 'noreferrer'); window.open(props.item.link, '_blank', 'noreferrer');

7
web/satellite/src/components/account/billing/billingTabs/Coupons.vue
View File

@ -32,7 +32,6 @@
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref } from 'vue';
import { Coupon, CouponDuration } from '@/types/payments'; import { Coupon, CouponDuration } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date'; import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
@ -40,14 +39,14 @@ import { useNotify } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore'; import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import CouponIcon from '@/../static/images/billing/coupon.svg'; import CouponIcon from '@/../static/images/billing/coupon.svg';
import CloudIcon from '@/../static/images/onboardingTour/cloudIcon.svg'; import CloudIcon from '@/../static/images/onboardingTour/cloudIcon.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
const billingStore = useBillingStore(); const billingStore = useBillingStore();
@ -112,7 +111,7 @@ function toggleCreateModal(): void {
if (!couponCodeBillingUIEnabled.value) { if (!couponCodeBillingUIEnabled.value) {
return; return;
} }
analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
appStore.updateActiveModal(MODALS.newBillingAddCoupon); appStore.updateActiveModal(MODALS.newBillingAddCoupon);
} }

9
web/satellite/src/components/account/billing/billingTabs/Overview.vue
View File

@ -96,11 +96,11 @@ import { centsToDollars } from '@/utils/strings';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date'; import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { AccountBalance } from '@/types/payments'; import { AccountBalance } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore'; import { useBillingStore } from '@/store/modules/billingStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import UsageAndChargesItem from '@/components/account/billing/billingTabs/UsageAndChargesItem.vue'; import UsageAndChargesItem from '@/components/account/billing/billingTabs/UsageAndChargesItem.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -109,8 +109,7 @@ import EstimatedChargesIcon from '@/../static/images/account/billing/totalEstima
import AvailableBalanceIcon from '@/../static/images/account/billing/availableBalanceIcon.svg'; import AvailableBalanceIcon from '@/../static/images/account/billing/availableBalanceIcon.svg';
import CalendarIcon from '@/../static/images/account/billing/calendar-icon.svg'; import CalendarIcon from '@/../static/images/account/billing/calendar-icon.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
const billingStore = useBillingStore(); const billingStore = useBillingStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
@ -152,12 +151,12 @@ const priceSummary = computed((): number => {
}); });
function routeToBillingHistory(): void { function routeToBillingHistory(): void {
analytics.eventTriggered(AnalyticsEvent.SEE_PAYMENTS_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.SEE_PAYMENTS_CLICKED);
router.push(RouteConfig.Account.with(RouteConfig.Billing).with(RouteConfig.BillingHistory).path); router.push(RouteConfig.Account.with(RouteConfig.Billing).with(RouteConfig.BillingHistory).path);
} }
function routeToPaymentMethods(): void { function routeToPaymentMethods(): void {
analytics.eventTriggered(AnalyticsEvent.EDIT_PAYMENT_METHOD_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.EDIT_PAYMENT_METHOD_CLICKED);
router.push(RouteConfig.Account.with(RouteConfig.Billing).with(RouteConfig.BillingPaymentMethods).path); router.push(RouteConfig.Account.with(RouteConfig.Billing).with(RouteConfig.BillingPaymentMethods).path);
} }

32
web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
View File

@ -107,8 +107,8 @@
@mouseover="deleteHover = true" @mouseover="deleteHover = true"
@mouseleave="deleteHover = false" @mouseleave="deleteHover = false"
> >
<Trash v-if="deleteHover === false" /> <Trash v-if="!deleteHover" />
<Trash v-if="deleteHover === true" class="red-trash" /> <Trash v-if="deleteHover" class="red-trash" />
Remove Remove
</div> </div>
</div> </div>
@ -187,7 +187,6 @@ import {
NativePaymentHistoryItem, NativePaymentHistoryItem,
} from '@/types/payments'; } from '@/types/payments';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
@ -197,6 +196,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { DEFAULT_PAGE_LIMIT } from '@/types/pagination'; import { DEFAULT_PAGE_LIMIT } from '@/types/pagination';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
@ -228,6 +228,7 @@ interface CardEdited {
isDefault?: boolean isDefault?: boolean
} }
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const billingStore = useBillingStore(); const billingStore = useBillingStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
@ -239,8 +240,6 @@ const route = useRoute();
const emit = defineEmits(['toggleIsLoading', 'toggleIsLoaded', 'cancel']); const emit = defineEmits(['toggleIsLoading', 'toggleIsLoaded', 'cancel']);
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const showTransactions = ref<boolean>(false); const showTransactions = ref<boolean>(false);
const nativePayIsLoading = ref<boolean>(false); const nativePayIsLoading = ref<boolean>(false);
const deleteHover = ref<boolean>(false); const deleteHover = ref<boolean>(false);
@ -326,14 +325,14 @@ async function prepQRCode(): Promise<void> {
try { try {
await QRCode.toCanvas(canvas.value, wallet.value.address); await QRCode.toCanvas(canvas.value, wallet.value.address);
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB); notify.error(error.message, AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB);
} }
} }
async function updatePaymentMethod(): Promise<void> { async function updatePaymentMethod(): Promise<void> {
try { try {
await billingStore.makeCardDefault(defaultCreditCardSelection.value); await billingStore.makeCardDefault(defaultCreditCardSelection.value);
await notify.success('Default payment card updated'); notify.success('Default payment card updated');
isChangeDefaultPaymentModalOpen.value = false; isChangeDefaultPaymentModalOpen.value = false;
} catch (error) { } catch (error) {
notify.notifyError(error, AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB); notify.notifyError(error, AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB);
@ -348,8 +347,8 @@ async function removePaymentMethod(): Promise<void> {
try { try {
await billingStore.removeCreditCard(cardBeingEdited.value.id); await billingStore.removeCreditCard(cardBeingEdited.value.id);
analytics.eventTriggered(AnalyticsEvent.CREDIT_CARD_REMOVED); analyticsStore.eventTriggered(AnalyticsEvent.CREDIT_CARD_REMOVED);
await notify.success('Credit card removed'); notify.success('Credit card removed');
} catch (error) { } catch (error) {
notify.notifyError(error, AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB); notify.notifyError(error, AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB);
} }
@ -383,7 +382,7 @@ async function addCard(token: string): Promise<void> {
return; return;
} }
await notify.success('Card successfully added'); notify.success('Card successfully added');
try { try {
await billingStore.getCreditCards(); await billingStore.getCreditCards();
} catch (error) { } catch (error) {
@ -411,11 +410,11 @@ async function onConfirmAddStripe(): Promise<void> {
isLoading.value = true; isLoading.value = true;
await stripeCardInput.value.onSubmit().then(() => {isLoading.value = false;}); await stripeCardInput.value.onSubmit().then(() => {isLoading.value = false;});
analytics.eventTriggered(AnalyticsEvent.CREDIT_CARD_ADDED_FROM_BILLING); analyticsStore.eventTriggered(AnalyticsEvent.CREDIT_CARD_ADDED_FROM_BILLING);
} }
function addPaymentMethodHandler(): void { function addPaymentMethodHandler(): void {
analytics.eventTriggered(AnalyticsEvent.ADD_NEW_PAYMENT_METHOD_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.ADD_NEW_PAYMENT_METHOD_CLICKED);
if (!usersStore.state.user.paidTier) { if (!usersStore.state.user.paidTier) {
appStore.updateActiveModal(MODALS.upgradeAccount); appStore.updateActiveModal(MODALS.upgradeAccount);
@ -444,7 +443,7 @@ function onCloseClickDefault(): void {
/** /**
* controls sorting the transaction table * controls sorting the transaction table
*/ */
function sortFunction(key): void { function sortFunction(key: string): void {
switch (key) { switch (key) {
case 'date-ascending': case 'date-ascending':
nativePaymentHistoryItems.value.sort((a, b) => {return a.timestamp.getTime() - b.timestamp.getTime();}); nativePaymentHistoryItems.value.sort((a, b) => {return a.timestamp.getTime() - b.timestamp.getTime();});
@ -481,8 +480,8 @@ function sortFunction(key): void {
/** /**
* controls transaction table pagination * controls transaction table pagination
*/ */
function paginationController(i: number, limit: number): void { function paginationController(page: number, limit: number): void {
displayedHistory.value = nativePaymentHistoryItems.value.slice((i - 1) * limit, ((i - 1) * limit) + limit); displayedHistory.value = nativePaymentHistoryItems.value.slice((page - 1) * limit, ((page - 1) * limit) + limit);
} }
onMounted((): void => { onMounted((): void => {
@ -542,7 +541,6 @@ $align: center;
} }
.change-default-input-container { .change-default-input-container {
margin: auto;
display: $flex; display: $flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
@ -552,7 +550,7 @@ $align: center;
height: 10px; height: 10px;
border: 1px solid var(--c-grey-4); border: 1px solid var(--c-grey-4);
border-radius: 8px; border-radius: 8px;
margin-top: 7px; margin: 7px auto auto;
} }
.change-default-input { .change-default-input {

7
web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
View File

@ -95,12 +95,12 @@ import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { Wallet } from '@/types/payments'; import { Wallet } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore'; import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
@ -110,14 +110,13 @@ import InfoIcon from '@/../static/images/billing/blueInfoIcon.svg';
import StorjSmall from '@/../static/images/billing/storj-icon-small.svg'; import StorjSmall from '@/../static/images/billing/storj-icon-small.svg';
import StorjLarge from '@/../static/images/billing/storj-icon-large.svg'; import StorjLarge from '@/../static/images/billing/storj-icon-large.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const billingStore = useBillingStore(); const billingStore = useBillingStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const isLoading = ref<boolean>(false); const isLoading = ref<boolean>(false);
/** /**
@ -171,7 +170,7 @@ async function claimWalletClick(): Promise<void> {
* Triggers Add funds popup. * Triggers Add funds popup.
*/ */
function onAddTokensClick(): void { function onAddTokensClick(): void {
analytics.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED);
appStore.updateActiveModal(MODALS.addTokenFunds); appStore.updateActiveModal(MODALS.addTokenFunds);
} }

18
web/satellite/src/components/browser/FileBrowser.vue
View File

@ -211,7 +211,6 @@ import FileEntry from './FileEntry.vue';
import LockedFilesEntry from './LockedFilesEntry.vue'; import LockedFilesEntry from './LockedFilesEntry.vue';
import BreadCrumbs from './BreadCrumbs.vue'; import BreadCrumbs from './BreadCrumbs.vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
@ -221,6 +220,7 @@ import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrow
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue'; import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
@ -238,6 +238,7 @@ const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const obStore = useObjectBrowserStore(); const obStore = useObjectBrowserStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const analyticsStore = useAnalyticsStore();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -257,7 +258,6 @@ const isOver = ref<boolean>(false);
const routePath = ref(calculateRoutePath()); const routePath = ref(calculateRoutePath());
const NUMBER_OF_DISPLAYED_OBJECTS = 1000; const NUMBER_OF_DISPLAYED_OBJECTS = 1000;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Check if the s3 client has been initialized in the store. * Check if the s3 client has been initialized in the store.
@ -308,7 +308,7 @@ const lockedFilesCount = computed((): number => {
*/ */
const objectsCount = computed((): number => { const objectsCount = computed((): number => {
const name: string = obStore.state.bucket; const name: string = obStore.state.bucket;
const data: Bucket | undefined = bucketsStore.state.page.buckets.find((bucket: Bucket) => bucket.name === name); const data: Bucket | undefined = bucketsStore.state.page.buckets.find(bucket => bucket.name === name);
return data?.objectCount || 0; return data?.objectCount || 0;
}); });
@ -466,7 +466,7 @@ async function upload(e: Event): Promise<void> {
} }
await obStore.upload({ e }); await obStore.upload({ e });
analytics.eventTriggered(AnalyticsEvent.OBJECT_UPLOADED); analyticsStore.eventTriggered(AnalyticsEvent.OBJECT_UPLOADED);
const target = e.target as HTMLInputElement; const target = e.target as HTMLInputElement;
target.value = ''; target.value = '';
} }
@ -496,7 +496,7 @@ async function list(path: string): Promise<void> {
async function buttonFileUpload(): Promise<void> { async function buttonFileUpload(): Promise<void> {
const fileInputElement = fileInput.value as HTMLInputElement; const fileInputElement = fileInput.value as HTMLInputElement;
fileInputElement.showPicker(); fileInputElement.showPicker();
analytics.eventTriggered(AnalyticsEvent.UPLOAD_FILE_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.UPLOAD_FILE_CLICKED);
closeUploadDropdown(); closeUploadDropdown();
} }
@ -506,7 +506,7 @@ async function buttonFileUpload(): Promise<void> {
async function buttonFolderUpload(): Promise<void> { async function buttonFolderUpload(): Promise<void> {
const folderInputElement = folderInput.value as HTMLInputElement; const folderInputElement = folderInput.value as HTMLInputElement;
folderInputElement.showPicker(); folderInputElement.showPicker();
analytics.eventTriggered(AnalyticsEvent.UPLOAD_FOLDER_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.UPLOAD_FOLDER_CLICKED);
closeUploadDropdown(); closeUploadDropdown();
} }
@ -542,8 +542,8 @@ function closeUploadDropdown(): void {
* Redirects to buckets list view. * Redirects to buckets list view.
*/ */
async function goToBuckets(): Promise<void> { async function goToBuckets(): Promise<void> {
await router.push(RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path).catch(err => {}); await router.push(RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path).catch(_ => {});
analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path); analyticsStore.pageVisit(RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path);
await onRouteChange(); await onRouteChange();
} }
@ -572,7 +572,7 @@ onBeforeMount(async () => {
if (!bucket.value) { if (!bucket.value) {
const path = RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path; const path = RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path;
analytics.pageVisit(path); analyticsStore.pageVisit(path);
await router.push(path); await router.push(path);
return; return;

13
web/satellite/src/components/browser/FileEntry.vue
View File

@ -128,9 +128,9 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { AnalyticsHttpApi } from '@/api/analytics';
import { ObjectType } from '@/utils/objectIcon'; import { ObjectType } from '@/utils/objectIcon';
import { ShareType } from '@/types/browser'; import { ShareType } from '@/types/browser';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import TableItem from '@/components/common/TableItem.vue'; import TableItem from '@/components/common/TableItem.vue';
@ -141,14 +141,13 @@ import DownloadIcon from '@/../static/images/objects/download.svg';
import DotsIcon from '@/../static/images/objects/dots.svg'; import DotsIcon from '@/../static/images/objects/dots.svg';
import CloseIcon from '@/../static/images/common/closeCross.svg'; import CloseIcon from '@/../static/images/common/closeCross.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const obStore = useObjectBrowserStore(); const obStore = useObjectBrowserStore();
const config = useConfigStore(); const config = useConfigStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const props = defineProps<{ const props = defineProps<{
path: string, path: string,
file: BrowserObject, file: BrowserObject,
@ -226,7 +225,7 @@ const fileTypeIsFile = computed((): boolean => {
}); });
/** /**
* Return a boolean signifying whether the current file/folder is in the process of being deleted, therefore a spinner shoud be shown. * Return a boolean signifying whether the current file/folder is in the process of being deleted, therefore a spinner should be shown.
*/ */
const loadingSpinner = computed((): boolean => { const loadingSpinner = computed((): boolean => {
return obStore.state.filesToBeDeleted.some( return obStore.state.filesToBeDeleted.some(
@ -242,7 +241,7 @@ function openModal(): void {
if (config.state.config.galleryViewEnabled) { if (config.state.config.galleryViewEnabled) {
appStore.setGalleryView(true); appStore.setGalleryView(true);
analytics.eventTriggered(AnalyticsEvent.GALLERY_VIEW_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.GALLERY_VIEW_CLICKED);
} else { } else {
appStore.updateActiveModal(MODALS.objectDetails); appStore.updateActiveModal(MODALS.objectDetails);
} }
@ -317,7 +316,7 @@ function setSelectedFile(command: boolean): void {
obStore.setUnselectedAnchorFile(null); obStore.setUnselectedAnchorFile(null);
obStore.updateShiftSelectedFiles([]); obStore.updateShiftSelectedFiles([]);
} else if (command) { } else if (command) {
/* if it's [CMD + click] and it has not met any of the above conditions, then set selectedAnchorFile to file and set unselectedAnchorfile to null, update the selectedFiles, and update the shiftSelectedFiles */ /* if it's [CMD + click] and it has not met any of the above conditions, then set selectedAnchorFile to file and set unselectedAnchorFile to null, update the selectedFiles, and update the shiftSelectedFiles */
obStore.setSelectedAnchorFile(props.file); obStore.setSelectedAnchorFile(props.file);
obStore.setUnselectedAnchorFile(null); obStore.setUnselectedAnchorFile(null);
obStore.updateSelectedFiles([ obStore.updateSelectedFiles([
@ -363,7 +362,7 @@ function setShiftSelectedFiles(): void {
const unselectedAnchorFile = obStore.state.unselectedAnchorFile; const unselectedAnchorFile = obStore.state.unselectedAnchorFile;
if (unselectedAnchorFile) { if (unselectedAnchorFile) {
/* if there is an unselectedAnchorFile, meaning that in the previous action the user unselected the anchor file but is now chosing to do a [shift + click] on another file, then reset the selectedAnchorFile, the achor file, to unselectedAnchorFile. */ /* if there is an unselectedAnchorFile, meaning that in the previous action the user unselected the anchor file but is now choosing to do a [shift + click] on another file, then reset the selectedAnchorFile, the achor file, to unselectedAnchorFile. */
obStore.setSelectedAnchorFile(unselectedAnchorFile); obStore.setSelectedAnchorFile(unselectedAnchorFile);
obStore.setUnselectedAnchorFile(null); obStore.setUnselectedAnchorFile(null);
} }

7
web/satellite/src/components/common/AddCouponCodeInput.vue
View File

@ -68,9 +68,9 @@ import { computed, ref } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useBillingStore } from '@/store/modules/billingStore'; import { useBillingStore } from '@/store/modules/billingStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
import ValidationMessage from '@/components/common/ValidationMessage.vue'; import ValidationMessage from '@/components/common/ValidationMessage.vue';
@ -78,6 +78,7 @@ import VButton from '@/components/common/VButton.vue';
import CheckIcon from '@/../static/images/common/validCheck.svg'; import CheckIcon from '@/../static/images/common/validCheck.svg';
const analyticsStore = useAnalyticsStore();
const billingStore = useBillingStore(); const billingStore = useBillingStore();
const route = useRoute(); const route = useRoute();
@ -87,8 +88,6 @@ const showConfirmMessage = ref<boolean>(false);
const errorMessage = ref<string>(''); const errorMessage = ref<string>('');
const couponCode = ref<string>(''); const couponCode = ref<string>('');
const analytics = new AnalyticsHttpApi();
/** /**
* Signup view requires some unique styling and element text. * Signup view requires some unique styling and element text.
*/ */
@ -128,7 +127,7 @@ async function applyCouponCode(): Promise<void> {
errorMessage.value = error.message; errorMessage.value = error.message;
isCodeValid.value = false; isCodeValid.value = false;
showValidationMessage.value = true; showValidationMessage.value = true;
analytics.errorEventTriggered(AnalyticsErrorEventSource.BILLING_APPLY_COUPON_CODE_INPUT); analyticsStore.errorEventTriggered(AnalyticsErrorEventSource.BILLING_APPLY_COUPON_CODE_INPUT);
return; return;
} finally { } finally {

9
web/satellite/src/components/common/NewBillingAddCouponCodeInput.vue
View File

@ -31,16 +31,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useLoading } from '@/composables/useLoading'; import { useLoading } from '@/composables/useLoading';
import { useBillingStore } from '@/store/modules/billingStore'; import { useBillingStore } from '@/store/modules/billingStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
import ValidationMessage from '@/components/common/ValidationMessage.vue'; import ValidationMessage from '@/components/common/ValidationMessage.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
const analyticsStore = useAnalyticsStore();
const billingStore = useBillingStore(); const billingStore = useBillingStore();
const notify = useNotify(); const notify = useNotify();
const { isLoading, withLoading } = useLoading(); const { isLoading, withLoading } = useLoading();
@ -52,8 +53,6 @@ const isCodeValid = ref<boolean>(false);
const errorMessage = ref<string>(''); const errorMessage = ref<string>('');
const couponCode = ref<string>(''); const couponCode = ref<string>('');
const analytics = new AnalyticsHttpApi();
function setCouponCode(value: string): void { function setCouponCode(value: string): void {
couponCode.value = value; couponCode.value = value;
} }
@ -65,13 +64,13 @@ async function applyCouponCode(): Promise<void> {
await withLoading(async () => { await withLoading(async () => {
try { try {
await billingStore.applyCouponCode(couponCode.value); await billingStore.applyCouponCode(couponCode.value);
await notify.success('Coupon Added!'); notify.success('Coupon Added!');
emit('close'); emit('close');
} catch (error) { } catch (error) {
errorMessage.value = error.message; errorMessage.value = error.message;
isCodeValid.value = false; isCodeValid.value = false;
showValidationMessage.value = true; showValidationMessage.value = true;
await analytics.errorEventTriggered(AnalyticsErrorEventSource.BILLING_APPLY_COUPON_CODE_INPUT); analyticsStore.errorEventTriggered(AnalyticsErrorEventSource.BILLING_APPLY_COUPON_CODE_INPUT);
} finally { } finally {
isLoading.value = false; isLoading.value = false;
} }

7
web/satellite/src/components/modals/AddCouponCodeModal.vue
View File

@ -14,21 +14,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import AddCouponCodeInput from '@/components/common/AddCouponCodeInput.vue'; import AddCouponCodeInput from '@/components/common/AddCouponCodeInput.vue';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Closes add coupon modal. * Closes add coupon modal.
*/ */
function onCloseClick(): void { function onCloseClick(): void {
analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Billing).path); analyticsStore.pageVisit(RouteConfig.Account.with(RouteConfig.Billing).path);
appStore.removeActiveModal(); appStore.removeActiveModal();
} }
</script> </script>

22
web/satellite/src/components/modals/AddTeamMemberModal.vue
View File

@ -68,13 +68,13 @@ import { computed, ref } from 'vue';
import { EmailInput } from '@/types/EmailInput'; import { EmailInput } from '@/types/EmailInput';
import { Validator } from '@/utils/validation'; import { Validator } from '@/utils/validation';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore'; import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
@ -83,6 +83,7 @@ import VInput from '@/components/common/VInput.vue';
import TeamMembersIcon from '@/../static/images/team/teamMembers.svg'; import TeamMembersIcon from '@/../static/images/team/teamMembers.svg';
import AddCircleIcon from '@/../static/images/common/addCircle.svg'; import AddCircleIcon from '@/../static/images/common/addCircle.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const pmStore = useProjectMembersStore(); const pmStore = useProjectMembersStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
@ -90,7 +91,6 @@ const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
const FIRST_PAGE = 1; const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const inputs = ref<EmailInput[]>([new EmailInput()]); const inputs = ref<EmailInput[]>([new EmailInput()]);
const formError = ref<string>(''); const formError = ref<string>('');
@ -188,7 +188,7 @@ async function onAddUsersClick(): Promise<void> {
} }
if (emailArray.includes(usersStore.state.user.email)) { if (emailArray.includes(usersStore.state.user.email)) {
await notify.error(`Error adding project members. You can't add yourself to the project`, AnalyticsErrorEventSource.ADD_PROJECT_MEMBER_MODAL); notify.error(`Error adding project members. You can't add yourself to the project`, AnalyticsErrorEventSource.ADD_PROJECT_MEMBER_MODAL);
isLoading.value = false; isLoading.value = false;
return; return;
@ -204,8 +204,8 @@ async function onAddUsersClick(): Promise<void> {
return; return;
} }
analytics.eventTriggered(AnalyticsEvent.PROJECT_MEMBERS_INVITE_SENT); analyticsStore.eventTriggered(AnalyticsEvent.PROJECT_MEMBERS_INVITE_SENT);
await notify.notify('Invites sent!'); notify.notify('Invites sent!');
pmStore.setSearchQuery(''); pmStore.setSearchQuery('');
try { try {
@ -230,18 +230,6 @@ function addInput(): void {
} }
} }
/**
* Deletes selected email input from list.
* @param index
*/
function deleteInput(index: number): void {
if (inputs.value.length === 1) return;
resetFormErrors(index);
inputs.value = inputs.value.filter((input, i) => i !== index);
}
/** /**
* Closes modal. * Closes modal.
*/ */

10
web/satellite/src/components/modals/ChangePasswordModal.vue
View File

@ -67,11 +67,11 @@ import { useRouter } from 'vue-router';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import PasswordStrength from '@/components/common/PasswordStrength.vue'; import PasswordStrength from '@/components/common/PasswordStrength.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
@ -80,6 +80,7 @@ import VModal from '@/components/common/VModal.vue';
import ChangePasswordIcon from '@/../static/images/account/changePasswordPopup/changePassword.svg'; import ChangePasswordIcon from '@/../static/images/account/changePasswordPopup/changePassword.svg';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
const notify = useNotify(); const notify = useNotify();
@ -87,7 +88,6 @@ const router = useRouter();
const DELAY_BEFORE_REDIRECT = 2000; // 2 sec const DELAY_BEFORE_REDIRECT = 2000; // 2 sec
const auth: AuthHttpApi = new AuthHttpApi(); const auth: AuthHttpApi = new AuthHttpApi();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const oldPassword = ref<string>(''); const oldPassword = ref<string>('');
const newPassword = ref<string>(''); const newPassword = ref<string>('');
@ -168,7 +168,7 @@ async function onUpdateClick(): Promise<void> {
} }
if (hasError) { if (hasError) {
analytics.errorEventTriggered(AnalyticsErrorEventSource.CHANGE_PASSWORD_MODAL); analyticsStore.errorEventTriggered(AnalyticsErrorEventSource.CHANGE_PASSWORD_MODAL);
return; return;
} }
@ -190,8 +190,8 @@ async function onUpdateClick(): Promise<void> {
notify.notifyError(error, AnalyticsErrorEventSource.CHANGE_PASSWORD_MODAL); notify.notifyError(error, AnalyticsErrorEventSource.CHANGE_PASSWORD_MODAL);
} }
analytics.eventTriggered(AnalyticsEvent.PASSWORD_CHANGED); analyticsStore.eventTriggered(AnalyticsEvent.PASSWORD_CHANGED);
await notify.success('Password successfully changed!'); notify.success('Password successfully changed!');
closeModal(); closeModal();
} }

9
web/satellite/src/components/modals/ChangeProjectLimitModal.vue
View File

@ -121,14 +121,15 @@ import { useNotify } from '@/utils/hooks';
import { LimitToChange, ProjectLimits } from '@/types/projects'; import { LimitToChange, ProjectLimits } from '@/types/projects';
import { Dimensions, Memory } from '@/utils/bytesSize'; import { Dimensions, Memory } from '@/utils/bytesSize';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useLoading } from '@/composables/useLoading'; import { useLoading } from '@/composables/useLoading';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import LimitIcon from '@/../static/images/modals/limit.svg'; import LimitIcon from '@/../static/images/modals/limit.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
@ -136,8 +137,6 @@ const notify = useNotify();
const { isLoading, withLoading } = useLoading(); const { isLoading, withLoading } = useLoading();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const activeLimit = ref<LimitToChange>(LimitToChange.Storage); const activeLimit = ref<LimitToChange>(LimitToChange.Storage);
const activeMeasurement = ref<string>(Dimensions.TB); const activeMeasurement = ref<string>(Dimensions.TB);
const limitValue = ref<number>(0); const limitValue = ref<number>(0);
@ -300,13 +299,13 @@ async function onSave(): Promise<void> {
const updatedProject = new ProjectLimits(limit); const updatedProject = new ProjectLimits(limit);
await projectsStore.updateProjectBandwidthLimit(updatedProject); await projectsStore.updateProjectBandwidthLimit(updatedProject);
analytics.eventTriggered(AnalyticsEvent.PROJECT_BANDWIDTH_LIMIT_UPDATED); analyticsStore.eventTriggered(AnalyticsEvent.PROJECT_BANDWIDTH_LIMIT_UPDATED);
notify.success('Project egress limit updated successfully!'); notify.success('Project egress limit updated successfully!');
} else { } else {
const updatedProject = new ProjectLimits(0, 0, limit); const updatedProject = new ProjectLimits(0, 0, limit);
await projectsStore.updateProjectStorageLimit(updatedProject); await projectsStore.updateProjectStorageLimit(updatedProject);
analytics.eventTriggered(AnalyticsEvent.PROJECT_STORAGE_LIMIT_UPDATED); analyticsStore.eventTriggered(AnalyticsEvent.PROJECT_STORAGE_LIMIT_UPDATED);
notify.success('Project storage limit updated successfully!'); notify.success('Project storage limit updated successfully!');
} }

31
web/satellite/src/components/modals/CreateBucketModal.vue
View File

@ -58,7 +58,6 @@ import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { Validator } from '@/utils/validation'; import { Validator } from '@/utils/validation';
@ -69,6 +68,7 @@ import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore, FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore'; import { useBucketsStore, FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
@ -77,6 +77,7 @@ import VButton from '@/components/common/VButton.vue';
import CreateBucketIcon from '@/../static/images/buckets/createBucket.svg'; import CreateBucketIcon from '@/../static/images/buckets/createBucket.svg';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
@ -85,8 +86,6 @@ const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const bucketName = ref<string>(''); const bucketName = ref<string>('');
const nameError = ref<string>(''); const nameError = ref<string>('');
const bucketNamesLoading = ref<boolean>(true); const bucketNamesLoading = ref<boolean>(true);
@ -147,17 +146,17 @@ async function onCreate(): Promise<void> {
if (isLoading.value) return; if (isLoading.value) return;
if (!worker.value) { if (!worker.value) {
notify.error('Worker is not defined', AnalyticsErrorEventSource.BUCKET_CREATION_NAME_STEP); notify.error('Worker is not defined', AnalyticsErrorEventSource.CREATE_BUCKET_MODAL);
return; return;
} }
if (!isBucketNameValid(bucketName.value)) { if (!isBucketNameValid(bucketName.value)) {
analytics.errorEventTriggered(AnalyticsErrorEventSource.BUCKET_CREATION_NAME_STEP); analyticsStore.errorEventTriggered(AnalyticsErrorEventSource.CREATE_BUCKET_MODAL);
return; return;
} }
if (allBucketNames.value.includes(bucketName.value)) { if (allBucketNames.value.includes(bucketName.value)) {
notify.error('Bucket with this name already exists', AnalyticsErrorEventSource.BUCKET_CREATION_NAME_STEP); notify.error('Bucket with this name already exists', AnalyticsErrorEventSource.CREATE_BUCKET_MODAL);
return; return;
} }
@ -174,8 +173,8 @@ async function onCreate(): Promise<void> {
await bucketsStore.getBuckets(1, projectID); await bucketsStore.getBuckets(1, projectID);
bucketsStore.setFileComponentBucketName(bucketName.value); bucketsStore.setFileComponentBucketName(bucketName.value);
analytics.eventTriggered(AnalyticsEvent.BUCKET_CREATED); analyticsStore.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path); analyticsStore.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
await router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path); await router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
closeModal(); closeModal();
@ -189,7 +188,7 @@ async function onCreate(): Promise<void> {
if (edgeCredentialsForCreate.value.accessKeyId) { if (edgeCredentialsForCreate.value.accessKeyId) {
await bucketsStore.createBucketWithNoPassphrase(bucketName.value); await bucketsStore.createBucketWithNoPassphrase(bucketName.value);
await bucketsStore.getBuckets(1, projectID); await bucketsStore.getBuckets(1, projectID);
analytics.eventTriggered(AnalyticsEvent.BUCKET_CREATED); analyticsStore.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
closeModal(); closeModal();
if (!bucketWasCreated.value) { if (!bucketWasCreated.value) {
@ -208,7 +207,7 @@ async function onCreate(): Promise<void> {
const now = new Date(); const now = new Date();
const inOneHour = new Date(now.setHours(now.getHours() + 1)); const inOneHour = new Date(now.setHours(now.getHours() + 1));
await worker.value.postMessage({ worker.value.postMessage({
'type': 'SetPermission', 'type': 'SetPermission',
'isDownload': false, 'isDownload': false,
'isUpload': true, 'isUpload': true,
@ -225,7 +224,7 @@ async function onCreate(): Promise<void> {
} }
}); });
if (grantEvent.data.error) { if (grantEvent.data.error) {
await notify.error(grantEvent.data.error, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL); notify.error(grantEvent.data.error, AnalyticsErrorEventSource.CREATE_BUCKET_MODAL);
return; return;
} }
@ -246,7 +245,7 @@ async function onCreate(): Promise<void> {
} }
}); });
if (accessGrantEvent.data.error) { if (accessGrantEvent.data.error) {
await notify.error(accessGrantEvent.data.error, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL); notify.error(accessGrantEvent.data.error, AnalyticsErrorEventSource.CREATE_BUCKET_MODAL);
return; return;
} }
@ -256,7 +255,7 @@ async function onCreate(): Promise<void> {
bucketsStore.setEdgeCredentialsForCreate(creds); bucketsStore.setEdgeCredentialsForCreate(creds);
await bucketsStore.createBucketWithNoPassphrase(bucketName.value); await bucketsStore.createBucketWithNoPassphrase(bucketName.value);
await bucketsStore.getBuckets(1, projectID); await bucketsStore.getBuckets(1, projectID);
analytics.eventTriggered(AnalyticsEvent.BUCKET_CREATED); analyticsStore.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
closeModal(); closeModal();
@ -264,7 +263,7 @@ async function onCreate(): Promise<void> {
LocalData.setBucketWasCreatedStatus(); LocalData.setBucketWasCreatedStatus();
} }
} catch (error) { } catch (error) {
notify.notifyError(error, AnalyticsErrorEventSource.BUCKET_CREATION_FLOW); notify.notifyError(error, AnalyticsErrorEventSource.CREATE_BUCKET_MODAL);
} finally { } finally {
isLoading.value = false; isLoading.value = false;
} }
@ -291,7 +290,7 @@ function setWorker(): void {
worker.value = agStore.state.accessGrantsWebWorker; worker.value = agStore.state.accessGrantsWebWorker;
if (worker.value) { if (worker.value) {
worker.value.onerror = (error: ErrorEvent) => { worker.value.onerror = (error: ErrorEvent) => {
notify.error(error.message, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL); notify.error(error.message, AnalyticsErrorEventSource.CREATE_BUCKET_MODAL);
}; };
} }
} }
@ -319,7 +318,7 @@ onMounted(async (): Promise<void> => {
await bucketsStore.getAllBucketsNames(projectsStore.state.selectedProject.id); await bucketsStore.getAllBucketsNames(projectsStore.state.selectedProject.id);
bucketName.value = allBucketNames.value.length > 0 ? '' : 'demo-bucket'; bucketName.value = allBucketNames.value.length > 0 ? '' : 'demo-bucket';
} catch (error) { } catch (error) {
notify.notifyError(error, AnalyticsErrorEventSource.BUCKET_CREATION_NAME_STEP); notify.notifyError(error, AnalyticsErrorEventSource.CREATE_BUCKET_MODAL);
} finally { } finally {
bucketNamesLoading.value = false; bucketNamesLoading.value = false;
} }

9
web/satellite/src/components/modals/CreateProjectModal.vue
View File

@ -66,7 +66,6 @@ import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { ProjectFields } from '@/types/projects'; import { ProjectFields } from '@/types/projects';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
@ -74,12 +73,14 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
const analyticsStore = useAnalyticsStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
@ -87,8 +88,6 @@ const usersStore = useUsersStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const description = ref<string>(''); const description = ref<string>('');
const createdProjectId = ref<string>(''); const createdProjectId = ref<string>('');
const projectName = ref<string>(''); const projectName = ref<string>('');
@ -130,7 +129,7 @@ async function onCreateProjectClick(): Promise<void> {
} catch (error) { } catch (error) {
isLoading.value = false; isLoading.value = false;
nameError.value = error.message; nameError.value = error.message;
analytics.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL); analyticsStore.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
return; return;
} }
@ -156,7 +155,7 @@ async function onCreateProjectClick(): Promise<void> {
appStore.updateActiveModal(MODALS.createProjectPassphrase); appStore.updateActiveModal(MODALS.createProjectPassphrase);
} }
analytics.pageVisit(RouteConfig.ProjectDashboard.path); analyticsStore.pageVisit(RouteConfig.ProjectDashboard.path);
await router.push(RouteConfig.ProjectDashboard.path); await router.push(RouteConfig.ProjectDashboard.path);
} }

11
web/satellite/src/components/modals/DeleteBucketModal.vue
View File

@ -32,7 +32,6 @@
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref } from 'vue';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants'; import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
@ -40,13 +39,13 @@ import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore, FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore'; import { useBucketsStore, FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
@ -90,7 +89,7 @@ async function onDelete(): Promise<void> {
const now = new Date(); const now = new Date();
const inOneHour = new Date(now.setHours(now.getHours() + 1)); const inOneHour = new Date(now.setHours(now.getHours() + 1));
await worker.value.postMessage({ worker.value.postMessage({
'type': 'SetPermission', 'type': 'SetPermission',
'isDownload': false, 'isDownload': false,
'isUpload': false, 'isUpload': false,
@ -107,7 +106,7 @@ async function onDelete(): Promise<void> {
} }
}); });
if (grantEvent.data.error) { if (grantEvent.data.error) {
await notify.error(grantEvent.data.error, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL); notify.error(grantEvent.data.error, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);
return; return;
} }
@ -137,7 +136,7 @@ async function onDelete(): Promise<void> {
const edgeCredentials: EdgeCredentials = await agStore.getEdgeCredentials(accessGrant); const edgeCredentials: EdgeCredentials = await agStore.getEdgeCredentials(accessGrant);
bucketsStore.setEdgeCredentialsForDelete(edgeCredentials); bucketsStore.setEdgeCredentialsForDelete(edgeCredentials);
await bucketsStore.deleteBucket(name.value); await bucketsStore.deleteBucket(name.value);
analytics.eventTriggered(AnalyticsEvent.BUCKET_DELETED); analyticsStore.eventTriggered(AnalyticsEvent.BUCKET_DELETED);
await fetchBuckets(); await fetchBuckets();
} catch (error) { } catch (error) {
notify.notifyError(error, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL); notify.notifyError(error, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);

9
web/satellite/src/components/modals/EditProfileModal.vue
View File

@ -43,27 +43,26 @@
import { computed, reactive, ref } from 'vue'; import { computed, reactive, ref } from 'vue';
import { UpdatedUser } from '@/types/users'; import { UpdatedUser } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const userStore = useUsersStore(); const userStore = useUsersStore();
const notify = useNotify(); const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const userInfo = reactive<UpdatedUser>(new UpdatedUser(userStore.state.user.fullName, userStore.state.user.shortName)); const userInfo = reactive<UpdatedUser>(new UpdatedUser(userStore.state.user.fullName, userStore.state.user.shortName));
const fullNameError = ref<string>(''); const fullNameError = ref<string>('');
/** /**
* Returns first letter of user name. * Returns first letter of username.
*/ */
const avatarLetter = computed((): string => { const avatarLetter = computed((): string => {
return userStore.userName.slice(0, 1).toUpperCase(); return userStore.userName.slice(0, 1).toUpperCase();
@ -95,7 +94,7 @@ async function onUpdateClick(): Promise<void> {
return; return;
} }
analytics.eventTriggered(AnalyticsEvent.PROFILE_UPDATED); analyticsStore.eventTriggered(AnalyticsEvent.PROFILE_UPDATED);
notify.success('Account info successfully updated!'); notify.success('Account info successfully updated!');

11
web/satellite/src/components/modals/EnableMFAModal.vue
View File

@ -80,24 +80,23 @@
import QRCode from 'qrcode'; import QRCode from 'qrcode';
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue'; import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
const notify = useNotify(); const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const isScan = ref<boolean>(true); const isScan = ref<boolean>(true);
const isEnable = ref<boolean>(false); const isEnable = ref<boolean>(false);
const isCodes = ref<boolean>(false); const isCodes = ref<boolean>(false);
@ -178,8 +177,8 @@ async function enable(): Promise<void> {
await usersStore.getUser(); await usersStore.getUser();
await showCodes(); await showCodes();
analytics.eventTriggered(AnalyticsEvent.MFA_ENABLED); analyticsStore.eventTriggered(AnalyticsEvent.MFA_ENABLED);
await notify.success('MFA was enabled successfully'); notify.success('MFA was enabled successfully');
} catch (error) { } catch (error) {
notify.notifyError(error, AnalyticsErrorEventSource.ENABLE_MFA_MODAL); notify.notifyError(error, AnalyticsErrorEventSource.ENABLE_MFA_MODAL);
isError.value = true; isError.value = true;
@ -196,7 +195,7 @@ onMounted(async (): Promise<void> => {
try { try {
await QRCode.toCanvas(canvas.value, qrLink); await QRCode.toCanvas(canvas.value, qrLink);
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.ENABLE_MFA_MODAL); notify.error(error.message, AnalyticsErrorEventSource.ENABLE_MFA_MODAL);
} }
}); });
</script> </script>

8
web/satellite/src/components/modals/EnterBucketPassphraseModal.vue
View File

@ -66,13 +66,13 @@ import { computed, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { Bucket } from '@/types/buckets'; import { Bucket } from '@/types/buckets';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
@ -82,6 +82,7 @@ import VLoader from '@/components/common/VLoader.vue';
import AccessEncryptionIcon from '@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg'; import AccessEncryptionIcon from '@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg';
import OpenWarningIcon from '@/../static/images/objects/openWarning.svg'; import OpenWarningIcon from '@/../static/images/objects/openWarning.svg';
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
@ -89,7 +90,6 @@ const router = useRouter();
const notify = useNotify(); const notify = useNotify();
const NUMBER_OF_DISPLAYED_OBJECTS = 1000; const NUMBER_OF_DISPLAYED_OBJECTS = 1000;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const enterError = ref<string>(''); const enterError = ref<string>('');
const passphrase = ref<string>(''); const passphrase = ref<string>('');
@ -121,7 +121,7 @@ async function onContinue(): Promise<void> {
if (isLoading.value) return; if (isLoading.value) return;
const callback = bucketsStore.state.enterPassphraseCallback || ((): void => { const callback = bucketsStore.state.enterPassphraseCallback || ((): void => {
analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path); analyticsStore.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path); router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
}); });
@ -136,7 +136,7 @@ async function onContinue(): Promise<void> {
if (!passphrase.value) { if (!passphrase.value) {
enterError.value = 'Passphrase can\'t be empty'; enterError.value = 'Passphrase can\'t be empty';
analytics.errorEventTriggered(AnalyticsErrorEventSource.OPEN_BUCKET_MODAL); analyticsStore.errorEventTriggered(AnalyticsErrorEventSource.OPEN_BUCKET_MODAL);
return; return;
} }

13
web/satellite/src/components/modals/EnterPassphraseModal.vue
View File

@ -47,23 +47,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import AccessEncryptionIcon from '../../../static/images/accessGrants/newCreateFlow/accessEncryption.svg';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import AccessEncryptionIcon from '@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg';
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const enterError = ref<string>(''); const enterError = ref<string>('');
const passphrase = ref<string>(''); const passphrase = ref<string>('');
@ -73,12 +72,12 @@ const passphrase = ref<string>('');
function onContinue(): void { function onContinue(): void {
if (!passphrase.value) { if (!passphrase.value) {
enterError.value = 'Passphrase can\'t be empty'; enterError.value = 'Passphrase can\'t be empty';
analytics.errorEventTriggered(AnalyticsErrorEventSource.OPEN_BUCKET_MODAL); analyticsStore.errorEventTriggered(AnalyticsErrorEventSource.OPEN_BUCKET_MODAL);
return; return;
} }
analytics.eventTriggered(AnalyticsEvent.PASSPHRASE_CREATED, { analyticsStore.eventTriggered(AnalyticsEvent.PASSPHRASE_CREATED, {
method: 'enter', method: 'enter',
}); });

9
web/satellite/src/components/modals/JoinProjectModal.vue
View File

@ -48,23 +48,22 @@ import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { ProjectInvitation, ProjectInvitationResponse } from '@/types/projects'; import { ProjectInvitation, ProjectInvitationResponse } from '@/types/projects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import Icon from '@/../static/images/modals/boxesIcon.svg'; import Icon from '@/../static/images/modals/boxesIcon.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const isLoading = ref<boolean>(false); const isLoading = ref<boolean>(false);
/** /**
@ -86,7 +85,7 @@ async function respondToInvitation(response: ProjectInvitationResponse): Promise
let success = false; let success = false;
try { try {
await projectsStore.respondToInvitation(invite.value.projectID, response); await projectsStore.respondToInvitation(invite.value.projectID, response);
analytics.eventTriggered(accepted ? AnalyticsEvent.PROJECT_INVITATION_ACCEPTED : AnalyticsEvent.PROJECT_INVITATION_DECLINED); analyticsStore.eventTriggered(accepted ? AnalyticsEvent.PROJECT_INVITATION_ACCEPTED : AnalyticsEvent.PROJECT_INVITATION_DECLINED);
success = true; success = true;
} catch (error) { } catch (error) {
const action = accepted ? 'accept' : 'decline'; const action = accepted ? 'accept' : 'decline';
@ -112,7 +111,7 @@ async function respondToInvitation(response: ProjectInvitationResponse): Promise
LocalData.setSelectedProjectId(invite.value.projectID); LocalData.setSelectedProjectId(invite.value.projectID);
notify.success('Invite accepted!'); notify.success('Invite accepted!');
analytics.pageVisit(RouteConfig.ProjectDashboard.path); analyticsStore.pageVisit(RouteConfig.ProjectDashboard.path);
router.push(RouteConfig.ProjectDashboard.path); router.push(RouteConfig.ProjectDashboard.path);
} }

8
web/satellite/src/components/modals/NewBillingAddCouponCodeModal.vue
View File

@ -15,25 +15,23 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import NewBillingAddCouponCodeInput from '@/components/common/NewBillingAddCouponCodeInput.vue'; import NewBillingAddCouponCodeInput from '@/components/common/NewBillingAddCouponCodeInput.vue';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import CouponIcon from '@/../static/images/account/billing/greenCoupon.svg'; import CouponIcon from '@/../static/images/account/billing/greenCoupon.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Closes add coupon modal. * Closes add coupon modal.
*/ */
function onCloseClick(): void { function onCloseClick(): void {
analytics.eventTriggered(AnalyticsEvent.COUPON_CODE_APPLIED); analyticsStore.eventTriggered(AnalyticsEvent.COUPON_CODE_APPLIED);
appStore.removeActiveModal(); appStore.removeActiveModal();
} }
</script> </script>

13
web/satellite/src/components/modals/NewCreateProjectModal.vue
View File

@ -81,7 +81,6 @@ import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { ProjectFields } from '@/types/projects'; import { ProjectFields } from '@/types/projects';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
@ -91,6 +90,7 @@ import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
@ -99,6 +99,7 @@ import VButton from '@/components/common/VButton.vue';
import BlueBoxIcon from '@/../static/images/common/blueBox.svg'; import BlueBoxIcon from '@/../static/images/common/blueBox.svg';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
@ -115,8 +116,6 @@ const isLoading = ref(false);
const projectName = ref(''); const projectName = ref('');
const nameError = ref(''); const nameError = ref('');
const analytics = new AnalyticsHttpApi();
/** /**
* Sets project name from input value. * Sets project name from input value.
*/ */
@ -154,7 +153,7 @@ async function onCreateProjectClick(): Promise<void> {
} catch (error) { } catch (error) {
isLoading.value = false; isLoading.value = false;
nameError.value = error.message; nameError.value = error.message;
analytics.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL); analyticsStore.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
return; return;
} }
@ -178,13 +177,13 @@ async function onCreateProjectClick(): Promise<void> {
bucketsStore.clearS3Data(); bucketsStore.clearS3Data();
if (usersStore.shouldOnboard && configStore.state.config.allProjectsDashboard) { if (usersStore.shouldOnboard && configStore.state.config.allProjectsDashboard) {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
return; return;
} }
analytics.pageVisit(RouteConfig.ProjectDashboard.path); analyticsStore.pageVisit(RouteConfig.ProjectDashboard.path);
router.push(RouteConfig.ProjectDashboard.path); await router.push(RouteConfig.ProjectDashboard.path);
if (usersStore.state.settings.passphrasePrompt) { if (usersStore.state.settings.passphrasePrompt) {
appStore.updateActiveModal(MODALS.enterPassphrase); appStore.updateActiveModal(MODALS.enterPassphrase);

7
web/satellite/src/components/modals/ObjectDetailsModal.vue
View File

@ -122,7 +122,7 @@ import { useNotify } from '@/utils/hooks';
import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useLinksharing } from '@/composables/useLinksharing'; import { useLinksharing } from '@/composables/useLinksharing';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -131,8 +131,7 @@ import VLoader from '@/components/common/VLoader.vue';
import ErrorNoticeIcon from '@/../static/images/common/errorNotice.svg?url'; import ErrorNoticeIcon from '@/../static/images/common/errorNotice.svg?url';
import PlaceholderImage from '@/../static/images/browser/placeholder.svg'; import PlaceholderImage from '@/../static/images/browser/placeholder.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const obStore = useObjectBrowserStore(); const obStore = useObjectBrowserStore();
const notify = useNotify(); const notify = useNotify();
@ -303,7 +302,7 @@ async function copy(): Promise<void> {
* Get the share link of the current opened file. * Get the share link of the current opened file.
*/ */
async function getSharedLink(): Promise<void> { async function getSharedLink(): Promise<void> {
analytics.eventTriggered(AnalyticsEvent.LINK_SHARED); analyticsStore.eventTriggered(AnalyticsEvent.LINK_SHARED);
try { try {
objectLink.value = await generateFileOrFolderShareURL(filePath.value); objectLink.value = await generateFileOrFolderShareURL(filePath.value);
} catch (error) { } catch (error) {

10
web/satellite/src/components/modals/RemoveProjectMemberModal.vue
View File

@ -56,7 +56,6 @@ import { computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { Project } from '@/types/projects'; import { Project } from '@/types/projects';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
@ -65,6 +64,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore'; import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useLoading } from '@/composables/useLoading'; import { useLoading } from '@/composables/useLoading';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -72,6 +72,8 @@ import VButton from '@/components/common/VButton.vue';
import TeamMemberIcon from '@/../static/images/team/teamMember.svg'; import TeamMemberIcon from '@/../static/images/team/teamMember.svg';
const FIRST_PAGE = 1; const FIRST_PAGE = 1;
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
@ -80,8 +82,6 @@ const notify = useNotify();
const router = useRouter(); const router = useRouter();
const { isLoading, withLoading } = useLoading(); const { isLoading, withLoading } = useLoading();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const firstThreeSelected = computed((): string[] => { const firstThreeSelected = computed((): string[] => {
return pmStore.state.selectedProjectMembersEmails.slice(0, 3); return pmStore.state.selectedProjectMembersEmails.slice(0, 3);
}); });
@ -95,8 +95,8 @@ async function setProjectState(): Promise<void> {
if (!projects.length) { if (!projects.length) {
const onboardingPath = RouteConfig.OnboardingTour.with(configStore.firstOnboardingStep).path; const onboardingPath = RouteConfig.OnboardingTour.with(configStore.firstOnboardingStep).path;
analytics.pageVisit(onboardingPath); analyticsStore.pageVisit(onboardingPath);
router.push(onboardingPath); await router.push(onboardingPath);
return; return;
} }

7
web/satellite/src/components/modals/ShareModal.vue
View File

@ -54,9 +54,9 @@ import { useAppStore } from '@/store/modules/appStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useLinksharing } from '@/composables/useLinksharing'; import { useLinksharing } from '@/composables/useLinksharing';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { ShareType } from '@/types/browser'; import { ShareType } from '@/types/browser';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
@ -71,8 +71,7 @@ enum ButtonStates {
Copied, Copied,
} }
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const obStore = useObjectBrowserStore(); const obStore = useObjectBrowserStore();
const { generateFileOrFolderShareURL, generateBucketShareURL } = useLinksharing(); const { generateFileOrFolderShareURL, generateBucketShareURL } = useLinksharing();
@ -118,7 +117,7 @@ function closeModal(): void {
} }
onMounted(async (): Promise<void> => { onMounted(async (): Promise<void> => {
analytics.eventTriggered(AnalyticsEvent.LINK_SHARED); analyticsStore.eventTriggered(AnalyticsEvent.LINK_SHARED);
try { try {
if (shareType.value === ShareType.Bucket) { if (shareType.value === ShareType.Bucket) {
link.value = await generateBucketShareURL(); link.value = await generateBucketShareURL();

11
web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue
View File

@ -47,7 +47,7 @@ import { EdgeCredentials } from '@/types/accessGrants';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import SelectPassphraseModeStep from '@/components/modals/createProjectPassphrase/SelectPassphraseModeStep.vue'; import SelectPassphraseModeStep from '@/components/modals/createProjectPassphrase/SelectPassphraseModeStep.vue';
@ -67,15 +67,14 @@ enum CreatePassphraseOption {
Enter = 'Enter', Enter = 'Enter',
} }
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const generatedPassphrase: string = generateMnemonic();
const generatedPassphrase = generateMnemonic();
const selectedOption = ref<CreatePassphraseOption>(CreatePassphraseOption.Generate); const selectedOption = ref<CreatePassphraseOption>(CreatePassphraseOption.Generate);
const activeStep = ref<CreateProjectPassphraseStep>(CreateProjectPassphraseStep.SelectMode); const activeStep = ref<CreateProjectPassphraseStep>(CreateProjectPassphraseStep.SelectMode);
@ -139,7 +138,7 @@ async function onContinue(): Promise<void> {
return; return;
} }
analytics.eventTriggered(AnalyticsEvent.PASSPHRASE_CREATED, { analyticsStore.eventTriggered(AnalyticsEvent.PASSPHRASE_CREATED, {
method: selectedOption.value === CreatePassphraseOption.Enter ? 'enter' : 'generate', method: selectedOption.value === CreatePassphraseOption.Enter ? 'enter' : 'generate',
}); });
@ -154,7 +153,7 @@ async function onContinue(): Promise<void> {
if (activeStep.value === CreateProjectPassphraseStep.Success) { if (activeStep.value === CreateProjectPassphraseStep.Success) {
if (route.name === RouteConfig.OverviewStep.name) { if (route.name === RouteConfig.OverviewStep.name) {
router.push(RouteConfig.ProjectDashboard.path); await router.push(RouteConfig.ProjectDashboard.path);
} }
closeModal(); closeModal();

3
web/satellite/src/components/modals/objectUpload/UploadItem.vue
View File

@ -55,7 +55,6 @@ import {
FailedUploadMessage, FailedUploadMessage,
useObjectBrowserStore, useObjectBrowserStore,
} from '@/store/modules/objectBrowserStore'; } from '@/store/modules/objectBrowserStore';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { ObjectType } from '@/utils/objectIcon'; import { ObjectType } from '@/utils/objectIcon';
@ -67,8 +66,6 @@ import CheckIcon from '@/../static/images/modals/objectUpload/check.svg';
import FailedIcon from '@/../static/images/modals/objectUpload/failed.svg'; import FailedIcon from '@/../static/images/modals/objectUpload/failed.svg';
import InfoIcon from '@/../static/images/modals/objectUpload/info.svg'; import InfoIcon from '@/../static/images/modals/objectUpload/info.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const obStore = useObjectBrowserStore(); const obStore = useObjectBrowserStore();
const notify = useNotify(); const notify = useNotify();

7
web/satellite/src/components/modals/upgradeAccountFlow/AddCreditCardStep.vue
View File

@ -39,7 +39,7 @@ import { useNotify } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore'; import { useBillingStore } from '@/store/modules/billingStore';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import UpgradeAccountWrapper from '@/components/modals/upgradeAccountFlow/UpgradeAccountWrapper.vue'; import UpgradeAccountWrapper from '@/components/modals/upgradeAccountFlow/UpgradeAccountWrapper.vue';
import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue'; import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue';
@ -49,6 +49,7 @@ interface StripeForm {
onSubmit(): Promise<void>; onSubmit(): Promise<void>;
} }
const analyticsStore = useAnalyticsStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
const billingStore = useBillingStore(); const billingStore = useBillingStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
@ -60,8 +61,6 @@ const props = defineProps<{
setSuccess: () => void; setSuccess: () => void;
}>(); }>();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const stripeCardInput = ref<typeof StripeCardInput & StripeForm | null>(null); const stripeCardInput = ref<typeof StripeCardInput & StripeForm | null>(null);
@ -101,7 +100,7 @@ async function addCardToDB(token: string): Promise<void> {
await billingStore.getCreditCards(); await billingStore.getCreditCards();
} }
analytics.eventTriggered(AnalyticsEvent.MODAL_ADD_CARD); analyticsStore.eventTriggered(AnalyticsEvent.MODAL_ADD_CARD);
loading.value = false; loading.value = false;
props.setSuccess(); props.setSuccess();

7
web/satellite/src/components/modals/upgradeAccountFlow/UpgradeAccountModal.vue
View File

@ -41,8 +41,8 @@ import { useBillingStore } from '@/store/modules/billingStore';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { PaymentsHttpApi } from '@/api/payments'; import { PaymentsHttpApi } from '@/api/payments';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import UpgradeInfoStep from '@/components/modals/upgradeAccountFlow/UpgradeInfoStep.vue'; import UpgradeInfoStep from '@/components/modals/upgradeAccountFlow/UpgradeInfoStep.vue';
@ -61,6 +61,7 @@ enum UpgradeAccountStep {
PricingPlan = 'pricingPlanStep', PricingPlan = 'pricingPlanStep',
} }
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
@ -68,8 +69,6 @@ const billingStore = useBillingStore();
const notify = useNotify(); const notify = useNotify();
const payments: PaymentsHttpApi = new PaymentsHttpApi(); const payments: PaymentsHttpApi = new PaymentsHttpApi();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const step = ref<UpgradeAccountStep>(UpgradeAccountStep.Info); const step = ref<UpgradeAccountStep>(UpgradeAccountStep.Info);
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
@ -84,7 +83,7 @@ async function onAddTokens(): Promise<void> {
try { try {
await billingStore.claimWallet(); await billingStore.claimWallet();
analytics.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED);
setStep(UpgradeAccountStep.AddTokens); setStep(UpgradeAccountStep.AddTokens);
} catch (error) { } catch (error) {

14
web/satellite/src/components/navigation/AccountArea.vue
View File

@ -58,7 +58,6 @@ import { useRoute, useRouter } from 'vue-router';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps'; import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
@ -73,6 +72,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore'; import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import BillingIcon from '@/../static/images/navigation/billing.svg'; import BillingIcon from '@/../static/images/navigation/billing.svg';
import InfoIcon from '@/../static/images/navigation/info.svg'; import InfoIcon from '@/../static/images/navigation/info.svg';
@ -100,9 +100,9 @@ const usersStore = useUsersStore();
const abTestingStore = useABTestingStore(); const abTestingStore = useABTestingStore();
const pmStore = useProjectMembersStore(); const pmStore = useProjectMembersStore();
const notificationsStore = useNotificationsStore(); const notificationsStore = useNotificationsStore();
const analyticsStore = useAnalyticsStore();
const auth: AuthHttpApi = new AuthHttpApi(); const auth: AuthHttpApi = new AuthHttpApi();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const dropdownYPos = ref<number>(0); const dropdownYPos = ref<number>(0);
const dropdownXPos = ref<number>(0); const dropdownXPos = ref<number>(0);
@ -154,7 +154,7 @@ function navigateToBilling(): void {
if (route.path.includes(RouteConfig.Billing.path)) return; if (route.path.includes(RouteConfig.Billing.path)) return;
router.push(RouteConfig.Account.with(RouteConfig.Billing).with(RouteConfig.BillingOverview).path); router.push(RouteConfig.Account.with(RouteConfig.Billing).with(RouteConfig.BillingOverview).path);
analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Billing).with(RouteConfig.BillingOverview).path); analyticsStore.pageVisit(RouteConfig.Account.with(RouteConfig.Billing).with(RouteConfig.BillingOverview).path);
} }
/** /**
@ -162,7 +162,7 @@ function navigateToBilling(): void {
*/ */
function navigateToSettings(): void { function navigateToSettings(): void {
closeDropdown(); closeDropdown();
analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Settings).path); analyticsStore.pageVisit(RouteConfig.Account.with(RouteConfig.Settings).path);
router.push(RouteConfig.Account.with(RouteConfig.Settings).path).catch(() => {return;}); router.push(RouteConfig.Account.with(RouteConfig.Settings).path).catch(() => {return;});
} }
@ -170,8 +170,8 @@ function navigateToSettings(): void {
* Logouts user and navigates to login page. * Logouts user and navigates to login page.
*/ */
async function onLogout(): Promise<void> { async function onLogout(): Promise<void> {
analytics.pageVisit(RouteConfig.Login.path); analyticsStore.pageVisit(RouteConfig.Login.path);
router.push(RouteConfig.Login.path); await router.push(RouteConfig.Login.path);
await Promise.all([ await Promise.all([
pmStore.clear(), pmStore.clear(),
@ -188,7 +188,7 @@ async function onLogout(): Promise<void> {
]); ]);
try { try {
await analytics.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED);
await auth.logout(); await auth.logout();
} catch (error) { } catch (error) {
notify.notifyError(error, AnalyticsErrorEventSource.NAVIGATION_ACCOUNT_AREA); notify.notifyError(error, AnalyticsErrorEventSource.NAVIGATION_ACCOUNT_AREA);

30
web/satellite/src/components/navigation/MobileNavigation.vue
View File

@ -208,7 +208,6 @@ import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { NavigationLink } from '@/types/navigation'; import { NavigationLink } from '@/types/navigation';
import { Project } from '@/types/projects'; import { Project } from '@/types/projects';
@ -228,6 +227,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore'; import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue'; import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue'; import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
@ -266,6 +266,7 @@ const navigation: NavigationLink[] = [
RouteConfig.Team.withIcon(UsersIcon), RouteConfig.Team.withIcon(UsersIcon),
]; ];
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
@ -282,7 +283,6 @@ const router = useRouter();
const route = useRoute(); const route = useRoute();
const notify = useNotify(); const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const auth: AuthHttpApi = new AuthHttpApi(); const auth: AuthHttpApi = new AuthHttpApi();
const isResourcesDropdownShown = ref<boolean>(false); const isResourcesDropdownShown = ref<boolean>(false);
@ -420,14 +420,14 @@ function toggleAccountDropdown(): void {
* Sends new path click event to segment. * Sends new path click event to segment.
*/ */
function trackClickEvent(path: string): void { function trackClickEvent(path: string): void {
analytics.pageVisit(path); analyticsStore.pageVisit(path);
} }
/** /**
* Route to all projects page. * Route to all projects page.
*/ */
function onAllProjectsClick(): void { function onAllProjectsClick(): void {
analytics.pageVisit(RouteConfig.AllProjectsDashboard.path); analyticsStore.pageVisit(RouteConfig.AllProjectsDashboard.path);
router.push(RouteConfig.AllProjectsDashboard.path); router.push(RouteConfig.AllProjectsDashboard.path);
toggleProjectDropdown(); toggleProjectDropdown();
} }
@ -436,7 +436,7 @@ function onAllProjectsClick(): void {
* Route to project details page. * Route to project details page.
*/ */
function onProjectDetailsClick(): void { function onProjectDetailsClick(): void {
analytics.pageVisit(RouteConfig.EditProjectDetails.path); analyticsStore.pageVisit(RouteConfig.EditProjectDetails.path);
router.push(RouteConfig.EditProjectDetails.path); router.push(RouteConfig.EditProjectDetails.path);
toggleProjectDropdown(); toggleProjectDropdown();
} }
@ -470,7 +470,7 @@ async function onProjectClick(): Promise<void> {
* @param projectID * @param projectID
*/ */
async function onProjectSelected(projectID: string): Promise<void> { async function onProjectSelected(projectID: string): Promise<void> {
analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS); analyticsStore.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
projectsStore.selectProject(projectID); projectsStore.selectProject(projectID);
LocalData.setSelectedProjectId(projectID); LocalData.setSelectedProjectId(projectID);
pmStore.setSearchQuery(''); pmStore.setSearchQuery('');
@ -479,7 +479,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
if (isBucketsView.value) { if (isBucketsView.value) {
bucketsStore.clear(); bucketsStore.clear();
analytics.pageVisit(RouteConfig.Buckets.path); analyticsStore.pageVisit(RouteConfig.Buckets.path);
await router.push(RouteConfig.Buckets.path).catch(() => {return; }); await router.push(RouteConfig.Buckets.path).catch(() => {return; });
} }
@ -502,8 +502,8 @@ async function onProjectSelected(projectID: string): Promise<void> {
*/ */
function onProjectsLinkClick(): void { function onProjectsLinkClick(): void {
if (route.name !== RouteConfig.ProjectsList.name) { if (route.name !== RouteConfig.ProjectsList.name) {
analytics.pageVisit(RouteConfig.ProjectsList.path); analyticsStore.pageVisit(RouteConfig.ProjectsList.path);
analytics.eventTriggered(AnalyticsEvent.MANAGE_PROJECTS_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.MANAGE_PROJECTS_CLICKED);
router.push(RouteConfig.ProjectsList.path); router.push(RouteConfig.ProjectsList.path);
} }
@ -515,7 +515,7 @@ function onProjectsLinkClick(): void {
*/ */
function onCreateLinkClick(): void { function onCreateLinkClick(): void {
if (route.name !== RouteConfig.CreateProject.name) { if (route.name !== RouteConfig.CreateProject.name) {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = usersStore.state.user; const user: User = usersStore.state.user;
const ownProjectsCount: number = projectsStore.projectsCount(user.id); const ownProjectsCount: number = projectsStore.projectsCount(user.id);
@ -523,7 +523,7 @@ function onCreateLinkClick(): void {
if (!user.paidTier || user.projectLimit === ownProjectsCount) { if (!user.paidTier || user.projectLimit === ownProjectsCount) {
appStore.updateActiveModal(MODALS.createProjectPrompt); appStore.updateActiveModal(MODALS.createProjectPrompt);
} else { } else {
analytics.pageVisit(RouteConfig.CreateProject.path); analyticsStore.pageVisit(RouteConfig.CreateProject.path);
appStore.updateActiveModal(MODALS.newCreateProject); appStore.updateActiveModal(MODALS.newCreateProject);
} }
} }
@ -548,7 +548,7 @@ function navigateToBilling(): void {
const link = RouteConfig.Account.with(RouteConfig.Billing.with(RouteConfig.BillingOverview)); const link = RouteConfig.Account.with(RouteConfig.Billing.with(RouteConfig.BillingOverview));
router.push(link.path); router.push(link.path);
analytics.pageVisit(link.path); analyticsStore.pageVisit(link.path);
} }
/** /**
@ -556,7 +556,7 @@ function navigateToBilling(): void {
*/ */
function navigateToSettings(): void { function navigateToSettings(): void {
isOpened.value = false; isOpened.value = false;
analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Settings).path); analyticsStore.pageVisit(RouteConfig.Account.with(RouteConfig.Settings).path);
router.push(RouteConfig.Account.with(RouteConfig.Settings).path).catch(() => {return;}); router.push(RouteConfig.Account.with(RouteConfig.Settings).path).catch(() => {return;});
} }
@ -564,7 +564,7 @@ function navigateToSettings(): void {
* Logouts user and navigates to login page. * Logouts user and navigates to login page.
*/ */
async function onLogout(): Promise<void> { async function onLogout(): Promise<void> {
analytics.pageVisit(RouteConfig.Login.path); analyticsStore.pageVisit(RouteConfig.Login.path);
await router.push(RouteConfig.Login.path); await router.push(RouteConfig.Login.path);
await Promise.all([ await Promise.all([
@ -582,7 +582,7 @@ async function onLogout(): Promise<void> {
]); ]);
try { try {
analytics.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED);
await auth.logout(); await auth.logout();
} catch (error) { } catch (error) {
notify.notifyError(error, AnalyticsErrorEventSource.MOBILE_NAVIGATION); notify.notifyError(error, AnalyticsErrorEventSource.MOBILE_NAVIGATION);

6
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -83,12 +83,12 @@
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'; import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { NavigationLink } from '@/types/navigation'; import { NavigationLink } from '@/types/navigation';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps'; import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import ProjectSelection from '@/components/navigation/ProjectSelection.vue'; import ProjectSelection from '@/components/navigation/ProjectSelection.vue';
import GuidesDropdown from '@/components/navigation/GuidesDropdown.vue'; import GuidesDropdown from '@/components/navigation/GuidesDropdown.vue';
@ -106,13 +106,13 @@ import ResourcesIcon from '@/../static/images/navigation/resources.svg';
import QuickStartIcon from '@/../static/images/navigation/quickStart.svg'; import QuickStartIcon from '@/../static/images/navigation/quickStart.svg';
import ArrowIcon from '@/../static/images/navigation/arrowExpandRight.svg'; import ArrowIcon from '@/../static/images/navigation/arrowExpandRight.svg';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const TWENTY_PIXELS = 20; const TWENTY_PIXELS = 20;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const navigation: NavigationLink[] = [ const navigation: NavigationLink[] = [
RouteConfig.ProjectDashboard.withIcon(DashboardIcon), RouteConfig.ProjectDashboard.withIcon(DashboardIcon),
RouteConfig.Buckets.withIcon(BucketsIcon), RouteConfig.Buckets.withIcon(BucketsIcon),
@ -256,7 +256,7 @@ function trackClickEvent(path: string): void {
if (path === '/account/billing') { if (path === '/account/billing') {
routeToOverview(); routeToOverview();
} else { } else {
analytics.pageVisit(path); analyticsStore.pageVisit(path);
} }
} }

24
web/satellite/src/components/navigation/ProjectSelection.vue
View File

@ -106,7 +106,6 @@
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
@ -122,6 +121,7 @@ import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
@ -133,6 +133,7 @@ import ManageIcon from '@/../static/images/navigation/manage.svg';
import CreateProjectIcon from '@/../static/images/navigation/createProject.svg'; import CreateProjectIcon from '@/../static/images/navigation/createProject.svg';
import SettingsIcon from '@/../static/images/navigation/settings.svg'; import SettingsIcon from '@/../static/images/navigation/settings.svg';
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const agStore = useAccessGrantsStore(); const agStore = useAccessGrantsStore();
@ -146,7 +147,6 @@ const router = useRouter();
const route = useRoute(); const route = useRoute();
const FIRST_PAGE = 1; const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const dropdownYPos = ref<number>(0); const dropdownYPos = ref<number>(0);
const dropdownXPos = ref<number>(0); const dropdownXPos = ref<number>(0);
@ -228,7 +228,7 @@ function compareProjects(a: Project, b: Project) {
} }
/** /**
* Fetches projects related information and than toggles selection popup. * Fetches projects related information and then toggles selection popup.
*/ */
async function toggleSelection(): Promise<void> { async function toggleSelection(): Promise<void> {
if (isOnboardingTour.value || !projectSelection.value) return; if (isOnboardingTour.value || !projectSelection.value) return;
@ -269,7 +269,7 @@ function toggleDropdown(): void {
* @param projectID * @param projectID
*/ */
async function onProjectSelected(projectID: string): Promise<void> { async function onProjectSelected(projectID: string): Promise<void> {
analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS); analyticsStore.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
projectsStore.selectProject(projectID); projectsStore.selectProject(projectID);
LocalData.setSelectedProjectId(projectID); LocalData.setSelectedProjectId(projectID);
pmStore.setSearchQuery(''); pmStore.setSearchQuery('');
@ -311,7 +311,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
try { try {
await agStore.getAccessGrants(FIRST_PAGE, projectID); await agStore.getAccessGrants(FIRST_PAGE, projectID);
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.NAVIGATION_PROJECT_SELECTION); notify.error(error.message, AnalyticsErrorEventSource.NAVIGATION_PROJECT_SELECTION);
} }
return; return;
@ -321,7 +321,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
try { try {
await pmStore.getProjectMembers(FIRST_PAGE, selectedProject.value.id); await pmStore.getProjectMembers(FIRST_PAGE, selectedProject.value.id);
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.NAVIGATION_PROJECT_SELECTION); notify.error(error.message, AnalyticsErrorEventSource.NAVIGATION_PROJECT_SELECTION);
} }
} }
} }
@ -338,8 +338,8 @@ function closeDropdown(): void {
*/ */
function onProjectsLinkClick(): void { function onProjectsLinkClick(): void {
if (route.name !== RouteConfig.ProjectsList.name) { if (route.name !== RouteConfig.ProjectsList.name) {
analytics.pageVisit(RouteConfig.ProjectsList.path); analyticsStore.pageVisit(RouteConfig.ProjectsList.path);
analytics.eventTriggered(AnalyticsEvent.MANAGE_PROJECTS_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.MANAGE_PROJECTS_CLICKED);
router.push(RouteConfig.ProjectsList.path); router.push(RouteConfig.ProjectsList.path);
} }
@ -350,7 +350,7 @@ function onProjectsLinkClick(): void {
* Route to all projects page. * Route to all projects page.
*/ */
function onAllProjectsClick(): void { function onAllProjectsClick(): void {
analytics.pageVisit(RouteConfig.AllProjectsDashboard.path); analyticsStore.pageVisit(RouteConfig.AllProjectsDashboard.path);
router.push(RouteConfig.AllProjectsDashboard.path); router.push(RouteConfig.AllProjectsDashboard.path);
closeDropdown(); closeDropdown();
} }
@ -359,7 +359,7 @@ function onAllProjectsClick(): void {
* Route to project details page. * Route to project details page.
*/ */
function onProjectDetailsClick(): void { function onProjectDetailsClick(): void {
analytics.pageVisit(RouteConfig.EditProjectDetails.path); analyticsStore.pageVisit(RouteConfig.EditProjectDetails.path);
router.push(RouteConfig.EditProjectDetails.path); router.push(RouteConfig.EditProjectDetails.path);
closeDropdown(); closeDropdown();
} }
@ -378,13 +378,13 @@ function onManagePassphraseClick(): void {
*/ */
function onCreateLinkClick(): void { function onCreateLinkClick(): void {
if (route.name !== RouteConfig.CreateProject.name) { if (route.name !== RouteConfig.CreateProject.name) {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = userStore.state.user; const user: User = userStore.state.user;
const ownProjectsCount: number = projectsStore.projectsCount(user.id); const ownProjectsCount: number = projectsStore.projectsCount(user.id);
if (user.projectLimit > ownProjectsCount) { if (user.projectLimit > ownProjectsCount) {
analytics.pageVisit(RouteConfig.CreateProject.path); analyticsStore.pageVisit(RouteConfig.CreateProject.path);
appStore.updateActiveModal(MODALS.newCreateProject); appStore.updateActiveModal(MODALS.newCreateProject);
} else { } else {
appStore.updateActiveModal(MODALS.createProjectPrompt); appStore.updateActiveModal(MODALS.createProjectPrompt);

25
web/satellite/src/components/navigation/QuickStartLinks.vue
View File

@ -44,7 +44,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { User } from '@/types/users'; import { User } from '@/types/users';
@ -53,6 +52,7 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import NewProjectIcon from '@/../static/images/navigation/newProject.svg'; import NewProjectIcon from '@/../static/images/navigation/newProject.svg';
import CreateAGIcon from '@/../static/images/navigation/createAccessGrant.svg'; import CreateAGIcon from '@/../static/images/navigation/createAccessGrant.svg';
@ -60,6 +60,7 @@ import S3Icon from '@/../static/images/navigation/s3.svg';
import UploadInCLIIcon from '@/../static/images/navigation/uploadInCLI.svg'; import UploadInCLIIcon from '@/../static/images/navigation/uploadInCLI.svg';
import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg'; import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
@ -72,16 +73,14 @@ const props = withDefaults(defineProps<{
closeDropdowns: () => {}, closeDropdowns: () => {},
}); });
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Redirects to create project screen. * Redirects to create project screen.
*/ */
function navigateToCreateAG(): void { function navigateToCreateAG(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_AN_ACCESS_GRANT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.CREATE_AN_ACCESS_GRANT_CLICKED);
props.closeDropdowns(); props.closeDropdowns();
analytics.pageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path); analyticsStore.pageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path);
router.push({ router.push({
name: RouteConfig.CreateAccessModal.name, name: RouteConfig.CreateAccessModal.name,
query: { accessType: AccessType.AccessGrant }, query: { accessType: AccessType.AccessGrant },
@ -92,10 +91,10 @@ function navigateToCreateAG(): void {
* Redirects to Create Access Modal with "s3" access type preselected * Redirects to Create Access Modal with "s3" access type preselected
*/ */
function navigateToAccessGrantS3(): void { function navigateToAccessGrantS3(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_S3_CREDENTIALS_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.CREATE_S3_CREDENTIALS_CLICKED);
props.closeDropdowns(); props.closeDropdowns();
analytics.pageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path); analyticsStore.pageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path);
router.push({ router.push({
name: RouteConfig.CreateAccessModal.name, name: RouteConfig.CreateAccessModal.name,
query: { accessType: AccessType.S3 }, query: { accessType: AccessType.S3 },
@ -106,9 +105,9 @@ function navigateToAccessGrantS3(): void {
* Redirects to objects screen. * Redirects to objects screen.
*/ */
function navigateToBuckets(): void { function navigateToBuckets(): void {
analytics.eventTriggered(AnalyticsEvent.UPLOAD_IN_WEB_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.UPLOAD_IN_WEB_CLICKED);
props.closeDropdowns(); props.closeDropdowns();
analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path); analyticsStore.pageVisit(RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path);
router.push(RouteConfig.Buckets.path).catch(() => {return;}); router.push(RouteConfig.Buckets.path).catch(() => {return;});
} }
@ -116,10 +115,10 @@ function navigateToBuckets(): void {
* Redirects to onboarding CLI flow screen. * Redirects to onboarding CLI flow screen.
*/ */
function navigateToCLIFlow(): void { function navigateToCLIFlow(): void {
analytics.eventTriggered(AnalyticsEvent.UPLOAD_USING_CLI_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.UPLOAD_USING_CLI_CLICKED);
props.closeDropdowns(); props.closeDropdowns();
appStore.setOnboardingBackRoute(route.path); appStore.setOnboardingBackRoute(route.path);
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGName)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGName)).path);
router.push({ name: RouteConfig.AGName.name }); router.push({ name: RouteConfig.AGName.name });
} }
@ -128,7 +127,7 @@ function navigateToCLIFlow(): void {
*/ */
function navigateToNewProject(): void { function navigateToNewProject(): void {
if (route.name !== RouteConfig.CreateProject.name) { if (route.name !== RouteConfig.CreateProject.name) {
analytics.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED);
const user: User = usersStore.state.user; const user: User = usersStore.state.user;
const ownProjectsCount: number = projectsStore.projectsCount(user.id); const ownProjectsCount: number = projectsStore.projectsCount(user.id);
@ -136,7 +135,7 @@ function navigateToNewProject(): void {
if (!user.paidTier || user.projectLimit === ownProjectsCount) { if (!user.paidTier || user.projectLimit === ownProjectsCount) {
appStore.updateActiveModal(MODALS.createProjectPrompt); appStore.updateActiveModal(MODALS.createProjectPrompt);
} else { } else {
analytics.pageVisit(RouteConfig.CreateProject.path); analyticsStore.pageVisit(RouteConfig.CreateProject.path);
appStore.updateActiveModal(MODALS.newCreateProject); appStore.updateActiveModal(MODALS.newCreateProject);
} }
} }

19
web/satellite/src/components/navigation/ResourcesLinks.vue
View File

@ -46,21 +46,21 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import DocsIcon from '@/../static/images/navigation/docs.svg'; import DocsIcon from '@/../static/images/navigation/docs.svg';
import ForumIcon from '@/../static/images/navigation/forum.svg'; import ForumIcon from '@/../static/images/navigation/forum.svg';
import SupportIcon from '@/../static/images/navigation/support.svg'; import SupportIcon from '@/../static/images/navigation/support.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
/** /**
* Sends "View Docs" event to segment and opens link. * Sends "View Docs" event to segment and opens link.
*/ */
function trackViewDocsEvent(link: string): void { function trackViewDocsEvent(link: string): void {
analytics.pageVisit(link); analyticsStore.pageVisit(link);
analytics.eventTriggered(AnalyticsEvent.VIEW_DOCS_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.VIEW_DOCS_CLICKED);
window.open(link); window.open(link);
} }
@ -68,8 +68,8 @@ function trackViewDocsEvent(link: string): void {
* Sends "View Forum" event to segment and opens link. * Sends "View Forum" event to segment and opens link.
*/ */
function trackViewForumEvent(link: string): void { function trackViewForumEvent(link: string): void {
analytics.pageVisit(link); analyticsStore.pageVisit(link);
analytics.eventTriggered(AnalyticsEvent.VIEW_FORUM_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.VIEW_FORUM_CLICKED);
window.open(link); window.open(link);
} }
@ -77,8 +77,8 @@ function trackViewForumEvent(link: string): void {
* Sends "View Support" event to segment and opens link. * Sends "View Support" event to segment and opens link.
*/ */
function trackViewSupportEvent(link: string): void { function trackViewSupportEvent(link: string): void {
analytics.pageVisit(link); analyticsStore.pageVisit(link);
analytics.eventTriggered(AnalyticsEvent.VIEW_SUPPORT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.VIEW_SUPPORT_CLICKED);
window.open(link); window.open(link);
} }
</script> </script>
@ -86,7 +86,6 @@ function trackViewSupportEvent(link: string): void {
<style scoped lang="scss"> <style scoped lang="scss">
.dropdown-item:focus { .dropdown-item:focus {
background-color: #f5f6fa; background-color: #f5f6fa;
outline: auto; outline: var(--c-blue-3);
outline-color: var(--c-blue-3);
} }
</style> </style>

7
web/satellite/src/components/notifications/ProjectInvitationBanner.vue
View File

@ -27,20 +27,19 @@ import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import UsersIcon from '@/../static/images/notifications/usersIcon.svg'; import UsersIcon from '@/../static/images/notifications/usersIcon.svg';
import CloseIcon from '@/../static/images/notifications/closeSmall.svg'; import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const isLoading = ref<boolean>(false); const isLoading = ref<boolean>(false);
const hidden = ref<Set<ProjectInvitation>>(new Set<ProjectInvitation>()); const hidden = ref<Set<ProjectInvitation>>(new Set<ProjectInvitation>());
@ -87,7 +86,7 @@ async function onDeclineClicked(): Promise<void> {
try { try {
await projectsStore.respondToInvitation(invite.value.projectID, ProjectInvitationResponse.Decline); await projectsStore.respondToInvitation(invite.value.projectID, ProjectInvitationResponse.Decline);
analytics.eventTriggered(AnalyticsEvent.PROJECT_INVITATION_DECLINED); analyticsStore.eventTriggered(AnalyticsEvent.PROJECT_INVITATION_DECLINED);
} catch (error) { } catch (error) {
error.message = `Failed to decline project invitation. ${error.message}`; error.message = `Failed to decline project invitation. ${error.message}`;
notify.notifyError(error, AnalyticsErrorEventSource.PROJECT_INVITATION); notify.notifyError(error, AnalyticsErrorEventSource.PROJECT_INVITATION);

6
web/satellite/src/components/notifications/UpgradeNotification.vue
View File

@ -19,9 +19,9 @@
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { Size } from '@/utils/bytesSize'; import { Size } from '@/utils/bytesSize';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import SunnyIcon from '@/../static/images/notifications/sunnyicon.svg'; import SunnyIcon from '@/../static/images/notifications/sunnyicon.svg';
import CloseIcon from '@/../static/images/notifications/closeSmall.svg'; import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
@ -30,8 +30,8 @@ const props = defineProps<{
openAddPMModal: () => void, openAddPMModal: () => void,
}>(); }>();
const analyticsStore = useAnalyticsStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const isBannerShowing = ref<boolean>(true); const isBannerShowing = ref<boolean>(true);
@ -54,7 +54,7 @@ const formattedStorageLimit = computed((): string => {
*/ */
async function openBanner(): Promise<void> { async function openBanner(): Promise<void> {
props.openAddPMModal(); props.openAddPMModal();
await analytics.eventTriggered(AnalyticsEvent.UPGRADE_BANNER_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.UPGRADE_BANNER_CLICKED);
} }
</script> </script>

9
web/satellite/src/components/objects/BucketDetails.vue
View File

@ -37,7 +37,6 @@ import { useRoute, useRouter } from 'vue-router';
import { Bucket } from '@/types/buckets'; import { Bucket } from '@/types/buckets';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { MONTHS_NAMES } from '@/utils/constants/date'; import { MONTHS_NAMES } from '@/utils/constants/date';
import { AnalyticsHttpApi } from '@/api/analytics';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { EdgeCredentials } from '@/types/accessGrants'; import { EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
@ -45,6 +44,7 @@ import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import BucketDetailsOverview from '@/components/objects/BucketDetailsOverview.vue'; import BucketDetailsOverview from '@/components/objects/BucketDetailsOverview.vue';
import VOverallLoader from '@/components/common/VOverallLoader.vue'; import VOverallLoader from '@/components/common/VOverallLoader.vue';
@ -52,6 +52,7 @@ import VButton from '@/components/common/VButton.vue';
import ArrowRightIcon from '@/../static/images/common/arrowRight.svg'; import ArrowRightIcon from '@/../static/images/common/arrowRight.svg';
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
@ -59,8 +60,6 @@ const notify = useNotify();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const isLoading = ref<boolean>(false); const isLoading = ref<boolean>(false);
/** /**
@ -124,8 +123,8 @@ async function openBucket(): Promise<void> {
} }
} }
analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path); analyticsStore.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path); await router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
return; return;
} }

8
web/satellite/src/components/objects/BucketsTable.vue
View File

@ -67,7 +67,6 @@ import { useRouter } from 'vue-router';
import { BucketPage } from '@/types/buckets'; import { BucketPage } from '@/types/buckets';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
@ -75,6 +74,7 @@ import { EdgeCredentials } from '@/types/accessGrants';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VTable from '@/components/common/VTable.vue'; import VTable from '@/components/common/VTable.vue';
import BucketItem from '@/components/objects/BucketItem.vue'; import BucketItem from '@/components/objects/BucketItem.vue';
@ -95,8 +95,8 @@ const props = withDefaults(defineProps<{
const activeDropdown = ref<number>(-1); const activeDropdown = ref<number>(-1);
const overallLoading = ref<boolean>(false); const overallLoading = ref<boolean>(false);
const searchLoading = ref<boolean>(false); const searchLoading = ref<boolean>(false);
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
@ -175,7 +175,7 @@ async function fetchBuckets(page = 1, limit: number): Promise<void> {
*/ */
async function searchBuckets(searchQuery: string): Promise<void> { async function searchBuckets(searchQuery: string): Promise<void> {
bucketsStore.setBucketsSearch(searchQuery); bucketsStore.setBucketsSearch(searchQuery);
analytics.eventTriggered(AnalyticsEvent.SEARCH_BUCKETS); analyticsStore.eventTriggered(AnalyticsEvent.SEARCH_BUCKETS);
searchLoading.value = true; searchLoading.value = true;
@ -220,7 +220,7 @@ async function openBucket(bucketName: string): Promise<void> {
} }
} }
analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path); analyticsStore.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path); router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
return; return;

3
web/satellite/src/components/objects/BucketsView.vue
View File

@ -23,7 +23,6 @@ import { computed, onMounted, ref, watch } from 'vue';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { BucketPage } from '@/types/buckets'; import { BucketPage } from '@/types/buckets';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
@ -41,8 +40,6 @@ const appStore = useAppStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const isLoading = ref<boolean>(true); const isLoading = ref<boolean>(true);
const isServerSideEncryptionBannerHidden = ref<boolean>(true); const isServerSideEncryptionBannerHidden = ref<boolean>(true);

7
web/satellite/src/components/objects/ObjectsArea.vue
View File

@ -12,13 +12,12 @@ import { onMounted } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
const router = useRouter(); const router = useRouter();
const configStore = useConfigStore(); const configStore = useConfigStore();
const analyticsStore = useAnalyticsStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Lifecycle hook after initial render. * Lifecycle hook after initial render.
@ -26,7 +25,7 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
*/ */
onMounted(async (): Promise<void> => { onMounted(async (): Promise<void> => {
if (configStore.state.config.fileBrowserFlowDisabled) { if (configStore.state.config.fileBrowserFlowDisabled) {
analytics.pageVisit(RouteConfig.ProjectDashboard.path); analyticsStore.pageVisit(RouteConfig.ProjectDashboard.path);
await router.push(RouteConfig.ProjectDashboard.path); await router.push(RouteConfig.ProjectDashboard.path);
} }
}); });

7
web/satellite/src/components/objects/UploadCancelPopup.vue
View File

@ -30,21 +30,20 @@
import { computed } from 'vue'; import { computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import WarningIcon from '@/../static/images/objects/cancelWarning.svg'; import WarningIcon from '@/../static/images/objects/cancelWarning.svg';
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Returns leave attempt's route path from store. * Returns leave attempt's route path from store.
*/ */
@ -56,7 +55,7 @@ const leaveRoute = computed((): string => {
* Holds on leave click logic. * Holds on leave click logic.
*/ */
function onLeaveClick(): void { function onLeaveClick(): void {
analytics.pageVisit(leaveRoute.value); analyticsStore.pageVisit(leaveRoute.value);
router.push(leaveRoute.value); router.push(leaveRoute.value);
closePopup(); closePopup();
} }

8
web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
View File

@ -30,7 +30,6 @@
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
@ -39,9 +38,11 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { PartneredSatellite } from '@/types/config'; import { PartneredSatellite } from '@/types/config';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import OverviewContainer from '@/components/onboardingTour/steps/common/OverviewContainer.vue'; import OverviewContainer from '@/components/onboardingTour/steps/common/OverviewContainer.vue';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
@ -49,7 +50,6 @@ const notify = useNotify();
const router = useRouter(); const router = useRouter();
const projectDashboardPath = RouteConfig.ProjectDashboard.path; const projectDashboardPath = RouteConfig.ProjectDashboard.path;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const titleLabel = ref<string>(''); const titleLabel = ref<string>('');
@ -68,8 +68,8 @@ async function onSkip(): Promise<void> {
*/ */
function onUplinkCLIClick(): void { function onUplinkCLIClick(): void {
router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep).with(RouteConfig.AGName).path); router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep).with(RouteConfig.AGName).path);
analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, 'CLI'); analyticsStore.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, 'CLI');
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep).with(RouteConfig.AGName).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep).with(RouteConfig.AGName).path);
} }
/** /**

11
web/satellite/src/components/onboardingTour/steps/cliFlow/AGName.vue
View File

@ -30,26 +30,25 @@ import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AccessGrant } from '@/types/accessGrants'; import { AccessGrant } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore'; import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue'; import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
import Icon from '@/../static/images/onboardingTour/accessGrant.svg'; import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const agStore = useAccessGrantsStore(); const agStore = useAccessGrantsStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const router = useRouter(); const router = useRouter();
const notify = useNotify(); const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const name = ref<string>(''); const name = ref<string>('');
const errorMessage = ref<string>(''); const errorMessage = ref<string>('');
const isLoading = ref<boolean>(false); const isLoading = ref<boolean>(false);
@ -75,7 +74,7 @@ function onChangeName(value: string): void {
* Navigates to previous screen. * Navigates to previous screen.
*/ */
async function onBackClick(): Promise<void> { async function onBackClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OverviewStep.path); analyticsStore.pageVisit(RouteConfig.OverviewStep.path);
backRoute.value ? backRoute.value ?
await router.push(backRoute.value).catch(() => {return; }) : await router.push(backRoute.value).catch(() => {return; }) :
await router.push({ name: RouteConfig.OverviewStep.name }); await router.push({ name: RouteConfig.OverviewStep.name });
@ -89,7 +88,7 @@ async function onNextClick(): Promise<void> {
if (!name.value) { if (!name.value) {
errorMessage.value = 'Access Grant name can\'t be empty'; errorMessage.value = 'Access Grant name can\'t be empty';
analytics.errorEventTriggered(AnalyticsErrorEventSource.ONBOARDING_NAME_STEP); analyticsStore.errorEventTriggered(AnalyticsErrorEventSource.ONBOARDING_NAME_STEP);
return; return;
} }
@ -111,7 +110,7 @@ async function onNextClick(): Promise<void> {
appStore.setOnboardingCleanAPIKey(createdAccessGrant.secret); appStore.setOnboardingCleanAPIKey(createdAccessGrant.secret);
name.value = ''; name.value = '';
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGPermissions)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGPermissions)).path);
await router.push({ name: RouteConfig.AGPermissions.name }); await router.push({ name: RouteConfig.AGPermissions.name });
} }
</script> </script>

13
web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue
View File

@ -44,12 +44,12 @@ import { useRoute, useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore'; import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue'; import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import PermissionsSelect from '@/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue'; import PermissionsSelect from '@/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue';
@ -60,6 +60,7 @@ import DurationSelection from '@/components/onboardingTour/steps/cliFlow/permiss
import Icon from '@/../static/images/onboardingTour/accessGrant.svg'; import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const agStore = useAccessGrantsStore(); const agStore = useAccessGrantsStore();
@ -68,8 +69,6 @@ const notify = useNotify();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const worker = ref<Worker| null>(null); const worker = ref<Worker| null>(null);
const areBucketNamesFetching = ref<boolean>(true); const areBucketNamesFetching = ref<boolean>(true);
const isLoading = ref<boolean>(true); const isLoading = ref<boolean>(true);
@ -151,7 +150,7 @@ function setWorker(): void {
async function onBackClick(): Promise<void> { async function onBackClick(): Promise<void> {
if (isLoading.value) return; if (isLoading.value) return;
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGName)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGName)).path);
await router.push({ name: RouteConfig.AGName.name }); await router.push({ name: RouteConfig.AGName.name });
} }
@ -176,7 +175,7 @@ async function onNextClick(): Promise<void> {
} }
appStore.setOnboardingAPIKeyStepBackRoute(route.path); appStore.setOnboardingAPIKeyStepBackRoute(route.path);
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.APIKey)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.APIKey)).path);
await router.push({ name: RouteConfig.APIKey.name }); await router.push({ name: RouteConfig.APIKey.name });
} }
@ -205,7 +204,7 @@ async function generateRestrictedKey(): Promise<string> {
permissionsMsg, { 'notAfter': notAfterPermission.value.toISOString() }, permissionsMsg, { 'notAfter': notAfterPermission.value.toISOString() },
); );
await worker.value.postMessage(permissionsMsg); worker.value.postMessage(permissionsMsg);
const grantEvent: MessageEvent = await new Promise(resolve => { const grantEvent: MessageEvent = await new Promise(resolve => {
if (worker.value) { if (worker.value) {
@ -216,7 +215,7 @@ async function generateRestrictedKey(): Promise<string> {
throw new Error(grantEvent.data.error); throw new Error(grantEvent.data.error);
} }
analytics.eventTriggered(AnalyticsEvent.API_KEY_GENERATED); analyticsStore.eventTriggered(AnalyticsEvent.API_KEY_GENERATED);
return grantEvent.data.value; return grantEvent.data.value;
} }

13
web/satellite/src/components/onboardingTour/steps/cliFlow/APIKey.vue
View File

@ -25,21 +25,20 @@ import { computed, onMounted } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue'; import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import ValueWithCopy from '@/components/onboardingTour/steps/common/ValueWithCopy.vue'; import ValueWithCopy from '@/components/onboardingTour/steps/common/ValueWithCopy.vue';
import Icon from '@/../static/images/onboardingTour/apiKeyStep.svg'; import Icon from '@/../static/images/onboardingTour/apiKeyStep.svg';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Returns the web address of this satellite from the store. * Returns the web address of this satellite from the store.
*/ */
@ -67,13 +66,13 @@ const backRoute = computed((): string => {
*/ */
async function onBackClick(): Promise<void> { async function onBackClick(): Promise<void> {
if (backRoute.value) { if (backRoute.value) {
analytics.pageVisit(backRoute.value); analyticsStore.pageVisit(backRoute.value);
await router.push(backRoute.value).catch(() => {return; }); await router.push(backRoute.value).catch(() => {return; });
return; return;
} }
analytics.pageVisit(RouteConfig.OnboardingTour.path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.path);
await router.push(RouteConfig.OnboardingTour.path).catch(() => {return; }); await router.push(RouteConfig.OnboardingTour.path).catch(() => {return; });
} }
@ -81,7 +80,7 @@ async function onBackClick(): Promise<void> {
* Holds on next button click logic. * Holds on next button click logic.
*/ */
async function onNextClick(): Promise<void> { async function onNextClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLIInstall)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLIInstall)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLIInstall)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLIInstall)).path);
} }
@ -91,7 +90,7 @@ async function onNextClick(): Promise<void> {
*/ */
onMounted((): void => { onMounted((): void => {
if (!storedAPIKey.value) { if (!storedAPIKey.value) {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGName)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGName)).path);
router.push({ name: RouteConfig.AGName.name }); router.push({ name: RouteConfig.AGName.name });
} }
}); });

8
web/satellite/src/components/onboardingTour/steps/cliFlow/CLIInstall.vue
View File

@ -127,7 +127,7 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue'; import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue'; import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue';
@ -137,13 +137,13 @@ import Icon from '@/../static/images/onboardingTour/cliSetupStep.svg';
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
/** /**
* Holds on back button click logic. * Holds on back button click logic.
*/ */
async function onBackClick(): Promise<void> { async function onBackClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.APIKey)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.APIKey)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.APIKey)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.APIKey)).path);
} }
@ -151,7 +151,7 @@ async function onBackClick(): Promise<void> {
* Holds on next button click logic. * Holds on next button click logic.
*/ */
async function onNextClick(): Promise<void> { async function onNextClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLISetup)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLISetup)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLISetup)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLISetup)).path);
} }
</script> </script>

10
web/satellite/src/components/onboardingTour/steps/cliFlow/CLISetup.vue
View File

@ -35,7 +35,7 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue'; import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue'; import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue';
@ -43,15 +43,15 @@ import TabWithCopy from '@/components/onboardingTour/steps/common/TabWithCopy.vu
import Icon from '@/../static/images/onboardingTour/cliSetupStep.svg'; import Icon from '@/../static/images/onboardingTour/cliSetupStep.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const router = useRouter(); const router = useRouter();
const analyticsStore = useAnalyticsStore();
/** /**
* Holds on back button click logic. * Holds on back button click logic.
*/ */
async function onBackClick(): Promise<void> { async function onBackClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLIInstall)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLIInstall)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLIInstall)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLIInstall)).path);
} }
@ -59,7 +59,7 @@ async function onBackClick(): Promise<void> {
* Holds on next button click logic. * Holds on next button click logic.
*/ */
async function onNextClick(): Promise<void> { async function onNextClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CreateBucket)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CreateBucket)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CreateBucket)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CreateBucket)).path);
} }
</script> </script>

8
web/satellite/src/components/onboardingTour/steps/cliFlow/CreateBucket.vue
View File

@ -34,7 +34,7 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue'; import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue'; import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue';
@ -44,13 +44,13 @@ import Icon from '@/../static/images/onboardingTour/bucketStep.svg';
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
/** /**
* Holds on back button click logic. * Holds on back button click logic.
*/ */
async function onBackClick(): Promise<void> { async function onBackClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLISetup)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLISetup)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLISetup)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CLISetup)).path);
} }
@ -58,7 +58,7 @@ async function onBackClick(): Promise<void> {
* Holds on next button click logic. * Holds on next button click logic.
*/ */
async function onNextClick(): Promise<void> { async function onNextClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.UploadObject)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.UploadObject)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.UploadObject)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.UploadObject)).path);
} }
</script> </script>

8
web/satellite/src/components/onboardingTour/steps/cliFlow/DownloadObject.vue
View File

@ -33,7 +33,7 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue'; import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue'; import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue';
@ -43,13 +43,13 @@ import Icon from '@/../static/images/onboardingTour/downloadObjectStep.svg';
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
/** /**
* Holds on back button click logic. * Holds on back button click logic.
*/ */
async function onBackClick(): Promise<void> { async function onBackClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ListObject)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ListObject)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ListObject)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ListObject)).path);
} }
@ -57,7 +57,7 @@ async function onBackClick(): Promise<void> {
* Holds on next button click logic. * Holds on next button click logic.
*/ */
async function onNextClick(): Promise<void> { async function onNextClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ShareObject)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ShareObject)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ShareObject)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ShareObject)).path);
} }
</script> </script>

8
web/satellite/src/components/onboardingTour/steps/cliFlow/ListObject.vue
View File

@ -33,7 +33,7 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue'; import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue'; import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue';
@ -43,13 +43,13 @@ import Icon from '@/../static/images/onboardingTour/listObjectStep.svg';
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
/** /**
* Holds on back button click logic. * Holds on back button click logic.
*/ */
async function onBackClick(): Promise<void> { async function onBackClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.UploadObject)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.UploadObject)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.UploadObject)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.UploadObject)).path);
} }
@ -57,7 +57,7 @@ async function onBackClick(): Promise<void> {
* Holds on next button click logic. * Holds on next button click logic.
*/ */
async function onNextClick(): Promise<void> { async function onNextClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.DownloadObject)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.DownloadObject)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.DownloadObject)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.DownloadObject)).path);
} }
</script> </script>

8
web/satellite/src/components/onboardingTour/steps/cliFlow/ShareObject.vue
View File

@ -43,7 +43,7 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue'; import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue'; import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue';
@ -51,13 +51,13 @@ import TabWithCopy from '@/components/onboardingTour/steps/common/TabWithCopy.vu
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
/** /**
* Holds on back button click logic. * Holds on back button click logic.
*/ */
async function onBackClick(): Promise<void> { async function onBackClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.DownloadObject)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.DownloadObject)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.DownloadObject)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.DownloadObject)).path);
} }
@ -65,7 +65,7 @@ async function onBackClick(): Promise<void> {
* Holds on next button click logic. * Holds on next button click logic.
*/ */
async function onNextClick(): Promise<void> { async function onNextClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.SuccessScreen)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.SuccessScreen)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.SuccessScreen)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.SuccessScreen)).path);
} }
</script> </script>

9
web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue
View File

@ -33,26 +33,25 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import Icon from '@/../static/images/onboardingTour/successStep.svg'; import Icon from '@/../static/images/onboardingTour/successStep.svg';
const analyticsStore = useAnalyticsStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/** /**
* Holds on back button click logic. * Holds on back button click logic.
*/ */
async function onBackClick(): Promise<void> { async function onBackClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ShareObject)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ShareObject)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ShareObject)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ShareObject)).path);
} }
@ -61,7 +60,7 @@ async function onBackClick(): Promise<void> {
*/ */
async function onFinishClick(): Promise<void> { async function onFinishClick(): Promise<void> {
endOnboarding(); endOnboarding();
analytics.pageVisit(RouteConfig.ProjectDashboard.path); analyticsStore.pageVisit(RouteConfig.ProjectDashboard.path);
await router.push(RouteConfig.ProjectDashboard.path); await router.push(RouteConfig.ProjectDashboard.path);
} }

8
web/satellite/src/components/onboardingTour/steps/cliFlow/UploadObject.vue
View File

@ -38,7 +38,7 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue'; import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue'; import OSContainer from '@/components/onboardingTour/steps/common/OSContainer.vue';
@ -48,13 +48,13 @@ import Icon from '@/../static/images/onboardingTour/uploadStep.svg';
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analyticsStore = useAnalyticsStore();
/** /**
* Holds on back button click logic. * Holds on back button click logic.
*/ */
async function onBackClick(): Promise<void> { async function onBackClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CreateBucket)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CreateBucket)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CreateBucket)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CreateBucket)).path);
} }
@ -62,7 +62,7 @@ async function onBackClick(): Promise<void> {
* Holds on next button click logic. * Holds on next button click logic.
*/ */
async function onNextClick(): Promise<void> { async function onNextClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ListObject)).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ListObject)).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ListObject)).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ListObject)).path);
} }
</script> </script>

11
web/satellite/src/components/project/CreateProject.vue
View File

@ -66,23 +66,22 @@ import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { ProjectFields } from '@/types/projects'; import { ProjectFields } from '@/types/projects';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
const analyticsStore = useAnalyticsStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const description = ref<string>(''); const description = ref<string>('');
const createdProjectId = ref<string>(''); const createdProjectId = ref<string>('');
const projectName = ref<string>(''); const projectName = ref<string>('');
@ -132,7 +131,7 @@ async function onCreateProjectClick(): Promise<void> {
} catch (error) { } catch (error) {
isLoading.value = false; isLoading.value = false;
nameError.value = error.message; nameError.value = error.message;
analytics.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL); analyticsStore.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
return; return;
} }
@ -148,11 +147,11 @@ async function onCreateProjectClick(): Promise<void> {
selectCreatedProject(); selectCreatedProject();
await notify.success('Project created successfully!'); notify.success('Project created successfully!');
isLoading.value = false; isLoading.value = false;
analytics.pageVisit(RouteConfig.ProjectDashboard.path); analyticsStore.pageVisit(RouteConfig.ProjectDashboard.path);
await router.push(RouteConfig.ProjectDashboard.path); await router.push(RouteConfig.ProjectDashboard.path);
} }

17
web/satellite/src/components/project/EditProjectDetails.vue
View File

@ -210,23 +210,22 @@ import {
ProjectFields, ProjectLimits, ProjectFields, ProjectLimits,
} from '@/types/projects'; } from '@/types/projects';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const activeStorageMeasurement = ref<string>(Dimensions.TB); const activeStorageMeasurement = ref<string>(Dimensions.TB);
const activeBandwidthMeasurement = ref<string>(Dimensions.TB); const activeBandwidthMeasurement = ref<string>(Dimensions.TB);
const isNameEditing = ref<boolean>(false); const isNameEditing = ref<boolean>(false);
@ -494,8 +493,8 @@ async function onSaveNameButtonClick(): Promise<void> {
} }
toggleNameEditing(); toggleNameEditing();
analytics.eventTriggered(AnalyticsEvent.PROJECT_NAME_UPDATED); analyticsStore.eventTriggered(AnalyticsEvent.PROJECT_NAME_UPDATED);
await notify.success('Project name updated successfully!'); notify.success('Project name updated successfully!');
} }
/** /**
@ -511,8 +510,8 @@ async function onSaveDescriptionButtonClick(): Promise<void> {
} }
toggleDescriptionEditing(); toggleDescriptionEditing();
analytics.eventTriggered(AnalyticsEvent.PROJECT_DESCRIPTION_UPDATED); analyticsStore.eventTriggered(AnalyticsEvent.PROJECT_DESCRIPTION_UPDATED);
await notify.success('Project description updated successfully!'); notify.success('Project description updated successfully!');
} }
/** /**
@ -536,7 +535,7 @@ async function onSaveStorageLimitButtonClick(): Promise<void> {
} }
toggleStorageLimitEditing(); toggleStorageLimitEditing();
analytics.eventTriggered(AnalyticsEvent.PROJECT_STORAGE_LIMIT_UPDATED); analyticsStore.eventTriggered(AnalyticsEvent.PROJECT_STORAGE_LIMIT_UPDATED);
notify.success('Project storage limit updated successfully!'); notify.success('Project storage limit updated successfully!');
} }
@ -561,7 +560,7 @@ async function onSaveBandwidthLimitButtonClick(): Promise<void> {
} }
toggleBandwidthLimitEditing(); toggleBandwidthLimitEditing();
analytics.eventTriggered(AnalyticsEvent.PROJECT_BANDWIDTH_LIMIT_UPDATED); analyticsStore.eventTriggered(AnalyticsEvent.PROJECT_BANDWIDTH_LIMIT_UPDATED);
notify.success('Project egress limit updated successfully!'); notify.success('Project egress limit updated successfully!');
} }

31
web/satellite/src/components/project/dashboard/ProjectDashboard.vue
View File

@ -180,7 +180,6 @@ import { RouteConfig } from '@/types/router';
import { DataStamp, Project, ProjectLimits } from '@/types/projects'; import { DataStamp, Project, ProjectLimits } from '@/types/projects';
import { Dimensions, Size } from '@/utils/bytesSize'; import { Dimensions, Size } from '@/utils/bytesSize';
import { ChartUtils } from '@/utils/chart'; import { ChartUtils } from '@/utils/chart';
import { AnalyticsHttpApi } from '@/api/analytics';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps'; import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
@ -196,6 +195,7 @@ import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { centsToDollars } from '@/utils/strings'; import { centsToDollars } from '@/utils/strings';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { ProjectRole } from '@/types/projectMembers'; import { ProjectRole } from '@/types/projectMembers';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import InfoContainer from '@/components/project/dashboard/InfoContainer.vue'; import InfoContainer from '@/components/project/dashboard/InfoContainer.vue';
@ -217,6 +217,7 @@ import GrantsIcon from '@/../static/images/navigation/accessGrants.svg';
import TeamIcon from '@/../static/images/navigation/users.svg'; import TeamIcon from '@/../static/images/navigation/users.svg';
import BillingIcon from '@/../static/images/navigation/billing.svg'; import BillingIcon from '@/../static/images/navigation/billing.svg';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
@ -229,7 +230,6 @@ const notify = useNotify();
const router = useRouter(); const router = useRouter();
const now = new Date().toLocaleDateString('en-US'); const now = new Date().toLocaleDateString('en-US');
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const isDataFetching = ref<boolean>(true); const isDataFetching = ref<boolean>(true);
const areBucketsFetching = ref<boolean>(true); const areBucketsFetching = ref<boolean>(true);
@ -416,17 +416,10 @@ function onInviteUsersClick(): void {
* Holds on create project button click logic. * Holds on create project button click logic.
*/ */
function onCreateProjectClick(): void { function onCreateProjectClick(): void {
analytics.pageVisit(RouteConfig.CreateProject.path); analyticsStore.pageVisit(RouteConfig.CreateProject.path);
router.push(RouteConfig.CreateProject.path); router.push(RouteConfig.CreateProject.path);
} }
/**
* Returns formatted amount.
*/
function usedLimitFormatted(value: number): string {
return formattedValue(new Size(value, 2));
}
/** /**
* toggleChartsDatePicker holds logic for toggling charts date picker. * toggleChartsDatePicker holds logic for toggling charts date picker.
*/ */
@ -451,18 +444,6 @@ async function onChartsDateRangePick(dateRange: Date[]): Promise<void> {
} }
} }
/**
* Formats value to needed form and returns it.
*/
function formattedValue(value: Size): string {
switch (value.label) {
case Dimensions.Bytes:
return '0';
default:
return `${value.formattedBytes.replace(/\\.0+$/, '')}${value.label}`;
}
}
/** /**
* Lifecycle hook after initial render. * Lifecycle hook after initial render.
* Fetches project limits. * Fetches project limits.
@ -474,8 +455,8 @@ onMounted(async (): Promise<void> => {
if (!projectID) { if (!projectID) {
const onboardingPath = RouteConfig.OnboardingTour.with(configStore.firstOnboardingStep).path; const onboardingPath = RouteConfig.OnboardingTour.with(configStore.firstOnboardingStep).path;
analytics.pageVisit(onboardingPath); analyticsStore.pageVisit(onboardingPath);
router.push(onboardingPath); await router.push(onboardingPath);
return; return;
} }
@ -526,7 +507,7 @@ onMounted(async (): Promise<void> => {
areBucketsFetching.value = false; areBucketsFetching.value = false;
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.PROJECT_DASHBOARD_PAGE); notify.error(error.message, AnalyticsErrorEventSource.PROJECT_DASHBOARD_PAGE);
} }
}); });

16
web/satellite/src/components/projectsList/ProjectsList.vue
View File

@ -52,7 +52,6 @@ import { useRouter } from 'vue-router';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { Project, ProjectsPage } from '@/types/projects'; import { Project, ProjectsPage } from '@/types/projects';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
@ -64,6 +63,7 @@ import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore'; import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue'; import ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue';
import VTable from '@/components/common/VTable.vue'; import VTable from '@/components/common/VTable.vue';
@ -71,8 +71,8 @@ import VLoader from '@/components/common/VLoader.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
const FIRST_PAGE = 1; const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const agStore = useAccessGrantsStore(); const agStore = useAccessGrantsStore();
@ -95,7 +95,7 @@ const projectsPage = computed((): ProjectsPage => {
}); });
/** /**
* Fetches owned projects page page by clicked page number. * Fetches owned projects page by clicked page number.
* @param page * @param page
* @param limit * @param limit
*/ */
@ -104,7 +104,7 @@ async function onPageChange(page: number, limit: number): Promise<void> {
try { try {
await projectsStore.getOwnedProjects(currentPageNumber.value, limit); await projectsStore.getOwnedProjects(currentPageNumber.value, limit);
} catch (error) { } catch (error) {
await notify.error(`Unable to fetch owned projects. ${error.message}`, AnalyticsErrorEventSource.PROJECTS_LIST); notify.error(`Unable to fetch owned projects. ${error.message}`, AnalyticsErrorEventSource.PROJECTS_LIST);
} }
} }
@ -112,7 +112,7 @@ async function onPageChange(page: number, limit: number): Promise<void> {
* Redirects to create project page. * Redirects to create project page.
*/ */
function onCreateClick(): void { function onCreateClick(): void {
analytics.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED);
const user: User = usersStore.state.user; const user: User = usersStore.state.user;
const ownProjectsCount: number = projectsStore.projectsCount(user.id); const ownProjectsCount: number = projectsStore.projectsCount(user.id);
@ -120,7 +120,7 @@ function onCreateClick(): void {
if (!user.paidTier || user.projectLimit === ownProjectsCount) { if (!user.paidTier || user.projectLimit === ownProjectsCount) {
appStore.updateActiveModal(MODALS.createProjectPrompt); appStore.updateActiveModal(MODALS.createProjectPrompt);
} else { } else {
analytics.pageVisit(RouteConfig.CreateProject.path); analyticsStore.pageVisit(RouteConfig.CreateProject.path);
appStore.updateActiveModal(MODALS.newCreateProject); appStore.updateActiveModal(MODALS.newCreateProject);
} }
} }
@ -148,7 +148,7 @@ async function onProjectSelected(project: Project): Promise<void> {
projectsStore.getProjectLimits(projectID), projectsStore.getProjectLimits(projectID),
]); ]);
analytics.pageVisit(RouteConfig.EditProjectDetails.path); analyticsStore.pageVisit(RouteConfig.EditProjectDetails.path);
await router.push(RouteConfig.EditProjectDetails.path); await router.push(RouteConfig.EditProjectDetails.path);
} catch (error) { } catch (error) {
error.message = `Unable to select project. ${error.message}`; error.message = `Unable to select project. ${error.message}`;
@ -167,7 +167,7 @@ onMounted(async () => {
areProjectsFetching.value = false; areProjectsFetching.value = false;
} catch (error) { } catch (error) {
await notify.error(`Unable to fetch owned projects. ${error.message}`, AnalyticsErrorEventSource.PROJECTS_LIST); notify.error(`Unable to fetch owned projects. ${error.message}`, AnalyticsErrorEventSource.PROJECTS_LIST);
} }
}); });
</script> </script>

7
web/satellite/src/components/team/HeaderArea.vue
View File

@ -75,7 +75,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, onBeforeUnmount, ref } from 'vue'; import { computed, onMounted, onBeforeUnmount, ref } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
@ -84,6 +83,7 @@ import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useLoading } from '@/composables/useLoading'; import { useLoading } from '@/composables/useLoading';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VInfo from '@/components/common/VInfo.vue'; import VInfo from '@/components/common/VInfo.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -91,6 +91,7 @@ import VSearch from '@/components/common/VSearch.vue';
import InfoIcon from '@/../static/images/team/infoTooltip.svg'; import InfoIcon from '@/../static/images/team/infoTooltip.svg';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
const pmStore = useProjectMembersStore(); const pmStore = useProjectMembersStore();
@ -98,8 +99,6 @@ const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
const { isLoading, withLoading } = useLoading(); const { isLoading, withLoading } = useLoading();
const analytics = new AnalyticsHttpApi();
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
isAddButtonDisabled: boolean; isAddButtonDisabled: boolean;
}>(), { }>(), {
@ -165,7 +164,7 @@ async function processSearchQuery(search: string): Promise<void> {
*/ */
async function resendInvites(): Promise<void> { async function resendInvites(): Promise<void> {
await withLoading(async () => { await withLoading(async () => {
analytics.eventTriggered(AnalyticsEvent.RESEND_INVITE_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.RESEND_INVITE_CLICKED);
try { try {
await pmStore.inviteMembers(pmStore.state.selectedProjectMembersEmails, projectsStore.state.selectedProject.id); await pmStore.inviteMembers(pmStore.state.selectedProjectMembersEmails, projectsStore.state.selectedProject.id);

9
web/satellite/src/components/team/ProjectMemberListItem.vue
View File

@ -52,7 +52,7 @@ import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useLoading } from '@/composables/useLoading'; import { useLoading } from '@/composables/useLoading';
import { AnalyticsHttpApi } from '@/api/analytics'; import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import TableItem from '@/components/common/TableItem.vue'; import TableItem from '@/components/common/TableItem.vue';
@ -64,13 +64,12 @@ import CopyIcon from '@/../static/images/accessGrants/newCreateFlow/copy.svg';
const { isMobile, isTablet } = useResize(); const { isMobile, isTablet } = useResize();
const { withLoading } = useLoading(); const { withLoading } = useLoading();
const appStore = useAppStore();
const notify = useNotify(); const notify = useNotify();
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore();
const pmStore = useProjectMembersStore(); const pmStore = useProjectMembersStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
model: ProjectMemberItemModel; model: ProjectMemberItemModel;
}>(), { }>(), {
@ -135,7 +134,7 @@ const isDropdownOpen = computed((): boolean => {
}); });
function copyLinkClicked() { function copyLinkClicked() {
analytics.eventTriggered(AnalyticsEvent.COPY_INVITE_LINK_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.COPY_INVITE_LINK_CLICKED);
closeDropDown(); closeDropDown();
if (inviteLink.value) { if (inviteLink.value) {

11
web/satellite/src/components/team/ProjectMembersArea.vue
View File

@ -53,10 +53,10 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore'; import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useLoading } from '@/composables/useLoading'; import { useLoading } from '@/composables/useLoading';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import HeaderArea from '@/components/team/HeaderArea.vue'; import HeaderArea from '@/components/team/HeaderArea.vue';
@ -65,13 +65,12 @@ import VTable from '@/components/common/VTable.vue';
import EmptySearchResultIcon from '@/../static/images/common/emptySearchResult.svg'; import EmptySearchResultIcon from '@/../static/images/common/emptySearchResult.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const pmStore = useProjectMembersStore(); const pmStore = useProjectMembersStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const { withLoading } = useLoading(); const { withLoading } = useLoading();
const FIRST_PAGE = 1; const FIRST_PAGE = 1;
@ -151,7 +150,7 @@ async function onPageChange(index: number, limit: number): Promise<void> {
function onResendClick(member: ProjectMemberItemModel) { function onResendClick(member: ProjectMemberItemModel) {
withLoading(async () => { withLoading(async () => {
analytics.eventTriggered(AnalyticsEvent.RESEND_INVITE_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.RESEND_INVITE_CLICKED);
try { try {
await pmStore.inviteMembers([member.getEmail()], projectsStore.state.selectedProject.id); await pmStore.inviteMembers([member.getEmail()], projectsStore.state.selectedProject.id);
notify.notify('Invite resent!'); notify.notify('Invite resent!');
@ -165,7 +164,7 @@ function onResendClick(member: ProjectMemberItemModel) {
try { try {
await pmStore.getProjectMembers(FIRST_PAGE, projectsStore.state.selectedProject.id); await pmStore.getProjectMembers(FIRST_PAGE, projectsStore.state.selectedProject.id);
} catch (error) { } catch (error) {
await notify.error(`Unable to fetch project members. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_PAGE); notify.error(`Unable to fetch project members. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_PAGE);
} }
}); });
} }
@ -177,7 +176,7 @@ async function onRemoveClick(member: ProjectMemberItemModel) {
} }
appStore.updateActiveModal(MODALS.removeTeamMember); appStore.updateActiveModal(MODALS.removeTeamMember);
} }
analytics.eventTriggered(AnalyticsEvent.REMOVE_PROJECT_MEMBER_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.REMOVE_PROJECT_MEMBER_CLICKED);
} }
/** /**

20
web/satellite/src/store/modules/analyticsStore.ts
View File

@ -4,25 +4,31 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
export const useAnalyticsStore = defineStore('analytics', () => { export const useAnalyticsStore = defineStore('analytics', () => {
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
function eventTriggered(eventName: string): void { function eventTriggered(eventName: AnalyticsEvent, props?: {[p: string]: string}): void {
analytics.eventTriggered(eventName).then(r => {}).catch(); analytics.eventTriggered(eventName, props).catch(_ => {});
} }
function linkEventTriggered(eventName: string, link: string): void { function linkEventTriggered(eventName: AnalyticsEvent, link: string): void {
analytics.linkEventTriggered(eventName, link).then(r => {}).catch(); analytics.linkEventTriggered(eventName, link).catch(_ => {});
} }
function pageVisited(pageName: string): void { function pageVisit(pageName: string): void {
analytics.pageVisit(pageName).then(r => {}).catch(); analytics.pageVisit(pageName).catch(_ => {});
}
function errorEventTriggered(source: AnalyticsErrorEventSource): void {
analytics.errorEventTriggered(source).catch(_ => {});
} }
return { return {
eventTriggered, eventTriggered,
errorEventTriggered,
linkEventTriggered, linkEventTriggered,
pageVisited, pageVisit,
}; };
}); });

2
web/satellite/src/types/pagination.ts
View File

@ -3,7 +3,7 @@
export const DEFAULT_PAGE_LIMIT = 10; export const DEFAULT_PAGE_LIMIT = 10;
export type PageChangeCallback = (page: number, limit: number) => Promise<void>; export type PageChangeCallback = (page: number, limit: number) => Promise<void> | void;
export type OnPageClickCallback = (search: number) => Promise<void>; export type OnPageClickCallback = (search: number) => Promise<void>;
export type CheckSelected = (index: number) => boolean; export type CheckSelected = (index: number) => boolean;

3
web/satellite/src/utils/constants/analyticsEventNames.ts
View File

@ -83,6 +83,7 @@ export enum AnalyticsErrorEventSource {
CHANGE_PASSWORD_MODAL = 'Change password modal', CHANGE_PASSWORD_MODAL = 'Change password modal',
CREATE_PROJECT_MODAL = 'Create project modal', CREATE_PROJECT_MODAL = 'Create project modal',
CREATE_PROJECT_PASSPHRASE_MODAL = 'Create project passphrase modal', CREATE_PROJECT_PASSPHRASE_MODAL = 'Create project passphrase modal',
CREATE_BUCKET_MODAL = 'Create bucket modal',
DELETE_BUCKET_MODAL = 'Delete bucket modal', DELETE_BUCKET_MODAL = 'Delete bucket modal',
ENABLE_MFA_MODAL = 'Enable MFA modal', ENABLE_MFA_MODAL = 'Enable MFA modal',
DISABLE_MFA_MODAL = 'Disable MFA modal', DISABLE_MFA_MODAL = 'Disable MFA modal',
@ -95,8 +96,6 @@ export enum AnalyticsErrorEventSource {
NAVIGATION_ACCOUNT_AREA = 'Navigation account area', NAVIGATION_ACCOUNT_AREA = 'Navigation account area',
NAVIGATION_PROJECT_SELECTION = 'Navigation project selection', NAVIGATION_PROJECT_SELECTION = 'Navigation project selection',
MOBILE_NAVIGATION = 'Mobile navigation', MOBILE_NAVIGATION = 'Mobile navigation',
BUCKET_CREATION_FLOW = 'Bucket creation flow',
BUCKET_CREATION_NAME_STEP = 'Bucket creation name step',
BUCKET_TABLE = 'Bucket table', BUCKET_TABLE = 'Bucket table',
BUCKET_PAGE = 'Bucket page', BUCKET_PAGE = 'Bucket page',
BUCKET_DETAILS_PAGE = 'Bucket details page', BUCKET_DETAILS_PAGE = 'Bucket details page',

10
web/satellite/src/views/AuthorizeArea.vue
View File

@ -97,19 +97,18 @@ import { Project } from '@/types/projects';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized'; import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { FetchState } from '@/utils/constants/fetchStateEnum'; import { FetchState } from '@/utils/constants/fetchStateEnum';
import { OAuthClient, OAuthClientsAPI } from '@/api/oauthClients'; import { OAuthClient, OAuthClientsAPI } from '@/api/oauthClients';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore'; import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
import LogoIcon from '@/../static/images/logo.svg'; import LogoIcon from '@/../static/images/logo.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const oauthClientsAPI = new OAuthClientsAPI(); const oauthClientsAPI = new OAuthClientsAPI();
const validPerms = { const validPerms = {
'list': true, 'list': true,
@ -118,6 +117,7 @@ const validPerms = {
'delete': true, 'delete': true,
}; };
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const agStore = useAccessGrantsStore(); const agStore = useAccessGrantsStore();
@ -200,7 +200,7 @@ async function ensureLogin(): Promise<void> {
const query = new URLSearchParams(oauthData.value).toString(); const query = new URLSearchParams(oauthData.value).toString();
const path = `${RouteConfig.Authorize.path}?${query}#${clientKey.value}`; const path = `${RouteConfig.Authorize.path}?${query}#${clientKey.value}`;
analytics.pageVisit(`${RouteConfig.Login.path}?return_url=${encodeURIComponent(path)}`); analyticsStore.pageVisit(`${RouteConfig.Login.path}?return_url=${encodeURIComponent(path)}`);
await router.push(`${RouteConfig.Login.path}?return_url=${encodeURIComponent(path)}`); await router.push(`${RouteConfig.Login.path}?return_url=${encodeURIComponent(path)}`);
} }
} }
@ -210,7 +210,7 @@ async function ensureWorker(): Promise<void> {
agStore.stopWorker(); agStore.stopWorker();
await agStore.startWorker(); await agStore.startWorker();
} catch (error) { } catch (error) {
await notify.error(`Unable to set access grants wizard. ${error.message}`, null); notify.error(`Unable to set access grants wizard. ${error.message}`, null);
return; return;
} }
@ -328,7 +328,7 @@ async function setScope(): Promise<void> {
}); });
if (event.data.error) { if (event.data.error) {
await notify.error(event.data.error, null); notify.error(event.data.error, null);
return; return;
} }

10
web/satellite/src/views/DashboardArea.vue
View File

@ -136,7 +136,6 @@ import { FetchState } from '@/utils/constants/fetchStateEnum';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
@ -151,6 +150,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore'; import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import UploadNotification from '@/components/notifications/UploadNotification.vue'; import UploadNotification from '@/components/notifications/UploadNotification.vue';
import NavigationArea from '@/components/navigation/NavigationArea.vue'; import NavigationArea from '@/components/navigation/NavigationArea.vue';
@ -170,6 +170,7 @@ import ObjectsUploadingModal from '@/components/modals/objectUpload/ObjectsUploa
import CloudIcon from '@/../static/images/notifications/cloudAlert.svg'; import CloudIcon from '@/../static/images/notifications/cloudAlert.svg';
import WarningIcon from '@/../static/images/notifications/circleWarning.svg'; import WarningIcon from '@/../static/images/notifications/circleWarning.svg';
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
@ -187,7 +188,6 @@ const router = useRouter();
const route = useRoute(); const route = useRoute();
const auth: AuthHttpApi = new AuthHttpApi(); const auth: AuthHttpApi = new AuthHttpApi();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const resetActivityEvents: string[] = ['keypress', 'mousemove', 'mousedown', 'touchmove']; const resetActivityEvents: string[] = ['keypress', 'mousemove', 'mousedown', 'touchmove'];
const inactivityModalTime = 60000; const inactivityModalTime = 60000;
// Minimum number of recovery codes before the recovery code warning bar is shown. // Minimum number of recovery codes before the recovery code warning bar is shown.
@ -570,7 +570,7 @@ async function refreshSession(manual = false): Promise<void> {
* Redirects to log in screen. * Redirects to log in screen.
*/ */
function redirectToLogin(): void { function redirectToLogin(): void {
analytics.pageVisit(RouteConfig.Login.path); analyticsStore.pageVisit(RouteConfig.Login.path);
router.push(RouteConfig.Login.path); router.push(RouteConfig.Login.path);
sessionExpiredModalShown.value = false; sessionExpiredModalShown.value = false;
@ -685,7 +685,7 @@ async function onSessionActivity(): Promise<void> {
/** /**
* Lifecycle hook after initial render. * Lifecycle hook after initial render.
* Pre fetches user`s and project information. * Pre-fetches user`s and project information.
*/ */
onMounted(async () => { onMounted(async () => {
usersStore.$onAction(({ name, after, args }) => { usersStore.$onAction(({ name, after, args }) => {
@ -775,7 +775,7 @@ onMounted(async () => {
const onboardingPath = RouteConfig.OnboardingTour.with(configStore.firstOnboardingStep).path; const onboardingPath = RouteConfig.OnboardingTour.with(configStore.firstOnboardingStep).path;
if (usersStore.shouldOnboard && route.path !== onboardingPath) { if (usersStore.shouldOnboard && route.path !== onboardingPath) {
await analytics.pageVisit(onboardingPath); analyticsStore.pageVisit(onboardingPath);
await router.push(onboardingPath); await router.push(onboardingPath);
} }
} catch (error) { } catch (error) {

10
web/satellite/src/views/LoginArea.vue
View File

@ -160,7 +160,6 @@ import { FetchState } from '@/utils/constants/fetchStateEnum';
import { Validator } from '@/utils/validation'; import { Validator } from '@/utils/validation';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized'; import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { ErrorBadRequest } from '@/api/errors/ErrorBadRequest'; import { ErrorBadRequest } from '@/api/errors/ErrorBadRequest';
import { AnalyticsHttpApi } from '@/api/analytics';
import { TokenInfo } from '@/types/users'; import { TokenInfo } from '@/types/users';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
@ -168,6 +167,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { MultiCaptchaConfig, PartneredSatellite } from '@/types/config'; import { MultiCaptchaConfig, PartneredSatellite } from '@/types/config';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
@ -213,8 +213,8 @@ const forgotPasswordPath: string = RouteConfig.ForgotPassword.path;
const registerPath: string = RouteConfig.Register.path; const registerPath: string = RouteConfig.Register.path;
const auth = new AuthHttpApi(); const auth = new AuthHttpApi();
const analytics = new AnalyticsHttpApi();
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
@ -328,7 +328,7 @@ function setPassword(value: string): void {
/** /**
* Redirects to chosen satellite. * Redirects to chosen satellite.
*/ */
function clickSatellite(address): void { function clickSatellite(address: string): void {
window.location.href = address + '/login'; window.location.href = address + '/login';
} }
@ -423,7 +423,7 @@ async function login(): Promise<void> {
if (isMFARequired.value) { if (isMFARequired.value) {
if (error instanceof ErrorBadRequest || error instanceof ErrorUnauthorized) { if (error instanceof ErrorBadRequest || error instanceof ErrorUnauthorized) {
await notify.error(error.message, null); notify.error(error.message, null);
} }
isMFAError.value = true; isMFAError.value = true;
@ -446,7 +446,7 @@ async function login(): Promise<void> {
appStore.changeState(FetchState.LOADING); appStore.changeState(FetchState.LOADING);
isLoading.value = false; isLoading.value = false;
analytics.pageVisit(returnURL.value); analyticsStore.pageVisit(returnURL.value);
await router.push(returnURL.value); await router.push(returnURL.value);
} }

10
web/satellite/src/views/ResetPassword.vue
View File

@ -81,11 +81,11 @@ import { useRoute, useRouter } from 'vue-router';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import { ErrorMFARequired } from '@/api/errors/ErrorMFARequired'; import { ErrorMFARequired } from '@/api/errors/ErrorMFARequired';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { ErrorTokenExpired } from '@/api/errors/ErrorTokenExpired'; import { ErrorTokenExpired } from '@/api/errors/ErrorTokenExpired';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import PasswordStrength from '@/components/common/PasswordStrength.vue'; import PasswordStrength from '@/components/common/PasswordStrength.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
@ -95,6 +95,7 @@ import KeyIcon from '@/../static/images/resetPassword/success.svg';
import LogoIcon from '@/../static/images/logo.svg'; import LogoIcon from '@/../static/images/logo.svg';
import GreyWarningIcon from '@/../static/images/common/greyWarning.svg'; import GreyWarningIcon from '@/../static/images/common/greyWarning.svg';
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const appStore = useAppStore(); const appStore = useAppStore();
const notify = useNotify(); const notify = useNotify();
@ -103,7 +104,6 @@ const route = useRoute();
const auth: AuthHttpApi = new AuthHttpApi(); const auth: AuthHttpApi = new AuthHttpApi();
const loginPath: string = RouteConfig.Login.path; const loginPath: string = RouteConfig.Login.path;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const token = ref<string>(''); const token = ref<string>('');
const password = ref<string>(''); const password = ref<string>('');
@ -117,7 +117,7 @@ const isMFARequired = ref<boolean>(false);
const isMFAError = ref<boolean>(false); const isMFAError = ref<boolean>(false);
const isRecoveryCodeState = ref<boolean>(false); const isRecoveryCodeState = ref<boolean>(false);
const isPasswordStrengthShown = ref<boolean>(false); const isPasswordStrengthShown = ref<boolean>(false);
const mfaInput = ref<ConfirmMFAInput>(); const mfaInput = ref<typeof ConfirmMFAInput>();
/** /**
* Returns whether the successful password reset area is shown. * Returns whether the successful password reset area is shown.
@ -267,13 +267,13 @@ onBeforeUnmount((): void => {
/** /**
* Lifecycle hook after initial render. * Lifecycle hook after initial render.
* Initializes recovery token from route param * Initializes recovery token from route param
* and redirects to login if token doesn't exist. * and redirects to login page if token doesn't exist.
*/ */
onMounted((): void => { onMounted((): void => {
if (route.query.token) { if (route.query.token) {
token.value = route.query.token.toString(); token.value = route.query.token.toString();
} else { } else {
analytics.pageVisit(RouteConfig.Login.path); analyticsStore.pageVisit(RouteConfig.Login.path);
router.push(RouteConfig.Login.path); router.push(RouteConfig.Login.path);
} }
}); });

10
web/satellite/src/views/all-dashboard/AllDashboardArea.vue
View File

@ -57,7 +57,6 @@ import { User } from '@/types/users';
import { import {
AnalyticsErrorEventSource, AnalyticsErrorEventSource,
} from '@/utils/constants/analyticsEventNames'; } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized'; import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
@ -77,6 +76,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore'; import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import InactivityModal from '@/components/modals/InactivityModal.vue'; import InactivityModal from '@/components/modals/InactivityModal.vue';
import SessionExpiredModal from '@/components/modals/SessionExpiredModal.vue'; import SessionExpiredModal from '@/components/modals/SessionExpiredModal.vue';
@ -91,6 +91,7 @@ const router = useRouter();
const route = useRoute(); const route = useRoute();
const notify = useNotify(); const notify = useNotify();
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const pmStore = useProjectMembersStore(); const pmStore = useProjectMembersStore();
@ -103,7 +104,6 @@ const projectsStore = useProjectsStore();
const notificationsStore = useNotificationsStore(); const notificationsStore = useNotificationsStore();
const obStore = useObjectBrowserStore(); const obStore = useObjectBrowserStore();
const analytics = new AnalyticsHttpApi();
const auth: AuthHttpApi = new AuthHttpApi(); const auth: AuthHttpApi = new AuthHttpApi();
const inactivityModalTime = 60000; const inactivityModalTime = 60000;
@ -267,7 +267,7 @@ function setIsHundredLimitModalShown(value: boolean): void {
* Redirects to log in screen. * Redirects to log in screen.
*/ */
function redirectToLogin(): void { function redirectToLogin(): void {
analytics.pageVisit(RouteConfig.Login.path); analyticsStore.pageVisit(RouteConfig.Login.path);
router.push(RouteConfig.Login.path); router.push(RouteConfig.Login.path);
sessionExpiredModalShown.value = false; sessionExpiredModalShown.value = false;
@ -470,7 +470,7 @@ async function onSessionActivity(): Promise<void> {
/** /**
* Lifecycle hook after initial render. * Lifecycle hook after initial render.
* Pre fetches user`s and project information. * Pre-fetches user`s and project information.
*/ */
onMounted(async () => { onMounted(async () => {
usersStore.$onAction(({ name, after, args }) => { usersStore.$onAction(({ name, after, args }) => {
@ -548,7 +548,7 @@ onMounted(async () => {
appStore.setHasShownPricingPlan(true); appStore.setHasShownPricingPlan(true);
// if the user is not legible for a pricing plan, they'll automatically be // if the user is not legible for a pricing plan, they'll automatically be
// navigated back to all projects dashboard. // navigated back to all projects dashboard.
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.PricingPlanStep).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.PricingPlanStep).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.PricingPlanStep).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.PricingPlanStep).path);
} }
}); });

8
web/satellite/src/views/all-dashboard/components/EmptyProjectItem.vue
View File

@ -31,27 +31,27 @@
<script setup lang="ts"> <script setup lang="ts">
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import BoxIcon from '@/../static/images/navigation/project.svg'; import BoxIcon from '@/../static/images/navigation/project.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const analytics = new AnalyticsHttpApi();
/** /**
* Route to create project page. * Route to create project page.
*/ */
function onCreateProjectClicked(): void { function onCreateProjectClicked(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = usersStore.state.user; const user: User = usersStore.state.user;
const ownProjectsCount: number = projectsStore.projectsCount(user.id); const ownProjectsCount: number = projectsStore.projectsCount(user.id);
@ -59,7 +59,7 @@ function onCreateProjectClicked(): void {
if (!user.paidTier && user.projectLimit === ownProjectsCount) { if (!user.paidTier && user.projectLimit === ownProjectsCount) {
appStore.updateActiveModal(MODALS.createProjectPrompt); appStore.updateActiveModal(MODALS.createProjectPrompt);
} else { } else {
analytics.pageVisit(RouteConfig.CreateProject.path); analyticsStore.pageVisit(RouteConfig.CreateProject.path);
appStore.updateActiveModal(MODALS.newCreateProject); appStore.updateActiveModal(MODALS.newCreateProject);
} }
} }

18
web/satellite/src/views/all-dashboard/components/Heading.vue
View File

@ -119,7 +119,6 @@ import { useRoute, useRouter } from 'vue-router';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import MyAccountButton from '@/views/all-dashboard/components/MyAccountButton.vue'; import MyAccountButton from '@/views/all-dashboard/components/MyAccountButton.vue';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
@ -134,6 +133,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore'; import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -157,6 +157,7 @@ const router = useRouter();
const route = useRoute(); const route = useRoute();
const notify = useNotify(); const notify = useNotify();
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
@ -169,7 +170,6 @@ const projectsStore = useProjectsStore();
const notificationsStore = useNotificationsStore(); const notificationsStore = useNotificationsStore();
const obStore = useObjectBrowserStore(); const obStore = useObjectBrowserStore();
const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi(); const auth = new AuthHttpApi();
const link = 'https://docs.storj.io/'; const link = 'https://docs.storj.io/';
@ -225,7 +225,7 @@ function goToProjects(): void {
return; return;
} }
analytics.pageVisit(projects); analyticsStore.pageVisit(projects);
router.push(projects); router.push(projects);
} }
@ -239,7 +239,7 @@ function navigateToBilling(): void {
const routeConf = billing.with(RouteConfig.BillingOverview2).path; const routeConf = billing.with(RouteConfig.BillingOverview2).path;
router.push(routeConf); router.push(routeConf);
analytics.pageVisit(routeConf); analyticsStore.pageVisit(routeConf);
} }
/** /**
@ -253,7 +253,7 @@ function navigateToSettings(): void {
return; return;
} }
analytics.pageVisit(settings); analyticsStore.pageVisit(settings);
router.push(settings).catch(() => {return;}); router.push(settings).catch(() => {return;});
} }
@ -261,7 +261,7 @@ function navigateToSettings(): void {
* Logouts user and navigates to login page. * Logouts user and navigates to login page.
*/ */
async function onLogout(): Promise<void> { async function onLogout(): Promise<void> {
analytics.pageVisit(RouteConfig.Login.path); analyticsStore.pageVisit(RouteConfig.Login.path);
await router.push(RouteConfig.Login.path); await router.push(RouteConfig.Login.path);
await Promise.all([ await Promise.all([
@ -279,7 +279,7 @@ async function onLogout(): Promise<void> {
]); ]);
try { try {
analytics.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED);
await auth.logout(); await auth.logout();
} catch (error) { } catch (error) {
notify.notifyError(error, AnalyticsErrorEventSource.NAVIGATION_ACCOUNT_AREA); notify.notifyError(error, AnalyticsErrorEventSource.NAVIGATION_ACCOUNT_AREA);
@ -290,8 +290,8 @@ async function onLogout(): Promise<void> {
* Sends "View Docs" event to segment and opens link. * Sends "View Docs" event to segment and opens link.
*/ */
function sendDocsEvent(): void { function sendDocsEvent(): void {
analytics.pageVisit(link); analyticsStore.pageVisit(link);
analytics.eventTriggered(AnalyticsEvent.VIEW_DOCS_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.VIEW_DOCS_CLICKED);
} }
</script> </script>

12
web/satellite/src/views/all-dashboard/components/MyAccountButton.vue
View File

@ -58,7 +58,6 @@ import {
AnalyticsErrorEventSource, AnalyticsErrorEventSource,
AnalyticsEvent, AnalyticsEvent,
} from '@/utils/constants/analyticsEventNames'; } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps'; import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useABTestingStore } from '@/store/modules/abTestingStore'; import { useABTestingStore } from '@/store/modules/abTestingStore';
@ -72,6 +71,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore'; import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import AccountIcon from '@/../static/images/navigation/account.svg'; import AccountIcon from '@/../static/images/navigation/account.svg';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg'; import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
@ -85,9 +85,9 @@ const router = useRouter();
const route = useRoute(); const route = useRoute();
const notify = useNotify(); const notify = useNotify();
const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi(); const auth = new AuthHttpApi();
const analyticsStore = useAnalyticsStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
@ -137,7 +137,7 @@ function navigateToBilling(): void {
const routeConf = billing.with(RouteConfig.BillingOverview2).path; const routeConf = billing.with(RouteConfig.BillingOverview2).path;
router.push(routeConf); router.push(routeConf);
analytics.pageVisit(routeConf); analyticsStore.pageVisit(routeConf);
} }
/** /**
@ -150,7 +150,7 @@ function navigateToSettings(): void {
return; return;
} }
analytics.pageVisit(settings); analyticsStore.pageVisit(settings);
router.push(settings).catch(() => {return;}); router.push(settings).catch(() => {return;});
} }
@ -158,7 +158,7 @@ function navigateToSettings(): void {
* Logouts user and navigates to login page. * Logouts user and navigates to login page.
*/ */
async function onLogout(): Promise<void> { async function onLogout(): Promise<void> {
analytics.pageVisit(RouteConfig.Login.path); analyticsStore.pageVisit(RouteConfig.Login.path);
await router.push(RouteConfig.Login.path); await router.push(RouteConfig.Login.path);
await Promise.all([ await Promise.all([
@ -176,7 +176,7 @@ async function onLogout(): Promise<void> {
]); ]);
try { try {
analytics.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED);
await auth.logout(); await auth.logout();
} catch (error) { } catch (error) {
notify.notifyError(error, AnalyticsErrorEventSource.NAVIGATION_ACCOUNT_AREA); notify.notifyError(error, AnalyticsErrorEventSource.NAVIGATION_ACCOUNT_AREA);

9
web/satellite/src/views/all-dashboard/components/MyProjects.vue
View File

@ -91,7 +91,6 @@ import {
} from '@/utils/constants/analyticsEventNames'; } from '@/utils/constants/analyticsEventNames';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { AnalyticsHttpApi } from '@/api/analytics';
import EmptyProjectItem from '@/views/all-dashboard/components/EmptyProjectItem.vue'; import EmptyProjectItem from '@/views/all-dashboard/components/EmptyProjectItem.vue';
import ProjectItem from '@/views/all-dashboard/components/ProjectItem.vue'; import ProjectItem from '@/views/all-dashboard/components/ProjectItem.vue';
import ProjectInvitationItem from '@/views/all-dashboard/components/ProjectInvitationItem.vue'; import ProjectInvitationItem from '@/views/all-dashboard/components/ProjectInvitationItem.vue';
@ -102,6 +101,7 @@ import { useConfigStore } from '@/store/modules/configStore';
import ProjectsTable from '@/views/all-dashboard/components/ProjectsTable.vue'; import ProjectsTable from '@/views/all-dashboard/components/ProjectsTable.vue';
import AllProjectsDashboardBanners from '@/views/all-dashboard/components/AllProjectsDashboardBanners.vue'; import AllProjectsDashboardBanners from '@/views/all-dashboard/components/AllProjectsDashboardBanners.vue';
import { useResize } from '@/composables/resize'; import { useResize } from '@/composables/resize';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VChip from '@/components/common/VChip.vue'; import VChip from '@/components/common/VChip.vue';
@ -114,8 +114,7 @@ const appStore = useAppStore();
const configStore = useConfigStore(); const configStore = useConfigStore();
const usersStore = useUsersStore(); const usersStore = useUsersStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const analyticsStore = useAnalyticsStore();
const analytics = new AnalyticsHttpApi();
const { isMobile } = useResize(); const { isMobile } = useResize();
@ -158,13 +157,13 @@ function onViewChangeClicked(view: string): void {
* Route to create project page. * Route to create project page.
*/ */
function onCreateProjectClicked(): void { function onCreateProjectClicked(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = usersStore.state.user; const user: User = usersStore.state.user;
const ownProjectsCount: number = projectsStore.projectsCount(user.id); const ownProjectsCount: number = projectsStore.projectsCount(user.id);
if (user.projectLimit > ownProjectsCount) { if (user.projectLimit > ownProjectsCount) {
analytics.pageVisit(RouteConfig.CreateProject.path); analyticsStore.pageVisit(RouteConfig.CreateProject.path);
appStore.updateActiveModal(MODALS.newCreateProject); appStore.updateActiveModal(MODALS.newCreateProject);
} else { } else {
appStore.updateActiveModal(MODALS.createProjectPrompt); appStore.updateActiveModal(MODALS.createProjectPrompt);

7
web/satellite/src/views/all-dashboard/components/ProjectInvitationItem.vue
View File

@ -41,21 +41,20 @@ import { ref } from 'vue';
import { ProjectRole } from '@/types/projectMembers'; import { ProjectRole } from '@/types/projectMembers';
import { ProjectInvitation, ProjectInvitationResponse } from '@/types/projects'; import { ProjectInvitation, ProjectInvitationResponse } from '@/types/projects';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue'; import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const isLoading = ref<boolean>(false); const isLoading = ref<boolean>(false);
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -81,7 +80,7 @@ async function onDeclineClicked(): Promise<void> {
try { try {
await projectsStore.respondToInvitation(props.invitation.projectID, ProjectInvitationResponse.Decline); await projectsStore.respondToInvitation(props.invitation.projectID, ProjectInvitationResponse.Decline);
analytics.eventTriggered(AnalyticsEvent.PROJECT_INVITATION_DECLINED); analyticsStore.eventTriggered(AnalyticsEvent.PROJECT_INVITATION_DECLINED);
} catch (error) { } catch (error) {
error.message = `Failed to decline project invitation. ${error.message}`; error.message = `Failed to decline project invitation. ${error.message}`;
notify.notifyError(error, AnalyticsErrorEventSource.PROJECT_INVITATION); notify.notifyError(error, AnalyticsErrorEventSource.PROJECT_INVITATION);

23
web/satellite/src/views/all-dashboard/components/ProjectItem.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information. // See LICENSE for copying information.
<template> <template>
<div v-if="project.id" class="project-item"> <div v-if="project?.id" class="project-item">
<div class="project-item__header"> <div class="project-item__header">
<project-ownership-tag :role="isOwner ? ProjectRole.Owner : ProjectRole.Member" /> <project-ownership-tag :role="isOwner ? ProjectRole.Owner : ProjectRole.Member" />
@ -50,7 +50,6 @@ import { Project } from '@/types/projects';
import { ProjectRole } from '@/types/projectMembers'; import { ProjectRole } from '@/types/projectMembers';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
@ -59,6 +58,7 @@ import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue'; import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
@ -67,6 +67,7 @@ import GearIcon from '@/../static/images/common/gearIcon.svg';
import UsersIcon from '@/../static/images/navigation/users.svg'; import UsersIcon from '@/../static/images/navigation/users.svg';
import MenuIcon from '@/../static/images/allDashboard/menu.svg'; import MenuIcon from '@/../static/images/allDashboard/menu.svg';
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const pmStore = useProjectMembersStore(); const pmStore = useProjectMembersStore();
@ -74,8 +75,6 @@ const usersStore = useUsersStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const router = useRouter(); const router = useRouter();
const analytics = new AnalyticsHttpApi();
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
project?: Project, project?: Project,
}>(), { }>(), {
@ -117,17 +116,17 @@ function closeDropDown() {
async function onOpenClicked(): Promise<void> { async function onOpenClicked(): Promise<void> {
await selectProject(); await selectProject();
if (usersStore.shouldOnboard) { if (usersStore.shouldOnboard) {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
return; return;
} }
await analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS); analyticsStore.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
if (usersStore.state.settings.passphrasePrompt) { if (usersStore.state.settings.passphrasePrompt) {
appStore.updateActiveModal(MODALS.enterPassphrase); appStore.updateActiveModal(MODALS.enterPassphrase);
} }
analytics.pageVisit(RouteConfig.ProjectDashboard.path); analyticsStore.pageVisit(RouteConfig.ProjectDashboard.path);
router.push(RouteConfig.ProjectDashboard.path); await router.push(RouteConfig.ProjectDashboard.path);
} }
async function selectProject() { async function selectProject() {
@ -143,8 +142,8 @@ async function selectProject() {
*/ */
async function goToProjectMembers(): Promise<void> { async function goToProjectMembers(): Promise<void> {
await selectProject(); await selectProject();
analytics.pageVisit(RouteConfig.Team.path); analyticsStore.pageVisit(RouteConfig.Team.path);
router.push(RouteConfig.Team.path); await router.push(RouteConfig.Team.path);
closeDropDown(); closeDropDown();
} }
@ -153,8 +152,8 @@ async function goToProjectMembers(): Promise<void> {
*/ */
async function goToProjectEdit(): Promise<void> { async function goToProjectEdit(): Promise<void> {
await selectProject(); await selectProject();
analytics.pageVisit(RouteConfig.EditProjectDetails.path); analyticsStore.pageVisit(RouteConfig.EditProjectDetails.path);
router.push(RouteConfig.EditProjectDetails.path); await router.push(RouteConfig.EditProjectDetails.path);
closeDropDown(); closeDropDown();
} }
</script> </script>

9
web/satellite/src/views/all-dashboard/components/ProjectTableInvitationItem.vue
View File

@ -50,7 +50,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed } from 'vue';
import { ProjectRole } from '@/types/projectMembers'; import { ProjectRole } from '@/types/projectMembers';
import { ProjectInvitation, ProjectInvitationResponse } from '@/types/projects'; import { ProjectInvitation, ProjectInvitationResponse } from '@/types/projects';
@ -60,8 +60,8 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore'; import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useResize } from '@/composables/resize'; import { useResize } from '@/composables/resize';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useLoading } from '@/composables/useLoading'; import { useLoading } from '@/composables/useLoading';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import TableItem from '@/components/common/TableItem.vue'; import TableItem from '@/components/common/TableItem.vue';
@ -69,12 +69,11 @@ import TableItem from '@/components/common/TableItem.vue';
import MenuIcon from '@/../static/images/common/horizontalDots.svg'; import MenuIcon from '@/../static/images/common/horizontalDots.svg';
import LogoutIcon from '@/../static/images/navigation/logout.svg'; import LogoutIcon from '@/../static/images/navigation/logout.svg';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const notify = useNotify(); const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const { isLoading, withLoading } = useLoading(); const { isLoading, withLoading } = useLoading();
const props = defineProps<{ const props = defineProps<{
@ -129,7 +128,7 @@ function onDeclineClicked(): void {
withLoading(async () => { withLoading(async () => {
try { try {
await projectsStore.respondToInvitation(props.invitation.projectID, ProjectInvitationResponse.Decline); await projectsStore.respondToInvitation(props.invitation.projectID, ProjectInvitationResponse.Decline);
analytics.eventTriggered(AnalyticsEvent.PROJECT_INVITATION_DECLINED); analyticsStore.eventTriggered(AnalyticsEvent.PROJECT_INVITATION_DECLINED);
} catch (error) { } catch (error) {
error.message = `Failed to decline project invitation. ${error.message}`; error.message = `Failed to decline project invitation. ${error.message}`;
notify.notifyError(error, AnalyticsErrorEventSource.PROJECT_INVITATION); notify.notifyError(error, AnalyticsErrorEventSource.PROJECT_INVITATION);

21
web/satellite/src/views/all-dashboard/components/ProjectTableItem.vue
View File

@ -61,7 +61,6 @@ import { ProjectRole } from '@/types/projectMembers';
import { Project } from '@/types/projects'; import { Project } from '@/types/projects';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
@ -71,6 +70,7 @@ import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useResize } from '@/composables/resize'; import { useResize } from '@/composables/resize';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import TableItem from '@/components/common/TableItem.vue'; import TableItem from '@/components/common/TableItem.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -79,6 +79,7 @@ import UsersIcon from '@/../static/images/navigation/users.svg';
import GearIcon from '@/../static/images/common/gearIcon.svg'; import GearIcon from '@/../static/images/common/gearIcon.svg';
import MenuIcon from '@/../static/images/common/horizontalDots.svg'; import MenuIcon from '@/../static/images/common/horizontalDots.svg';
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const pmStore = useProjectMembersStore(); const pmStore = useProjectMembersStore();
@ -86,8 +87,6 @@ const usersStore = useUsersStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const router = useRouter(); const router = useRouter();
const analytics = new AnalyticsHttpApi();
const props = defineProps<{ const props = defineProps<{
project: Project, project: Project,
}>(); }>();
@ -153,17 +152,17 @@ function closeDropDown() {
async function onOpenClicked(): Promise<void> { async function onOpenClicked(): Promise<void> {
await selectProject(); await selectProject();
if (usersStore.shouldOnboard) { if (usersStore.shouldOnboard) {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path); analyticsStore.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
return; return;
} }
await analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS); analyticsStore.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
if (usersStore.state.settings.passphrasePrompt) { if (usersStore.state.settings.passphrasePrompt) {
appStore.updateActiveModal(MODALS.enterPassphrase); appStore.updateActiveModal(MODALS.enterPassphrase);
} }
analytics.pageVisit(RouteConfig.ProjectDashboard.path); analyticsStore.pageVisit(RouteConfig.ProjectDashboard.path);
router.push(RouteConfig.ProjectDashboard.path); await router.push(RouteConfig.ProjectDashboard.path);
} }
async function selectProject() { async function selectProject() {
@ -179,8 +178,8 @@ async function selectProject() {
*/ */
async function goToProjectMembers(): Promise<void> { async function goToProjectMembers(): Promise<void> {
await selectProject(); await selectProject();
analytics.pageVisit(RouteConfig.Team.path); analyticsStore.pageVisit(RouteConfig.Team.path);
router.push(RouteConfig.Team.path); await router.push(RouteConfig.Team.path);
closeDropDown(); closeDropDown();
} }
@ -189,8 +188,8 @@ async function goToProjectMembers(): Promise<void> {
*/ */
async function goToProjectEdit(): Promise<void> { async function goToProjectEdit(): Promise<void> {
await selectProject(); await selectProject();
analytics.pageVisit(RouteConfig.EditProjectDetails.path); analyticsStore.pageVisit(RouteConfig.EditProjectDetails.path);
router.push(RouteConfig.EditProjectDetails.path); await router.push(RouteConfig.EditProjectDetails.path);
closeDropDown(); closeDropDown();
} }
</script> </script>

8
web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
View File

@ -160,7 +160,6 @@ import {
import { useAppStore } from '@poc/store/appStore'; import { useAppStore } from '@poc/store/appStore';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/types/router'; import { RouteConfig } from '@/types/router';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks'; import { useNotify } from '@/utils/hooks';
@ -172,10 +171,12 @@ import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore'; import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
const activeTheme = ref<number>(0); const activeTheme = ref<number>(0);
const theme = useTheme(); const theme = useTheme();
const analyticsStore = useAnalyticsStore();
const bucketsStore = useBucketsStore(); const bucketsStore = useBucketsStore();
const appStore = useAppStore(); const appStore = useAppStore();
const agStore = useAccessGrantsStore(); const agStore = useAccessGrantsStore();
@ -189,7 +190,6 @@ const obStore = useObjectBrowserStore();
const router = useRouter(); const router = useRouter();
const notify = useNotify(); const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const auth: AuthHttpApi = new AuthHttpApi(); const auth: AuthHttpApi = new AuthHttpApi();
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -232,13 +232,13 @@ async function onLogout(): Promise<void> {
]); ]);
try { try {
analytics.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED); analyticsStore.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED);
await auth.logout(); await auth.logout();
} catch (error) { } catch (error) {
notify.error(error.message, null); notify.error(error.message, null);
} }
analytics.pageVisit(RouteConfig.Login.path); analyticsStore.pageVisit(RouteConfig.Login.path);
await router.push(RouteConfig.Login.path); await router.push(RouteConfig.Login.path);
// TODO this reload will be unnecessary once vuetify poc has its own login and/or becomes the primary app // TODO this reload will be unnecessary once vuetify poc has its own login and/or becomes the primary app
location.reload(); location.reload();