feature: Tracetest Analyzer Improvements (#2628)

* feature: Tracetest Analyzer Improvements * feature: Tracetest Analyzer Improvements * fix plugin names --------- Co-authored-by: Jorge Padilla <jorge.esteban.padilla@gmail.com>
kubeshop · Jun 1, 2023 · 284d2bf · 284d2bf
1 parent 163fe30
commit 284d2bf
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 66 deletions.
diff --git a/server/linter/plugins/common/plugin.go b/server/linter/plugins/common/plugin.go
@@ -18,7 +18,7 @@ var (
 func NewCommonPlugin() model.Plugin {
 	return CommonPlugin{
 		BasePlugin: model.BasePlugin{
-			Name:        "Common Issues",
+			Name:        "Common problems",
 			Description: "Helps you find common problems with your application",
 			Rules: []model.Rule{
 				rules.NewEnforceDnsUsageRule(),

diff --git a/server/linter/plugins/standards/plugin.go b/server/linter/plugins/standards/plugin.go
@@ -18,7 +18,7 @@ var (
 func NewStandardsPlugin() model.Plugin {
 	return StandardsPlugin{
 		BasePlugin: model.BasePlugin{
-			Name:        "Global Standards",
+			Name:        "OTel Semantic Conventions",
 			Description: "Enforce standards for spans and attributes",
 			Rules: []model.Rule{
 				rules.NewEnsureSpanNamingRule(),

diff --git a/server/linter/resource/manager.go b/server/linter/resource/manager.go
@@ -16,7 +16,7 @@ type Repository struct {
 
 var defaultlinter = Linter{
 	ID:           id.ID("current"),
-	Name:         "linter",
+	Name:         "analyzer",
 	Enabled:      true,
 	MinimumScore: 0,
 	Plugins: []LinterPlugin{

diff --git a/server/linter/resource/resource.go b/server/linter/resource/resource.go
@@ -3,8 +3,8 @@ package linter_resource
 import "github.com/kubeshop/tracetest/server/resourcemanager"
 
 const (
-	ResourceName       = "Linter"
-	ResourceNamePlural = "Linters"
+	ResourceName       = "Analyzer"
+	ResourceNamePlural = "Analyzers"
 )
 
 var Operations = []resourcemanager.Operation{

diff --git a/web/src/components/BetaBadge/BetaBadge.styled.ts b/web/src/components/BetaBadge/BetaBadge.styled.ts
@@ -2,11 +2,15 @@ import {Tag} from 'antd';
 import styled from 'styled-components';
 
 export const Badge = styled(Tag).attrs(({theme}) => ({
-  color: theme.color.primary,
+  color: theme.color.borderLight,
 }))`
-  font-size: 10px;
-  margin-left: 5px;
-  padding: 0 2px;
-  margin-right: 0;
+  font-size: ${({theme}) => theme.size.md};
+  margin: 0;
+  margin-left: 8px;
+  padding: 0 8px;
   line-height: 15px;
+  border-radius: 8px;
+  font-weight: 400;
+  background: ${({theme}) => theme.color.textSecondary};
+  color: ${({theme}) => theme.color.primary};
 `;
diff --git a/web/src/components/BetaBadge/BetaBadge.tsx b/web/src/components/BetaBadge/BetaBadge.tsx
@@ -1,5 +1,5 @@
 import * as S from './BetaBadge.styled';
 
-const BetaBadge = () => <S.Badge>beta</S.Badge>;
+const BetaBadge = () => <S.Badge>Beta</S.Badge>;
 
 export default BetaBadge;
diff --git a/web/src/components/RunDetailTrace/LintResults.tsx b/web/src/components/RunDetailTrace/LintResults.tsx
@@ -36,21 +36,21 @@ const LintResults = ({linterResult, trace}: IProps) => {
   return (
     <S.Container>
       <S.Title level={2}>
-        Linter Results <BetaBadge />
+        Analyzer Results <BetaBadge />
       </S.Title>
       <S.Description>
-        The Tracetest Linter its a plugin based framework used to analyze Open Telemetry traces to help teams improve
+        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. If you want to disable
-        the linter for all tests, go to the <Link to="/settings">settings page</Link>. We have released this initial
-        version to get feedback from the community. Have thoughts about how to improve the Tracetest Linter? Add to this
-        <a href={OCTOLIINT_ISSUE_URL}>Issue</a> or <a href={DISCORD_URL}>Discord</a>!
+        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>
 
       <Row gutter={[16, 16]}>
         <Col span={8} key="avg_result">
-          <Tooltip title="Tracetest core system supports linter evaluation as part of the testing capabilities.">
+          <Tooltip title="Tracetest core system supports analyzer evaluation as part of the testing capabilities.">
             <S.ScoreContainer>
-              <S.Subtitle level={3}>Trace Lint Result</S.Subtitle>{' '}
+              <S.Subtitle level={3}>Trace Analyzer Result</S.Subtitle>{' '}
               <LintScore score={linterResult.score} passed={linterResult.passed} />
             </S.ScoreContainer>
           </Tooltip>

diff --git a/web/src/components/Settings/Linter/Linter.tsx b/web/src/components/Settings/Linter/Linter.tsx
@@ -6,16 +6,15 @@ const Linter = () => (
   <S.Container>
     <S.Description>
       <p>
-        This beta release of the Tracetest Linter its a plugin based framework used to analyze Open Telemetry traces to
+        This beta release of the Tracetest Analyzer its a plugin based framework used to audit OpenTelemetry traces to
         help teams improve their instrumentation data, find potential problems and provide tips to fix the problems. We
         have released this initial version to get feedback from the community. Have thoughts about how to improve the
-        Tracetest Linter? Add to this
-        <a href={OCTOLIINT_ISSUE_URL}>Issue</a> or <a href={DISCORD_URL}>Discord</a>! Currently, the linter supports the
-        following plugins:
+        Tracetest Analyzer? Add to this <a href={OCTOLIINT_ISSUE_URL}>Issue</a> or <a href={DISCORD_URL}>Discord</a>!
+        Currently, the analyzer supports the following plugins:
       </p>
       <S.LinterPluginList>
         <li>
-          <b>Open Telemetry Semantic Conventions.</b> Enforce standards for spans and attributes
+          <b>OpenTelemetry Semantic Conventions.</b> Enforce standards for spans and attributes
         </li>
         <li>
           <b>Security.</b> Enforce security for spans and attributes

diff --git a/web/src/components/Settings/Linter/LinterForm.tsx b/web/src/components/Settings/Linter/LinterForm.tsx
@@ -20,8 +20,13 @@ const LinterForm = () => {
   }, [form, linter]);
 
   const handleOnSubmit = (values: TDraftLinter) => {
-    values.minimumScore = parseInt(String(values?.minimumScore ?? 0), 10);
-    onSubmit([SettingService.getDraftResource(ResourceType.LinterType, values)]);
+    onSubmit([
+      SettingService.getDraftResource(ResourceType.AnalyzerType, {
+        ...values,
+        minimumScore: parseInt(String(values?.minimumScore ?? 0), 10),
+        plugins: linter.plugins,
+      }),
+    ]);
   };
 
   return (
@@ -40,7 +45,7 @@ const LinterForm = () => {
         <Form.Item name="enabled" valuePropName="checked">
           <Switch />
         </Form.Item>
-        <label htmlFor={`${FORM_ID}_enabled`}>Enable Linter for All Tests</label>
+        <label htmlFor={`${FORM_ID}_enabled`}>Enable Analyzer for All Tests</label>
       </S.SwitchContainer>
 
       <Form.Item

diff --git a/web/src/components/SpanDetail/Header.tsx b/web/src/components/SpanDetail/Header.tsx
@@ -39,7 +39,7 @@ const Header = ({span, assertions = {}}: IProps) => {
         <Space>
           <SSpanNode.BadgeType $hasMargin count={SemanticGroupNamesToText[type]} $type={type} />
           {!!lintErrors.length && (
-            <Tooltip title="This span has lint errors">
+            <Tooltip title="The analyzer found errors in this span">
               <S.LintErrorIcon />
             </Tooltip>
           )}

diff --git a/web/src/components/Visualization/components/DAG/SpanNode.tsx b/web/src/components/Visualization/components/DAG/SpanNode.tsx
@@ -55,7 +55,7 @@ const SpanNode = ({data, id, selected}: IProps) => {
             <S.LintCloseIcon onClick={() => setIsOpenLintErrors(false)} />
             <Space>
               <S.LintErrorIcon />
-              <S.LintTitle level={4}>Lint errors</S.LintTitle>
+              <S.LintTitle level={4}>Analyzer errors</S.LintTitle>
             </Space>
             <S.LintBody>
               {lintErrors.map(lintError => (

diff --git a/web/src/pages/Settings/Content.tsx b/web/src/pages/Settings/Content.tsx
@@ -1,4 +1,5 @@
 import {Tabs} from 'antd';
+import {useSearchParams} from 'react-router-dom';
 import Analytics from 'components/Settings/Analytics';
 import DataStore from 'components/Settings/DataStore';
 import Demo from 'components/Settings/Demo';
@@ -12,43 +13,53 @@ const TabsKeys = {
   DataStore: 'dataStore',
   Demo: 'demo',
   Polling: 'polling',
-  Linter: 'linter',
+  Analyzer: 'analyzer',
 };
 
-const Content = () => (
-  <S.Container>
-    <S.Header>
-      <S.Title>Settings</S.Title>
-    </S.Header>
+const Content = () => {
+  const [query, setQuery] = useSearchParams();
 
-    <S.TabsContainer>
-      <Tabs size="small">
-        <Tabs.TabPane key={TabsKeys.DataStore} tab="Configure Data Store">
-          <DataStore />
-        </Tabs.TabPane>
-        <Tabs.TabPane key={TabsKeys.Analytics} tab="Analytics">
-          <Analytics />
-        </Tabs.TabPane>
-        <Tabs.TabPane key={TabsKeys.Polling} tab="Trace Polling">
-          <Polling />
-        </Tabs.TabPane>
-        <Tabs.TabPane key={TabsKeys.Demo} tab="Demo">
-          <Demo />
-        </Tabs.TabPane>
-        <Tabs.TabPane
-          key={TabsKeys.Linter}
-          tab={
-            <S.TabTextContainer>
-              Linter
-              <BetaBadge />
-            </S.TabTextContainer>
-          }
+  return (
+    <S.Container>
+      <S.Header>
+        <S.Title>Settings</S.Title>
+      </S.Header>
+
+      <S.TabsContainer>
+        <Tabs
+          size="small"
+          defaultActiveKey={query.get('tab') || TabsKeys.DataStore}
+          onChange={newTab => {
+            setQuery([['tab', newTab]]);
+          }}
         >
-          <Linter />
-        </Tabs.TabPane>
-      </Tabs>
-    </S.TabsContainer>
-  </S.Container>
-);
+          <Tabs.TabPane key={TabsKeys.DataStore} tab="Configure Data Store">
+            <DataStore />
+          </Tabs.TabPane>
+          <Tabs.TabPane key={TabsKeys.Analytics} tab="Analytics">
+            <Analytics />
+          </Tabs.TabPane>
+          <Tabs.TabPane key={TabsKeys.Polling} tab="Trace Polling">
+            <Polling />
+          </Tabs.TabPane>
+          <Tabs.TabPane key={TabsKeys.Demo} tab="Demo">
+            <Demo />
+          </Tabs.TabPane>
+          <Tabs.TabPane
+            key={TabsKeys.Analyzer}
+            tab={
+              <S.TabTextContainer>
+                Analyzer
+                <BetaBadge />
+              </S.TabTextContainer>
+            }
+          >
+            <Linter />
+          </Tabs.TabPane>
+        </Tabs>
+      </S.TabsContainer>
+    </S.Container>
+  );
+};
 
 export default Content;
diff --git a/web/src/redux/apis/endpoints/Setting.endpoint.ts b/web/src/redux/apis/endpoints/Setting.endpoint.ts
@@ -56,11 +56,11 @@ const ConfigEndpoint = (builder: TTestApiEndpointBuilder) => ({
   }),
   getLinter: builder.query<Linter, unknown>({
     query: () => ({
-      url: '/linters/current',
+      url: '/analyzers/current',
       method: HTTP_METHOD.GET,
       headers: {'content-type': 'application/json'},
     }),
-    providesTags: () => [{type: TracetestApiTags.SETTING, id: ResourceType.LinterType}],
+    providesTags: () => [{type: TracetestApiTags.SETTING, id: ResourceType.AnalyzerType}],
     transformResponse: (rawLinter: TRawLinter) => Linter(rawLinter),
   }),
   createSetting: builder.mutation<undefined, {resource: TDraftResource}>({

diff --git a/web/src/types/Settings.types.ts b/web/src/types/Settings.types.ts
@@ -27,14 +27,14 @@ export enum ResourceType {
   ConfigType = 'Config',
   PollingProfileType = 'PollingProfile',
   DemoType = 'Demo',
-  LinterType = 'Linter',
+  AnalyzerType = 'Analyzer',
 }
 
 export enum ResourceTypePlural {
   ConfigType = 'Configs',
   PollingProfileType = 'PollingProfiles',
   DemoType = 'Demos',
-  LinterType = 'linters',
+  AnalyzerType = 'Analyzers',
 }
 
 export type TDraftDemo = Record<Required<Demo['type']>, Partial<Demo>>;