jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): show ingest point (#2291)

Browse source
This commit is contained in:
Shekar Siri 2024-06-21 16:42:57 +02:00 • committed by GitHub
parent e9c96521ab
commit 05f7c33a85
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 32 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs.tsx
View file

@ -3,7 +3,7 @@ import stl from './installDocs.module.css';
import cn from 'classnames';
import Highlight from 'react-highlight';
import CircleNumber from '../../CircleNumber';
import {CopyButton} from 'UI';
import { CopyButton } from 'UI';
export const installationCommand = `// Add it in your root build.gradle at the end of repositories:
dependencyResolutionManagement {
@ -27,11 +27,11 @@ import com.openreplay.tracker.OpenReplay
class MainActivity : TrackingActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
// not required if you're using our SaaS version
OpenReplay.serverURL = "https://your.instance.com/ingest"
OpenReplay.serverURL = "INGEST_POINT"
// check out our SDK docs to see available options
OpenReplay.start(
applicationContext,
"projectkey",
"PROJECT_KEY",
OpenReplay.Options.defaults(),
onStarted = {
println("OpenReplay Started")
@ -40,7 +40,7 @@ class MainActivity : TrackingActivity() {
// ...
}
}`;
const configuration = `let crashs: Bool
const configuration = `let crashes: Bool
let analytics: Bool
let performances: Bool
let logs: Bool
@ -57,38 +57,38 @@ const sensitive = `import com.openreplay.tracker.OpenReplay
OpenReplay.addIgnoredView(view)
`
const inputs = `import com.opnereplay.tracker.OpenReplay
const inputs = `import com.openreplay.tracker.OpenReplay
val passwordEditText = binding.password
passwordEditText.trackTextInput(label = "password", masked = true)`
function AndroidInstallDocs({site}: any) {
const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey);
function AndroidInstallDocs({ site, ingestPoint }: any) {
let _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey).replace('INGEST_POINT', ingestPoint);
return (
<div>
<div className="mb-4">
<div className="font-semibold mb-2 flex items-center">
<CircleNumber text="1"/>
<CircleNumber text="1" />
Install the SDK
</div>
<div className={cn(stl.snippetWrapper, 'ml-10')}>
<div className="absolute mt-1 mr-2 right-0">
<CopyButton content={installationCommand}/>
<CopyButton content={installationCommand} />
</div>
<Highlight className="cli">{installationCommand}</Highlight>
</div>
</div>
<div className="font-semibold mb-2 flex items-center">
<CircleNumber text="2"/>
<CircleNumber text="2" />
Add to your app
</div>
<div className="flex ml-10 mt-4">
<div className="w-full">
<div className={cn(stl.snippetWrapper)}>
<div className="absolute mt-1 mr-2 right-0">
<CopyButton content={_usageCode}/>
<CopyButton content={_usageCode} />
</div>
<Highlight className="swift">{_usageCode}</Highlight>
</div>
@ -96,7 +96,7 @@ function AndroidInstallDocs({site}: any) {
</div>
<div className="font-semibold mb-2 mt-4 flex items-center">
<CircleNumber text="3"/>
<CircleNumber text="3" />
Configuration
</div>
<div className="flex ml-10 mt-4">
@ -110,14 +110,14 @@ function AndroidInstallDocs({site}: any) {
</div>
<div className="font-semibold mb-2 mt-4 flex items-center">
<CircleNumber text="4"/>
<CircleNumber text="4" />
Set up touch events listener
</div>
<div className="flex ml-10 mt-4">
<div className="w-full">
<div className={cn(stl.snippetWrapper)}>
<div className="absolute mt-1 mr-2 right-0">
<CopyButton content={touches}/>
<CopyButton content={touches} />
</div>
<Highlight className="swift">{touches}</Highlight>
</div>
@ -125,14 +125,14 @@ function AndroidInstallDocs({site}: any) {
</div>
<div className="font-semibold mb-2 mt-4 flex items-center">
<CircleNumber text="5"/>
<CircleNumber text="5" />
Hide sensitive views
</div>
<div className="flex ml-10 mt-4">
<div className="w-full">
<div className={cn(stl.snippetWrapper)}>
<div className="absolute mt-1 mr-2 right-0">
<CopyButton content={sensitive}/>
<CopyButton content={sensitive} />
</div>
<Highlight className="swift">{sensitive}</Highlight>
</div>
@ -140,14 +140,14 @@ function AndroidInstallDocs({site}: any) {
</div>
<div className="font-semibold mb-2 mt-4 flex items-center">
<CircleNumber text="6"/>
<CircleNumber text="6" />
Track inputs
</div>
<div className="flex ml-10 mt-4">
<div className="w-full">
<div className={cn(stl.snippetWrapper)}>
<div className="absolute mt-1 mr-2 right-0">
<CopyButton content={inputs}/>
<CopyButton content={inputs} />
</div>
<Highlight className="swift">{inputs}</Highlight>
</div>
@ -157,4 +157,4 @@ function AndroidInstallDocs({site}: any) {
);
}
export default AndroidInstallDocs
export default AndroidInstallDocs;

8
frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs.tsx
View file

@ -25,14 +25,14 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// not required if you're using our SaaS version
OpenReplay.shared.serverURL = "https://your.instance.com/ingest"
OpenReplay.shared.serverURL = "INGEST_POINT"
OpenReplay.shared.start(projectKey: "PROJECT_KEY", options: .defaults)
// ...
return true
}
// ...`;
const configuration = `let crashs: Bool
const configuration = `let crashes: Bool
let analytics: Bool
let performances: Bool
let logs: Bool
@ -72,8 +72,8 @@ TextField("Input", text: $text)
// UIKit will use placeholder as label and sender.isSecureTextEntry to mask the input
Analytics.shared.addObservedInput(inputEl)`
function MobileInstallDocs({ site }: any) {
const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey);
function MobileInstallDocs({ site, ingestPoint }: any) {
const _usageCode = usageCode.replace('INGEST_POINT', ingestPoint).replace('PROJECT_KEY', site.projectKey);
return (
<div>

5
frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingMobileTabs.tsx
View file

@ -21,6 +21,7 @@ const MobileTrackingCodeModal = (props: Props) => {
const { site } = props;
const [activeTab, setActiveTab] = useState(iOS);
const { showModal } = useModal();
const ingestPoint = `https://${window.location.hostname}/ingest`;
const showUserModal = () => {
showModal(<UserForm />, { right: true });
@ -32,7 +33,7 @@ const MobileTrackingCodeModal = (props: Props) => {
return (
<div className="grid grid-cols-6 gap-4">
<div className="col-span-4">
<MobileInstallDocs site={site} />
<MobileInstallDocs site={site} ingestPoint={ingestPoint} />
</div>
<div className="col-span-2">
@ -55,7 +56,7 @@ const MobileTrackingCodeModal = (props: Props) => {
return (
<div className="grid grid-cols-6 gap-4">
<div className="col-span-4">
<AndroidInstallDocs site={site} />
<AndroidInstallDocs site={site} ingestPoint={ingestPoint} />
</div>
<div className="col-span-2">

6
frontend/app/components/shared/TrackingCodeModal/InstallIosDocs.tsx
View file

@ -7,12 +7,12 @@ import stl from './InstallDocs/installDocs.module.css'
import { usageCode as iosUsageCode, installationCommand as iosInstallCommand } from "../../Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs";
import { usageCode as androidUsageCode, installationCommand as androidInstallCommand } from "../../Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs";
function InstallMobileDocs({ site }) {
function InstallMobileDocs({ site, ingestPoint }: any) {
const [isIos, setIsIos] = React.useState(true)
const usageCode = isIos ? iosUsageCode : androidUsageCode
const installationCommand = isIos ? iosInstallCommand : androidInstallCommand
const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey)
const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey).replace('INGEST_POINT', ingestPoint)
const docLink = `https://docs.openreplay.com/en/${isIos ? 'ios-' : 'android-'}sdk/`
return (
@ -54,4 +54,4 @@ function InstallMobileDocs({ site }) {
)
}
export default InstallMobileDocs
export default InstallMobileDocs

5
frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js
View file

@ -34,7 +34,8 @@ class TrackingCodeModal extends React.PureComponent {
render() {
const { title = '', subTitle, site } = this.props;
const { activeTab } = this.state;
console.log(this.props.site);
const ingestPoint = `https://${window.location.hostname}/ingest`;
return (
<div
className="bg-white h-screen overflow-y-auto"
@ -49,7 +50,7 @@ class TrackingCodeModal extends React.PureComponent {
{site.platform === 'ios' ? (
<div className={'p-5'}>
<InstallMobileDocs site={site} />
<InstallMobileDocs site={site} ingestPoint={ingestPoint} />
</div>
) : (
<div>