-
Notifications
You must be signed in to change notification settings - Fork 74
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(frontend): adding analyzer empty state (#2642)
- Loading branch information
Showing
8 changed files
with
231 additions
and
144 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
import {Link} from 'react-router-dom'; | ||
import {Col, Row, Tooltip} from 'antd'; | ||
import LinterResult from 'models/LinterResult.model'; | ||
import Trace from 'models/Trace.model'; | ||
import {DISCORD_URL, OCTOLIINT_ISSUE_URL} from 'constants/Common.constants'; | ||
import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider'; | ||
import * as S from './AnalyzerResult.styled'; | ||
import LintScore from '../LintScore/LintScore'; | ||
import BetaBadge from '../BetaBadge/BetaBadge'; | ||
import Empty from './Empty'; | ||
import Plugins from './Plugins'; | ||
|
||
interface IProps { | ||
result: LinterResult; | ||
trace: Trace; | ||
} | ||
|
||
const AnalyzerResult = ({result: {score, passed, plugins = []}, trace}: IProps) => { | ||
const {linter} = useSettingsValues(); | ||
|
||
return ( | ||
<S.Container> | ||
<S.Title level={2}> | ||
Analyzer Results <BetaBadge /> | ||
</S.Title> | ||
<S.Description> | ||
The Tracetest Analyzer its a plugin based framework used to analyze OpenTelemetry traces to help teams improve | ||
their instrumentation data, find potential problems and provide tips to fix the problems.{' '} | ||
{linter.enabled ? ( | ||
<> | ||
If you want to disable the analyzer for all tests, go to the{' '} | ||
<Link to="/settings?tab=analyzer">settings page</Link>. | ||
</> | ||
) : ( | ||
'' | ||
)} | ||
We have released this initial version to get feedback from the community. Have thoughts about how to improve the | ||
Tracetest Analyzer? Add to this <a href={OCTOLIINT_ISSUE_URL}>Issue</a> or <a href={DISCORD_URL}>Discord</a>! | ||
</S.Description> | ||
|
||
{plugins.length ? ( | ||
<> | ||
<Row gutter={[16, 16]}> | ||
<Col span={8} key="avg_result"> | ||
<Tooltip title="Tracetest core system supports analyzer evaluation as part of the testing capabilities."> | ||
<S.ScoreContainer> | ||
<S.Subtitle level={3}>Trace Analyzer Result</S.Subtitle> <LintScore score={score} passed={passed} /> | ||
</S.ScoreContainer> | ||
</Tooltip> | ||
</Col> | ||
{plugins.map(plugin => ( | ||
<Col span={8} key={plugin.name}> | ||
<Tooltip title={plugin.description}> | ||
<S.ScoreContainer key={plugin.name}> | ||
<S.Subtitle level={3}>{plugin.name}</S.Subtitle> | ||
<LintScore score={plugin.score} passed={plugin.passed} /> | ||
</S.ScoreContainer> | ||
</Tooltip> | ||
</Col> | ||
))} | ||
</Row> | ||
<Plugins plugins={plugins} trace={trace} /> | ||
</> | ||
) : ( | ||
<Empty /> | ||
)} | ||
</S.Container> | ||
); | ||
}; | ||
|
||
export default AnalyzerResult; |
2 changes: 1 addition & 1 deletion
2
...omponents/RunDetailTrace/CollapseIcon.tsx → ...omponents/AnalyzerResult/CollapseIcon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import {Button} from 'antd'; | ||
import {Link} from 'react-router-dom'; | ||
import * as S from './AnalyzerResult.styled'; | ||
|
||
const Empty = () => { | ||
return ( | ||
<S.EmptyContainer data-cy="empty-analyzer-results"> | ||
<S.EmptyIcon /> | ||
<S.EmptyTitle>There are no Analyzer results yet</S.EmptyTitle> | ||
<S.EmptyText>Please configure the Tracetest Analyzer settings to see result</S.EmptyText> | ||
<S.ConfigureButtonContainer> | ||
<Link to="/settings?tab=analyzer"> | ||
<Button ghost type="primary"> | ||
Configure | ||
</Button> | ||
</Link> | ||
</S.ConfigureButtonContainer> | ||
</S.EmptyContainer> | ||
); | ||
}; | ||
|
||
export default Empty; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
import {useCallback} from 'react'; | ||
import {CaretUpFilled} from '@ant-design/icons'; | ||
import {Collapse, Space, Tooltip, Typography} from 'antd'; | ||
import {useAppDispatch} from 'redux/hooks'; | ||
import {selectSpan} from 'redux/slices/Trace.slice'; | ||
import LinterResult from 'models/LinterResult.model'; | ||
import Trace from 'models/Trace.model'; | ||
import Span from 'models/Span.model'; | ||
import CollapseIcon from './CollapseIcon'; | ||
import LintScore from '../LintScore/LintScore'; | ||
import * as S from './AnalyzerResult.styled'; | ||
|
||
interface IProps { | ||
plugins: LinterResult['plugins']; | ||
trace: Trace; | ||
} | ||
|
||
function getSpanName(spans: Span[], spanId: string) { | ||
const span = spans.find(s => s.id === spanId); | ||
return span?.name ?? ''; | ||
} | ||
|
||
const Plugins = ({plugins, trace}: IProps) => { | ||
const dispatch = useAppDispatch(); | ||
|
||
const onSpanResultClick = useCallback( | ||
(spanId: string) => { | ||
dispatch(selectSpan({spanId})); | ||
}, | ||
[dispatch] | ||
); | ||
|
||
return ( | ||
<Collapse expandIcon={({isActive = false}) => <CollapseIcon isCollapsed={isActive} />}> | ||
{plugins.map(plugin => ( | ||
<S.PluginPanel | ||
header={ | ||
<Space> | ||
<LintScore width="35px" height="35px" score={plugin.score} passed={plugin.passed} /> | ||
<Typography.Text strong>{plugin.name}</Typography.Text> | ||
<Typography.Text type="secondary">{plugin.description}</Typography.Text> | ||
</Space> | ||
} | ||
key={plugin.name} | ||
> | ||
{plugin.rules.map(rule => ( | ||
<S.RuleContainer key={rule.name}> | ||
<S.Column> | ||
<S.RuleHeader> | ||
<Space> | ||
{rule.passed ? <S.PassedIcon $small /> : <S.FailedIcon $small />} | ||
<Tooltip title={rule.tips.join(' - ')}> | ||
<Typography.Text strong>{rule.name}</Typography.Text> | ||
</Tooltip> | ||
</Space> | ||
</S.RuleHeader> | ||
<Typography.Text type="secondary" style={{paddingLeft: 20}}> | ||
{rule.description} | ||
</Typography.Text> | ||
</S.Column> | ||
|
||
<S.RuleBody> | ||
{rule?.results?.map((result, resultIndex) => ( | ||
// eslint-disable-next-line react/no-array-index-key | ||
<div key={`${result.spanId}-${resultIndex}`}> | ||
{result.passed ? ( | ||
<S.SpanButton | ||
icon={<CaretUpFilled />} | ||
onClick={() => onSpanResultClick(result.spanId)} | ||
type="link" | ||
> | ||
{getSpanName(trace.spans, result.spanId)} | ||
</S.SpanButton> | ||
) : ( | ||
<> | ||
<S.SpanButton | ||
icon={<CaretUpFilled />} | ||
onClick={() => onSpanResultClick(result.spanId)} | ||
type="link" | ||
$error | ||
> | ||
{getSpanName(trace.spans, result.spanId)} | ||
</S.SpanButton> | ||
<div> | ||
{result.errors.map((error, index) => ( | ||
// eslint-disable-next-line react/no-array-index-key | ||
<div key={index}> | ||
<Typography.Text>{error}</Typography.Text> | ||
</div> | ||
))} | ||
</div> | ||
</> | ||
)} | ||
</div> | ||
))} | ||
</S.RuleBody> | ||
</S.RuleContainer> | ||
))} | ||
</S.PluginPanel> | ||
))} | ||
</Collapse> | ||
); | ||
}; | ||
|
||
export default Plugins; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
// eslint-disable-next-line no-restricted-exports | ||
export {default} from './AnalyzerResult'; |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.