-
- )
- }
-
- if (!data) {
- return (
-
-
- )
- }
-
- if (!data) {
- return (
-
-
- )
- }
-
- if (!data) {
- return (
-
-
- )
-}
diff --git a/packages/studio/web/src/Charts/SpanTypeTimeSeriesBarChart.tsx b/packages/studio/web/src/Charts/SpanTypeTimeSeriesBarChart.tsx
deleted file mode 100644
index c3e90bd57795..000000000000
--- a/packages/studio/web/src/Charts/SpanTypeTimeSeriesBarChart.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { useState } from 'react'
-
-import { useQuery, gql } from '@apollo/client'
-import type { Color } from '@tremor/react'
-import { Card, Select, SelectItem, Flex, BarChart, Title } from '@tremor/react'
-
-import LoadingSpinner from '../Components/LoadingSpinner'
-import ErrorPanel from '../Components/Panels/ErrorPanel'
-import WarningPanel from '../Components/Panels/WarningPanel'
-
-const QUERY_GET_SPAN_TYPE_TIMESERIES = gql`
- query QUERY_GET_SPAN_TYPE_TIMESERIES(
- $timeLimit: Int!
- $showGeneric: Boolean!
- $showGraphql: Boolean!
- $showHttp: Boolean!
- $showPrisma: Boolean!
- $showRedwoodFunction: Boolean!
- $showRedwoodService: Boolean!
- $showSql: Boolean!
- ) {
- spanTypeTimeSeriesData(timeLimit: $timeLimit) {
- generic @include(if: $showGeneric)
- graphql @include(if: $showGraphql)
- http @include(if: $showHttp)
- prisma @include(if: $showPrisma)
- redwoodfunction @include(if: $showRedwoodFunction)
- redwoodservice @include(if: $showRedwoodService)
- sql @include(if: $showSql)
- ts
- }
- }
-`
-
-export default function SpanTypeTimeSeriesBarChart({
- name = 'Time Series Bar Chart',
- timeLimit,
- showGeneric = false,
- showGraphql = false,
- showHttp = false,
- showPrisma = false,
- showRedwoodFunction = false,
- showRedwoodService = false,
- showSql = false,
-}: {
- name: string
- timeLimit: number
- showGeneric?: boolean
- showGraphql?: boolean
- showHttp?: boolean
- showPrisma?: boolean
- showRedwoodFunction?: boolean
- showRedwoodService?: boolean
- showSql?: boolean
-}) {
- const [refreshSecondsAgo, setRefreshSecondsAgo] = useState(timeLimit)
-
- const { loading, error, data } = useQuery(QUERY_GET_SPAN_TYPE_TIMESERIES, {
- variables: {
- timeLimit: refreshSecondsAgo,
- showGeneric,
- showGraphql,
- showHttp,
- showPrisma,
- showRedwoodFunction,
- showRedwoodService,
- showSql,
- },
- pollInterval: 5_000,
- })
-
- if (error) {
- return
-
- )
- }
-
- if (!data) {
- return (
-
-
- )
- }
-
- if (!data) {
- return (
-
-
-
-
-
-
- )
-}
-
-export default CountCard
diff --git a/packages/studio/web/src/Components/Event/ErrorEventLink.tsx b/packages/studio/web/src/Components/Event/ErrorEventLink.tsx
deleted file mode 100644
index a2fe466e7d4c..000000000000
--- a/packages/studio/web/src/Components/Event/ErrorEventLink.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-
-import { LinkIcon } from '@heroicons/react/20/solid'
-import { Bold, Card, Flex, Text } from '@tremor/react'
-import { Link } from 'react-router-dom'
-
-export default function ErrorEventLink({
- event,
- spanId,
-}: {
- event: any
- spanId: string
-}) {
- const attributeCount = Object.keys(event.attributes || {}).length
- return (
-
-
-
- - {title} -
-
- {value ? (
- value
- ) : error ? (
- 'error'
- ) : loading ? (
-
-
-
-
- {' '}
- View all
- {title} stats
-
-
-
-
- {event.name} (
- {attributeCount === 1
- ? '1 attribute'
- : `${attributeCount} attributes`}
- )
-
-
- {new Date(Number(event.time / BigInt(1e6))).toISOString()}
-
-
-
-
-
- {event.name} (
- {attributeCount === 1
- ? '1 attribute'
- : `${attributeCount} attributes`}
- )
-
-
- {new Date(Number(event.time / BigInt(1e6))).toISOString()}
-
-
-
- 0 ? 'md:ml-2 sm:ml-0' : ''
- }`}
- aria-hidden="true"
- />
- {custom.value}
-
- )
- })}
-
- )
-}
diff --git a/packages/studio/web/src/Components/Feature/DescendantFeatureList.tsx b/packages/studio/web/src/Components/Feature/DescendantFeatureList.tsx
deleted file mode 100644
index 6ef24813cc29..000000000000
--- a/packages/studio/web/src/Components/Feature/DescendantFeatureList.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-
-import { BarsArrowDownIcon } from '@heroicons/react/20/solid'
-import { Card, Flex, Title, Italic, Text } from '@tremor/react'
-
-import FeatureLink from './FeatureLink'
-
-export default function DescendantFeatureList({
- features,
-}: {
- features: any[]
-}) {
- return (
-
-
-
- - {featureDisplayNames.get(feature.type)} -
-- {feature.brief || feature.id} -
-
-
-
- )
-}
-
-export default LoadingSpinner
diff --git a/packages/studio/web/src/Components/Mail/MailRenderer.tsx b/packages/studio/web/src/Components/Mail/MailRenderer.tsx
deleted file mode 100644
index ad41b193e8d5..000000000000
--- a/packages/studio/web/src/Components/Mail/MailRenderer.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-
-import {
- ComputerDesktopIcon,
- DevicePhoneMobileIcon,
- DeviceTabletIcon,
-} from '@heroicons/react/20/solid'
-import {
- DocumentChartBarIcon,
- DocumentTextIcon,
- CodeBracketIcon,
- ArrowPathIcon,
-} from '@heroicons/react/24/outline'
-import {
- Text,
- Card,
- Button,
- Flex,
- Select,
- SelectItem,
- Tab,
- TabGroup,
- TabList,
- TabPanel,
- TabPanels,
- Italic,
-} from '@tremor/react'
-
-import ErrorPanel from '../Panels/ErrorPanel'
-
-// Note: the "+2" is to account for the borders
-const PREVIEW_DIMENSIONS = [
- {
- label: 'Desktop',
- width: null,
- height: null,
- icon: ComputerDesktopIcon,
- },
- {
- label: 'iPhone 12 Pro',
- width: 390 + 2,
- height: 844 + 2,
- icon: DevicePhoneMobileIcon,
- },
- {
- label: 'Pixel 5',
- width: 393 + 2,
- height: 851 + 2,
- icon: DevicePhoneMobileIcon,
- },
- {
- label: 'iPad Air',
- width: 820 + 2,
- height: 1180 + 2,
- icon: DeviceTabletIcon,
- },
- {
- label: 'Surface Pro 7',
- width: 912 + 2,
- height: 1368 + 2,
- icon: DeviceTabletIcon,
- },
-]
-
-function MailPreview({
- html,
- text,
- error,
- additionalTabHeaders,
- additionalTabPanels,
-}: {
- html: string | null
- text: string | null
- error?: any
- additionalTabHeaders?: React.ReactElement
- additionalTabPanels?: React.ReactElement[]
-}) {
- const iframeRef = useRef
-
- )
- }
-
- return (
-
-
-
-
-
-
-
- ) : (
- {text}
- ) : (
- {html}
- ) : (
- {JSON.stringify(error, undefined, 2)}
- {JSON.stringify(message, undefined, 2)}
- {JSON.stringify(warning, undefined, 2)}
-
-
-
- setParams({
- query,
- })
- }
- >
-
-
-
-
-
- )
-}
diff --git a/packages/studio/web/src/Components/RedwoodGraphiQL/styles.css b/packages/studio/web/src/Components/RedwoodGraphiQL/styles.css
deleted file mode 100644
index 716d010d2429..000000000000
--- a/packages/studio/web/src/Components/RedwoodGraphiQL/styles.css
+++ /dev/null
@@ -1,19 +0,0 @@
-body,
-html {
- margin: 0;
-}
-
-.graphiql-container {
- height: 100vh;
- width: 100%;
-}
-
-body.graphiql-dark .graphiql-container,body.graphiql-dark .CodeMirror-info,body.graphiql-dark .CodeMirror-lint-tooltip,body.graphiql-dark reach-portal {
- --color-primary: 12, 98%, 44%;
-}
-
-@media (prefers-color-scheme: dark) {
- body:not(.graphiql-light) .graphiql-container,body:not(.graphiql-light) .CodeMirror-info,body:not(.graphiql-light) .CodeMirror-lint-tooltip,body:not(.graphiql-light) reach-portal {
- --color-primary: 12, 98%, 44%;
- }
-}
diff --git a/packages/studio/web/src/Components/SearchFilterBar.tsx b/packages/studio/web/src/Components/SearchFilterBar.tsx
deleted file mode 100644
index 2510cd472d74..000000000000
--- a/packages/studio/web/src/Components/SearchFilterBar.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react'
-
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
-import { useLocation } from 'react-router-dom'
-
-import { SearchFilterContext } from '../Context/SearchFilterContextProvider'
-
-export default function SearchFilterBar() {
- const location = useLocation()
- const [searchFilters, dispatcher] = useContext(SearchFilterContext)
-
- const relevantFilters = location.pathname.startsWith('/explorer/span')
- ? searchFilters.spansFilter
- : searchFilters.tracesFilter
-
- const [filterValue, setFilterValue] = useState(relevantFilters)
-
- useEffect(() => {
- setFilterValue(relevantFilters)
- }, [location, relevantFilters])
-
- const updateSearchFilter = () => {
- if (location.pathname.startsWith('/explorer/span')) {
- dispatcher({
- type: 'SET_SPANS_FILTER',
- payload: filterValue,
- })
- } else if (location.pathname.startsWith('/explorer/trace')) {
- dispatcher({
- type: 'SET_TRACES_FILTER',
- payload: filterValue,
- })
- }
- }
-
- return (
-
- {props?.title ? props.title : <>GraphiQL}
-
-
-
- )
-}
diff --git a/packages/studio/web/src/Components/Span/EventList.tsx b/packages/studio/web/src/Components/Span/EventList.tsx
deleted file mode 100644
index 9589ed3f01b6..000000000000
--- a/packages/studio/web/src/Components/Span/EventList.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react'
-
-import { Card, Flex, Italic, Subtitle, Text, Title } from '@tremor/react'
-
-import ErrorEventLink from '../Event/ErrorEventLink'
-import EventModal from '../Event/EventModal'
-
-export default function EventList({
- events,
- spanId,
-}: {
- events: any[]
- spanId: string
-}) {
- const data = events?.sort((a, b) =>
- a.time < b.time ? -1 : a.time > b.time ? 1 : 0
- )
-
- return (
-
-
-
-
-
-
-
-
- {
- if (e.key === 'Enter') {
- updateSearchFilter()
- }
- }}
- onChange={(e) => {
- setFilterValue(e.currentTarget.value)
- }}
- />
- {JSON.stringify(JSON.parse(value), undefined, 2)}
- } catch (error) {
- return -
- {data.map((d) => (
-
-
- {data.map((d) => (
-
-
- {data.map((d) => (
-
- {enhancementFeatures.sort().map((feature) => {
- if (featureKeys.includes(feature)) {
- const Icon = featureIconMapping[feature]
- return (
-
- )
-}
-
-export default EnhancementList
diff --git a/packages/studio/web/src/Components/Tracing/FlameTableView.tsx b/packages/studio/web/src/Components/Tracing/FlameTableView.tsx
deleted file mode 100644
index c8e71772a00d..000000000000
--- a/packages/studio/web/src/Components/Tracing/FlameTableView.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import React from 'react'
-
-// See https://gist.github.com/IceCreamYou/6ffa1b18c4c8f6aeaad2
-const percentile = (numbers: number[], percentile: number): number => {
- if (numbers.length === 0) {
- return 0
- }
- if (percentile <= 0) {
- return numbers[0]
- }
- if (percentile >= 1) {
- return numbers[numbers.length - 1]
- }
-
- const index = (numbers.length - 1) * percentile,
- lower = Math.floor(index),
- upper = lower + 1,
- weight = index % 1
-
- if (upper >= numbers.length) {
- return numbers[lower]
- }
- return numbers[lower] * (1 - weight) + numbers[upper] * weight
-}
-
-function FlameTableView({ trace }: { trace: any }) {
- const spanStats: any[] = trace.spans.map((span: any) => {
- return {
- id: span.id,
- name: span.name,
- // We assume durationNano will fit into Number
- duration: Number(span.durationNano),
- parent: span.parent,
- }
- })
- const uniqueSpanNames: string[] = Array.from(
- new Set(spanStats.map((span) => span.name))
- )
-
- const numberFormatter = new Intl.NumberFormat(undefined, {
- minimumFractionDigits: 3,
- maximumFractionDigits: 3,
- })
-
- const spanFlameData = uniqueSpanNames
- .map((spanName: string) => {
- const spansOfInterest = spanStats.filter((span) => span.name === spanName)
- const durations = (
- spansOfInterest.map((span) => span.duration) as number[]
- ).sort((a, b) => a - b)
-
- const sum = durations.reduce((acc, duration) => acc + duration, 0)
- const middle = Math.floor(durations.length / 2)
-
- return spansOfInterest.length === 1
- ? {
- name: spanName,
- count: spansOfInterest.length,
- mean: numberFormatter.format(sum / 1e6),
- min: '-',
- median: '-',
- max: '-',
- p90: '-',
- p95: '-',
- sum: '-',
- }
- : {
- name: spanName,
- count: spansOfInterest.length,
- mean: numberFormatter.format(sum / spansOfInterest.length / 1e6),
- min: numberFormatter.format(Math.min(...durations) / 1e6),
- median: numberFormatter.format(
- (durations.length % 2 === 0
- ? (durations[middle - 1] + durations[middle]) / 2
- : durations[middle]) / 1e6
- ),
- max: numberFormatter.format(Math.max(...durations) / 1e6),
- p90: numberFormatter.format(percentile(durations, 0.9) / 1e6),
- p95: numberFormatter.format(percentile(durations, 0.95) / 1e6),
- sum: numberFormatter.format(sum / 1e6),
- }
- })
- .sort((a, b) => (a.name > b.name ? 1 : b.name > a.name ? -1 : 0))
-
- return (
- - - {featureNameMapping[feature]} -
- ) - } - return <> - })} -
-
- )
-}
-
-export default FlameTableView
diff --git a/packages/studio/web/src/Components/Tracing/PrismaQueryView.tsx b/packages/studio/web/src/Components/Tracing/PrismaQueryView.tsx
deleted file mode 100644
index 971000d69589..000000000000
--- a/packages/studio/web/src/Components/Tracing/PrismaQueryView.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react'
-
-function PrismQueryView({ prismaQueries }: { prismaQueries: [any] }) {
- return (
-
-
-
-
-
- | - Span Name - | -- Quantity - | -- Mean (ms) - | -- Min (ms) - | -- Median (ms) - | -- Max (ms) - | -- p(90) (ms) - | -- p(95) (ms) - | -- Sum (ms) - | -
|---|---|---|---|---|---|---|---|---|
| - {row.name} - | -- {row.count} - | -- {row.mean} - | -- {row.min} - | -- {row.median} - | -- {row.max} - | -- {row.p90} - | -- {row.p95} - | -- {row.sum} - | -
-
- )
-}
-
-export default PrismQueryView
diff --git a/packages/studio/web/src/Components/Tracing/TimelineView.tsx b/packages/studio/web/src/Components/Tracing/TimelineView.tsx
deleted file mode 100644
index 3e126e402ef6..000000000000
--- a/packages/studio/web/src/Components/Tracing/TimelineView.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import React, { useState } from 'react'
-
-import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
-
-import { traceEnd, traceStart } from '../../util/trace'
-
-const numberFormatter = new Intl.NumberFormat(undefined, {
- minimumFractionDigits: 2,
- maximumFractionDigits: 2,
-})
-
-const convertValueToStringOrJSON = (value: any) => {
- try {
- return
-
-
-
- - Prisma Queries -
-- A list of all Prisma queries executed during this trace. -
-
-
-
-
-
-
-
-
-
- | - Model - | -- Method - | -- Duration (ms) - | -- DB Statement - | -
|---|---|---|---|
| - {prismaQuery.model} - | -- {prismaQuery.method} - | -- {prismaQuery.duration_ms} - | -- {prismaQuery.db_statement} - | -
{JSON.stringify(JSON.parse(value), undefined, 2)}
- } catch (error) {
- return value
- }
-}
-
-function SpanSegment({
- trace,
- span,
- depth = 0,
- traceStartNano,
- traceEndNano,
-}: {
- trace: any
- span: any
- depth?: number
- traceStartNano: string
- traceEndNano: string
-}) {
- const [isExpanded, setIsExpanded] = useState(true)
- const [showDetails, setShowDetails] = useState(false)
-
- const traceStart = BigInt.asUintN(63, BigInt(traceStartNano))
- const traceEnd = BigInt.asUintN(63, BigInt(traceEndNano))
- const traceDuration = Number(traceEnd - traceStart)
-
- const spanStart = BigInt.asUintN(63, BigInt(span.startNano))
- const spanEnd = BigInt.asUintN(63, BigInt(span.endNano))
-
- const startBasis = (Number(spanStart - traceStart) / traceDuration) * 99.999
- const duringBasis = (Number(spanEnd - spanStart) / traceDuration) * 99.999
- const endBasis = (Number(traceEnd - spanEnd) / traceDuration) * 99.999
-
- const durationText = `${numberFormatter.format(
- Number(spanEnd - spanStart) / 1_000_000
- )}ms`
- const durationTextAtEnd = endBasis > 0.2
- const durationTextAtDuring = !durationTextAtEnd && duringBasis > 0.2
- const durationTextAtStart = !durationTextAtEnd && !durationTextAtDuring
-
- const children = trace.spans
- .filter((child: any) => child.parent === span.id)
- .sort((a: any, b: any) =>
- a.startNano > b.startNano ? 1 : b.startNano > a.startNano ? -1 : 0
- )
-
- return (
-
-
- )
-}
-
-function TimelineView({ trace }: { trace: any }) {
- const rootSpans = trace.spans
- .filter((span: any) => span.parent == null)
- .sort((a: any, b: any) =>
- a.startNano > b.startNano ? 1 : b.startNano > a.startNano ? -1 : 0
- )
-
- const traceStartNano = traceStart(trace.spans)
- const traceEndNano = traceEnd(trace.spans)
-
- return (
-
-
- {showDetails && (
- 0 ? -2 : 26) }}
- >
- {children.length > 0 && (
-
- )}
-
-
-
-
-
-
-
- {durationTextAtStart ? durationText : '⠀'}
-
-
- {durationTextAtDuring ? durationText : '⠀'}
-
-
- {durationTextAtEnd ? durationText : '⠀'}
-
-
-
- )}
- {isExpanded && (
- <>
- {children.map((child: any) => (
-
-
- Attributes
-
-
-
-
-
-
-
- {Object.entries(span.attributes as JSON).map(
- ([key, value]) => (
-
-
- | - {key} - | -- {convertValueToStringOrJSON(value)} - | -
-
- Events
-
- {Object.entries(span.events).map(([key, value]) => {
- return (
-
-
-
- )
- })}
- {key}
- {JSON.stringify(value)}
-
-
- Resources
-
-
-
-
- {/* {=> {
- return (
-
-
-
- {Object.entries(span.resources as JSON).map(
- ([key, value]) => (
-
-
- | - {key} - | -- {convertValueToStringOrJSON(value)} - | -
-
- )
- })} */}
- {key}
- {JSON.stringify(value)}
-
- {rootSpans.map((span: any) => (
-
- )
-}
-
-export default TimelineView
diff --git a/packages/studio/web/src/Context/SearchFilterContextProvider.tsx b/packages/studio/web/src/Context/SearchFilterContextProvider.tsx
deleted file mode 100644
index 4f78218a8d52..000000000000
--- a/packages/studio/web/src/Context/SearchFilterContextProvider.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { createContext, useReducer } from 'react'
-
-const initialState = {
- spansFilter: 'limit:128 sort:start:desc',
- tracesFilter: '',
-}
-
-const actions = {
- SET_SPANS_FILTER: 'SET_SPANS_FILTER',
- SET_TRACES_FILTER: 'SET_TRACES_FILTER',
-}
-
-const reducer = (state: typeof initialState, action: any) => {
- switch (action.type) {
- case actions.SET_SPANS_FILTER:
- return { ...state, spansFilter: action.payload }
- case actions.SET_TRACES_FILTER:
- return { ...state, tracesFilter: action.payload }
- default:
- return state
- }
-}
-
-export const SearchFilterContext = createContext<
- [typeof initialState, React.Dispatch-
-
-
-
- - Overview - -
- -
- - Telemetry Explorer --
-
- {explorerNavigation.map((item) => (
-
- - {item.name} - - ))} -
- -
- - Monitoring Dashboards --
-
- {monitorNavigation.map((item) => (
-
- - {item.name} - - ))} -
- -
- - APIs --
-
- {apiNavigation.map((item) => (
-
- - {item.name} - - ))} -
- -
- - Mail --
-
- {mailNavigation.map((item) => (
-
- - {item.name} - - ))} -
- -
- - Misc. --
-
- {miscNavigation.map((item) => (
-
- - {item.name} - - ))} -
-
-
-
-
-
- {/* Static sidebar for desktop */}
-
-
- )
-}
-
-function ErrorComponent({ error }: { error: any }) {
- return (
-
- {/* Sidebar component, swap this element with another sidebar if you like */}
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
diff --git a/packages/studio/web/src/Pages/ComingSoon.tsx b/packages/studio/web/src/Pages/ComingSoon.tsx
deleted file mode 100644
index b8e1b9284f91..000000000000
--- a/packages/studio/web/src/Pages/ComingSoon.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react'
-
-import {
- ShieldExclamationIcon,
- CloudArrowUpIcon,
- MagnifyingGlassIcon,
- PresentationChartLineIcon,
-} from '@heroicons/react/24/outline'
-
-const features = [
- {
- name: 'Cloud Sync',
- description:
- 'Sync your dev data to the cloud, allowing you to track your apps development across time, team members and git branches.',
- icon: CloudArrowUpIcon,
- },
- {
- name: 'More Understanding',
- description:
- "We'll be expanding what insights and data we extract from your tracing to build you an even clearer picture of your app.",
- icon: MagnifyingGlassIcon,
- },
- {
- name: 'Security Insights',
- description:
- 'Get warnings when your app does something risky like access passwords from the database.',
- icon: ShieldExclamationIcon,
- },
- {
- name: 'Visualisations',
- description:
- 'Understand your data at glace with simple but powerful visualisations which highlight the trends and outliers.',
- icon: PresentationChartLineIcon,
- },
-]
-
-function ComingSoon() {
- return (
-
-
- )
-}
-
-export default ComingSoon
diff --git a/packages/studio/web/src/Pages/Config.tsx b/packages/studio/web/src/Pages/Config.tsx
deleted file mode 100644
index 1968e475c5a0..000000000000
--- a/packages/studio/web/src/Pages/Config.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-import React from 'react'
-
-import { useQuery, gql, useMutation } from '@apollo/client'
-import { ExclamationTriangleIcon } from '@heroicons/react/20/solid'
-import {
- Bold,
- Button,
- Callout,
- Card,
- Divider,
- Flex,
- Italic,
- List,
- ListItem,
- Text,
- Title,
-} from '@tremor/react'
-import { toast } from 'react-toastify'
-
-import LoadingSpinner from '../Components/LoadingSpinner'
-import { ITEM_POLLING_INTERVAL } from '../util/polling'
-
-const QUERY_GET_CONFIG = gql`
- query GetConfig {
- studioConfig {
- graphiql {
- endpoint
- authImpersonation {
- authProvider
- userId
- email
- roles
- jwtSecret
- }
- }
- }
- }
-`
-
-const MUTATION_RETYPE_SPANS = gql`
- mutation retypeSpans {
- retypeSpans
- }
-`
-
-const MUTATION_TRUNCATE_SPANS = gql`
- mutation truncateSpans {
- truncateSpans
- }
-`
-
-const MUTATION_TRUNCATE_MAILS = gql`
- mutation truncateMails {
- truncateMails
- }
-`
-
-function Config() {
- const getConfigQuery = useQuery(QUERY_GET_CONFIG, {
- pollInterval: ITEM_POLLING_INTERVAL,
- })
-
- const [executeRetypeSpansMutation, retypeSpansMutation] = useMutation(
- MUTATION_RETYPE_SPANS
- )
- async function handleRetypeSpans() {
- try {
- const success = await executeRetypeSpansMutation()
- if (success) {
- toast.success('Successfully retyped spans.')
- } else {
- toast.error('Failed to retyped spans!')
- }
- } catch (error) {
- toast.error('Failed to retyped spans!')
- console.error(error)
- }
- }
-
- const [executeTruncateSpansMutation, truncateSpansMutation] = useMutation(
- MUTATION_TRUNCATE_SPANS
- )
- async function handleTruncateSpans() {
- if (!confirm("This action can't be undone! Are you sure?")) {
- return
- }
- try {
- const success = await executeTruncateSpansMutation()
- if (success) {
- toast.success('Successfully truncated spans.')
- } else {
- toast.error('Failed to truncate spans!')
- }
- } catch (error) {
- toast.error('Failed to truncate spans!')
- console.error(error)
- }
- }
-
- const [executeTruncateMailsMutation, truncateMailsMutation] = useMutation(
- MUTATION_TRUNCATE_MAILS
- )
- async function handleTruncateMails() {
- if (!confirm("This action can't be undone! Are you sure?")) {
- return
- }
- try {
- const success = await executeTruncateMailsMutation()
- if (success) {
- toast.success('Successfully truncated mails.')
- } else {
- toast.error('Failed to truncate mails!')
- }
- } catch (error) {
- toast.error('Failed to truncate mails!')
- console.error(error)
- }
- }
-
- return (
-
-
-
-
- - Coming soon... -
-- Everything you need to understand your app while you dev -
-- It shouldn't just be in production that you can monitor your - app with power and with ease. Development can be better when - you're able to understand exactly what is happening and - identify how your app is performing or breaking. -
-
-
- -
- {features.map((feature) => (
-
-
- - -- {feature.name} -
-
- - {feature.description} - -
-
- ))}
-
-
- Studio Configuration Settings
-
- These are the various config options the studio is currently using.
- You can update some of these values from within your `redwood.toml`
- file under the `studio` section and others you can update directly
- within the various studio webpages.
-
-
-
- ) : getConfigQuery.loading ? (
-
-
- Actions
-
- These actions are available to you to trigger some backend studio
- events
-
-
- Retype Spans
-
-
-
-
- Truncate Spans [Irreversible action!]
-
-
-
-
-
- Truncate Mails [Irreversible action!]
-
-
-
-
-
- )
-}
-
-export default Config
diff --git a/packages/studio/web/src/Pages/Explore/Span.tsx b/packages/studio/web/src/Pages/Explore/Span.tsx
deleted file mode 100644
index d880ef95f3d1..000000000000
--- a/packages/studio/web/src/Pages/Explore/Span.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react'
-
-import { useQuery, gql } from '@apollo/client'
-import { Bold, Card, Flex, Text, Title } from '@tremor/react'
-import { useParams } from 'react-router-dom'
-
-import AncestorFeatureList from '../../Components/Feature/AncestorFeatureList'
-import DescendantFeatureList from '../../Components/Feature/DescendantFeatureList'
-import LoadingSpinner from '../../Components/LoadingSpinner'
-import ErrorPanel from '../../Components/Panels/ErrorPanel'
-import EventList from '../../Components/Span/EventList'
-import ResourceList from '../../Components/Span/ResourceList'
-import SpanDetails from '../../Components/Span/SpanDetails'
-import { ITEM_POLLING_INTERVAL } from '../../util/polling'
-import { displayTextOrJSON } from '../../util/ui'
-
-const GET_SPAN_DATA = gql`
- query GetSpanData($spanId: String!) {
- span(spanId: $spanId) {
- id
- type
- trace
- parent
- name
- kind
- statusCode
- statusMessage
- startNano
- endNano
- durationNano
- attributes
- events
- resources
- descendantSpans {
- id
- type
- brief
- statusCode
- }
- ancestorSpans {
- id
- type
- brief
- statusCode
- }
- }
- }
-`
-
-export default function Span() {
- const { spanId } = useParams()
-
- const { loading, error, data } = useQuery(GET_SPAN_DATA, {
- variables: { spanId },
- pollInterval: ITEM_POLLING_INTERVAL,
- })
-
- if (error) {
- return {JSON.stringify(getConfigQuery.error, undefined, 2)}
--
-
-
- )
- }
-
- return (
-
- {/* Header */}
-
-
- Generic Span
- [{spanId}]
-
-
-
- {/* Span data (TODO: Make this the specific type dependant panel) */}
-
- )
-}
diff --git a/packages/studio/web/src/Pages/Explore/SpanList.tsx b/packages/studio/web/src/Pages/Explore/SpanList.tsx
deleted file mode 100644
index 5553f3cb9e9a..000000000000
--- a/packages/studio/web/src/Pages/Explore/SpanList.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, { useContext } from 'react'
-
-import { useQuery, gql } from '@apollo/client'
-import { CubeTransparentIcon } from '@heroicons/react/24/outline'
-import { ClockIcon } from '@heroicons/react/24/solid'
-import { Badge, Card, Flex, Title, Text } from '@tremor/react'
-import { Link } from 'react-router-dom'
-
-import LoadingSpinner from '../../Components/LoadingSpinner'
-import ErrorPanel from '../../Components/Panels/ErrorPanel'
-import InformationPanel from '../../Components/Panels/InformationPanel'
-import SpanTypeLabel from '../../Components/Span/SpanTypeLabel'
-import { SearchFilterContext } from '../../Context/SearchFilterContextProvider'
-import { LIST_POLLING_INTERVAL } from '../../util/polling'
-import { hasAnyErrors } from '../../util/trace'
-
-const QUERY_GET_ALL_SPANS = gql`
- query GetAllSpans($searchFilter: String) {
- spans(searchFilter: $searchFilter) {
- id
- name
- type
- brief
- statusCode
- startNano
- endNano
- }
- }
-`
-
-function SpanListComponent({ spans }: { spans: any[] }) {
- if (spans.length === 0) {
- return
-
-
- Span Attributes
- {Object.keys(data.span.attributes).map((key: any) => (
-
-
- {key}
-
- {displayTextOrJSON(data.span.attributes[key])}
-
- ))}
-
-
-
- {/* Feature lists */}
- span.type !== null
- )}
- />
- span.type !== null
- )}
- />
-
- {/* Other span data */}
-
-
- {/* Header */}
-
- )
-}
diff --git a/packages/studio/web/src/Pages/Explore/SpanTreeMap.tsx b/packages/studio/web/src/Pages/Explore/SpanTreeMap.tsx
deleted file mode 100644
index cb431310294c..000000000000
--- a/packages/studio/web/src/Pages/Explore/SpanTreeMap.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React from 'react'
-
-import { useQuery, gql } from '@apollo/client'
-import { Link, useParams } from 'react-router-dom'
-
-import SpanTreeMapChart from '../../Charts/SpanTreeMapChart'
-import LoadingSpinner from '../../Components/LoadingSpinner'
-import ErrorPanel from '../../Components/Panels/ErrorPanel'
-import WarningPanel from '../../Components/Panels/WarningPanel'
-import SpanDetails from '../../Components/Span/SpanDetails'
-import { ITEM_POLLING_INTERVAL } from '../../util/polling'
-
-const GET_SPAN_DATA = gql`
- query GetSpanData($id: String!) {
- span(spanId: $id) {
- id
- type
- name
- brief
- trace
- parent
- startNano
- endNano
- durationNano
- kind
- statusCode
- statusMessage
- ancestorSpans {
- id
- type
- name
- parent
- }
- }
- spanTreeMapData(spanId: $id)
- }
-`
-
-export default function SpanTreeMap() {
- const { spanId } = useParams()
- const { loading, error, data } = useQuery(GET_SPAN_DATA, {
- variables: { id: spanId },
- pollInterval: ITEM_POLLING_INTERVAL,
- })
-
- if (error) {
- return (
-
-
-
- {/* List */}
-
-
-
-
- OpenTelemetry Spans
- {data?.spans?.length && `(${data.spans.length})`}
-
- {error ? (
-
-
-
- ) : (
-
-
- )
- }
-
- if (loading) {
- return (
-
-
- )
- }
-
- if (spanId === undefined || data.span == null) {
- return (
-
-
- )
- }
-
- const getParents = (parentId: string) => {
- const parents: string[] = []
- const parent = data.span.ancestorSpans.find(
- (span: any) => span.id === parentId
- )
- if (parent) {
- if (parent.parent) {
- parents.push(...getParents(parent.parent))
- }
- parents.push(parent.id)
- }
- return parents
- }
-
- const breadcrumIds = [...getParents(data.span.parent), spanId]
-
- return (
-
- {/* Header */}
-
- )
-}
diff --git a/packages/studio/web/src/Pages/Explore/Trace.tsx b/packages/studio/web/src/Pages/Explore/Trace.tsx
deleted file mode 100644
index ecd7319bf3ea..000000000000
--- a/packages/studio/web/src/Pages/Explore/Trace.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import React, { useState, Fragment } from 'react'
-
-import { useQuery, gql } from '@apollo/client'
-import { Listbox, Transition } from '@headlessui/react'
-import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'
-import { useParams } from 'react-router-dom'
-
-import TraceFeatureList from '../../Components/Feature/TraceFeatureList'
-import LoadingSpinner from '../../Components/LoadingSpinner'
-import ErrorPanel from '../../Components/Panels/ErrorPanel'
-import WarningPanel from '../../Components/Panels/WarningPanel'
-import TraceDetails from '../../Components/Trace/TraceDetails'
-import FlameTableView from '../../Components/Tracing/FlameTableView'
-import TimelineView from '../../Components/Tracing/TimelineView'
-import { ITEM_POLLING_INTERVAL } from '../../util/polling'
-import { classNames } from '../../util/ui'
-
-const GET_TRACE_SPANS = gql`
- query GetTraceSpans($id: String!) {
- trace(traceId: $id) {
- id
- spans {
- id
- type
- name
- brief
- parent
- kind
- statusCode
- statusMessage
- startNano
- endNano
- durationNano
- events
- attributes
- resources
- }
- }
- }
-`
-
-interface VisualisationMode {
- name: string
-}
-
-const visualisationModes: VisualisationMode[] = [
- { name: 'Timeline' },
- { name: 'Flame Table' },
- // { name: 'Prisma Queries' }, // TODO: Fix this or offer some other prisma view
-]
-
-export default function Trace() {
- const { traceId } = useParams()
- const { loading, error, data } = useQuery(GET_TRACE_SPANS, {
- variables: { id: traceId },
- pollInterval: ITEM_POLLING_INTERVAL,
- })
-
- const [visualisationMode, setVisualisationMode] = useState
-
-
-
-
- - Tree Map: What happened in this span? -
-
-
-
-
- {breadcrumIds.map((id, index) => (
- <>
-
- {id}
-
- {index !== breadcrumIds.length - 1 && (
- >
- )}
-
- ))}
-
-
-
-
-
-
- )
- }
-
- if (loading) {
- return (
-
-
- )
- }
-
- if (data.trace.spans.length === 0) {
- return (
-
-
- )
- }
-
- return (
-
- {/* Header */}
-
- )
-}
diff --git a/packages/studio/web/src/Pages/Explore/TraceList.tsx b/packages/studio/web/src/Pages/Explore/TraceList.tsx
deleted file mode 100644
index 3bd103a22d98..000000000000
--- a/packages/studio/web/src/Pages/Explore/TraceList.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import React, { useContext } from 'react'
-
-import { useQuery, gql } from '@apollo/client'
-import { ClockIcon } from '@heroicons/react/20/solid'
-import { CubeTransparentIcon } from '@heroicons/react/24/outline'
-import { Badge, Card, Flex, Title, Text } from '@tremor/react'
-import { Link } from 'react-router-dom'
-
-import LoadingSpinner from '../../Components/LoadingSpinner'
-import ErrorPanel from '../../Components/Panels/ErrorPanel'
-import InformationPanel from '../../Components/Panels/InformationPanel'
-import SpanTypeLabel from '../../Components/Span/SpanTypeLabel'
-import { SearchFilterContext } from '../../Context/SearchFilterContextProvider'
-import { LIST_POLLING_INTERVAL } from '../../util/polling'
-import {
- getTraceName,
- hasAnyErrors,
- traceDuration,
- traceRootSpan,
- traceStart,
-} from '../../util/trace'
-
-const QUERY_GET_ALL_TRACES = gql`
- query GetAllTraces($searchFilter: String) {
- rows: traces(searchFilter: $searchFilter) {
- id
- spans {
- id
- type
- name
- brief
- parent
- statusCode
- startNano
- endNano
- }
- }
- }
-`
-
-function getBrief(spans: any[]) {
- const graphQLSpan = spans.find(
- (span) => span.type === 'graphql' && span.brief !== 'Anonymous Operation'
- )
- if (graphQLSpan) {
- return graphQLSpan.brief
- }
- return traceRootSpan(spans)?.brief
-}
-
-function TraceListComponent({ traces }: { traces: any[] }) {
- if (traces.length === 0) {
- return
-
-
- {/* Trace Viewer */}
-
-
-
-
- OpenTelemetry Trace
- ({traceId})
-
-
- {({ open }) => (
- <>
-
-
-
- {/* Trace Details */}
-
-
-
- {visualisationMode.name}
-
-
-
-
-
-
-
-
- {visualisationModes.map((mode) => (
-
- classNames(
- active
- ? 'bg-rich-black text-white'
- : 'text-gray-900',
- 'relative cursor-default select-none py-2 pl-3 pr-9'
- )
- }
- value={mode}
- >
- {({ selected, active }) => (
- <>
-
- {mode.name}
-
-
- {selected ? (
-
-
-
- ) : null}
-
- )}
-
- ))}
-
-
-
-
- )}
-
- {visualisationMode.name === 'Timeline' && (
-
-
- span.type !== null)
- .map((span: any) => ({
- id: span.id,
- type: span.type,
- brief: span.brief,
- statusCode: span.statusCode,
- }))}
- />
-
-
- {/* Header */}
-
- )
-}
diff --git a/packages/studio/web/src/Pages/GraphiQL.tsx b/packages/studio/web/src/Pages/GraphiQL.tsx
deleted file mode 100644
index 9d5fb3408a04..000000000000
--- a/packages/studio/web/src/Pages/GraphiQL.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react'
-
-import { useQuery, gql } from '@apollo/client'
-
-import { RedwoodGraphiQL } from '../Components/RedwoodGraphiQL/RedwoodGraphiQL'
-
-const GET_AUTH = gql`
- query {
- webConfig {
- graphqlEndpoint
- }
- generateAuthHeaders {
- authProvider
- cookie
- authorization
- }
- }
-`
-
-const DEFAULT_QUERY = `{
- redwood {
- version
- }
-}`
-
-function GraphiQL() {
- const port = window.RWJS_STUDIO_BASE_PORT
- const { data } = useQuery(GET_AUTH)
- let headers: undefined | Record
-
-
- {/* List */}
-
-
-
-
- OpenTelemetry Traces
- {traces.length && `(${traces.length})`}
-
- {error ? (
-
-
-
- ) : (
- Loading...
-}
-
-export default GraphiQL
diff --git a/packages/studio/web/src/Pages/Mail/Preview.tsx b/packages/studio/web/src/Pages/Mail/Preview.tsx
deleted file mode 100644
index 651cdec98ac4..000000000000
--- a/packages/studio/web/src/Pages/Mail/Preview.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import { gql, useQuery } from '@apollo/client'
-import {
- Title,
- Text,
- Card,
- SearchSelect,
- SearchSelectItem,
- Col,
- Grid,
-} from '@tremor/react'
-
-import MailRenderer from '../../Components/Mail/MailRenderer'
-import { LIST_POLLING_INTERVAL } from '../../util/polling'
-
-const QUERY_GET_TEMPLATES_COMPONENTS_AND_RENDERERS = gql`
- query GetTemplates {
- mailTemplates {
- id
- name
- }
- mailComponents {
- id
- mailTemplateId
- name
- propsTemplate
- }
- mailRenderers {
- id
- name
- isDefault
- }
- }
-`
-
-const QUERY_GET_RENDERED_MAIL = gql`
- query GetRenderedMail(
- $componentId: Int!
- $rendererId: Int!
- $propsJSON: String!
- ) {
- mailRenderedMail(
- componentId: $componentId
- rendererId: $rendererId
- propsJSON: $propsJSON
- ) {
- html
- text
- error
- }
- }
-`
-
-function MailPreview() {
- const [selectedTemplateId, setSelectedTemplateId] = useState(0)
- const [selectedComponentId, setSelectedComponentId] = useState(0)
- const [selectedRendererId, setSelectedRendererId] = useState(0)
-
- const [templates, setTemplates] = useState
- Mail Template Preview
-
- RedwoodJS Studio can detect your mail templates and provide an
- approximate preview of how they look when rendered.
-
-
-
-
- Template
- setSelectedTemplateId(parseInt(v))}
- disabled={
- templatesComponentsAndRenderersQuery.loading ||
- templates.length < 1
- }
- placeholder={
- templatesComponentsAndRenderersQuery.loading
- ? 'Loading...'
- : templates.length < 1
- ? 'No templates found'
- : 'Select a template'
- }
- >
- {templates.length > 0 ? (
- templates.map((template: any) => (
-
- {template.name}
-
- ))
- ) : (
-
-
- Component
- setSelectedComponentId(parseInt(v))}
- disabled={
- templatesComponentsAndRenderersQuery.loading ||
- templateComponents.length < 2 ||
- selectedTemplateId < 1
- }
- placeholder={
- templatesComponentsAndRenderersQuery.loading
- ? 'Loading...'
- : selectedTemplateId < 1
- ? 'Select a template'
- : templateComponents.length < 1
- ? 'No components found in this template'
- : 'Select a component'
- }
- >
- {templateComponents.length > 0 ? (
- templateComponents.map((template: any) => (
-
- {template.name}
-
- ))
- ) : (
-
-
- Renderer
- setSelectedRendererId(parseInt(v))}
- disabled={
- templatesComponentsAndRenderersQuery.loading ||
- renderers.length < 2
- }
- placeholder={
- templatesComponentsAndRenderersQuery.loading
- ? 'Loading...'
- : renderers.length < 1
- ? 'No renderers found'
- : 'Select a renderer'
- }
- >
- {renderers.length > 0 ? (
- renderers.map((template: any) => (
-
- {template.name}
-
- ))
- ) : (
-
- {/* TODO: Add renderer options modal? */}
-
- {selectedComponentId > 0 &&
- components.find((c) => c.id === selectedComponentId)
- ?.propsTemplate && (
- Props
-