litmuschaos
/
litmus
mirror of https://github.com/litmuschaos/litmus.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

renaming-> analytics to observability, workflow dashboards to workflow statistics and application dashboards to monitoring dashboards (#3086) 

* renaming-> analytics, workflow dashboards and application dashboards

Signed-off-by: ishangupta-ds <ishan@chaosnative.com>

* deep scan fix

Signed-off-by: ishangupta-ds <ishan@chaosnative.com>

* minor fix

Signed-off-by: ishangupta-ds <ishan@chaosnative.com>

Co-authored-by: Soumya Ghosh Dastidar <44349253+gdsoumya@users.noreply.github.com>
This commit is contained in:
Ishan Gupta 2021-08-17 12:27:06 +05:30 committed by GitHub
parent cc67faa3ec
commit a4912e6e41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
122 changed files with 588 additions and 566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
litmus-portal/frontend/public/icons/show-analytics.svg → litmus-portal/frontend/public/icons/show-statistics.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

0
litmus-portal/frontend/public/icons/viewAnalytics.svg → litmus-portal/frontend/public/icons/viewDashboard.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

53
litmus-portal/frontend/public/locales/en/translation.yaml
View File

@ -161,11 +161,11 @@ community:
subHeading: Explore about monthly community sync ups, Kubernetes meetups and other events in CNCF subHeading: Explore about monthly community sync ups, Kubernetes meetups and other events in CNCF
footerText: Follow us on other platforms footerText: Follow us on other platforms
analytics: observability:
workflowAnalytics: Workflow Analytics workflowStatistics: Workflow Statistics
fetchError: An error has occurred while fetching the data fetchError: An error has occurred while fetching the data
viewTestResult: Click on test to view the results for the selected period viewTestResult: Click on test to view the results for the selected period
comingSoon: Analytics Coming Soon ! comingSoon: Statistics Coming Soon !
waitingMessage: Waiting for workflow to start running ! waitingMessage: Waiting for workflow to start running !
chaosCompleteWaitingMessage: Waiting for chaos experiment to finish ! chaosCompleteWaitingMessage: Waiting for chaos experiment to finish !
highestScore: 'Highest Score:' highestScore: 'Highest Score:'
@ -194,13 +194,13 @@ analytics:
probeSuccessPercentage: Probe Success Percentage probeSuccessPercentage: Probe Success Percentage
experimentVerdict: Experiment Verdict experimentVerdict: Experiment Verdict
analyticsDashboard: monitoringDashboard:
heading: Analytics heading: Observability
overview: Overview overview: Overview
monitoringDashboardPage: monitoringDashboardPage:
loadingText: Loading application dashboard ... loadingText: Loading monitoring dashboard ...
metricsLoadingText: Fetching metrics ... metricsLoadingText: Fetching metrics ...
errorText: Error while loading the application dashboard errorText: Error while loading the monitoring dashboard
tryAgain: Try again tryAgain: Try again
goBack: Go back goBack: Go back
dataSourceError: Reconfigure this dashboard with a different data source or update data source information. dataSourceError: Reconfigure this dashboard with a different data source or update data source information.
@ -211,7 +211,7 @@ analyticsDashboard:
headerInfoText: "View the chaos events and metrics in a given \n time interval by selecting a time interval." headerInfoText: "View the chaos events and metrics in a given \n time interval by selecting a time interval."
infoButtonText: Info infoButtonText: Info
infoDropdown: infoDropdown:
header: Application Dashboard Information header: Monitoring Dashboard Information
close: Close Info close: Close Info
subHeading1: Dashboard Configuration Details subHeading1: Dashboard Configuration Details
subHeading2: Selected Applications subHeading2: Selected Applications
@ -260,7 +260,7 @@ analyticsDashboard:
updateSuccess: Successfully updated the chaos annotations updateSuccess: Successfully updated the chaos annotations
updateError: Error updating the chaos annotations updateError: Error updating the chaos annotations
dashboardCloneModal: dashboardCloneModal:
heading: Clone the application dashboard heading: Clone the monitoring dashboard
cancel: Cancel cancel: Cancel
ok: OK ok: OK
error: Error cloning dashboard error: Error cloning dashboard
@ -283,7 +283,7 @@ analyticsDashboard:
scheduleWorkflowMessage: Schedule my first workflow scheduleWorkflowMessage: Schedule my first workflow
seeAll: See All seeAll: See All
seeDetails: See Details seeDetails: See Details
seeAnalytics: See Analytics seeStatistics: See Statistics
workflowStats: workflowStats:
title: Workflow stats title: Workflow stats
workflowPassed: Passed workflowPassed: Passed
@ -292,13 +292,13 @@ analyticsDashboard:
workflowScheduleTable: workflowScheduleTable:
title: Workflow Schedules title: Workflow Schedules
noRecordMessage: No workflow has been schedule noRecordMessage: No workflow has been schedule
workflowDashboard: Workflow dashboards workflowStatistics: Workflow statistics
overviewTabdataSourceTable: Connected Data Sources overviewTabdataSourceTable: Connected Data Sources
applicationDashboard: Application dashboards monitoringDashboard: Monitoring dashboards
applicationDashboardTable: monitoringDashboardTable:
warning: warning:
noActiveDataSource: No active data source found for creating an application dashboard. noActiveDataSource: No active data source found for creating a monitoring dashboard.
noAvailableDataSource: No data source available. To create an Application dashboard you need to add a data source. noAvailableDataSource: No data source available. To create a monitoring dashboard you need to add a data source.
configureExisting: Configure an existing data source configureExisting: Configure an existing data source
addNew: Add data source addNew: Add data source
or: or or: or
@ -314,7 +314,7 @@ analyticsDashboard:
tableHead5: Last viewed tableHead5: Last viewed
createDashboard: Create dashboard createDashboard: Create dashboard
dashboards: Dashboards dashboards: Dashboards
title: Application Dashboard title: Monitoring Dashboard
view: View view: View
configure: Configure configure: Configure
json: JSON json: JSON
@ -327,7 +327,7 @@ analyticsDashboard:
removeDashboardConfirmation: Are you sure you want to remove the dashboard removeDashboardConfirmation: Are you sure you want to remove the dashboard
cancel: Cancel cancel: Cancel
delete: Delete delete: Delete
applicationDashboards: monitoringDashboards:
loadingDashboard: Loading dashboard configuration ... loadingDashboard: Loading dashboard configuration ...
loadingDataSources: Loading available data sources ... loadingDataSources: Loading available data sources ...
errorFetchingDashboard: Error loading dashboard configuration errorFetchingDashboard: Error loading dashboard configuration
@ -477,7 +477,7 @@ analyticsDashboard:
all: All all: All
warning: warning:
text: Unexpected bad things will happen if you don’t read this! text: Unexpected bad things will happen if you don’t read this!
info: The data source seems to be connected to following Application dashboards. Dashboards will be unable to show metrics if the data source is deleted. info: The data source seems to be connected to following monitoring dashboards. Dashboards will be unable to show metrics if the data source is deleted.
connectedDashboards: 'Connected Dashboards :' connectedDashboards: 'Connected Dashboards :'
showLess: Show Less Dashboards showLess: Show Less Dashboards
dashboards: Dashboards dashboards: Dashboards
@ -516,10 +516,10 @@ analyticsDashboard:
configureBanner: configureBanner:
case-0: case-0:
heading: No data source is configured yet for any agent heading: No data source is configured yet for any agent
description: To configure your first application dashboard you need to connect a data source. Select "Add a data source" to connect. description: To configure your first monitoring dashboard you need to connect a data source. Select "Add a data source" to connect.
case-1: case-1:
heading: Data source(s) has been added, now configure a dashboard heading: Data source(s) has been added, now configure a dashboard
description: To configure your first application dashboard use the connect data sources of this project. description: To configure your first monitoring dashboard use the connect data sources of this project.
timeText: timeText:
lastRun: Last run lastRun: Last run
lastOpened: Last opened lastOpened: Last opened
@ -577,7 +577,7 @@ homeViews:
error: Error fetching the data! error: Error fetching the data!
noWorkflow: noWorkflow:
heading: Schedule your first Litmus workflow heading: Schedule your first Litmus workflow
description: Now it is successfully running on your Kubernetes cluster. Once you schedule chaos workflows, reliability analytics will be displayed here. description: Now it is successfully running on your Kubernetes cluster. Once you schedule chaos workflows, reliability statistics will be displayed here.
schedule: Schedule a workflow schedule: Schedule a workflow
explore: Explore pre defined workflows explore: Explore pre defined workflows
recentWorkflowRuns: recentWorkflowRuns:
@ -585,7 +585,7 @@ homeViews:
cardTitle: Browse workflow cardTitle: Browse workflow
resilienceRate: 'Overall resilience rate:' resilienceRate: 'Overall resilience rate:'
lastRun: 'Last Run:' lastRun: 'Last Run:'
showAnalytics: Show the analytics showStatistics: Show the statistics
downloadManifest: Download manifest downloadManifest: Download manifest
heading: Recent Workflow runs heading: Recent Workflow runs
viewAll: View all workflows viewAll: View all workflows
@ -596,7 +596,7 @@ homeViews:
deploy: Deploy a new Agent deploy: Deploy a new Agent
chaosWorkflows: chaosWorkflows:
browseAnalytics: browseStatistics:
workFlowComparisonTable: workFlowComparisonTable:
unableToFetch: Unable to fetch data unableToFetch: Unable to fetch data
noRecords: No records available noRecords: No records available
@ -605,7 +605,7 @@ chaosWorkflows:
resilienceScoreComparison: Resilience score comparison resilienceScoreComparison: Resilience score comparison
comparativeResults: Comparative results of selected workflows which ran successfully comparativeResults: Comparative results of selected workflows which ran successfully
once: Once once: Once
seeAnalytics: See analytics seeStatistics: See statistics
browseSchedules: browseSchedules:
name: Name name: Name
agent: Agent agent: Agent
@ -655,7 +655,7 @@ chaosWorkflows:
experimentsPassed: 'Experiments Passed : ' experimentsPassed: 'Experiments Passed : '
showExperiments: Show Experiments showExperiments: Show Experiments
showTheWorkflow: Show the workflow showTheWorkflow: Show the workflow
showTheAnalytics: Show the analytics showTheStatistics: Show the statistics
na: NA na: NA
settings: settings:
@ -874,7 +874,7 @@ settings:
workflowDetailsView: workflowDetailsView:
logs: Logs logs: Logs
headerDesc: Workflow dashboard of headerDesc: Workflow statistics of
headerMiniDesc: Description of the workflow headerMiniDesc: Description of the workflow
argoWorkflow: argoWorkflow:
loading: Loading Graph... loading: Loading Graph...
@ -1252,7 +1252,6 @@ workflows:
runs: Runs runs: Runs
schedules: Schedules schedules: Schedules
templates: Templates templates: Templates
analytics: Analytics
scheduleAWorkflow: Schedule a workflow scheduleAWorkflow: Schedule a workflow
browseTemplate: browseTemplate:

14
litmus-portal/frontend/src/components/LocalQuickActionCard/index.tsx
View File

@ -9,7 +9,7 @@ import * as TabActions from '../../redux/actions/tabs';
import { history } from '../../redux/configureStore'; import { history } from '../../redux/configureStore';
import { getProjectID, getProjectRole } from '../../utils/getSearchParams'; import { getProjectID, getProjectRole } from '../../utils/getSearchParams';
type Variant = 'homePage' | 'returningHome' | 'analytics' | 'community'; type Variant = 'homePage' | 'returningHome' | 'observability' | 'community';
interface LocalQuickActionCardProps { interface LocalQuickActionCardProps {
variant?: Variant; variant?: Variant;
@ -26,7 +26,7 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
const userRole = getProjectRole(); const userRole = getProjectRole();
const homePage = variant === 'homePage'; const homePage = variant === 'homePage';
const returningHome = variant === 'returningHome'; const returningHome = variant === 'returningHome';
const analytics = variant === 'analytics'; const observability = variant === 'observability';
const community = variant === 'community'; const community = variant === 'community';
const emptyData: QuickActionCardProps = { const emptyData: QuickActionCardProps = {
src: '', src: '',
@ -34,13 +34,13 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
text: '', text: '',
}; };
const quickActionData: Array<QuickActionCardProps> = [ const quickActionData: Array<QuickActionCardProps> = [
analytics observability
? { ? {
src: './icons/addDataSource.svg', src: './icons/addDataSource.svg',
alt: 'data source', alt: 'data source',
onClick: () => onClick: () =>
history.push({ history.push({
pathname: '/analytics/datasource/select', pathname: '/observability/datasource/select',
search: `?projectID=${projectID}&projectRole=${userRole}`, search: `?projectID=${projectID}&projectRole=${userRole}`,
}), }),
text: t('quickActionCard.addDataSource'), text: t('quickActionCard.addDataSource'),
@ -58,7 +58,7 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
text: t('quickActionCard.scheduleWorkflow'), text: t('quickActionCard.scheduleWorkflow'),
} }
: emptyData, : emptyData,
homePage || returningHome || analytics homePage || returningHome || observability
? { ? {
src: './icons/target.svg', src: './icons/target.svg',
alt: 'agent', alt: 'agent',
@ -72,7 +72,7 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
: emptyData, : emptyData,
// TODO: settings only accessible by Owner // TODO: settings only accessible by Owner
(homePage || returningHome || community || analytics) && (homePage || returningHome || community || observability) &&
getProjectRole() === Role.owner getProjectRole() === Role.owner
? { ? {
src: './icons/teamMember.svg', src: './icons/teamMember.svg',
@ -95,7 +95,7 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
text: t('quickActionCard.quickSurvey'), text: t('quickActionCard.quickSurvey'),
} }
: emptyData, : emptyData,
homePage || community || analytics homePage || community || observability
? { ? {
src: './icons/docs.svg', src: './icons/docs.svg',
alt: 'docs', alt: 'docs',

4
litmus-portal/frontend/src/components/ProgressBar/AnalyticsLinearProgressBar/index.tsx → litmus-portal/frontend/src/components/ProgressBar/StatisticsLinearProgressBar/index.tsx
View File

@ -8,7 +8,7 @@ interface LinearProgressBarProps {
isInTable: boolean; isInTable: boolean;
} }
const AnalyticsLinearProgressBar: React.FC<LinearProgressBarProps> = ({ const StatisticsLinearProgressBar: React.FC<LinearProgressBarProps> = ({
value, value,
maxValue, maxValue,
isInTable, isInTable,
@ -44,4 +44,4 @@ const AnalyticsLinearProgressBar: React.FC<LinearProgressBarProps> = ({
); );
}; };
export default AnalyticsLinearProgressBar; export default StatisticsLinearProgressBar;

0
litmus-portal/frontend/src/components/ProgressBar/AnalyticsLinearProgressBar/styles.ts → litmus-portal/frontend/src/components/ProgressBar/StatisticsLinearProgressBar/styles.ts
View File

4
litmus-portal/frontend/src/components/PrometheusQueryBox/index.tsx
View File

@ -1,6 +1,5 @@
/* eslint-disable no-param-reassign */ /* eslint-disable no-param-reassign */
import { Typography } from '@material-ui/core'; import { Typography } from '@material-ui/core';
import React, { useEffect, useState } from 'react';
import AceEditor from 'react-ace'; import AceEditor from 'react-ace';
import 'ace-builds/src-min-noconflict/ext-beautify'; import 'ace-builds/src-min-noconflict/ext-beautify';
import 'ace-builds/src-min-noconflict/ext-code_lens'; import 'ace-builds/src-min-noconflict/ext-code_lens';
@ -22,6 +21,7 @@ import 'ace-builds/src-min-noconflict/ext-statusbar';
import 'ace-builds/src-min-noconflict/ext-textarea'; import 'ace-builds/src-min-noconflict/ext-textarea';
import 'ace-builds/src-min-noconflict/ext-themelist'; import 'ace-builds/src-min-noconflict/ext-themelist';
import 'ace-builds/src-min-noconflict/ext-whitespace'; import 'ace-builds/src-min-noconflict/ext-whitespace';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import './prometheus'; import './prometheus';
import useStyles from './styles'; import useStyles from './styles';
@ -75,7 +75,7 @@ const PrometheusQueryEditor: React.FC<PrometheusQueryEditorProps> = ({
<div id={`editor-${index}`} data-cy="WorkflowEditor"> <div id={`editor-${index}`} data-cy="WorkflowEditor">
<div className={classes.editor}> <div className={classes.editor}>
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t('analyticsDashboard.applicationDashboards.tuneTheQueries.query')} {t('monitoringDashboard.monitoringDashboards.tuneTheQueries.query')}
</Typography> </Typography>
<pre id="prom-query-editor"> <pre id="prom-query-editor">
<AceEditor <AceEditor

12
litmus-portal/frontend/src/components/SideBar/index.tsx
View File

@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { UserRole } from '../../models/graphql/user'; import { UserRole } from '../../models/graphql/user';
import { history } from '../../redux/configureStore'; import { history } from '../../redux/configureStore';
import { ReactComponent as AnalyticsIcon } from '../../svg/analytics-sidebar.svg'; import { ReactComponent as ObservabilityIcon } from '../../svg/observability-sidebar.svg';
import { ReactComponent as CodeIcon } from '../../svg/code.svg'; import { ReactComponent as CodeIcon } from '../../svg/code.svg';
import { ReactComponent as CommunityIcon } from '../../svg/community.svg'; import { ReactComponent as CommunityIcon } from '../../svg/community.svg';
import { ReactComponent as DocsIcon } from '../../svg/docs.svg'; import { ReactComponent as DocsIcon } from '../../svg/docs.svg';
@ -130,17 +130,17 @@ const SideBar: React.FC = () => {
</CustomisedListItem> </CustomisedListItem>
</div> </div>
<CustomisedListItem <CustomisedListItem
key="analytics" key="observability"
handleClick={() => { handleClick={() => {
history.push({ history.push({
pathname: `/analytics`, pathname: `/observability`,
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}} }}
label="Analytics" label="Observability"
selected={pathName === 'analytics'} selected={pathName === 'observability'}
> >
<AnalyticsIcon /> <ObservabilityIcon />
</CustomisedListItem> </CustomisedListItem>
{projectRole === 'Owner' && ( {projectRole === 'Owner' && (

46
litmus-portal/frontend/src/containers/app/App.tsx
View File

@ -30,14 +30,16 @@ const EditSchedule = lazy(() => import('../../pages/EditSchedule'));
const SetNewSchedule = lazy(() => import('../../pages/EditSchedule/Schedule')); const SetNewSchedule = lazy(() => import('../../pages/EditSchedule/Schedule'));
const ConnectTargets = lazy(() => import('../../pages/ConnectTarget')); const ConnectTargets = lazy(() => import('../../pages/ConnectTarget'));
const WorkflowInfoStats = lazy(() => import('../../pages/WorkflowInfoStats')); const WorkflowInfoStats = lazy(() => import('../../pages/WorkflowInfoStats'));
const AnalyticsDashboard = lazy(() => import('../../pages/AnalyticsPage')); const ObservabilityDashboard = lazy(
() => import('../../pages/ObservabilityPage')
);
const DataSourceConfigurePage = lazy( const DataSourceConfigurePage = lazy(
() => import('../../pages/ConfigureDataSources') () => import('../../pages/ConfigureDataSources')
); );
const ChooseAndConfigureDashboards = lazy( const ChooseAndConfigureDashboards = lazy(
() => import('../../pages/ChooseAndConfigureDashboards') () => import('../../pages/ChooseAndConfigureDashboards')
); );
const DashboardPage = lazy(() => import('../../pages/ApplicationDashboard')); const DashboardPage = lazy(() => import('../../pages/MonitoringDashboard'));
const MyHub = lazy(() => import('../../pages/ChaosHub')); const MyHub = lazy(() => import('../../pages/ChaosHub'));
const ChaosChart = lazy(() => import('../../views/MyHub/MyHubCharts')); const ChaosChart = lazy(() => import('../../views/MyHub/MyHubCharts'));
const MyHubExperiment = lazy(() => import('../../views/MyHub/MyHubExperiment')); const MyHubExperiment = lazy(() => import('../../views/MyHub/MyHubExperiment'));
@ -147,32 +149,36 @@ const Routes: React.FC = () => {
<Route exact path="/home" component={HomePage} /> <Route exact path="/home" component={HomePage} />
<Redirect exact path="/" to="/home" /> <Redirect exact path="/" to="/home" />
<Route exact path="/workflows" component={Workflows} /> <Route exact path="/workflows" component={Workflows} />
<Route exact path="/analytics" component={AnalyticsDashboard} />
<Route <Route
exact exact
path="/analytics/datasource/create" path="/observability"
component={ObservabilityDashboard}
/>
<Route
exact
path="/observability/datasource/create"
component={() => <DataSourceConfigurePage configure={false} />} component={() => <DataSourceConfigurePage configure={false} />}
/> />
<Route <Route
exact exact
path="/analytics/datasource/configure" path="/observability/datasource/configure"
component={() => <DataSourceConfigurePage configure />} component={() => <DataSourceConfigurePage configure />}
/> />
<Route <Route
exact exact
path="/analytics/dashboard/create" path="/observability/dashboard/create"
component={() => ( component={() => (
<ChooseAndConfigureDashboards configure={false} /> <ChooseAndConfigureDashboards configure={false} />
)} )}
/> />
<Route <Route
exact exact
path="/analytics/dashboard/configure" path="/observability/dashboard/configure"
component={() => <ChooseAndConfigureDashboards configure />} component={() => <ChooseAndConfigureDashboards configure />}
/> />
<Route <Route
exact exact
path="/analytics/application-dashboard" path="/observability/monitoring-dashboard"
component={() => <DashboardPage />} component={() => <DashboardPage />}
/> />
<Route exact path="/create-workflow" component={CreateWorkflow} /> <Route exact path="/create-workflow" component={CreateWorkflow} />
@ -193,7 +199,7 @@ const Routes: React.FC = () => {
/> />
<Route <Route
exact exact
path="/analytics/workflowdashboard/:workflowId" path="/observability/workflowStatistics/:workflowId"
component={WorkflowInfoStats} component={WorkflowInfoStats}
/> />
<Route exact path="/community" component={Community} /> <Route exact path="/community" component={Community} />
@ -231,14 +237,26 @@ const Routes: React.FC = () => {
<Redirect exact path="/getStarted" to="/home" /> <Redirect exact path="/getStarted" to="/home" />
<Redirect exact path="/workflows/schedule" to="/workflows" /> <Redirect exact path="/workflows/schedule" to="/workflows" />
<Redirect exact path="/workflows/template" to="/workflows" /> <Redirect exact path="/workflows/template" to="/workflows" />
<Redirect exact path="/analytics/overview" to="/analytics" />
<Redirect <Redirect
exact exact
path="/analytics/litmusdashboard" path="/observability/overview"
to="/analytics" to="/observability"
/>
<Redirect
exact
path="/observability/litmusdashboard"
to="/observability"
/>
<Redirect
exact
path="/observability/datasource"
to="/observability"
/>
<Redirect
exact
path="/observability/dashboard"
to="/observability"
/> />
<Redirect exact path="/analytics/datasource" to="/analytics" />
<Redirect exact path="/analytics/dashboard" to="/analytics" />
<Redirect exact path="/api-doc" to="/api-doc/index.html" /> <Redirect exact path="/api-doc" to="/api-doc/index.html" />
<Redirect to="/404" /> <Redirect to="/404" />
</Switch> </Switch>

2
litmus-portal/frontend/src/models/redux/dashboards.ts
View File

@ -33,7 +33,7 @@ interface PanelGroup {
panels: Panel[]; panels: Panel[];
} }
export interface ApplicationDashboard { export interface MonitoringDashboard {
dashboardID: string; dashboardID: string;
name: string; name: string;
information: string; information: string;

2
litmus-portal/frontend/src/models/redux/tabs.ts
View File

@ -2,7 +2,7 @@ export interface TabState {
workflows: number; workflows: number;
settings: number; settings: number;
node: number; node: number;
analytics: number; observability: number;
myhub: number; myhub: number;
} }

52
litmus-portal/frontend/src/pages/ApplicationDashboard/refreshData.ts
View File

@ -1,52 +0,0 @@
import { DEFAULT_RELATIVE_TIME_RANGE } from './constants';
export default [
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.off',
value: 0,
},
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.every5Seconds',
value: 5,
},
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.every10Seconds',
value: 10,
},
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.every15Seconds',
value: 15,
},
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.every30Seconds',
value: 30,
},
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.every1Minute',
value: 60,
},
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.every5Minutes',
value: 300,
},
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.every15Minutes',
value: 900,
},
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.every30Minutes',
value: DEFAULT_RELATIVE_TIME_RANGE,
},
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.every1Hour',
value: 3600,
},
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.every2Hours',
value: 7200,
},
{
label: 'analyticsDashboard.monitoringDashboardPage.refresh.every1Day',
value: 86400,
},
];

10
litmus-portal/frontend/src/pages/ChooseAndConfigureDashboards/index.tsx
View File

@ -32,7 +32,7 @@ import useActions from '../../redux/actions';
import * as AlertActions from '../../redux/actions/alert'; import * as AlertActions from '../../redux/actions/alert';
import { RootState } from '../../redux/reducers'; import { RootState } from '../../redux/reducers';
import { getProjectID } from '../../utils/getSearchParams'; import { getProjectID } from '../../utils/getSearchParams';
import DashboardStepper from '../../views/Analytics/ApplicationDashboards/Stepper'; import DashboardStepper from '../../views/Observability/MonitoringDashboards/Stepper';
import useStyles from './styles'; import useStyles from './styles';
interface ChooseAndConfigureDashboardsProps { interface ChooseAndConfigureDashboardsProps {
@ -215,9 +215,9 @@ const ChooseAndConfigureDashboards: React.FC<ChooseAndConfigureDashboardsProps>
<Loader /> <Loader />
<Typography className={classes.loading}> <Typography className={classes.loading}>
{configure {configure
? t('analyticsDashboard.applicationDashboards.loadingDashboard') ? t('monitoringDashboard.monitoringDashboards.loadingDashboard')
: t( : t(
'analyticsDashboard.applicationDashboards.loadingDataSources' 'monitoringDashboard.monitoringDashboards.loadingDataSources'
)} )}
</Typography> </Typography>
</div> </div>
@ -225,7 +225,7 @@ const ChooseAndConfigureDashboards: React.FC<ChooseAndConfigureDashboardsProps>
<div className={classes.center}> <div className={classes.center}>
<Typography className={classes.error}> <Typography className={classes.error}>
{t( {t(
'analyticsDashboard.applicationDashboards.errorFetchingDashboard' 'monitoringDashboard.monitoringDashboards.errorFetchingDashboard'
)} )}
</Typography> </Typography>
</div> </div>
@ -233,7 +233,7 @@ const ChooseAndConfigureDashboards: React.FC<ChooseAndConfigureDashboardsProps>
<div className={classes.center}> <div className={classes.center}>
<Typography className={classes.error}> <Typography className={classes.error}>
{t( {t(
'analyticsDashboard.applicationDashboards.errorFetchingDataSources' 'monitoringDashboard.monitoringDashboards.errorFetchingDataSources'
)} )}
</Typography> </Typography>
</div> </div>

32
litmus-portal/frontend/src/pages/ConfigureDataSources/index.tsx
View File

@ -25,7 +25,7 @@ import {
import useStyles from './styles'; import useStyles from './styles';
const ConfigurePrometheus = lazy( const ConfigurePrometheus = lazy(
() => import('../../views/Analytics/DataSources/Forms/prometheus') () => import('../../views/Observability/DataSources/Forms/prometheus')
); );
interface DataSourceConfigurePageProps { interface DataSourceConfigurePageProps {
@ -190,7 +190,7 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
<BackButton /> <BackButton />
</div> </div>
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t('analyticsDashboard.dataSourceForm.headingAdd')} {t('monitoringDashboard.dataSourceForm.headingAdd')}
</Typography> </Typography>
<ConfigurePrometheus <ConfigurePrometheus
configure={configure} configure={configure}
@ -206,7 +206,7 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
<BackButton /> <BackButton />
</div> </div>
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t('analyticsDashboard.dataSourceForm.headingConfigure')} / {t('monitoringDashboard.dataSourceForm.headingConfigure')} /
{` ${selectedDataSourceName}`} {` ${selectedDataSourceName}`}
</Typography> </Typography>
{dataSourceID ? ( {dataSourceID ? (
@ -230,15 +230,15 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
{page === 2 && ( {page === 2 && (
<ButtonOutlined onClick={() => setPage(1)} disabled={false}> <ButtonOutlined onClick={() => setPage(1)} disabled={false}>
<Typography> <Typography>
{t('analyticsDashboard.dataSourceForm.back')} {t('monitoringDashboard.dataSourceForm.back')}
</Typography> </Typography>
</ButtonOutlined> </ButtonOutlined>
)} )}
<div className={classes.saveButton}> <div className={classes.saveButton}>
<Typography className={classes.stepText}> <Typography className={classes.stepText}>
{t('analyticsDashboard.dataSourceForm.step')} {t('monitoringDashboard.dataSourceForm.step')}
<strong>{` ${page} `}</strong> <strong>{` ${page} `}</strong>
{t('analyticsDashboard.dataSourceForm.of2')} {t('monitoringDashboard.dataSourceForm.of2')}
</Typography> </Typography>
<ButtonFilled <ButtonFilled
disabled={ disabled={
@ -259,10 +259,10 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
{page === 2 {page === 2
? mutate ? mutate
? !configure ? !configure
? t('analyticsDashboard.dataSourceForm.adding') ? t('monitoringDashboard.dataSourceForm.adding')
: t('analyticsDashboard.dataSourceForm.updating') : t('monitoringDashboard.dataSourceForm.updating')
: t('analyticsDashboard.dataSourceForm.saveChanges') : t('monitoringDashboard.dataSourceForm.saveChanges')
: t('analyticsDashboard.dataSourceForm.next')} : t('monitoringDashboard.dataSourceForm.next')}
</Typography> </Typography>
{mutate && <Loader size={20} />} {mutate && <Loader size={20} />}
</ButtonFilled> </ButtonFilled>
@ -277,7 +277,7 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
setIsAlertOpen(false); setIsAlertOpen(false);
if (success) { if (success) {
history.push({ history.push({
pathname: '/analytics', pathname: '/observability',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
} }
@ -288,7 +288,7 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
setIsAlertOpen(false); setIsAlertOpen(false);
if (success) { if (success) {
history.push({ history.push({
pathname: '/analytics', pathname: '/observability',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
} }
@ -297,11 +297,11 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
> >
{!configure {!configure
? success ? success
? t('analyticsDashboard.dataSourceForm.connectionSuccess') ? t('monitoringDashboard.dataSourceForm.connectionSuccess')
: t('analyticsDashboard.dataSourceForm.connectionError') : t('monitoringDashboard.dataSourceForm.connectionError')
: success : success
? t('analyticsDashboard.dataSourceForm.updateSuccess') ? t('monitoringDashboard.dataSourceForm.updateSuccess')
: t('analyticsDashboard.dataSourceForm.updateError')} : t('monitoringDashboard.dataSourceForm.updateError')}
</Alert> </Alert>
</Snackbar> </Snackbar>
)} )}

0
litmus-portal/frontend/src/pages/ApplicationDashboard/constants.ts → litmus-portal/frontend/src/pages/MonitoringDashboard/constants.ts
View File

24
litmus-portal/frontend/src/pages/ApplicationDashboard/index.tsx → litmus-portal/frontend/src/pages/MonitoringDashboard/index.tsx
View File

@ -44,12 +44,12 @@ import {
generatePromQueries, generatePromQueries,
getDashboardQueryMap, getDashboardQueryMap,
} from '../../utils/promUtils'; } from '../../utils/promUtils';
import ChaosAccordion from '../../views/Analytics/ApplicationDashboard/ChaosAccordion'; import ChaosAccordion from '../../views/Observability/MonitoringDashboard/ChaosAccordion';
import DataSourceInactiveModal from '../../views/Analytics/ApplicationDashboard/DataSourceInactiveModal'; import DataSourceInactiveModal from '../../views/Observability/MonitoringDashboard/DataSourceInactiveModal';
import InfoDropdown from '../../views/Analytics/ApplicationDashboard/InfoDropdown'; import InfoDropdown from '../../views/Observability/MonitoringDashboard/InfoDropdown';
import DashboardPanelGroup from '../../views/Analytics/ApplicationDashboard/PanelAndGroup/PanelGroup'; import DashboardPanelGroup from '../../views/Observability/MonitoringDashboard/PanelAndGroup/PanelGroup';
import ToolBar from '../../views/Analytics/ApplicationDashboard/ToolBar'; import ToolBar from '../../views/Observability/MonitoringDashboard/ToolBar';
import TopNavButtons from '../../views/Analytics/ApplicationDashboard/TopNavButtons'; import TopNavButtons from '../../views/Observability/MonitoringDashboard/TopNavButtons';
import { import {
ACTIVE, ACTIVE,
DEFAULT_REFRESH_RATE, DEFAULT_REFRESH_RATE,
@ -376,13 +376,13 @@ const DashboardPage: React.FC = () => {
<div className={classes.center}> <div className={classes.center}>
<Loader /> <Loader />
<Typography className={classes.loading}> <Typography className={classes.loading}>
{t('analyticsDashboard.monitoringDashboardPage.loadingText')} {t('monitoringDashboard.monitoringDashboardPage.loadingText')}
</Typography> </Typography>
</div> </div>
) : errorFetchingDashboards ? ( ) : errorFetchingDashboards ? (
<div className={classes.center}> <div className={classes.center}>
<Typography className={classes.error}> <Typography className={classes.error}>
{t('analyticsDashboard.monitoringDashboardPage.errorText')} {t('monitoringDashboard.monitoringDashboardPage.errorText')}
</Typography> </Typography>
<div className={classes.flexButtons}> <div className={classes.flexButtons}>
<ButtonOutlined <ButtonOutlined
@ -394,7 +394,7 @@ const DashboardPage: React.FC = () => {
variant="highlight" variant="highlight"
> >
<Typography> <Typography>
{t('analyticsDashboard.monitoringDashboardPage.tryAgain')} {t('monitoringDashboard.monitoringDashboardPage.tryAgain')}
</Typography> </Typography>
</ButtonOutlined> </ButtonOutlined>
<ButtonFilled <ButtonFilled
@ -403,7 +403,7 @@ const DashboardPage: React.FC = () => {
variant="error" variant="error"
> >
<Typography> <Typography>
{t('analyticsDashboard.monitoringDashboardPage.goBack')} {t('monitoringDashboard.monitoringDashboardPage.goBack')}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>
</div> </div>
@ -593,7 +593,7 @@ const DashboardPage: React.FC = () => {
}} }}
/> />
<div <div
className={classes.analyticsDiv} className={classes.observabilityDiv}
key={selectedDashboardInformation.dashboardKey} key={selectedDashboardInformation.dashboardKey}
> >
<div className={classes.chaosTableSection}> <div className={classes.chaosTableSection}>
@ -642,7 +642,7 @@ const DashboardPage: React.FC = () => {
<Loader /> <Loader />
<Typography className={classes.loading}> <Typography className={classes.loading}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.metricsLoadingText' 'monitoringDashboard.monitoringDashboardPage.metricsLoadingText'
)} )}
</Typography> </Typography>
</div> </div>

52
litmus-portal/frontend/src/pages/MonitoringDashboard/refreshData.ts Normal file
View File

@ -0,0 +1,52 @@
import { DEFAULT_RELATIVE_TIME_RANGE } from './constants';
export default [
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.off',
value: 0,
},
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.every5Seconds',
value: 5,
},
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.every10Seconds',
value: 10,
},
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.every15Seconds',
value: 15,
},
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.every30Seconds',
value: 30,
},
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.every1Minute',
value: 60,
},
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.every5Minutes',
value: 300,
},
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.every15Minutes',
value: 900,
},
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.every30Minutes',
value: DEFAULT_RELATIVE_TIME_RANGE,
},
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.every1Hour',
value: 3600,
},
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.every2Hours',
value: 7200,
},
{
label: 'monitoringDashboard.monitoringDashboardPage.refresh.every1Day',
value: 86400,
},
];

2
litmus-portal/frontend/src/pages/ApplicationDashboard/styles.ts → litmus-portal/frontend/src/pages/MonitoringDashboard/styles.ts
View File

@ -41,7 +41,7 @@ const useStyles = makeStyles((theme) => ({
marginBottom: theme.spacing(4.5), marginBottom: theme.spacing(4.5),
}, },
analyticsDiv: { observabilityDiv: {
padding: theme.spacing(1, 0, 2), padding: theme.spacing(1, 0, 2),
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
minHeight: '26rem', minHeight: '26rem',

40
litmus-portal/frontend/src/pages/AnalyticsPage/index.tsx → litmus-portal/frontend/src/pages/ObservabilityPage/index.tsx
View File

@ -12,31 +12,33 @@ import * as TabActions from '../../redux/actions/tabs';
import { RootState } from '../../redux/reducers'; import { RootState } from '../../redux/reducers';
import useStyles from './styles'; import useStyles from './styles';
const Overview = lazy(() => import('../../views/Analytics/Overview')); const Overview = lazy(() => import('../../views/Observability/Overview'));
const DashboardTable = lazy( const DashboardTable = lazy(
() => import('../../views/Analytics/ApplicationDashboards/Table') () => import('../../views/Observability/MonitoringDashboards/Table')
); );
const DataSourceTable = lazy( const DataSourceTable = lazy(
() => import('../../views/Analytics/DataSources/Table') () => import('../../views/Observability/DataSources/Table')
); );
const WorkflowComparisonTable = lazy( const WorkflowComparisonTable = lazy(
() => () =>
import('../../views/Analytics/WorkflowDashboard/WorkflowComparisonTable') import(
'../../views/Observability/WorkflowStatistics/WorkflowComparisonTable'
)
); );
const AnalyticsDashboard = () => { const ObservabilityDashboard = () => {
const classes = useStyles(); const classes = useStyles();
const { t } = useTranslation(); const { t } = useTranslation();
const analyticsTabValue = useSelector( const observabilityTabValue = useSelector(
(state: RootState) => state.tabNumber.analytics (state: RootState) => state.tabNumber.observability
); );
const tabs = useActions(TabActions); const tabs = useActions(TabActions);
const theme = useTheme(); const theme = useTheme();
const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => { const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
tabs.changeAnalyticsDashboardTabs(newValue); tabs.changeObservabilityDashboardTabs(newValue);
}; };
return ( return (
@ -44,13 +46,13 @@ const AnalyticsDashboard = () => {
<section> <section>
<div className={classes.header}> <div className={classes.header}>
<Typography variant="h3"> <Typography variant="h3">
{t('analyticsDashboard.heading')} {t('monitoringDashboard.heading')}
</Typography> </Typography>
</div> </div>
</section> </section>
<AppBar className={classes.appBar}> <AppBar className={classes.appBar}>
<Tabs <Tabs
value={analyticsTabValue} value={observabilityTabValue}
onChange={handleChange} onChange={handleChange}
TabIndicatorProps={{ TabIndicatorProps={{
style: { style: {
@ -60,40 +62,40 @@ const AnalyticsDashboard = () => {
variant="fullWidth" variant="fullWidth"
> >
<StyledTab <StyledTab
label={t('analyticsDashboard.overview')} label={t('monitoringDashboard.overview')}
data-cy="overview" data-cy="overview"
/> />
<StyledTab <StyledTab
label={t('analyticsDashboard.workflowDashboard')} label={t('monitoringDashboard.workflowStatistics')}
data-cy="litmusDashboard" data-cy="litmusDashboard"
/> />
<StyledTab <StyledTab
label={t('analyticsDashboard.applicationDashboard')} label={t('monitoringDashboard.monitoringDashboard')}
data-cy="kubernetesDashboard" data-cy="kubernetesDashboard"
/> />
<StyledTab <StyledTab
label={t('analyticsDashboard.dataSource')} label={t('monitoringDashboard.dataSource')}
data-cy="data source" data-cy="data source"
/> />
</Tabs> </Tabs>
</AppBar> </AppBar>
<TabPanel value={analyticsTabValue} index={0}> <TabPanel value={observabilityTabValue} index={0}>
<SuspenseLoader style={{ height: '50vh' }}> <SuspenseLoader style={{ height: '50vh' }}>
<Overview /> <Overview />
</SuspenseLoader> </SuspenseLoader>
</TabPanel> </TabPanel>
<TabPanel value={analyticsTabValue} index={1}> <TabPanel value={observabilityTabValue} index={1}>
<SuspenseLoader style={{ height: '50vh' }}> <SuspenseLoader style={{ height: '50vh' }}>
<WorkflowComparisonTable /> <WorkflowComparisonTable />
</SuspenseLoader> </SuspenseLoader>
</TabPanel> </TabPanel>
<TabPanel value={analyticsTabValue} index={2}> <TabPanel value={observabilityTabValue} index={2}>
<SuspenseLoader style={{ height: '50vh' }}> <SuspenseLoader style={{ height: '50vh' }}>
<DashboardTable /> <DashboardTable />
</SuspenseLoader> </SuspenseLoader>
</TabPanel> </TabPanel>
<TabPanel value={analyticsTabValue} index={3}> <TabPanel value={observabilityTabValue} index={3}>
<SuspenseLoader style={{ height: '50vh' }}> <SuspenseLoader style={{ height: '50vh' }}>
<DataSourceTable /> <DataSourceTable />
</SuspenseLoader> </SuspenseLoader>
@ -102,4 +104,4 @@ const AnalyticsDashboard = () => {
); );
}; };
export default AnalyticsDashboard; export default ObservabilityDashboard;

0
litmus-portal/frontend/src/pages/AnalyticsPage/styles.ts → litmus-portal/frontend/src/pages/ObservabilityPage/styles.ts
View File

6
litmus-portal/frontend/src/pages/WorkflowInfoStats/WorkflowRunTable/TableData.tsx
View File

@ -1,9 +1,9 @@
import { Typography } from '@material-ui/core'; import { Typography } from '@material-ui/core';
import moment from 'moment'; import moment from 'moment';
import React from 'react'; import React from 'react';
import AnalyticsLinearProgressBar from '../../../components/ProgressBar/AnalyticsLinearProgressBar';
import LinearProgressBar from '../../../components/ProgressBar/LinearProgressBar'; import LinearProgressBar from '../../../components/ProgressBar/LinearProgressBar';
import ExperimentStatus from '../../../views/Analytics/WorkflowDashboard/ExperimentStatus'; import StatisticsLinearProgressBar from '../../../components/ProgressBar/StatisticsLinearProgressBar';
import ExperimentStatus from '../../../views/Observability/WorkflowStatistics/ExperimentStatus';
import useStyles, { StyledTableCell } from './styles'; import useStyles, { StyledTableCell } from './styles';
interface WorkFlowTests { interface WorkFlowTests {
@ -59,7 +59,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
{data.test_weight} Points {data.test_weight} Points
</Typography> </Typography>
<div className={classes.progressBar}> <div className={classes.progressBar}>
<AnalyticsLinearProgressBar <StatisticsLinearProgressBar
value={data.test_weight ?? 0} value={data.test_weight ?? 0}
maxValue={10} maxValue={10}
isInTable isInTable

12
litmus-portal/frontend/src/pages/WorkflowInfoStats/WorkflowRunTable/TableHeader.tsx
View File

@ -38,24 +38,24 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
<TableRow className={classes.tableHead}> <TableRow className={classes.tableHead}>
<StyledTableCell className={classes.testName}> <StyledTableCell className={classes.testName}>
<div className={classes.nameContent}> <div className={classes.nameContent}>
<b>{t('analytics.workflowRunDetailsTable.tableHead0')}</b>&nbsp; <b>{t('observability.workflowRunDetailsTable.tableHead0')}</b>&nbsp;
</div> </div>
</StyledTableCell> </StyledTableCell>
<StyledTableCell> <StyledTableCell>
<div className={classes.nameContent}> <div className={classes.nameContent}>
<b>{t('analytics.workflowRunDetailsTable.tableHead1')}</b>&nbsp; <b>{t('observability.workflowRunDetailsTable.tableHead1')}</b>&nbsp;
</div> </div>
</StyledTableCell> </StyledTableCell>
<StyledTableCell> <StyledTableCell>
<div className={classes.nameContent}> <div className={classes.nameContent}>
<b>{t('analytics.workflowRunDetailsTable.tableHead2')}</b>&nbsp; <b>{t('observability.workflowRunDetailsTable.tableHead2')}</b>&nbsp;
</div> </div>
</StyledTableCell> </StyledTableCell>
<StyledTableCell> <StyledTableCell>
<div className={classes.nameContent}> <div className={classes.nameContent}>
<b>{t('analytics.workflowRunDetailsTable.tableHead3')}</b>&nbsp; <b>{t('observability.workflowRunDetailsTable.tableHead3')}</b>&nbsp;
<div> <div>
<IconButton <IconButton
aria-label="sort run ascending" aria-label="sort run ascending"
@ -90,7 +90,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
</StyledTableCell> </StyledTableCell>
<StyledTableCell> <StyledTableCell>
<div className={classes.nameContent}> <div className={classes.nameContent}>
<b>{t('analytics.workflowRunDetailsTable.tableHead4')}</b>&nbsp; <b>{t('observability.workflowRunDetailsTable.tableHead4')}</b>&nbsp;
<div> <div>
<IconButton <IconButton
aria-label="sort run ascending" aria-label="sort run ascending"
@ -125,7 +125,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
</StyledTableCell> </StyledTableCell>
<StyledTableCell> <StyledTableCell>
<div className={classes.nameContent}> <div className={classes.nameContent}>
<b>{t('analytics.workflowRunDetailsTable.tableHead5')}</b>&nbsp; <b>{t('observability.workflowRunDetailsTable.tableHead5')}</b>&nbsp;
<div> <div>
<IconButton <IconButton
aria-label="sort run ascending" aria-label="sort run ascending"

4
litmus-portal/frontend/src/pages/WorkflowInfoStats/WorkflowRunTable/styles.ts
View File

@ -11,10 +11,6 @@ const useStyles = makeStyles((theme) => ({
marginTop: theme.spacing(4.75), marginTop: theme.spacing(4.75),
}, },
analyticsDiv: {
paddingRight: theme.spacing(3.75),
},
headerSection: { headerSection: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',

4
litmus-portal/frontend/src/pages/WorkflowInfoStats/index.tsx
View File

@ -169,7 +169,7 @@ const WorkflowInfoStats: React.FC = () => {
{data?.ListWorkflow.workflows[0].workflow_name} {data?.ListWorkflow.workflows[0].workflow_name}
</Typography> </Typography>
<Typography className={classes.subHeading}> <Typography className={classes.subHeading}>
Here’s the analytics of the selected workflow Here’s the statistics of the selected workflow
</Typography> </Typography>
</div> </div>
{/* For later: */} {/* For later: */}
@ -198,7 +198,7 @@ const WorkflowInfoStats: React.FC = () => {
<div className={classes.heatmapArea}> <div className={classes.heatmapArea}>
<div className={classes.heatmapAreaHeading}> <div className={classes.heatmapAreaHeading}>
<Typography className={classes.sectionHeading}> <Typography className={classes.sectionHeading}>
Analytics Statistics
</Typography> </Typography>
{/* Year selection filter */} {/* Year selection filter */}
</div> </div>

2
litmus-portal/frontend/src/redux/actions/tabs.ts
View File

@ -21,7 +21,7 @@ export function changeWorkflowDetailsTabs(tabNumber: number): TabAction {
}; };
} }
export function changeAnalyticsDashboardTabs(tabNumber: number): TabAction { export function changeObservabilityDashboardTabs(tabNumber: number): TabAction {
return { return {
type: TabActions.CHANGE_ANALYTICS_DASHBOARD_TAB, type: TabActions.CHANGE_ANALYTICS_DASHBOARD_TAB,
payload: tabNumber, payload: tabNumber,

4
litmus-portal/frontend/src/redux/reducers/tabs.ts
View File

@ -6,7 +6,7 @@ const initialState: TabState = {
workflows: 0, workflows: 0,
settings: 0, settings: 0,
node: 0, node: 0,
analytics: 0, observability: 0,
myhub: 0, myhub: 0,
}; };
@ -35,7 +35,7 @@ export const tabNumber = createReducer<TabState>(initialState, {
) { ) {
return { return {
...state, ...state,
analytics: action.payload, observability: action.payload,
}; };
}, },
[TabActions.CHANGE_HUB_TABS](state: TabState, action: TabAction) { [TabActions.CHANGE_HUB_TABS](state: TabState, action: TabAction) {

0
litmus-portal/frontend/src/svg/analytics-sidebar.svg → litmus-portal/frontend/src/svg/observability-sidebar.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

0
litmus-portal/frontend/src/svg/analytics.svg → litmus-portal/frontend/src/svg/observability.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

2
litmus-portal/frontend/src/utils/promUtils.ts
View File

@ -27,7 +27,7 @@ import {
DEFAULT_TSDB_SCRAPE_INTERVAL, DEFAULT_TSDB_SCRAPE_INTERVAL,
PROMETHEUS_QUERY_RESOLUTION_LIMIT, PROMETHEUS_QUERY_RESOLUTION_LIMIT,
TIME_THRESHOLD_FOR_TSDB, TIME_THRESHOLD_FOR_TSDB,
} from '../pages/ApplicationDashboard/constants'; } from '../pages/MonitoringDashboard/constants';
const labelMatchOperators = ['==', '!=', '<=', '<', '>=', '>', '=~', '!~', '=']; const labelMatchOperators = ['==', '!=', '<=', '<', '>=', '>', '=~', '!~', '='];

16
litmus-portal/frontend/src/utils/timeDifferenceString.ts
View File

@ -11,28 +11,28 @@ const GetTimeDiff = (startTime: number, endTime: number, t: TFunction) => {
if (days > 0) { if (days > 0) {
timeDiffString = timeDiffString.concat( timeDiffString = timeDiffString.concat(
days === 1 days === 1
? `${days} ${t('analyticsDashboard.timeText.day')} ` ? `${days} ${t('monitoringDashboard.timeText.day')} `
: `${days} ${t('analyticsDashboard.timeText.days')} ` : `${days} ${t('monitoringDashboard.timeText.days')} `
); );
} }
if (hours > 0) { if (hours > 0) {
timeDiffString = timeDiffString.concat( timeDiffString = timeDiffString.concat(
hours === 1 hours === 1
? `${hours} ${t('analyticsDashboard.timeText.hour')} ` ? `${hours} ${t('monitoringDashboard.timeText.hour')} `
: `${hours} ${t('analyticsDashboard.timeText.hours')} ` : `${hours} ${t('monitoringDashboard.timeText.hours')} `
); );
} }
if (minutes > 0) { if (minutes > 0) {
timeDiffString = timeDiffString.concat( timeDiffString = timeDiffString.concat(
minutes === 1 minutes === 1
? `${minutes} ${t('analyticsDashboard.timeText.minute')} ` ? `${minutes} ${t('monitoringDashboard.timeText.minute')} `
: `${minutes} ${t('analyticsDashboard.timeText.minutes')} ` : `${minutes} ${t('monitoringDashboard.timeText.minutes')} `
); );
} }
if (timeDiffString === '') { if (timeDiffString === '') {
timeDiffString = timeDiffString.concat( timeDiffString = timeDiffString.concat(
` ${t('analyticsDashboard.timeText.few')} ${t( ` ${t('monitoringDashboard.timeText.few')} ${t(
'analyticsDashboard.timeText.seconds' 'monitoringDashboard.timeText.seconds'
)}` )}`
); );
} }

12
litmus-portal/frontend/src/views/ChaosWorkflows/Runs/TableData.tsx
View File

@ -421,19 +421,21 @@ const TableData: React.FC<TableDataProps> = ({ data, refetchQuery }) => {
value="Analysis" value="Analysis"
onClick={() => { onClick={() => {
history.push({ history.push({
pathname: `/analytics/workflowdashboard/${data.workflow_id}`, pathname: `/observability/workflowStatistics/${data.workflow_id}`,
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}} }}
> >
<div className={classes.expDiv} data-cy="workflowAnalytics"> <div className={classes.expDiv} data-cy="workflowStatistics">
<img <img
src="./icons/show-analytics.svg" src="./icons/show-statistics.svg"
alt="Display Analytics" alt="Display Statistics"
className={classes.btnImg} className={classes.btnImg}
/> />
<Typography className={classes.btnText}> <Typography className={classes.btnText}>
{t('chaosWorkflows.browseWorkflows.tableData.showTheAnalytics')} {t(
'chaosWorkflows.browseWorkflows.tableData.showTheStatistics'
)}
</Typography> </Typography>
</div> </div>
</MenuItem> </MenuItem>

46
litmus-portal/frontend/src/views/Analytics/DataSources/Forms/prometheus.tsx → litmus-portal/frontend/src/views/Observability/DataSources/Forms/prometheus.tsx
View File

@ -188,15 +188,15 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
{page === 1 ? ( {page === 1 ? (
<div> <div>
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t('analyticsDashboard.dataSourceForm.general')} {t('monitoringDashboard.dataSourceForm.general')}
</Typography> </Typography>
<Typography className={classes.subHeading}> <Typography className={classes.subHeading}>
{t('analyticsDashboard.dataSourceForm.generalInfo')} {t('monitoringDashboard.dataSourceForm.generalInfo')}
</Typography> </Typography>
<div className={classes.flexDisplay} style={{ width: '80%' }}> <div className={classes.flexDisplay} style={{ width: '80%' }}>
<div className={classes.inputDiv}> <div className={classes.inputDiv}>
<InputField <InputField
label={t('analyticsDashboard.dataSourceForm.name')} label={t('monitoringDashboard.dataSourceForm.name')}
data-cy="inputDataSourceName" data-cy="inputDataSourceName"
width="22.5rem" width="22.5rem"
variant={ variant={
@ -210,7 +210,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
</div> </div>
<div className={classes.inputDiv}> <div className={classes.inputDiv}>
<InputField <InputField
label={t('analyticsDashboard.dataSourceForm.dataSourceType')} label={t('monitoringDashboard.dataSourceForm.dataSourceType')}
data-cy="inputDataSourceType" data-cy="inputDataSourceType"
width="22.5rem" width="22.5rem"
variant={ variant={
@ -236,20 +236,20 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
variant="highlight" variant="highlight"
> >
<Typography className={classes.infoValue}> <Typography className={classes.infoValue}>
{t('analyticsDashboard.dataSourceForm.docsAndSetup')} {t('monitoringDashboard.dataSourceForm.docsAndSetup')}
</Typography> </Typography>
</TextButton> </TextButton>
<div className={classes.horizontalLine} /> <div className={classes.horizontalLine} />
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t('analyticsDashboard.dataSourceForm.endPoint')} {t('monitoringDashboard.dataSourceForm.endPoint')}
</Typography> </Typography>
<Typography className={classes.subHeading}> <Typography className={classes.subHeading}>
{t('analyticsDashboard.dataSourceForm.endPointInfo')} {t('monitoringDashboard.dataSourceForm.endPointInfo')}
</Typography> </Typography>
<div className={classes.flexDisplay} style={{ width: '80%' }}> <div className={classes.flexDisplay} style={{ width: '80%' }}>
<div className={classes.inputDiv}> <div className={classes.inputDiv}>
<InputField <InputField
label={t('analyticsDashboard.dataSourceForm.url')} label={t('monitoringDashboard.dataSourceForm.url')}
data-cy="inputDataSourceURL" data-cy="inputDataSourceURL"
width="22.5rem" width="22.5rem"
variant={ variant={
@ -261,7 +261,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
</div> </div>
<div className={classes.inputDiv}> <div className={classes.inputDiv}>
<InputField <InputField
label={t('analyticsDashboard.dataSourceForm.access')} label={t('monitoringDashboard.dataSourceForm.access')}
data-cy="inputDataSourceAccess" data-cy="inputDataSourceAccess"
width="22.5rem" width="22.5rem"
variant={ variant={
@ -279,10 +279,10 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
) : ( ) : (
<div> <div>
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t('analyticsDashboard.dataSourceForm.authentication')} {t('monitoringDashboard.dataSourceForm.authentication')}
</Typography> </Typography>
<Typography className={classes.subHeading}> <Typography className={classes.subHeading}>
{t('analyticsDashboard.dataSourceForm.authenticationInfo')} {t('monitoringDashboard.dataSourceForm.authenticationInfo')}
</Typography> </Typography>
<FormGroup> <FormGroup>
<div className={classes.inputDivRadioButton}> <div className={classes.inputDivRadioButton}>
@ -295,7 +295,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
name="noAuth" name="noAuth"
/> />
} }
label={t('analyticsDashboard.dataSourceForm.noAuth')} label={t('monitoringDashboard.dataSourceForm.noAuth')}
/> />
<FormControlLabel <FormControlLabel
className={classes.basicAuth} className={classes.basicAuth}
@ -307,7 +307,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
name="basicAuth" name="basicAuth"
/> />
} }
label={t('analyticsDashboard.dataSourceForm.basicAuth')} label={t('monitoringDashboard.dataSourceForm.basicAuth')}
/> />
<FormControlLabel <FormControlLabel
className={classes.withCredentials} className={classes.withCredentials}
@ -320,7 +320,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
name="withCredentials" name="withCredentials"
/> />
} }
label={t('analyticsDashboard.dataSourceForm.withCredentials')} label={t('monitoringDashboard.dataSourceForm.withCredentials')}
/> />
</div> </div>
<div className={classes.inputDivRadioButton}> <div className={classes.inputDivRadioButton}>
@ -334,7 +334,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
name="tlsClientAuth" name="tlsClientAuth"
/> />
} }
label={t('analyticsDashboard.dataSourceForm.tlsClientAuth')} label={t('monitoringDashboard.dataSourceForm.tlsClientAuth')}
/> />
<FormControlLabel <FormControlLabel
className={classes.withCACert} className={classes.withCACert}
@ -347,7 +347,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
name="withCACert" name="withCACert"
/> />
} }
label={t('analyticsDashboard.dataSourceForm.withCACert')} label={t('monitoringDashboard.dataSourceForm.withCACert')}
/> />
</div> </div>
</FormGroup> </FormGroup>
@ -357,7 +357,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
<div className={classes.flexDisplay} style={{ width: '55%' }}> <div className={classes.flexDisplay} style={{ width: '55%' }}>
<div className={classes.inputDiv}> <div className={classes.inputDiv}>
<InputField <InputField
label={t('analyticsDashboard.dataSourceForm.username')} label={t('monitoringDashboard.dataSourceForm.username')}
data-cy="inputPrometheusUsername" data-cy="inputPrometheusUsername"
width="14rem" width="14rem"
variant={ variant={
@ -371,7 +371,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
</div> </div>
<div className={classes.inputDiv}> <div className={classes.inputDiv}>
<InputField <InputField
label={t('analyticsDashboard.dataSourceForm.password')} label={t('monitoringDashboard.dataSourceForm.password')}
type="password" type="password"
data-cy="inputPrometheusPassword" data-cy="inputPrometheusPassword"
width="14rem" width="14rem"
@ -391,15 +391,15 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
<div /> <div />
)} )}
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t('analyticsDashboard.dataSourceForm.configuration')} {t('monitoringDashboard.dataSourceForm.configuration')}
</Typography> </Typography>
<Typography className={classes.subHeading}> <Typography className={classes.subHeading}>
{t('analyticsDashboard.dataSourceForm.configurationInfo')} {t('monitoringDashboard.dataSourceForm.configurationInfo')}
</Typography> </Typography>
<div className={classes.flexDisplay} style={{ width: '80%' }}> <div className={classes.flexDisplay} style={{ width: '80%' }}>
<div className={classes.inputDiv}> <div className={classes.inputDiv}>
<InputField <InputField
label={t('analyticsDashboard.dataSourceForm.scrapeInterval')} label={t('monitoringDashboard.dataSourceForm.scrapeInterval')}
data-cy="inputScrapeInterval" data-cy="inputScrapeInterval"
width="13.5rem" width="13.5rem"
variant={ variant={
@ -413,7 +413,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
</div> </div>
<div className={classes.inputDiv}> <div className={classes.inputDiv}>
<InputField <InputField
label={t('analyticsDashboard.dataSourceForm.queryTimeOut')} label={t('monitoringDashboard.dataSourceForm.queryTimeOut')}
data-cy="inputQueryTimeout" data-cy="inputQueryTimeout"
width="13.5rem" width="13.5rem"
variant={ variant={
@ -427,7 +427,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
</div> </div>
<div className={classes.inputDiv}> <div className={classes.inputDiv}>
<InputField <InputField
label={t('analyticsDashboard.dataSourceForm.httpMethod')} label={t('monitoringDashboard.dataSourceForm.httpMethod')}
data-cy="inputHTTPMethod" data-cy="inputHTTPMethod"
width="13.5rem" width="13.5rem"
variant={ variant={

0
litmus-portal/frontend/src/views/Analytics/DataSources/Forms/styles.ts → litmus-portal/frontend/src/views/Observability/DataSources/Forms/styles.ts
View File

14
litmus-portal/frontend/src/views/Analytics/DataSources/Table/TableData.tsx → litmus-portal/frontend/src/views/Observability/DataSources/Table/TableData.tsx
View File

@ -184,7 +184,7 @@ const TableData: React.FC<TableDataProps> = ({
selectedDataSourceName: data.ds_name, selectedDataSourceName: data.ds_name,
}); });
history.push({ history.push({
pathname: '/analytics/datasource/configure', pathname: '/observability/datasource/configure',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}} }}
@ -200,7 +200,7 @@ const TableData: React.FC<TableDataProps> = ({
data-cy="configureDashboard" data-cy="configureDashboard"
className={classes.btnText} className={classes.btnText}
> >
{t('analyticsDashboard.dataSourceTable.configure')} {t('monitoringDashboard.dataSourceTable.configure')}
</Typography> </Typography>
</div> </div>
</MenuItem> </MenuItem>
@ -223,7 +223,7 @@ const TableData: React.FC<TableDataProps> = ({
data-cy="deleteDashboard" data-cy="deleteDashboard"
className={`${classes.btnText} ${classes.deleteText}`} className={`${classes.btnText} ${classes.deleteText}`}
> >
{t('analyticsDashboard.dataSourceTable.delete')} {t('monitoringDashboard.dataSourceTable.delete')}
</Typography> </Typography>
</div> </div>
</MenuItem> </MenuItem>
@ -237,12 +237,12 @@ const TableData: React.FC<TableDataProps> = ({
> >
<div className={classes.modal}> <div className={classes.modal}>
<Typography className={classes.modalHeading} align="left"> <Typography className={classes.modalHeading} align="left">
{t('analyticsDashboard.dataSourceTable.modal.removeDataSource')} {t('monitoringDashboard.dataSourceTable.modal.removeDataSource')}
</Typography> </Typography>
<Typography className={classes.modalBodyText} align="left"> <Typography className={classes.modalBodyText} align="left">
{t( {t(
'analyticsDashboard.dataSourceTable.modal.removeDataSourceConfirmation' 'monitoringDashboard.dataSourceTable.modal.removeDataSourceConfirmation'
)} )}
<b> <b>
<i>{` ${data.ds_name} `}</i> <i>{` ${data.ds_name} `}</i>
@ -258,7 +258,7 @@ const TableData: React.FC<TableDataProps> = ({
className={classes.cancelButton} className={classes.cancelButton}
> >
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{t('analyticsDashboard.dataSourceTable.modal.cancel')} {t('monitoringDashboard.dataSourceTable.modal.cancel')}
</Typography> </Typography>
</TextButton> </TextButton>
<ButtonFilled <ButtonFilled
@ -271,7 +271,7 @@ const TableData: React.FC<TableDataProps> = ({
<Typography <Typography
className={`${classes.buttonText} ${classes.confirmButtonText}`} className={`${classes.buttonText} ${classes.confirmButtonText}`}
> >
{t('analyticsDashboard.dataSourceTable.modal.delete')} {t('monitoringDashboard.dataSourceTable.modal.delete')}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>
</div> </div>

10
litmus-portal/frontend/src/views/Analytics/DataSources/Table/TableHeader.tsx → litmus-portal/frontend/src/views/Observability/DataSources/Table/TableHeader.tsx
View File

@ -38,7 +38,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
<Typography <Typography
className={`${classes.dataSourceNameHead} ${classes.dataSourceStatusHeadWithoutSort}`} className={`${classes.dataSourceNameHead} ${classes.dataSourceStatusHeadWithoutSort}`}
> >
{t('analyticsDashboard.dataSourceTable.tableHead1')} {t('monitoringDashboard.dataSourceTable.tableHead1')}
</Typography> </Typography>
</StyledTableCell> </StyledTableCell>
@ -47,7 +47,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
> >
<div className={classes.flexDisplay}> <div className={classes.flexDisplay}>
<Typography className={`${classes.dataSourceNameHead}`}> <Typography className={`${classes.dataSourceNameHead}`}>
{t('analyticsDashboard.dataSourceTable.tableHead2')} {t('monitoringDashboard.dataSourceTable.tableHead2')}
</Typography> </Typography>
<div className={classes.nameContentIcons}> <div className={classes.nameContentIcons}>
<IconButton <IconButton
@ -86,7 +86,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
<Typography <Typography
className={`${classes.dataSourceNameHead} ${classes.dataSourceNameHeadWithoutSort}`} className={`${classes.dataSourceNameHead} ${classes.dataSourceNameHeadWithoutSort}`}
> >
{t('analyticsDashboard.dataSourceTable.tableHead3')} {t('monitoringDashboard.dataSourceTable.tableHead3')}
</Typography> </Typography>
</StyledTableCell> </StyledTableCell>
@ -94,14 +94,14 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
<Typography <Typography
className={`${classes.dataSourceNameHead} ${classes.dataSourceNameHeadWithoutSort}`} className={`${classes.dataSourceNameHead} ${classes.dataSourceNameHeadWithoutSort}`}
> >
{t('analyticsDashboard.dataSourceTable.tableHead4')} {t('monitoringDashboard.dataSourceTable.tableHead4')}
</Typography> </Typography>
</StyledTableCell> </StyledTableCell>
<StyledTableCell className={classes.headSpacing}> <StyledTableCell className={classes.headSpacing}>
<div className={classes.flexDisplay}> <div className={classes.flexDisplay}>
<Typography className={classes.dataSourceNameHead}> <Typography className={classes.dataSourceNameHead}>
{t('analyticsDashboard.dataSourceTable.tableHead5')} {t('monitoringDashboard.dataSourceTable.tableHead5')}
</Typography> </Typography>
<div className={classes.nameContentIcons}> <div className={classes.nameContentIcons}>
<IconButton <IconButton

12
litmus-portal/frontend/src/views/Analytics/DataSources/Table/TableToolbar.tsx → litmus-portal/frontend/src/views/Observability/DataSources/Table/TableToolbar.tsx
View File

@ -84,7 +84,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
<div className={classes.search}> <div className={classes.search}>
<Search <Search
id="input-with-icon-textfield" id="input-with-icon-textfield"
placeholder={t('analyticsDashboard.dataSourceTable.search')} placeholder={t('monitoringDashboard.dataSourceTable.search')}
value={searchToken} value={searchToken}
onChange={handleSearch} onChange={handleSearch}
/> />
@ -98,10 +98,10 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
className={`${classes.formControl} ${classes.dataSourceStatusForm}`} className={`${classes.formControl} ${classes.dataSourceStatusForm}`}
> >
<InputLabel className={classes.selectText}> <InputLabel className={classes.selectText}>
{t('analyticsDashboard.dataSourceTable.tableHead1')} {t('monitoringDashboard.dataSourceTable.tableHead1')}
</InputLabel> </InputLabel>
<Select <Select
label={t('analyticsDashboard.dataSourceTable.tableHead1')} label={t('monitoringDashboard.dataSourceTable.tableHead1')}
value={status} value={status}
onChange={handleStatusChange} onChange={handleStatusChange}
className={classes.selectText} className={classes.selectText}
@ -121,11 +121,11 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
}} }}
> >
<MenuItem value="All" className={classes.menuListItem}> <MenuItem value="All" className={classes.menuListItem}>
{t('analyticsDashboard.dataSourceTable.all')} {t('monitoringDashboard.dataSourceTable.all')}
</MenuItem> </MenuItem>
{statuses.map((availableStatus: string) => ( {statuses.map((availableStatus: string) => (
<MenuItem <MenuItem
key={`${availableStatus}-analyticsDashboard-dataSource-toolbar`} key={`${availableStatus}-monitoringDashboard-dataSource-toolbar`}
value={availableStatus} value={availableStatus}
className={classes.menuListItem} className={classes.menuListItem}
> >
@ -146,7 +146,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
> >
<Typography className={classes.displayDate}> <Typography className={classes.displayDate}>
{range.startDate === ' ' {range.startDate === ' '
? t('analyticsDashboard.dataSourceTable.selectPeriod') ? t('monitoringDashboard.dataSourceTable.selectPeriod')
: `${range.startDate.split(' ')[2]} ${ : `${range.startDate.split(' ')[2]} ${
range.startDate.split(' ')[1] range.startDate.split(' ')[1]
} ${range.startDate.split(' ')[3]} - ${ } ${range.startDate.split(' ')[3]} - ${

34
litmus-portal/frontend/src/views/Analytics/DataSources/Table/index.tsx → litmus-portal/frontend/src/views/Observability/DataSources/Table/index.tsx
View File

@ -204,19 +204,19 @@ const DataSourceTable: React.FC = () => {
<div className={classes.root}> <div className={classes.root}>
<div className={classes.tabHeaderFlex}> <div className={classes.tabHeaderFlex}>
<Typography className={classes.tabHeaderText}> <Typography className={classes.tabHeaderText}>
{t('analyticsDashboard.dataSourceTable.dataSources')} {t('monitoringDashboard.dataSourceTable.dataSources')}
</Typography> </Typography>
<ButtonFilled <ButtonFilled
onClick={() => onClick={() =>
history.push({ history.push({
pathname: '/analytics/datasource/create', pathname: '/observability/datasource/create',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}) })
} }
className={classes.addButton} className={classes.addButton}
> >
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{t('analyticsDashboard.dataSourceTable.addDataSource')} {t('monitoringDashboard.dataSourceTable.addDataSource')}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>
</div> </div>
@ -285,7 +285,7 @@ const DataSourceTable: React.FC = () => {
<TableRow> <TableRow>
<TableCell colSpan={6}> <TableCell colSpan={6}>
<Typography align="center"> <Typography align="center">
{t('analyticsDashboard.dataSourceTable.fetchError')} {t('monitoringDashboard.dataSourceTable.fetchError')}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
@ -297,7 +297,7 @@ const DataSourceTable: React.FC = () => {
> >
<Loader /> <Loader />
<Typography align="center"> <Typography align="center">
{t('analyticsDashboard.dataSourceTable.loading')} {t('monitoringDashboard.dataSourceTable.loading')}
</Typography> </Typography>
</div> </div>
</TableCell> </TableCell>
@ -312,7 +312,7 @@ const DataSourceTable: React.FC = () => {
alt="Data Source" alt="Data Source"
/> />
<Typography className={classes.noRecordsText}> <Typography className={classes.noRecordsText}>
{t('analyticsDashboard.dataSourceTable.noRecords')} {t('monitoringDashboard.dataSourceTable.noRecords')}
</Typography> </Typography>
</div> </div>
</TableCell> </TableCell>
@ -352,7 +352,7 @@ const DataSourceTable: React.FC = () => {
<TableRow> <TableRow>
<TableCell colSpan={6}> <TableCell colSpan={6}>
<Typography align="center"> <Typography align="center">
{t('analyticsDashboard.dataSourceTable.noRecords')} {t('monitoringDashboard.dataSourceTable.noRecords')}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
@ -398,8 +398,8 @@ const DataSourceTable: React.FC = () => {
severity={success ? 'success' : 'error'} severity={success ? 'success' : 'error'}
> >
{success {success
? t('analyticsDashboard.dataSourceTable.deletionSuccess') ? t('monitoringDashboard.dataSourceTable.deletionSuccess')
: t('analyticsDashboard.dataSourceTable.deletionError')} : t('monitoringDashboard.dataSourceTable.deletionError')}
</Alert> </Alert>
</Snackbar> </Snackbar>
)} )}
@ -418,7 +418,7 @@ const DataSourceTable: React.FC = () => {
<div className={classes.drawerContent}> <div className={classes.drawerContent}>
<div className={classes.flexContainer}> <div className={classes.flexContainer}>
<Typography className={classes.drawerHeading} align="left"> <Typography className={classes.drawerHeading} align="left">
{t('analyticsDashboard.dataSourceTable.delete')} {t('monitoringDashboard.dataSourceTable.delete')}
<b> <b>
<i>{` ${forceDeleteVars.dsName} `}</i> <i>{` ${forceDeleteVars.dsName} `}</i>
</b> </b>
@ -432,11 +432,11 @@ const DataSourceTable: React.FC = () => {
</div> </div>
<blockquote className={classes.warningBlock}> <blockquote className={classes.warningBlock}>
<Typography className={classes.warningText} align="left"> <Typography className={classes.warningText} align="left">
{t('analyticsDashboard.dataSourceTable.warning.text')} {t('monitoringDashboard.dataSourceTable.warning.text')}
</Typography> </Typography>
</blockquote> </blockquote>
<Typography className={classes.drawerBodyText} align="left"> <Typography className={classes.drawerBodyText} align="left">
{t('analyticsDashboard.dataSourceTable.warning.info')} {t('monitoringDashboard.dataSourceTable.warning.info')}
</Typography> </Typography>
<Typography <Typography
className={classes.drawerBodyText} className={classes.drawerBodyText}
@ -444,7 +444,7 @@ const DataSourceTable: React.FC = () => {
align="left" align="left"
> >
{t( {t(
'analyticsDashboard.dataSourceTable.warning.connectedDashboards' 'monitoringDashboard.dataSourceTable.warning.connectedDashboards'
)} )}
</Typography> </Typography>
<div className={classes.dashboardsList}> <div className={classes.dashboardsList}>
@ -469,9 +469,9 @@ const DataSourceTable: React.FC = () => {
> >
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{showAllDashboards {showAllDashboards
? t('analyticsDashboard.dataSourceTable.warning.showLess') ? t('monitoringDashboard.dataSourceTable.warning.showLess')
: `+${forceDeleteVars.connectedDashboards.length - 3} ${t( : `+${forceDeleteVars.connectedDashboards.length - 3} ${t(
'analyticsDashboard.dataSourceTable.warning.dashboards' 'monitoringDashboard.dataSourceTable.warning.dashboards'
)}`} )}`}
</Typography> </Typography>
</TextButton> </TextButton>
@ -482,7 +482,7 @@ const DataSourceTable: React.FC = () => {
className={classes.cancelButton} className={classes.cancelButton}
> >
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{t('analyticsDashboard.dataSourceTable.modal.cancel')} {t('monitoringDashboard.dataSourceTable.modal.cancel')}
</Typography> </Typography>
</TextButton> </TextButton>
<ButtonFilled <ButtonFilled
@ -501,7 +501,7 @@ const DataSourceTable: React.FC = () => {
<Typography <Typography
className={`${classes.buttonText} ${classes.confirmButtonText}`} className={`${classes.buttonText} ${classes.confirmButtonText}`}
> >
{t('analyticsDashboard.dataSourceTable.modal.forceDelete')} {t('monitoringDashboard.dataSourceTable.modal.forceDelete')}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>
</div> </div>

0
litmus-portal/frontend/src/views/Analytics/DataSources/Table/styles.ts → litmus-portal/frontend/src/views/Observability/DataSources/Table/styles.ts
View File

4
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ChaosAccordion/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ChaosAccordion/index.tsx
View File

@ -109,10 +109,10 @@ const ChaosAccordion: React.FC<ChaosAccordionProps> = ({
<Typography className={classes.chaosHelperText}> <Typography className={classes.chaosHelperText}>
{!chaosTableOpen {!chaosTableOpen
? t( ? t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.showTable' 'monitoringDashboard.monitoringDashboardPage.chaosTable.showTable'
) )
: t( : t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.hideTable' 'monitoringDashboard.monitoringDashboardPage.chaosTable.hideTable'
)} )}
</Typography> </Typography>
</TextButton> </TextButton>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ChaosAccordion/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ChaosAccordion/styles.ts
View File

20
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ChaosAnnotationsEditor/QueryEditor/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ChaosAnnotationsEditor/QueryEditor/index.tsx
View File

@ -201,7 +201,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
<TextField <TextField
{...params} {...params}
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.metric' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.metric'
)} )}
variant="outlined" variant="outlined"
size="medium" size="medium"
@ -245,7 +245,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
> >
<InputLabel className={classes.selectTextLabel}> <InputLabel className={classes.selectTextLabel}>
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.keys' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.keys'
)} )}
</InputLabel> </InputLabel>
<Select <Select
@ -292,7 +292,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
setUpdate(true); setUpdate(true);
}} }}
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.selectKey' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.selectKey'
)} )}
className={classes.selectText} className={classes.selectText}
disabled={ disabled={
@ -365,10 +365,10 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
} }
options={getAvailableValues(selectedLabel ?? '')} options={getAvailableValues(selectedLabel ?? '')}
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.values' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.values'
)} )}
placeholder={`${t( placeholder={`${t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.addValue' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.addValue'
)}`} )}`}
disableCloseOnSelect disableCloseOnSelect
disableClearable={false} disableClearable={false}
@ -385,7 +385,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
value: option.name, value: option.name,
score: 1, score: 1,
meta: t( meta: t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.seriesName' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.seriesName'
), ),
})) ?? [] })) ?? []
} }
@ -396,10 +396,10 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
score: 2, score: 2,
meta: localQuery.base_query meta: localQuery.base_query
? `${t( ? `${t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.labelFor' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.labelFor'
)} ${localQuery.base_query}` )} ${localQuery.base_query}`
: t( : t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.label' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.label'
), ),
}) })
) ?? [] ) ?? []
@ -443,7 +443,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
<div className={`${classes.flex} ${classes.legend}`}> <div className={`${classes.flex} ${classes.legend}`}>
<InputField <InputField
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.legend' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.legend'
)} )}
data-cy="queryLegend" data-cy="queryLegend"
fullWidth fullWidth
@ -453,7 +453,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
/> />
<InfoTooltip <InfoTooltip
value={t( value={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.legendInfo' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.legendInfo'
)} )}
className={classes.infoIcon} className={classes.infoIcon}
/> />

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ChaosAnnotationsEditor/QueryEditor/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ChaosAnnotationsEditor/QueryEditor/styles.ts
View File

16
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ChaosAnnotationsEditor/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ChaosAnnotationsEditor/index.tsx
View File

@ -15,7 +15,7 @@ import {
import { import {
DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_LEGEND, DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_LEGEND,
DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_RESOLUTION, DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_RESOLUTION,
} from '../../../../pages/ApplicationDashboard/constants'; } from '../../../../pages/MonitoringDashboard/constants';
import QueryEditor from './QueryEditor'; import QueryEditor from './QueryEditor';
import useStyles from './styles'; import useStyles from './styles';
@ -133,10 +133,10 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
> >
{success {success
? t( ? t(
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.updateSuccess' 'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.updateSuccess'
) )
: t( : t(
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.updateError' 'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.updateError'
)} )}
</Alert> </Alert>
</Snackbar> </Snackbar>
@ -157,7 +157,7 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
<div className={classes.flexContainer}> <div className={classes.flexContainer}>
<Typography className={classes.drawerHeading} align="left"> <Typography className={classes.drawerHeading} align="left">
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.heading' 'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.heading'
)} )}
</Typography> </Typography>
<ButtonOutlined <ButtonOutlined
@ -172,7 +172,7 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
index={0} index={0}
promQuery={{ promQuery={{
queryid: t( queryid: t(
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.eventQuery' 'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.eventQuery'
), ),
prom_query_name: chaosEventQueryTemplate, prom_query_name: chaosEventQueryTemplate,
legend: DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_LEGEND, legend: DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_LEGEND,
@ -195,7 +195,7 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
index={1} index={1}
promQuery={{ promQuery={{
queryid: t( queryid: t(
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.verdictQuery' 'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.verdictQuery'
), ),
prom_query_name: chaosVerdictQueryTemplate, prom_query_name: chaosVerdictQueryTemplate,
legend: DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_LEGEND, legend: DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_LEGEND,
@ -222,7 +222,7 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
> >
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.cancel' 'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.cancel'
)} )}
</Typography> </Typography>
</TextButton> </TextButton>
@ -246,7 +246,7 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
className={`${classes.buttonText} ${classes.confirmButtonText}`} className={`${classes.buttonText} ${classes.confirmButtonText}`}
> >
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.saveChanges' 'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.saveChanges'
)} )}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ChaosAnnotationsEditor/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ChaosAnnotationsEditor/styles.ts
View File

2
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ChaosTable/TableData.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ChaosTable/TableData.tsx
View File

@ -8,7 +8,7 @@ import {
CHAOS_EXPERIMENT_VERDICT_FAIL, CHAOS_EXPERIMENT_VERDICT_FAIL,
CHAOS_EXPERIMENT_VERDICT_FAILED_TO_INJECT, CHAOS_EXPERIMENT_VERDICT_FAILED_TO_INJECT,
CHAOS_EXPERIMENT_VERDICT_PASS, CHAOS_EXPERIMENT_VERDICT_PASS,
} from '../../../../pages/ApplicationDashboard/constants'; } from '../../../../pages/MonitoringDashboard/constants';
import useStyles from './styles'; import useStyles from './styles';
interface TableDataProps { interface TableDataProps {

10
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ChaosTable/TableHeader.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ChaosTable/TableHeader.tsx
View File

@ -36,21 +36,21 @@ const TableHeader: React.FC<TableHeaderProps> = ({
<StyledTableCell className={classes.headSpacing}> <StyledTableCell className={classes.headSpacing}>
<div className={classes.nameHead}> <div className={classes.nameHead}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead1' 'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead1'
)} )}
</div> </div>
</StyledTableCell> </StyledTableCell>
<StyledTableCell className={classes.headSpacing}> <StyledTableCell className={classes.headSpacing}>
<div className={classes.nameHead}> <div className={classes.nameHead}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead2' 'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead2'
)} )}
</div> </div>
</StyledTableCell> </StyledTableCell>
<StyledTableCell className={classes.headSpacing}> <StyledTableCell className={classes.headSpacing}>
<div className={classes.nameHead}> <div className={classes.nameHead}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead3' 'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead3'
)} )}
</div> </div>
</StyledTableCell> </StyledTableCell>
@ -58,12 +58,12 @@ const TableHeader: React.FC<TableHeaderProps> = ({
<div className={classes.nameHead}> <div className={classes.nameHead}>
<div className={classes.verdictText}> <div className={classes.verdictText}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead4.title' 'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead4.title'
)} )}
</div> </div>
<InfoTooltip <InfoTooltip
value={t( value={t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead4.infoText' 'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead4.infoText'
)} )}
/> />
</div> </div>

20
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ChaosTable/TableToolbar.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ChaosTable/TableToolbar.tsx
View File

@ -69,7 +69,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
<Search <Search
id="input-with-icon-textfield" id="input-with-icon-textfield"
placeholder={t( placeholder={t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.search' 'monitoringDashboard.monitoringDashboardPage.chaosTable.search'
)} )}
value={searchToken} value={searchToken}
onChange={handleSearch} onChange={handleSearch}
@ -82,12 +82,12 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
<FormControl variant="outlined" className={classes.formControl}> <FormControl variant="outlined" className={classes.formControl}>
<InputLabel className={classes.selectText}> <InputLabel className={classes.selectText}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead2' 'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead2'
)} )}
</InputLabel> </InputLabel>
<Select <Select
label={t( label={t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead2' 'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead2'
)} )}
value={workflow} value={workflow}
onChange={handleWorkflowChange} onChange={handleWorkflowChange}
@ -108,7 +108,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
}} }}
> >
<MenuItem value="All" className={classes.menuListItem}> <MenuItem value="All" className={classes.menuListItem}>
{t('analyticsDashboard.monitoringDashboardPage.chaosTable.all')} {t('monitoringDashboard.monitoringDashboardPage.chaosTable.all')}
</MenuItem> </MenuItem>
{workflows.map((availableWorkflow: string) => ( {workflows.map((availableWorkflow: string) => (
<MenuItem <MenuItem
@ -125,12 +125,12 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
<FormControl variant="outlined" className={classes.formControl}> <FormControl variant="outlined" className={classes.formControl}>
<InputLabel className={classes.selectText}> <InputLabel className={classes.selectText}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead3' 'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead3'
)} )}
</InputLabel> </InputLabel>
<Select <Select
label={t( label={t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead3' 'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead3'
)} )}
value={context} value={context}
onChange={handleContextChange} onChange={handleContextChange}
@ -151,7 +151,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
}} }}
> >
<MenuItem value="All" className={classes.menuListItem}> <MenuItem value="All" className={classes.menuListItem}>
{t('analyticsDashboard.monitoringDashboardPage.chaosTable.all')} {t('monitoringDashboard.monitoringDashboardPage.chaosTable.all')}
</MenuItem> </MenuItem>
{contexts.map((availableContext: string) => ( {contexts.map((availableContext: string) => (
<MenuItem <MenuItem
@ -171,12 +171,12 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
> >
<InputLabel className={classes.selectText}> <InputLabel className={classes.selectText}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead4.title' 'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead4.title'
)} )}
</InputLabel> </InputLabel>
<Select <Select
label={t( label={t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead4.title' 'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead4.title'
)} )}
value={verdict} value={verdict}
onChange={handleVerdictChange} onChange={handleVerdictChange}
@ -197,7 +197,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
}} }}
> >
<MenuItem value="All" className={classes.menuListItem}> <MenuItem value="All" className={classes.menuListItem}>
{t('analyticsDashboard.monitoringDashboardPage.chaosTable.all')} {t('monitoringDashboard.monitoringDashboardPage.chaosTable.all')}
</MenuItem> </MenuItem>
{verdicts.map((availableVerdict: string) => ( {verdicts.map((availableVerdict: string) => (
<MenuItem <MenuItem

4
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ChaosTable/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ChaosTable/index.tsx
View File

@ -235,7 +235,7 @@ const ChaosTable: React.FC<ChaosTableProps> = ({
<Loader /> <Loader />
<Typography align="center"> <Typography align="center">
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.loading' 'monitoringDashboard.monitoringDashboardPage.chaosTable.loading'
)} )}
</Typography> </Typography>
</div> </div>
@ -255,7 +255,7 @@ const ChaosTable: React.FC<ChaosTableProps> = ({
className={classes.noRecordsText} className={classes.noRecordsText}
> >
{t( {t(
'analyticsDashboard.monitoringDashboardPage.chaosTable.noRecords' 'monitoringDashboard.monitoringDashboardPage.chaosTable.noRecords'
)} )}
</Typography> </Typography>
</div> </div>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ChaosTable/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ChaosTable/styles.ts
View File

10
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/DashboardCloneModal/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/DashboardCloneModal/index.tsx
View File

@ -20,7 +20,7 @@ import {
import { import {
DEFAULT_REFRESH_RATE, DEFAULT_REFRESH_RATE,
DEFAULT_RELATIVE_TIME_RANGE, DEFAULT_RELATIVE_TIME_RANGE,
} from '../../../../pages/ApplicationDashboard/constants'; } from '../../../../pages/MonitoringDashboard/constants';
import useActions from '../../../../redux/actions'; import useActions from '../../../../redux/actions';
import * as DashboardActions from '../../../../redux/actions/dashboards'; import * as DashboardActions from '../../../../redux/actions/dashboards';
import { getProjectID } from '../../../../utils/getSearchParams'; import { getProjectID } from '../../../../utils/getSearchParams';
@ -155,7 +155,7 @@ const DashboardCloneModal: React.FC<DashboardCloneModalProps> = ({
<div className={classes.modal}> <div className={classes.modal}>
<Typography className={classes.modalHeading} align="left"> <Typography className={classes.modalHeading} align="left">
{t( {t(
'analyticsDashboard.monitoringDashboardPage.dashboardCloneModal.heading' 'monitoringDashboard.monitoringDashboardPage.dashboardCloneModal.heading'
)} )}
</Typography> </Typography>
<InputField <InputField
@ -175,7 +175,7 @@ const DashboardCloneModal: React.FC<DashboardCloneModalProps> = ({
> >
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.dashboardCloneModal.cancel' 'monitoringDashboard.monitoringDashboardPage.dashboardCloneModal.cancel'
)} )}
</Typography> </Typography>
</TextButton> </TextButton>
@ -184,7 +184,7 @@ const DashboardCloneModal: React.FC<DashboardCloneModalProps> = ({
className={`${classes.buttonText} ${classes.okButtonText}`} className={`${classes.buttonText} ${classes.okButtonText}`}
> >
{t( {t(
'analyticsDashboard.monitoringDashboardPage.dashboardCloneModal.ok' 'monitoringDashboard.monitoringDashboardPage.dashboardCloneModal.ok'
)} )}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>
@ -198,7 +198,7 @@ const DashboardCloneModal: React.FC<DashboardCloneModalProps> = ({
> >
<Alert onClose={() => setIsAlertOpen(false)} severity="error"> <Alert onClose={() => setIsAlertOpen(false)} severity="error">
{t( {t(
'analyticsDashboard.monitoringDashboardPage.dashboardCloneModal.error' 'monitoringDashboard.monitoringDashboardPage.dashboardCloneModal.error'
)} )}
</Alert> </Alert>
</Snackbar> </Snackbar>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/DashboardCloneModal/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/DashboardCloneModal/styles.ts
View File

16
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/DataSourceInactiveModal/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/DataSourceInactiveModal/index.tsx
View File

@ -37,11 +37,11 @@ const DataSourceInactiveModal: React.FC<DataSourceInactiveModalProps> = ({
<div className={classes.modal}> <div className={classes.modal}>
<Typography className={classes.modalHeading} align="left"> <Typography className={classes.modalHeading} align="left">
{`${t( {`${t(
'analyticsDashboard.monitoringDashboardPage.dataSourceIs' 'monitoringDashboard.monitoringDashboardPage.dataSourceIs'
)} ${dataSourceStatus}`} )} ${dataSourceStatus}`}
</Typography> </Typography>
<Typography align="left" className={classes.modalBody}> <Typography align="left" className={classes.modalBody}>
{t('analyticsDashboard.monitoringDashboardPage.dataSourceError')} {t('monitoringDashboard.monitoringDashboardPage.dataSourceError')}
</Typography> </Typography>
<div className={classes.flexButtons}> <div className={classes.flexButtons}>
<ButtonOutlined <ButtonOutlined
@ -51,7 +51,7 @@ const DataSourceInactiveModal: React.FC<DataSourceInactiveModalProps> = ({
activePanelID: '', activePanelID: '',
}); });
history.push({ history.push({
pathname: '/analytics/dashboard/configure', pathname: '/observability/dashboard/configure',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}} }}
@ -63,17 +63,17 @@ const DataSourceInactiveModal: React.FC<DataSourceInactiveModalProps> = ({
/> />
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.reConfigureDashboard' 'monitoringDashboard.monitoringDashboardPage.reConfigureDashboard'
)} )}
</Typography> </Typography>
</ButtonOutlined> </ButtonOutlined>
<Typography align="left" className={classes.modalBodyText}> <Typography align="left" className={classes.modalBodyText}>
{t('analyticsDashboard.monitoringDashboardPage.or')} {t('monitoringDashboard.monitoringDashboardPage.or')}
</Typography> </Typography>
<ButtonOutlined <ButtonOutlined
onClick={() => onClick={() =>
history.push({ history.push({
pathname: '/analytics/datasource/configure', pathname: '/observability/datasource/configure',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}) })
} }
@ -84,7 +84,9 @@ const DataSourceInactiveModal: React.FC<DataSourceInactiveModalProps> = ({
className={classes.buttonIcon} className={classes.buttonIcon}
/> />
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{t('analyticsDashboard.monitoringDashboardPage.updateDataSource')} {t(
'monitoringDashboard.monitoringDashboardPage.updateDataSource'
)}
</Typography> </Typography>
</ButtonOutlined> </ButtonOutlined>
</div> </div>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/DataSourceInactiveModal/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/DataSourceInactiveModal/styles.ts
View File

18
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/InfoDropdown/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/InfoDropdown/index.tsx
View File

@ -69,20 +69,20 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
<div className={classes.root}> <div className={classes.root}>
<div className={classes.header}> <div className={classes.header}>
<Typography className={classes.headerText}> <Typography className={classes.headerText}>
{t('analyticsDashboard.monitoringDashboardPage.infoDropdown.header')} {t('monitoringDashboard.monitoringDashboardPage.infoDropdown.header')}
</Typography> </Typography>
</div> </div>
<div className={classes.body}> <div className={classes.body}>
<div className={classes.infoSectionElement}> <div className={classes.infoSectionElement}>
<Typography className={classes.sectionHeader}> <Typography className={classes.sectionHeader}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.infoDropdown.subHeading1' 'monitoringDashboard.monitoringDashboardPage.infoDropdown.subHeading1'
)} )}
</Typography> </Typography>
<div className={classes.dashboardMetaDataItem}> <div className={classes.dashboardMetaDataItem}>
<Typography className={classes.infoKey}> <Typography className={classes.infoKey}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.infoDropdown.metaData1' 'monitoringDashboard.monitoringDashboardPage.infoDropdown.metaData1'
)} )}
</Typography> </Typography>
<Typography className={classes.infoValue}> <Typography className={classes.infoValue}>
@ -92,7 +92,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
<div className={classes.dashboardMetaDataItem}> <div className={classes.dashboardMetaDataItem}>
<Typography className={classes.infoKey}> <Typography className={classes.infoKey}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.infoDropdown.metaData2' 'monitoringDashboard.monitoringDashboardPage.infoDropdown.metaData2'
)} )}
</Typography> </Typography>
<div className={classes.iconWithTextDiv}> <div className={classes.iconWithTextDiv}>
@ -113,7 +113,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
<div className={classes.dashboardMetaDataItem}> <div className={classes.dashboardMetaDataItem}>
<Typography className={classes.infoKey}> <Typography className={classes.infoKey}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.infoDropdown.metaData3' 'monitoringDashboard.monitoringDashboardPage.infoDropdown.metaData3'
)} )}
</Typography> </Typography>
<TextButton <TextButton
@ -133,7 +133,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
<div className={classes.dashboardMetaDataItem}> <div className={classes.dashboardMetaDataItem}>
<Typography className={classes.infoKey}> <Typography className={classes.infoKey}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.infoDropdown.metaData4' 'monitoringDashboard.monitoringDashboardPage.infoDropdown.metaData4'
)} )}
</Typography> </Typography>
<Typography className={classes.infoValue}> <Typography className={classes.infoValue}>
@ -144,7 +144,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
<div className={classes.infoSectionElement}> <div className={classes.infoSectionElement}>
<Typography className={classes.sectionHeader}> <Typography className={classes.sectionHeader}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.infoDropdown.subHeading2' 'monitoringDashboard.monitoringDashboardPage.infoDropdown.subHeading2'
)} )}
</Typography> </Typography>
<FormGroupApplicationsGrid key="application-group"> <FormGroupApplicationsGrid key="application-group">
@ -154,7 +154,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
<div className={classes.namespaceBox}> <div className={classes.namespaceBox}>
<Typography className={classes.infoKey}> <Typography className={classes.infoKey}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.infoDropdown.infoKeyNamespace' 'monitoringDashboard.monitoringDashboardPage.infoDropdown.infoKeyNamespace'
)} )}
</Typography> </Typography>
<Typography className={classes.infoValue}> <Typography className={classes.infoValue}>
@ -192,7 +192,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
<div className={classes.infoSectionElement}> <div className={classes.infoSectionElement}>
<Typography className={classes.sectionHeader}> <Typography className={classes.sectionHeader}>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.infoDropdown.subHeading3' 'monitoringDashboard.monitoringDashboardPage.infoDropdown.subHeading3'
)} )}
</Typography> </Typography>
<FormGroupGrid key="metric-group"> <FormGroupGrid key="metric-group">

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/InfoDropdown/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/InfoDropdown/styles.ts
View File

8
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/PanelAndGroup/Panel.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/PanelAndGroup/Panel.tsx
View File

@ -54,7 +54,7 @@ const DashboardPanel: React.FC<GraphPanelProps> = ({
<div className={classes.wrapperIcons}> <div className={classes.wrapperIcons}>
{viewEventMetric ? ( {viewEventMetric ? (
<ToolTip <ToolTip
title={`${t('analyticsDashboard.toolTip.hideChaosMetric')}`} title={`${t('monitoringDashboard.toolTip.hideChaosMetric')}`}
> >
<IconButton <IconButton
className={classes.panelIconButton} className={classes.panelIconButton}
@ -67,7 +67,7 @@ const DashboardPanel: React.FC<GraphPanelProps> = ({
</ToolTip> </ToolTip>
) : ( ) : (
<ToolTip <ToolTip
title={`${t('analyticsDashboard.toolTip.viewChaosMetric')}`} title={`${t('monitoringDashboard.toolTip.viewChaosMetric')}`}
> >
<IconButton <IconButton
className={classes.panelIconButton} className={classes.panelIconButton}
@ -87,14 +87,14 @@ const DashboardPanel: React.FC<GraphPanelProps> = ({
activePanelID: panel_id, activePanelID: panel_id,
}); });
history.push({ history.push({
pathname: '/analytics/dashboard/configure', pathname: '/observability/dashboard/configure',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}} }}
> >
<Edit className={classes.panelIcon} /> <Edit className={classes.panelIcon} />
</IconButton> </IconButton>
<ToolTip title={`${t('analyticsDashboard.toolTip.popout')}`}> <ToolTip title={`${t('monitoringDashboard.toolTip.popout')}`}>
<IconButton <IconButton
className={classes.panelIconButton} className={classes.panelIconButton}
onClick={() => { onClick={() => {

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/PanelAndGroup/PanelGroup.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/PanelAndGroup/PanelGroup.tsx
View File

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/PanelAndGroup/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/PanelAndGroup/styles.ts
View File

12
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ToolBar/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ToolBar/index.tsx
View File

@ -17,8 +17,8 @@ import { RangeType } from '../../../../models/dashboardsData';
import { import {
INVALID_DATE, INVALID_DATE,
INVALID_RELATIVE_TIME_RANGE, INVALID_RELATIVE_TIME_RANGE,
} from '../../../../pages/ApplicationDashboard/constants'; } from '../../../../pages/MonitoringDashboard/constants';
import refreshData from '../../../../pages/ApplicationDashboard/refreshData'; import refreshData from '../../../../pages/MonitoringDashboard/refreshData';
import useStyles, { useOutlinedInputStyles } from './styles'; import useStyles, { useOutlinedInputStyles } from './styles';
interface RefreshObjectType { interface RefreshObjectType {
@ -116,7 +116,7 @@ const ToolBar: React.FC<ToolBarProps> = ({
return ( return (
<div className={classes.headerDiv}> <div className={classes.headerDiv}>
<Typography className={classes.headerInfoText}> <Typography className={classes.headerInfoText}>
{t('analyticsDashboard.monitoringDashboardPage.headerInfoText')} {t('monitoringDashboard.monitoringDashboardPage.headerInfoText')}
</Typography> </Typography>
<div className={classes.controls}> <div className={classes.controls}>
<div ref={dateRangeSelectorRef}> <div ref={dateRangeSelectorRef}>
@ -135,13 +135,13 @@ const ToolBar: React.FC<ToolBarProps> = ({
{range.startDate === INVALID_DATE && {range.startDate === INVALID_DATE &&
range.endDate === INVALID_DATE range.endDate === INVALID_DATE
? `${t( ? `${t(
'analyticsDashboard.monitoringDashboardPage.rangeSelector.last30Mins' 'monitoringDashboard.monitoringDashboardPage.rangeSelector.last30Mins'
)}` )}`
: `${moment : `${moment
.unix(Number(range.startDate)) .unix(Number(range.startDate))
.format('YYYY-MM-DD HH:mm:SS')} .format('YYYY-MM-DD HH:mm:SS')}
${t( ${t(
'analyticsDashboard.monitoringDashboardPage.rangeSelector.to' 'monitoringDashboard.monitoringDashboardPage.rangeSelector.to'
)} )}
${moment ${moment
.unix(Number(range.endDate)) .unix(Number(range.endDate))
@ -186,7 +186,7 @@ const ToolBar: React.FC<ToolBarProps> = ({
renderValue={() => ( renderValue={() => (
<div> <div>
{t( {t(
'analyticsDashboard.monitoringDashboardPage.refresh.heading' 'monitoringDashboard.monitoringDashboardPage.refresh.heading'
)} )}
</div> </div>
)} )}

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/ToolBar/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/ToolBar/styles.ts
View File

14
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/TopNavButtons/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/TopNavButtons/index.tsx
View File

@ -166,7 +166,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
className={classes.icon} className={classes.icon}
/> />
<Typography className={classes.infoText}> <Typography className={classes.infoText}>
{t('analyticsDashboard.monitoringDashboardPage.infoButtonText')} {t('monitoringDashboard.monitoringDashboardPage.infoButtonText')}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>
) : ( ) : (
@ -183,7 +183,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
className={classes.icon} className={classes.icon}
/> />
<Typography className={classes.infoText}> <Typography className={classes.infoText}>
{t('analyticsDashboard.monitoringDashboardPage.infoButtonText')} {t('monitoringDashboard.monitoringDashboardPage.infoButtonText')}
</Typography> </Typography>
</ButtonOutlined> </ButtonOutlined>
)} )}
@ -253,7 +253,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
activePanelID: '', activePanelID: '',
}); });
history.push({ history.push({
pathname: '/analytics/dashboard/configure', pathname: '/observability/dashboard/configure',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}} }}
@ -269,7 +269,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
data-cy="optionsConfigureDashboard" data-cy="optionsConfigureDashboard"
className={classes.btnText} className={classes.btnText}
> >
{t('analyticsDashboard.applicationDashboardTable.configure')} {t('monitoringDashboard.monitoringDashboardTable.configure')}
</Typography> </Typography>
</div> </div>
</MenuItem> </MenuItem>
@ -291,7 +291,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
data-cy="optionsCopyDashboard" data-cy="optionsCopyDashboard"
className={classes.btnText} className={classes.btnText}
> >
{t('analyticsDashboard.monitoringDashboardPage.options.clone')} {t('monitoringDashboard.monitoringDashboardPage.options.clone')}
</Typography> </Typography>
</div> </div>
</MenuItem> </MenuItem>
@ -311,7 +311,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
data-cy="optionsDownloadDashboard" data-cy="optionsDownloadDashboard"
className={classes.btnText} className={classes.btnText}
> >
{t('analyticsDashboard.monitoringDashboardPage.options.json')} {t('monitoringDashboard.monitoringDashboardPage.options.json')}
</Typography> </Typography>
</div> </div>
</MenuItem> </MenuItem>
@ -332,7 +332,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
data-cy="optionsExportDashboard" data-cy="optionsExportDashboard"
className={classes.btnText} className={classes.btnText}
> >
{t('analyticsDashboard.monitoringDashboardPage.options.pdf')} {t('monitoringDashboard.monitoringDashboardPage.options.pdf')}
</Typography> </Typography>
</div> </div>
</MenuItem> </MenuItem>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboard/TopNavButtons/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboard/TopNavButtons/styles.ts
View File

48
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Stepper/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Stepper/index.tsx
View File

@ -48,10 +48,10 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
const classes = useStyles(); const classes = useStyles();
const { t } = useTranslation(); const { t } = useTranslation();
const stepsArray: string[] = [ const stepsArray: string[] = [
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step1')}`, `${t('monitoringDashboard.monitoringDashboards.stepper.steps.step1')}`,
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step2')}`, `${t('monitoringDashboard.monitoringDashboards.stepper.steps.step2')}`,
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step3')}`, `${t('monitoringDashboard.monitoringDashboards.stepper.steps.step3')}`,
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step4')}`, `${t('monitoringDashboard.monitoringDashboards.stepper.steps.step4')}`,
]; ];
const childRef = useRef<ChildRef>(); const childRef = useRef<ChildRef>();
const [loading, setLoading] = React.useState<boolean>(false); const [loading, setLoading] = React.useState<boolean>(false);
@ -102,16 +102,16 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
(step: string) => (step: string) =>
step !== step !==
`${t( `${t(
'analyticsDashboard.applicationDashboards.stepper.steps.step1' 'monitoringDashboard.monitoringDashboards.stepper.steps.step1'
)}` && )}` &&
step !== step !==
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step3')}` `${t('monitoringDashboard.monitoringDashboards.stepper.steps.step3')}`
); );
} else if (dashboardVars.dashboardTypeID === 'custom') { } else if (dashboardVars.dashboardTypeID === 'custom') {
steps = steps.filter( steps = steps.filter(
(step: string) => (step: string) =>
step !== step !==
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step3')}` `${t('monitoringDashboard.monitoringDashboards.stepper.steps.step3')}`
); );
} }
// Checks if the button is in loading state or not // Checks if the button is in loading state or not
@ -253,7 +253,7 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
> >
<Typography> <Typography>
{t( {t(
'analyticsDashboard.applicationDashboards.stepper.buttons.back' 'monitoringDashboard.monitoringDashboards.stepper.buttons.back'
)} )}
</Typography> </Typography>
</ButtonOutlined> </ButtonOutlined>
@ -269,14 +269,14 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{!loading {!loading
? `${t( ? `${t(
'analyticsDashboard.applicationDashboards.stepper.buttons.saveChanges' 'monitoringDashboard.monitoringDashboards.stepper.buttons.saveChanges'
)}` )}`
: configure : configure
? `${t( ? `${t(
'analyticsDashboard.applicationDashboards.stepper.buttons.status.updating' 'monitoringDashboard.monitoringDashboards.stepper.buttons.status.updating'
)}` )}`
: `${t( : `${t(
'analyticsDashboard.applicationDashboards.stepper.buttons.status.creating' 'monitoringDashboard.monitoringDashboards.stepper.buttons.status.creating'
)}`} )}`}
</Typography> </Typography>
{loading && <Loader size={20} />} {loading && <Loader size={20} />}
@ -292,7 +292,7 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
> >
<Typography> <Typography>
{t( {t(
'analyticsDashboard.applicationDashboards.stepper.buttons.back' 'monitoringDashboard.monitoringDashboards.stepper.buttons.back'
)} )}
</Typography> </Typography>
</ButtonOutlined> </ButtonOutlined>
@ -300,7 +300,7 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
<ButtonFilled onClick={() => handleNext()} disabled={disabledNext}> <ButtonFilled onClick={() => handleNext()} disabled={disabledNext}>
<Typography> <Typography>
{t( {t(
'analyticsDashboard.applicationDashboards.stepper.buttons.next' 'monitoringDashboard.monitoringDashboards.stepper.buttons.next'
)} )}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>
@ -346,15 +346,15 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
case !configure ? 0 : -1: case !configure ? 0 : -1:
if (getProjectRole() === 'Viewer') { if (getProjectRole() === 'Viewer') {
return t( return t(
'analyticsDashboard.applicationDashboards.stepper.errors.step1.messageViewer' 'monitoringDashboard.monitoringDashboards.stepper.errors.step1.messageViewer'
); );
} }
return t( return t(
'analyticsDashboard.applicationDashboards.stepper.errors.step1.message' 'monitoringDashboard.monitoringDashboards.stepper.errors.step1.message'
); );
case !configure ? 1 : 0: case !configure ? 1 : 0:
return t( return t(
'analyticsDashboard.applicationDashboards.stepper.errors.step2.messageViewer' 'monitoringDashboard.monitoringDashboards.stepper.errors.step2.messageViewer'
); );
case !configure case !configure
? dashboardVars.dashboardTypeID !== 'custom' ? dashboardVars.dashboardTypeID !== 'custom'
@ -362,7 +362,7 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
: -1 : -1
: -1: : -1:
return t( return t(
'analyticsDashboard.applicationDashboards.stepper.errors.step3.message' 'monitoringDashboard.monitoringDashboards.stepper.errors.step3.message'
); );
case !configure case !configure
? dashboardVars.dashboardTypeID !== 'custom' ? dashboardVars.dashboardTypeID !== 'custom'
@ -371,10 +371,10 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
: 1: : 1:
return configure return configure
? t( ? t(
'analyticsDashboard.applicationDashboards.stepper.errors.step4.messageConfigure' 'monitoringDashboard.monitoringDashboards.stepper.errors.step4.messageConfigure'
) )
: t( : t(
'analyticsDashboard.applicationDashboards.stepper.errors.step4.messageCreate' 'monitoringDashboard.monitoringDashboards.stepper.errors.step4.messageCreate'
); );
default: default:
return ''; return '';
@ -399,9 +399,9 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
<Row justifyContent="space-between"> <Row justifyContent="space-between">
<Typography className={classes.header}> <Typography className={classes.header}>
{!configure {!configure
? t('analyticsDashboard.applicationDashboards.createHeader') ? t('monitoringDashboard.monitoringDashboards.createHeader')
: `${t( : `${t(
'analyticsDashboard.applicationDashboards.configureHeader' 'monitoringDashboard.monitoringDashboards.configureHeader'
)} / ${dashboardVars.name}`} )} / ${dashboardVars.name}`}
</Typography> </Typography>
<ControlButton /> <ControlButton />
@ -432,14 +432,14 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
<Typography> <Typography>
{!loading {!loading
? `${t( ? `${t(
'analyticsDashboard.applicationDashboards.stepper.buttons.saveChanges' 'monitoringDashboard.monitoringDashboards.stepper.buttons.saveChanges'
)}` )}`
: configure : configure
? `${t( ? `${t(
'analyticsDashboard.applicationDashboards.stepper.buttons.status.updating' 'monitoringDashboard.monitoringDashboards.stepper.buttons.status.updating'
)}` )}`
: `${t( : `${t(
'analyticsDashboard.applicationDashboards.stepper.buttons.status.creating' 'monitoringDashboard.monitoringDashboards.stepper.buttons.status.creating'
)}`} )}`}
</Typography> </Typography>
</> </>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Stepper/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Stepper/styles.ts
View File

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ChooseADashboardType/Cards/CardContainer.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ChooseADashboardType/Cards/CardContainer.tsx
View File

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ChooseADashboardType/Cards/CardContent.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ChooseADashboardType/Cards/CardContent.tsx
View File

2
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ChooseADashboardType/Cards/DashBoardCards.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ChooseADashboardType/Cards/DashBoardCards.tsx
View File

@ -79,7 +79,7 @@ const DashboardCards: React.FC<DashboardCardsProps> = ({
<div className={classes.modal}> <div className={classes.modal}>
<Typography className={classes.modalHeading} align="left"> <Typography className={classes.modalHeading} align="left">
{t( {t(
'analyticsDashboard.applicationDashboards.chooseADashboardType.uploadModal.heading' 'monitoringDashboard.monitoringDashboards.chooseADashboardType.uploadModal.heading'
)} )}
</Typography> </Typography>
<UploadJSON <UploadJSON

14
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ChooseADashboardType/Cards/UploadDashboard/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ChooseADashboardType/Cards/UploadDashboard/index.tsx
View File

@ -2,7 +2,7 @@
import { Button, Paper, Typography } from '@material-ui/core'; import { Button, Paper, Typography } from '@material-ui/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { ApplicationDashboard } from '../../../../../../../models/redux/dashboards'; import { MonitoringDashboard } from '../../../../../../../models/redux/dashboards';
import useActions from '../../../../../../../redux/actions'; import useActions from '../../../../../../../redux/actions';
import * as DashboardActions from '../../../../../../../redux/actions/dashboards'; import * as DashboardActions from '../../../../../../../redux/actions/dashboards';
import useStyles from './styles'; import useStyles from './styles';
@ -31,7 +31,7 @@ const UploadJSON: React.FC<UploadJSONProps> = ({
setUploadedJSON(readFile); setUploadedJSON(readFile);
setFileName(file.name); setFileName(file.name);
try { try {
const parsedDashboard: ApplicationDashboard = JSON.parse(readFile); const parsedDashboard: MonitoringDashboard = JSON.parse(readFile);
dashboard.selectDashboard({ dashboard.selectDashboard({
selectedDashboardID: 'upload', selectedDashboardID: 'upload',
dashboardJSON: parsedDashboard, dashboardJSON: parsedDashboard,
@ -62,7 +62,7 @@ const UploadJSON: React.FC<UploadJSONProps> = ({
readFile.text().then((response) => { readFile.text().then((response) => {
setUploadedJSON(response); setUploadedJSON(response);
try { try {
const parsedDashboard: ApplicationDashboard = JSON.parse(response); const parsedDashboard: MonitoringDashboard = JSON.parse(response);
dashboard.selectDashboard({ dashboard.selectDashboard({
selectedDashboardID: 'upload', selectedDashboardID: 'upload',
dashboardJSON: parsedDashboard, dashboardJSON: parsedDashboard,
@ -105,12 +105,12 @@ const UploadJSON: React.FC<UploadJSONProps> = ({
/> />
<Typography variant="h6"> <Typography variant="h6">
{t( {t(
'analyticsDashboard.applicationDashboards.chooseADashboardType.uploadModal.option1' 'monitoringDashboard.monitoringDashboards.chooseADashboardType.uploadModal.option1'
)} )}
</Typography> </Typography>
<Typography className={classes.orText}> <Typography className={classes.orText}>
{t( {t(
'analyticsDashboard.applicationDashboards.chooseADashboardType.uploadModal.or' 'monitoringDashboard.monitoringDashboards.chooseADashboardType.uploadModal.or'
)} )}
</Typography> </Typography>
<input <input
@ -130,7 +130,7 @@ const UploadJSON: React.FC<UploadJSONProps> = ({
component="span" component="span"
> >
{t( {t(
'analyticsDashboard.applicationDashboards.chooseADashboardType.uploadModal.option2' 'monitoringDashboard.monitoringDashboards.chooseADashboardType.uploadModal.option2'
)} )}
</Button> </Button>
</label> </label>
@ -145,7 +145,7 @@ const UploadJSON: React.FC<UploadJSONProps> = ({
/> />
<Typography className={classes.uploadSuccessText}> <Typography className={classes.uploadSuccessText}>
{t( {t(
'analyticsDashboard.applicationDashboards.chooseADashboardType.uploadModal.successMessage' 'monitoringDashboard.monitoringDashboards.chooseADashboardType.uploadModal.successMessage'
)}{' '} )}{' '}
{fileName} {fileName}
</Typography> </Typography>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ChooseADashboardType/Cards/UploadDashboard/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ChooseADashboardType/Cards/UploadDashboard/styles.ts
View File

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ChooseADashboardType/Cards/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ChooseADashboardType/Cards/index.tsx
View File

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ChooseADashboardType/Cards/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ChooseADashboardType/Cards/styles.ts
View File

6
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ChooseADashboardType/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ChooseADashboardType/index.tsx
View File

@ -15,7 +15,7 @@ import {
PortalDashboardsVars, PortalDashboardsVars,
} from '../../../../../models/graphql/dashboardsDetails'; } from '../../../../../models/graphql/dashboardsDetails';
import { HubStatus } from '../../../../../models/redux/myhub'; import { HubStatus } from '../../../../../models/redux/myhub';
import { DEFAULT_HUB_NAME } from '../../../../../pages/ApplicationDashboard/constants'; import { DEFAULT_HUB_NAME } from '../../../../../pages/MonitoringDashboard/constants';
import useActions from '../../../../../redux/actions'; import useActions from '../../../../../redux/actions';
import * as AlertActions from '../../../../../redux/actions/alert'; import * as AlertActions from '../../../../../redux/actions/alert';
import { import {
@ -139,12 +139,12 @@ const ChooseADashboardType = forwardRef(
<div> <div>
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t( {t(
'analyticsDashboard.applicationDashboards.chooseADashboardType.header' 'monitoringDashboard.monitoringDashboards.chooseADashboardType.header'
)} )}
</Typography> </Typography>
<Typography className={classes.description}> <Typography className={classes.description}>
{t( {t(
'analyticsDashboard.applicationDashboards.chooseADashboardType.description' 'monitoringDashboard.monitoringDashboards.chooseADashboardType.description'
)} )}
</Typography> </Typography>
<div className={classes.cards}> <div className={classes.cards}>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ChooseADashboardType/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ChooseADashboardType/styles.ts
View File

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ConfigureDashboardMetadata/Form/data.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ConfigureDashboardMetadata/Form/data.ts
View File

40
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ConfigureDashboardMetadata/Form/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ConfigureDashboardMetadata/Form/index.tsx
View File

@ -32,7 +32,7 @@ import { ListDataSourceResponse } from '../../../../../../models/graphql/dataSou
import { import {
DEFAULT_CHAOS_EVENT_PROMETHEUS_QUERY, DEFAULT_CHAOS_EVENT_PROMETHEUS_QUERY,
DEFAULT_CHAOS_VERDICT_PROMETHEUS_QUERY, DEFAULT_CHAOS_VERDICT_PROMETHEUS_QUERY,
} from '../../../../../../pages/ApplicationDashboard/constants'; } from '../../../../../../pages/MonitoringDashboard/constants';
import useActions from '../../../../../../redux/actions'; import useActions from '../../../../../../redux/actions';
import * as DashboardActions from '../../../../../../redux/actions/dashboards'; import * as DashboardActions from '../../../../../../redux/actions/dashboards';
import { RootState } from '../../../../../../redux/reducers'; import { RootState } from '../../../../../../redux/reducers';
@ -433,7 +433,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
<div className={classes.flexDisplay}> <div className={classes.flexDisplay}>
<InputField <InputField
label={t( label={t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.name' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.name'
)} )}
data-cy="inputDashboardName" data-cy="inputDashboardName"
width="20rem" width="20rem"
@ -451,7 +451,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
> >
<InputLabel className={classes.selectTextLabel}> <InputLabel className={classes.selectTextLabel}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.agent' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.agent'
)} )}
</InputLabel> </InputLabel>
<Select <Select
@ -464,7 +464,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
setUpdate(true); setUpdate(true);
}} }}
label={t( label={t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.agent' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.agent'
)} )}
className={classes.selectText} className={classes.selectText}
disabled={activeAgents.length === 0 || loading} disabled={activeAgents.length === 0 || loading}
@ -478,7 +478,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
{!activeAgents.length && !loading ? ( {!activeAgents.length && !loading ? (
<Typography className={classes.formErrorText}> <Typography className={classes.formErrorText}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.noActiveAgent' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.noActiveAgent'
)} )}
</Typography> </Typography>
) : !(agentList?.getCluster ?? []).filter((cluster) => { ) : !(agentList?.getCluster ?? []).filter((cluster) => {
@ -491,19 +491,19 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
}).length && agentList?.getCluster.length ? ( }).length && agentList?.getCluster.length ? (
<Typography className={classes.formErrorText}> <Typography className={classes.formErrorText}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.agentInactive' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.agentInactive'
)} )}
</Typography> </Typography>
) : loading ? ( ) : loading ? (
<Typography className={classes.formHelperText}> <Typography className={classes.formHelperText}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.fetchingAgents' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.fetchingAgents'
)} )}
</Typography> </Typography>
) : error ? ( ) : error ? (
<Typography className={classes.formErrorText}> <Typography className={classes.formErrorText}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.errorFetchingAgents' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.errorFetchingAgents'
)} )}
</Typography> </Typography>
) : ( ) : (
@ -520,7 +520,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
> >
<InputLabel className={classes.selectTextLabel}> <InputLabel className={classes.selectTextLabel}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.dataSource' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.dataSource'
)} )}
</InputLabel> </InputLabel>
<Select <Select
@ -534,7 +534,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
setUpdate(true); setUpdate(true);
}} }}
label={t( label={t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.dataSource' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.dataSource'
)} )}
className={classes.selectText} className={classes.selectText}
disabled={activeDataSources.length === 0} disabled={activeDataSources.length === 0}
@ -548,7 +548,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
{!activeDataSources.length ? ( {!activeDataSources.length ? (
<Typography className={classes.formErrorText}> <Typography className={classes.formErrorText}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.noActiveDataSource' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.noActiveDataSource'
)} )}
</Typography> </Typography>
) : !dataSourceList.filter((dataSource) => { ) : !dataSourceList.filter((dataSource) => {
@ -559,7 +559,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
}).length ? ( }).length ? (
<Typography className={classes.formErrorText}> <Typography className={classes.formErrorText}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.dataSourceInactive' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.dataSourceInactive'
)} )}
</Typography> </Typography>
) : ( ) : (
@ -569,7 +569,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
<InputField <InputField
label={t( label={t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.dashboardType' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.dashboardType'
)} )}
data-cy="inputDashboardType" data-cy="inputDashboardType"
width="20rem" width="20rem"
@ -588,7 +588,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
<div> <div>
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.applications' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.applications'
)} )}
</Typography> </Typography>
@ -608,10 +608,10 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
}) ?? [] }) ?? []
} }
label={t( label={t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.selectNamespaces' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.selectNamespaces'
)} )}
placeholder={`${t( placeholder={`${t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.addNamespace' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.addNamespace'
)}`} )}`}
disableCloseOnSelect disableCloseOnSelect
disableClearable={false} disableClearable={false}
@ -628,7 +628,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
> >
<InputLabel className={classes.selectTextLabel}> <InputLabel className={classes.selectTextLabel}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.selectApplicationType' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.selectApplicationType'
)} )}
</InputLabel> </InputLabel>
<Select <Select
@ -641,7 +641,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
); );
}} }}
label={t( label={t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.selectApplicationType' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.selectApplicationType'
)} )}
className={classes.selectText} className={classes.selectText}
> >
@ -711,10 +711,10 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
} }
options={getAvailableApplications()} options={getAvailableApplications()}
label={t( label={t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.selectApplications' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.selectApplications'
)} )}
placeholder={`${t( placeholder={`${t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.addApplication' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.addApplication'
)}`} )}`}
disableCloseOnSelect disableCloseOnSelect
disableClearable={false} disableClearable={false}

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ConfigureDashboardMetadata/Form/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ConfigureDashboardMetadata/Form/styles.ts
View File

4
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ConfigureDashboardMetadata/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ConfigureDashboardMetadata/index.tsx
View File

@ -48,12 +48,12 @@ const ConfigureDashboardMetadata = forwardRef(
<div> <div>
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.header' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.header'
)} )}
</Typography> </Typography>
<Typography className={classes.description}> <Typography className={classes.description}>
{t( {t(
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.description' 'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.description'
)} )}
</Typography> </Typography>
<div className={classes.metadataForm}> <div className={classes.metadataForm}>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/ConfigureDashboardMetadata/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/ConfigureDashboardMetadata/styles.ts
View File

4
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/SelectTheMetrics/Form/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/SelectTheMetrics/Form/index.tsx
View File

@ -94,7 +94,7 @@ const SelectTheMetricsForm: React.FC<SelectTheMetricsFormProps> = ({
selectedDashboard.dashboardJSON.panelGroupMap.map( selectedDashboard.dashboardJSON.panelGroupMap.map(
(panelGroup: PanelGroupMap, index: number) => ( (panelGroup: PanelGroupMap, index: number) => (
<div <div
key={`${panelGroup.groupName}-applicationDashboard-form`} key={`${panelGroup.groupName}-monitoringDashboard-form`}
className={classes.panelGroupMap} className={classes.panelGroupMap}
> >
<Typography <Typography
@ -142,7 +142,7 @@ const SelectTheMetricsForm: React.FC<SelectTheMetricsFormProps> = ({
className={classes.panelGroupName} className={classes.panelGroupName}
> >
{t( {t(
'analyticsDashboard.applicationDashboards.selectTheMetrics.errorMessage' 'monitoringDashboard.monitoringDashboards.selectTheMetrics.errorMessage'
)} )}
</Typography> </Typography>
)} )}

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/SelectTheMetrics/Form/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/SelectTheMetrics/Form/styles.ts
View File

4
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/SelectTheMetrics/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/SelectTheMetrics/index.tsx
View File

@ -38,12 +38,12 @@ const SelectTheMetrics = forwardRef(
<div> <div>
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t( {t(
'analyticsDashboard.applicationDashboards.selectTheMetrics.header' 'monitoringDashboard.monitoringDashboards.selectTheMetrics.header'
)} )}
</Typography> </Typography>
<Typography className={classes.description}> <Typography className={classes.description}>
{t( {t(
'analyticsDashboard.applicationDashboards.selectTheMetrics.description' 'monitoringDashboard.monitoringDashboards.selectTheMetrics.description'
)} )}
</Typography> </Typography>
<div className={classes.metricsForm}> <div className={classes.metricsForm}>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/SelectTheMetrics/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/SelectTheMetrics/styles.ts
View File

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/Graph/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/Graph/index.tsx
View File

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/Graph/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/Graph/styles.ts
View File

52
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/QueryEditor/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/QueryEditor/index.tsx
View File

@ -326,7 +326,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
<TextField <TextField
{...params} {...params}
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.metric' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.metric'
)} )}
variant="outlined" variant="outlined"
size="medium" size="medium"
@ -370,7 +370,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
> >
<InputLabel className={classes.selectTextLabel}> <InputLabel className={classes.selectTextLabel}>
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.keys' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.keys'
)} )}
</InputLabel> </InputLabel>
<Select <Select
@ -417,7 +417,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
setUpdate(true); setUpdate(true);
}} }}
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.selectKey' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.selectKey'
)} )}
className={classes.selectText} className={classes.selectText}
> >
@ -481,10 +481,10 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
} }
options={getAvailableValues(selectedLabel ?? '')} options={getAvailableValues(selectedLabel ?? '')}
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.values' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.values'
)} )}
placeholder={`${t( placeholder={`${t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.addValue' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.addValue'
)}`} )}`}
disableCloseOnSelect disableCloseOnSelect
disableClearable={false} disableClearable={false}
@ -501,7 +501,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
value: option.name, value: option.name,
score: 1, score: 1,
meta: t( meta: t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.seriesName' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.seriesName'
), ),
})) ?? [] })) ?? []
} }
@ -512,10 +512,10 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
score: 2, score: 2,
meta: localQuery.base_query meta: localQuery.base_query
? `${t( ? `${t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.labelFor' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.labelFor'
)} ${localQuery.base_query}` )} ${localQuery.base_query}`
: t( : t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.label' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.label'
), ),
}) })
) ?? [] ) ?? []
@ -558,7 +558,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
<Typography className={classes.configHeader}> <Typography className={classes.configHeader}>
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.configuration' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.configuration'
)} )}
</Typography> </Typography>
@ -568,7 +568,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
<div className={classes.flex}> <div className={classes.flex}>
<InputField <InputField
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.legend' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.legend'
)} )}
data-cy="queryLegend" data-cy="queryLegend"
width="16rem" width="16rem"
@ -584,7 +584,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
/> />
<InfoTooltip <InfoTooltip
value={t( value={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.legendInfo' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.legendInfo'
)} )}
className={classes.infoIcon} className={classes.infoIcon}
/> />
@ -593,7 +593,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
<div className={classes.flex}> <div className={classes.flex}>
<InputField <InputField
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.minStep' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.minStep'
)} )}
data-cy="minStep" data-cy="minStep"
width="9rem" width="9rem"
@ -615,7 +615,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
/> />
<InfoTooltip <InfoTooltip
value={t( value={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.minStepInfo' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.minStepInfo'
)} )}
className={classes.infoIcon} className={classes.infoIcon}
/> />
@ -624,19 +624,19 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
<div className={classes.flex}> <div className={classes.flex}>
<InputField <InputField
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.format' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.format'
)} )}
data-cy="dataFormat" data-cy="dataFormat"
width="9rem" width="9rem"
variant="primary" variant="primary"
disabled disabled
value={t( value={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.timeSeries' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.timeSeries'
)} )}
/> />
<InfoTooltip <InfoTooltip
value={t( value={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.formatInfo' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.formatInfo'
)} )}
className={classes.infoIcon} className={classes.infoIcon}
/> />
@ -656,7 +656,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
> >
<InputLabel className={classes.selectTextLabel}> <InputLabel className={classes.selectTextLabel}>
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.graph' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.graph'
)} )}
</InputLabel> </InputLabel>
<Select <Select
@ -672,35 +672,35 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
setUpdate(true); setUpdate(true);
}} }}
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.graph' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.graph'
)} )}
className={classes.selectText} className={classes.selectText}
> >
<MenuItem <MenuItem
key={`${t( key={`${t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.lineGraph' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.lineGraph'
)}`} )}`}
value="Line graph" value="Line graph"
> >
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.lineGraph' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.lineGraph'
)} )}
</MenuItem> </MenuItem>
<MenuItem <MenuItem
key={`${t( key={`${t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.areaGraph' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.areaGraph'
)}`} )}`}
value="Area graph" value="Area graph"
> >
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.areaGraph' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.areaGraph'
)} )}
</MenuItem> </MenuItem>
</Select> </Select>
</FormControl> </FormControl>
<InfoTooltip <InfoTooltip
value={t( value={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.graphInfo' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.graphInfo'
)} )}
className={classes.infoIcon} className={classes.infoIcon}
/> />
@ -716,7 +716,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
> >
<InputLabel className={classes.selectTextLabel}> <InputLabel className={classes.selectTextLabel}>
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.resolution' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.resolution'
)} )}
</InputLabel> </InputLabel>
<Select <Select
@ -729,7 +729,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
setUpdate(true); setUpdate(true);
}} }}
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.resolution' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.resolution'
)} )}
className={classes.selectText} className={classes.selectText}
> >
@ -742,7 +742,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
</FormControl> </FormControl>
<InfoTooltip <InfoTooltip
value={t( value={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.resolutionInfo' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.resolutionInfo'
)} )}
className={classes.infoIcon} className={classes.infoIcon}
/> />

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/QueryEditor/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/QueryEditor/styles.ts
View File

38
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/index.tsx
View File

@ -273,10 +273,10 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
label={ label={
panelInfo.prom_queries.length > 1 panelInfo.prom_queries.length > 1
? t( ? t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.queries' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.queries'
) )
: t( : t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.query' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.query'
) )
} }
icon={ icon={
@ -290,7 +290,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
<StyledTab <StyledTab
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.visualization' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.visualization'
)} )}
/> />
</Tabs> </Tabs>
@ -333,14 +333,14 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
setUpdate({ triggerUpdate: true, graph: true }); setUpdate({ triggerUpdate: true, graph: true });
}} }}
name={`${t( name={`${t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.points' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.points'
)}`} )}`}
icon={<SwitchIcon />} icon={<SwitchIcon />}
checkedIcon={<SwitchIcon />} checkedIcon={<SwitchIcon />}
/> />
} }
label={`${t( label={`${t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.points' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.points'
)}`} )}`}
labelPlacement="start" labelPlacement="start"
/> />
@ -362,14 +362,14 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
setUpdate({ triggerUpdate: true, graph: true }); setUpdate({ triggerUpdate: true, graph: true });
}} }}
name={`${t( name={`${t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.grids' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.grids'
)}`} )}`}
icon={<SwitchIcon />} icon={<SwitchIcon />}
checkedIcon={<SwitchIcon />} checkedIcon={<SwitchIcon />}
/> />
} }
label={`${t( label={`${t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.grids' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.grids'
)}`} )}`}
labelPlacement="start" labelPlacement="start"
/> />
@ -388,7 +388,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
> >
<Typography> <Typography>
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.addQuery' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.addQuery'
)} )}
</Typography> </Typography>
</ButtonOutlined> </ButtonOutlined>
@ -400,7 +400,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
> >
<Typography> <Typography>
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.discardChanges' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.discardChanges'
)} )}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>
@ -418,19 +418,19 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
<Typography className={classes.modalHeading} align="left"> <Typography className={classes.modalHeading} align="left">
<b> <b>
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.removeMetric' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.removeMetric'
)} )}
</b> </b>
</Typography> </Typography>
<Typography className={classes.modalBodyText} align="left"> <Typography className={classes.modalBodyText} align="left">
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.removeMetricConfirmation' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.removeMetricConfirmation'
)} )}
<b> <b>
<i>{` ${panelInfo.panel_name} `}</i> <i>{` ${panelInfo.panel_name} `}</i>
</b> </b>
{t('analyticsDashboard.applicationDashboards.tuneTheQueries.under')} {t('monitoringDashboard.monitoringDashboards.tuneTheQueries.under')}
<b> <b>
<i>{` ${panelInfo.panel_group_name} `}</i> <i>{` ${panelInfo.panel_group_name} `}</i>
</b> </b>
@ -444,7 +444,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
> >
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.cancel' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.cancel'
)} )}
</Typography> </Typography>
</TextButton> </TextButton>
@ -456,7 +456,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
className={`${classes.buttonText} ${classes.confirmButtonText}`} className={`${classes.buttonText} ${classes.confirmButtonText}`}
> >
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.delete' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.delete'
)} )}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>
@ -473,12 +473,12 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
<div className={classes.modal}> <div className={classes.modal}>
<Typography className={classes.modalHeading} align="left"> <Typography className={classes.modalHeading} align="left">
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.discardChangesConfirmation' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.discardChangesConfirmation'
)} )}
<b> <b>
<i>{` ${panelInfo.panel_name} `}</i> <i>{` ${panelInfo.panel_name} `}</i>
</b> </b>
{t('analyticsDashboard.applicationDashboards.tuneTheQueries.under')} {t('monitoringDashboard.monitoringDashboards.tuneTheQueries.under')}
<b> <b>
<i>{` ${panelInfo.panel_group_name} `}</i> <i>{` ${panelInfo.panel_group_name} `}</i>
</b> </b>
@ -487,7 +487,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
<Typography className={classes.modalBodyText} align="left"> <Typography className={classes.modalBodyText} align="left">
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.discardChangesInfo' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.discardChangesInfo'
)} )}
</Typography> </Typography>
@ -498,7 +498,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
> >
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.cancel' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.cancel'
)} )}
</Typography> </Typography>
</TextButton> </TextButton>
@ -510,7 +510,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
className={`${classes.buttonText} ${classes.confirmButtonText}`} className={`${classes.buttonText} ${classes.confirmButtonText}`}
> >
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.yesProceed' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.yesProceed'
)} )}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/TuneTheQueries/EditPanelsWizard/QueryEditingWizard/styles.ts
View File

2
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/TuneTheQueries/EditPanelsWizard/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/TuneTheQueries/EditPanelsWizard/index.tsx
View File

@ -496,7 +496,7 @@ const EditPanelsWizard: React.FC<EditPanelsWizardProps> = ({
))} ))}
<StyledTab <StyledTab
label={t( label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.addPanel' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.addPanel'
)} )}
{...a11yProps(dashboardDetails.selectedPanels?.length)} {...a11yProps(dashboardDetails.selectedPanels?.length)}
/> />

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/TuneTheQueries/EditPanelsWizard/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/TuneTheQueries/EditPanelsWizard/styles.ts
View File

10
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/TuneTheQueries/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/TuneTheQueries/index.tsx
View File

@ -19,7 +19,7 @@ import {
import { import {
DEFAULT_REFRESH_RATE, DEFAULT_REFRESH_RATE,
DEFAULT_RELATIVE_TIME_RANGE, DEFAULT_RELATIVE_TIME_RANGE,
} from '../../../../../pages/ApplicationDashboard/constants'; } from '../../../../../pages/MonitoringDashboard/constants';
import useActions from '../../../../../redux/actions'; import useActions from '../../../../../redux/actions';
import * as AlertActions from '../../../../../redux/actions/alert'; import * as AlertActions from '../../../../../redux/actions/alert';
import * as DashboardActions from '../../../../../redux/actions/dashboards'; import * as DashboardActions from '../../../../../redux/actions/dashboards';
@ -77,7 +77,7 @@ const TuneTheQueries = forwardRef(
setProceed(true); setProceed(true);
onDashboardLoadRoutine(data.createDashBoard?.db_id ?? '').then(() => { onDashboardLoadRoutine(data.createDashBoard?.db_id ?? '').then(() => {
history.push({ history.push({
pathname: '/analytics/application-dashboard', pathname: '/observability/monitoring-dashboard',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}); });
@ -97,7 +97,7 @@ const TuneTheQueries = forwardRef(
setProceed(true); setProceed(true);
onDashboardLoadRoutine(dashboardVars.id ?? '').then(() => { onDashboardLoadRoutine(dashboardVars.id ?? '').then(() => {
history.push({ history.push({
pathname: '/analytics/application-dashboard', pathname: '/observability/monitoring-dashboard',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}); });
@ -267,11 +267,11 @@ const TuneTheQueries = forwardRef(
return ( return (
<div className={classes.root}> <div className={classes.root}>
<Typography className={classes.heading}> <Typography className={classes.heading}>
{t('analyticsDashboard.applicationDashboards.tuneTheQueries.header')} {t('monitoringDashboard.monitoringDashboards.tuneTheQueries.header')}
</Typography> </Typography>
<Typography className={classes.description}> <Typography className={classes.description}>
{t( {t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.description' 'monitoringDashboard.monitoringDashboards.tuneTheQueries.description'
)} )}
</Typography> </Typography>
<div className={classes.editPanelsWizard}> <div className={classes.editPanelsWizard}>

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Steps/TuneTheQueries/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Steps/TuneTheQueries/styles.ts
View File

24
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/TableData.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Table/TableData.tsx
View File

@ -190,7 +190,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
onClick={() => { onClick={() => {
onDashboardLoadRoutine().then(() => { onDashboardLoadRoutine().then(() => {
history.push({ history.push({
pathname: '/analytics/application-dashboard', pathname: '/observability/monitoring-dashboard',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}); });
@ -281,7 +281,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
onClick={() => { onClick={() => {
onDashboardLoadRoutine().then(() => { onDashboardLoadRoutine().then(() => {
history.push({ history.push({
pathname: '/analytics/application-dashboard', pathname: '/observability/monitoring-dashboard',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}); });
@ -290,12 +290,12 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
> >
<div className={classes.flexDisplay}> <div className={classes.flexDisplay}>
<img <img
src="./icons/viewAnalytics.svg" src="./icons/viewDashboard.svg"
alt="View" alt="View"
className={classes.btnImg} className={classes.btnImg}
/> />
<Typography data-cy="openDashboard" className={classes.btnText}> <Typography data-cy="openDashboard" className={classes.btnText}>
{t('analyticsDashboard.applicationDashboardTable.view')} {t('monitoringDashboard.monitoringDashboardTable.view')}
</Typography> </Typography>
</div> </div>
</MenuItem> </MenuItem>
@ -308,7 +308,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
activePanelID: '', activePanelID: '',
}); });
history.push({ history.push({
pathname: '/analytics/dashboard/configure', pathname: '/observability/dashboard/configure',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}} }}
@ -324,7 +324,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
data-cy="configureDashboard" data-cy="configureDashboard"
className={classes.btnText} className={classes.btnText}
> >
{t('analyticsDashboard.applicationDashboardTable.configure')} {t('monitoringDashboard.monitoringDashboardTable.configure')}
</Typography> </Typography>
</div> </div>
</MenuItem> </MenuItem>
@ -344,7 +344,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
data-cy="downloadDashboard" data-cy="downloadDashboard"
className={classes.btnText} className={classes.btnText}
> >
{t('analyticsDashboard.applicationDashboardTable.json')} {t('monitoringDashboard.monitoringDashboardTable.json')}
</Typography> </Typography>
</div> </div>
</MenuItem> </MenuItem>
@ -370,7 +370,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
data-cy="deleteDashboard" data-cy="deleteDashboard"
className={`${classes.btnText} ${classes.deleteText}`} className={`${classes.btnText} ${classes.deleteText}`}
> >
{t('analyticsDashboard.applicationDashboardTable.delete')} {t('monitoringDashboard.monitoringDashboardTable.delete')}
</Typography> </Typography>
</div> </div>
</MenuItem> </MenuItem>
@ -385,13 +385,13 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
<div className={classes.modal}> <div className={classes.modal}>
<Typography className={classes.modalHeading} align="left"> <Typography className={classes.modalHeading} align="left">
{t( {t(
'analyticsDashboard.applicationDashboardTable.modal.removeDashboard' 'monitoringDashboard.monitoringDashboardTable.modal.removeDashboard'
)} )}
</Typography> </Typography>
<Typography className={classes.modalBodyText} align="left"> <Typography className={classes.modalBodyText} align="left">
{t( {t(
'analyticsDashboard.applicationDashboardTable.modal.removeDashboardConfirmation' 'monitoringDashboard.monitoringDashboardTable.modal.removeDashboardConfirmation'
)} )}
<b> <b>
<i>{` ${data.db_name} `}</i> <i>{` ${data.db_name} `}</i>
@ -405,7 +405,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
className={classes.cancelButton} className={classes.cancelButton}
> >
<Typography className={classes.buttonText}> <Typography className={classes.buttonText}>
{t('analyticsDashboard.applicationDashboardTable.modal.cancel')} {t('monitoringDashboard.monitoringDashboardTable.modal.cancel')}
</Typography> </Typography>
</TextButton> </TextButton>
<ButtonFilled <ButtonFilled
@ -418,7 +418,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
<Typography <Typography
className={`${classes.buttonText} ${classes.confirmButtonText}`} className={`${classes.buttonText} ${classes.confirmButtonText}`}
> >
{t('analyticsDashboard.applicationDashboardTable.modal.delete')} {t('monitoringDashboard.monitoringDashboardTable.modal.delete')}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>
</div> </div>

10
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/TableHeader.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Table/TableHeader.tsx
View File

@ -41,7 +41,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
<Typography <Typography
className={`${classes.dashboardNameHead} ${classes.dashboardNameCol}`} className={`${classes.dashboardNameHead} ${classes.dashboardNameCol}`}
> >
{t('analyticsDashboard.applicationDashboardTable.tableHead1')} {t('monitoringDashboard.monitoringDashboardTable.tableHead1')}
</Typography> </Typography>
<div className={classes.nameContentIcons}> <div className={classes.nameContentIcons}>
<IconButton <IconButton
@ -79,27 +79,27 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
<Typography <Typography
className={`${classes.dashboardNameHead} ${classes.dashboardNameHeadWithoutSort}`} className={`${classes.dashboardNameHead} ${classes.dashboardNameHeadWithoutSort}`}
> >
{t('analyticsDashboard.applicationDashboardTable.tableHead2')} {t('monitoringDashboard.monitoringDashboardTable.tableHead2')}
</Typography> </Typography>
</StyledTableCell> </StyledTableCell>
<StyledTableCell className={classes.headSpacing}> <StyledTableCell className={classes.headSpacing}>
<Typography <Typography
className={`${classes.dashboardNameHead} ${classes.dashboardNameHeadWithoutSort}`} className={`${classes.dashboardNameHead} ${classes.dashboardNameHeadWithoutSort}`}
> >
{t('analyticsDashboard.applicationDashboardTable.tableHead3')} {t('monitoringDashboard.monitoringDashboardTable.tableHead3')}
</Typography> </Typography>
</StyledTableCell> </StyledTableCell>
<StyledTableCell className={classes.headSpacing}> <StyledTableCell className={classes.headSpacing}>
<Typography <Typography
className={`${classes.dashboardNameHead} ${classes.dashboardNameHeadWithoutSort}`} className={`${classes.dashboardNameHead} ${classes.dashboardNameHeadWithoutSort}`}
> >
{t('analyticsDashboard.applicationDashboardTable.tableHead4')} {t('monitoringDashboard.monitoringDashboardTable.tableHead4')}
</Typography> </Typography>
</StyledTableCell> </StyledTableCell>
<StyledTableCell className={classes.headSpacing}> <StyledTableCell className={classes.headSpacing}>
<div className={classes.flexDisplay}> <div className={classes.flexDisplay}>
<Typography className={classes.dashboardNameHead}> <Typography className={classes.dashboardNameHead}>
{t('analyticsDashboard.applicationDashboardTable.tableHead5')} {t('monitoringDashboard.monitoringDashboardTable.tableHead5')}
</Typography> </Typography>
<div className={classes.nameContentIcons}> <div className={classes.nameContentIcons}>
<IconButton <IconButton

16
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/TableToolbar.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Table/TableToolbar.tsx
View File

@ -102,7 +102,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
<div className={classes.search}> <div className={classes.search}>
<Search <Search
id="input-with-icon-textfield" id="input-with-icon-textfield"
placeholder={t('analyticsDashboard.applicationDashboardTable.search')} placeholder={t('monitoringDashboard.monitoringDashboardTable.search')}
value={searchToken} value={searchToken}
onChange={handleSearch} onChange={handleSearch}
/> />
@ -116,10 +116,10 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
className={`${classes.formControl} ${classes.dashboardTypeForm}`} className={`${classes.formControl} ${classes.dashboardTypeForm}`}
> >
<InputLabel className={classes.selectText}> <InputLabel className={classes.selectText}>
{t('analyticsDashboard.applicationDashboardTable.tableHead2')} {t('monitoringDashboard.monitoringDashboardTable.tableHead2')}
</InputLabel> </InputLabel>
<Select <Select
label={t('analyticsDashboard.applicationDashboardTable.tableHead2')} label={t('monitoringDashboard.monitoringDashboardTable.tableHead2')}
value={agentName} value={agentName}
onChange={handleAgentNameChange} onChange={handleAgentNameChange}
className={classes.selectText} className={classes.selectText}
@ -139,7 +139,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
}} }}
> >
<MenuItem value="All" className={classes.menuListItem}> <MenuItem value="All" className={classes.menuListItem}>
{t('analyticsDashboard.applicationDashboardTable.all')} {t('monitoringDashboard.monitoringDashboardTable.all')}
</MenuItem> </MenuItem>
{agentNames.map((availableAgentName: string) => ( {agentNames.map((availableAgentName: string) => (
<MenuItem <MenuItem
@ -158,10 +158,10 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
className={`${classes.formControl} ${classes.dashboardTypeForm}`} className={`${classes.formControl} ${classes.dashboardTypeForm}`}
> >
<InputLabel className={classes.selectText}> <InputLabel className={classes.selectText}>
{t('analyticsDashboard.applicationDashboardTable.tableHead3')} {t('monitoringDashboard.monitoringDashboardTable.tableHead3')}
</InputLabel> </InputLabel>
<Select <Select
label={t('analyticsDashboard.applicationDashboardTable.tableHead3')} label={t('monitoringDashboard.monitoringDashboardTable.tableHead3')}
value={dashboardType} value={dashboardType}
onChange={handleDashboardTypeChange} onChange={handleDashboardTypeChange}
className={classes.selectText} className={classes.selectText}
@ -181,7 +181,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
}} }}
> >
<MenuItem value="All" className={classes.menuListItem}> <MenuItem value="All" className={classes.menuListItem}>
{t('analyticsDashboard.applicationDashboardTable.all')} {t('monitoringDashboard.monitoringDashboardTable.all')}
</MenuItem> </MenuItem>
{dashboardTypes.map((availableDashboardType: string) => ( {dashboardTypes.map((availableDashboardType: string) => (
<MenuItem <MenuItem
@ -206,7 +206,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
> >
<Typography className={classes.displayDate}> <Typography className={classes.displayDate}>
{range.startDate === ' ' {range.startDate === ' '
? t('analyticsDashboard.applicationDashboardTable.selectPeriod') ? t('monitoringDashboard.monitoringDashboardTable.selectPeriod')
: `${range.startDate.split(' ')[2]} ${ : `${range.startDate.split(' ')[2]} ${
range.startDate.split(' ')[1] range.startDate.split(' ')[1]
} ${range.startDate.split(' ')[3]} - ${ } ${range.startDate.split(' ')[3]} - ${

32
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/index.tsx → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Table/index.tsx
View File

@ -213,12 +213,12 @@ const DashboardTable: React.FC = () => {
<div className={classes.root}> <div className={classes.root}>
<div className={classes.tabHeaderFlex}> <div className={classes.tabHeaderFlex}>
<Typography className={classes.tabHeaderText}> <Typography className={classes.tabHeaderText}>
{t('analyticsDashboard.applicationDashboardTable.dashboards')} {t('monitoringDashboard.monitoringDashboardTable.dashboards')}
</Typography> </Typography>
<ButtonFilled <ButtonFilled
onClick={() => onClick={() =>
history.push({ history.push({
pathname: '/analytics/dashboard/create', pathname: '/observability/dashboard/create',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}) })
} }
@ -236,7 +236,7 @@ const DashboardTable: React.FC = () => {
: '' : ''
}`} }`}
> >
{t('analyticsDashboard.applicationDashboardTable.createDashboard')} {t('monitoringDashboard.monitoringDashboardTable.createDashboard')}
</Typography> </Typography>
</ButtonFilled> </ButtonFilled>
</div> </div>
@ -245,17 +245,17 @@ const DashboardTable: React.FC = () => {
<Typography className={classes.warningText} align="left"> <Typography className={classes.warningText} align="left">
{dataSourceList?.ListDataSource.length {dataSourceList?.ListDataSource.length
? t( ? t(
'analyticsDashboard.applicationDashboardTable.warning.noActiveDataSource' 'monitoringDashboard.monitoringDashboardTable.warning.noActiveDataSource'
) )
: t( : t(
'analyticsDashboard.applicationDashboardTable.warning.noAvailableDataSource' 'monitoringDashboard.monitoringDashboardTable.warning.noAvailableDataSource'
)} )}
</Typography> </Typography>
<div className={classes.warningActions}> <div className={classes.warningActions}>
{dataSourceList && dataSourceList.ListDataSource.length > 0 && ( {dataSourceList && dataSourceList.ListDataSource.length > 0 && (
<> <>
<TextButton <TextButton
onClick={() => tabs.changeAnalyticsDashboardTabs(3)} onClick={() => tabs.changeObservabilityDashboardTabs(3)}
variant="highlight" variant="highlight"
className={classes.warningButton} className={classes.warningButton}
> >
@ -264,19 +264,19 @@ const DashboardTable: React.FC = () => {
style={{ fontWeight: 500 }} style={{ fontWeight: 500 }}
> >
{t( {t(
'analyticsDashboard.applicationDashboardTable.warning.configureExisting' 'monitoringDashboard.monitoringDashboardTable.warning.configureExisting'
)} )}
</Typography> </Typography>
</TextButton> </TextButton>
<Typography className={classes.orText}> <Typography className={classes.orText}>
{t('analyticsDashboard.applicationDashboardTable.warning.or')} {t('monitoringDashboard.monitoringDashboardTable.warning.or')}
</Typography> </Typography>
</> </>
)} )}
<TextButton <TextButton
onClick={() => onClick={() =>
history.push({ history.push({
pathname: '/analytics/datasource/create', pathname: '/observability/datasource/create',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}) })
} }
@ -288,7 +288,7 @@ const DashboardTable: React.FC = () => {
style={{ fontWeight: 500 }} style={{ fontWeight: 500 }}
> >
{t( {t(
'analyticsDashboard.applicationDashboardTable.warning.addNew' 'monitoringDashboard.monitoringDashboardTable.warning.addNew'
)} )}
</Typography> </Typography>
</TextButton> </TextButton>
@ -369,7 +369,7 @@ const DashboardTable: React.FC = () => {
<TableCell colSpan={6}> <TableCell colSpan={6}>
<Typography align="center"> <Typography align="center">
{t( {t(
'analyticsDashboard.applicationDashboardTable.error' 'monitoringDashboard.monitoringDashboardTable.error'
)} )}
</Typography> </Typography>
</TableCell> </TableCell>
@ -383,7 +383,7 @@ const DashboardTable: React.FC = () => {
<Loader /> <Loader />
<Typography align="center"> <Typography align="center">
{t( {t(
'analyticsDashboard.applicationDashboardTable.loading' 'monitoringDashboard.monitoringDashboardTable.loading'
)} )}
</Typography> </Typography>
</div> </div>
@ -400,7 +400,7 @@ const DashboardTable: React.FC = () => {
/> />
<Typography className={classes.noRecordsText}> <Typography className={classes.noRecordsText}>
{t( {t(
'analyticsDashboard.applicationDashboardTable.noRecords' 'monitoringDashboard.monitoringDashboardTable.noRecords'
)} )}
</Typography> </Typography>
</div> </div>
@ -430,7 +430,7 @@ const DashboardTable: React.FC = () => {
<TableCell colSpan={6}> <TableCell colSpan={6}>
<Typography align="center"> <Typography align="center">
{t( {t(
'analyticsDashboard.applicationDashboardTable.noRecords' 'monitoringDashboard.monitoringDashboardTable.noRecords'
)} )}
</Typography> </Typography>
</TableCell> </TableCell>
@ -478,9 +478,9 @@ const DashboardTable: React.FC = () => {
> >
{success {success
? t( ? t(
'analyticsDashboard.applicationDashboardTable.deletionSuccess' 'monitoringDashboard.monitoringDashboardTable.deletionSuccess'
) )
: t('analyticsDashboard.applicationDashboardTable.deletionError')} : t('monitoringDashboard.monitoringDashboardTable.deletionError')}
</Alert> </Alert>
</Snackbar> </Snackbar>
)} )}

0
litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/styles.ts → litmus-portal/frontend/src/views/Observability/MonitoringDashboards/Table/styles.ts
View File

14
litmus-portal/frontend/src/views/Analytics/Overview/ApplicationDashboardCard/index.tsx → litmus-portal/frontend/src/views/Observability/Overview/MonitoringDashboardCard/index.tsx
View File

@ -16,7 +16,7 @@ import {
import useActions from '../../../../redux/actions'; import useActions from '../../../../redux/actions';
import * as DashboardActions from '../../../../redux/actions/dashboards'; import * as DashboardActions from '../../../../redux/actions/dashboards';
import { history } from '../../../../redux/configureStore'; import { history } from '../../../../redux/configureStore';
import { ReactComponent as AnalyticsIcon } from '../../../../svg/analytics.svg'; import { ReactComponent as ObservabilityIcon } from '../../../../svg/observability.svg';
import { ReactComponent as CogwheelIcon } from '../../../../svg/cogwheel.svg'; import { ReactComponent as CogwheelIcon } from '../../../../svg/cogwheel.svg';
import { ReactComponent as DownloadIcon } from '../../../../svg/download.svg'; import { ReactComponent as DownloadIcon } from '../../../../svg/download.svg';
import timeDifferenceForDate from '../../../../utils/datesModifier'; import timeDifferenceForDate from '../../../../utils/datesModifier';
@ -26,11 +26,11 @@ import {
} from '../../../../utils/getSearchParams'; } from '../../../../utils/getSearchParams';
import useStyles from './styles'; import useStyles from './styles';
interface ApplicationDashboardCardProps { interface MonitoringDashboardCardProps {
data: ListDashboardResponse; data: ListDashboardResponse;
} }
const ApplicationDashboardCard: React.FC<ApplicationDashboardCardProps> = ({ const MonitoringDashboardCard: React.FC<MonitoringDashboardCardProps> = ({
data, data,
}) => { }) => {
const classes = useStyles(); const classes = useStyles();
@ -173,13 +173,13 @@ const ApplicationDashboardCard: React.FC<ApplicationDashboardCardProps> = ({
onClick={() => { onClick={() => {
onDashboardLoadRoutine().then(() => { onDashboardLoadRoutine().then(() => {
history.push({ history.push({
pathname: '/analytics/application-dashboard', pathname: '/observability/monitoring-dashboard',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}); });
}} }}
> >
<AnalyticsIcon /> <ObservabilityIcon />
</IconButton> </IconButton>
<Typography align="center">View</Typography> <Typography align="center">View</Typography>
</div> </div>
@ -191,7 +191,7 @@ const ApplicationDashboardCard: React.FC<ApplicationDashboardCardProps> = ({
activePanelID: '', activePanelID: '',
}); });
history.push({ history.push({
pathname: '/analytics/dashboard/configure', pathname: '/observability/dashboard/configure',
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}} }}
@ -213,4 +213,4 @@ const ApplicationDashboardCard: React.FC<ApplicationDashboardCardProps> = ({
); );
}; };
export { ApplicationDashboardCard }; export { MonitoringDashboardCard };

0
litmus-portal/frontend/src/views/Analytics/Overview/ApplicationDashboardCard/styles.ts → litmus-portal/frontend/src/views/Observability/Overview/MonitoringDashboardCard/styles.ts
View File

14
litmus-portal/frontend/src/views/Analytics/Overview/WorkflowDashboardCard/index.tsx → litmus-portal/frontend/src/views/Observability/Overview/WorkflowStatisticsCard/index.tsx
View File

@ -4,7 +4,7 @@ import { WorkflowRun } from '../../../../models/graphql/workflowData';
import useActions from '../../../../redux/actions'; import useActions from '../../../../redux/actions';
import * as NodeSelectionActions from '../../../../redux/actions/nodeSelection'; import * as NodeSelectionActions from '../../../../redux/actions/nodeSelection';
import { history } from '../../../../redux/configureStore'; import { history } from '../../../../redux/configureStore';
import { ReactComponent as AnalyticsIcon } from '../../../../svg/analytics.svg'; import { ReactComponent as ObservabilityIcon } from '../../../../svg/observability.svg';
import { ReactComponent as WorkflowRunIcon } from '../../../../svg/workflowRun.svg'; import { ReactComponent as WorkflowRunIcon } from '../../../../svg/workflowRun.svg';
import timeDifferenceForDate from '../../../../utils/datesModifier'; import timeDifferenceForDate from '../../../../utils/datesModifier';
import { import {
@ -20,11 +20,11 @@ import {
} from '../../../WorkflowDetails/workflowConstants'; } from '../../../WorkflowDetails/workflowConstants';
import useStyles from './styles'; import useStyles from './styles';
interface WorkflowDashboardCardProps { interface WorkflowStatisticsCardProps {
data: WorkflowRun; data: WorkflowRun;
} }
const WorkflowDashboardCard: React.FC<WorkflowDashboardCardProps> = ({ const WorkflowStatisticsCard: React.FC<WorkflowStatisticsCardProps> = ({
data, data,
}) => { }) => {
const classes = useStyles(); const classes = useStyles();
@ -97,14 +97,14 @@ const WorkflowDashboardCard: React.FC<WorkflowDashboardCardProps> = ({
<IconButton <IconButton
onClick={() => { onClick={() => {
history.push({ history.push({
pathname: `/analytics/workflowdashboard/${data.workflow_id}`, pathname: `/observability/workflowStatistics/${data.workflow_id}`,
search: `?projectID=${projectID}&projectRole=${projectRole}`, search: `?projectID=${projectID}&projectRole=${projectRole}`,
}); });
}} }}
> >
<AnalyticsIcon /> <ObservabilityIcon />
</IconButton> </IconButton>
<Typography align="center">See analytics</Typography> <Typography align="center">See statistics</Typography>
</div> </div>
</section> </section>
</div> </div>
@ -113,4 +113,4 @@ const WorkflowDashboardCard: React.FC<WorkflowDashboardCardProps> = ({
); );
}; };
export { WorkflowDashboardCard }; export { WorkflowStatisticsCard };

Some files were not shown because too many files have changed in this diff Show More