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
GitHub
parent
cc67faa3ec
commit
a4912e6e41
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -161,11 +161,11 @@ community:
|
|||
subHeading: Explore about monthly community sync ups, Kubernetes meetups and other events in CNCF
|
||||
footerText: Follow us on other platforms
|
||||
|
||||
analytics:
|
||||
workflowAnalytics: Workflow Analytics
|
||||
observability:
|
||||
workflowStatistics: Workflow Statistics
|
||||
fetchError: An error has occurred while fetching the data
|
||||
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 !
|
||||
chaosCompleteWaitingMessage: Waiting for chaos experiment to finish !
|
||||
highestScore: 'Highest Score:'
|
||||
|
|
@ -194,13 +194,13 @@ analytics:
|
|||
probeSuccessPercentage: Probe Success Percentage
|
||||
experimentVerdict: Experiment Verdict
|
||||
|
||||
analyticsDashboard:
|
||||
heading: Analytics
|
||||
monitoringDashboard:
|
||||
heading: Observability
|
||||
overview: Overview
|
||||
monitoringDashboardPage:
|
||||
loadingText: Loading application dashboard ...
|
||||
loadingText: Loading monitoring dashboard ...
|
||||
metricsLoadingText: Fetching metrics ...
|
||||
errorText: Error while loading the application dashboard
|
||||
errorText: Error while loading the monitoring dashboard
|
||||
tryAgain: Try again
|
||||
goBack: Go back
|
||||
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."
|
||||
infoButtonText: Info
|
||||
infoDropdown:
|
||||
header: Application Dashboard Information
|
||||
header: Monitoring Dashboard Information
|
||||
close: Close Info
|
||||
subHeading1: Dashboard Configuration Details
|
||||
subHeading2: Selected Applications
|
||||
|
|
@ -260,7 +260,7 @@ analyticsDashboard:
|
|||
updateSuccess: Successfully updated the chaos annotations
|
||||
updateError: Error updating the chaos annotations
|
||||
dashboardCloneModal:
|
||||
heading: Clone the application dashboard
|
||||
heading: Clone the monitoring dashboard
|
||||
cancel: Cancel
|
||||
ok: OK
|
||||
error: Error cloning dashboard
|
||||
|
|
@ -283,7 +283,7 @@ analyticsDashboard:
|
|||
scheduleWorkflowMessage: Schedule my first workflow
|
||||
seeAll: See All
|
||||
seeDetails: See Details
|
||||
seeAnalytics: See Analytics
|
||||
seeStatistics: See Statistics
|
||||
workflowStats:
|
||||
title: Workflow stats
|
||||
workflowPassed: Passed
|
||||
|
|
@ -292,13 +292,13 @@ analyticsDashboard:
|
|||
workflowScheduleTable:
|
||||
title: Workflow Schedules
|
||||
noRecordMessage: No workflow has been schedule
|
||||
workflowDashboard: Workflow dashboards
|
||||
workflowStatistics: Workflow statistics
|
||||
overviewTabdataSourceTable: Connected Data Sources
|
||||
applicationDashboard: Application dashboards
|
||||
applicationDashboardTable:
|
||||
monitoringDashboard: Monitoring dashboards
|
||||
monitoringDashboardTable:
|
||||
warning:
|
||||
noActiveDataSource: No active data source found for creating an application dashboard.
|
||||
noAvailableDataSource: No data source available. To create an Application dashboard you need to add a data source.
|
||||
noActiveDataSource: No active data source found for creating a monitoring dashboard.
|
||||
noAvailableDataSource: No data source available. To create a monitoring dashboard you need to add a data source.
|
||||
configureExisting: Configure an existing data source
|
||||
addNew: Add data source
|
||||
or: or
|
||||
|
|
@ -314,7 +314,7 @@ analyticsDashboard:
|
|||
tableHead5: Last viewed
|
||||
createDashboard: Create dashboard
|
||||
dashboards: Dashboards
|
||||
title: Application Dashboard
|
||||
title: Monitoring Dashboard
|
||||
view: View
|
||||
configure: Configure
|
||||
json: JSON
|
||||
|
|
@ -327,7 +327,7 @@ analyticsDashboard:
|
|||
removeDashboardConfirmation: Are you sure you want to remove the dashboard
|
||||
cancel: Cancel
|
||||
delete: Delete
|
||||
applicationDashboards:
|
||||
monitoringDashboards:
|
||||
loadingDashboard: Loading dashboard configuration ...
|
||||
loadingDataSources: Loading available data sources ...
|
||||
errorFetchingDashboard: Error loading dashboard configuration
|
||||
|
|
@ -477,7 +477,7 @@ analyticsDashboard:
|
|||
all: All
|
||||
warning:
|
||||
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 :'
|
||||
showLess: Show Less Dashboards
|
||||
dashboards: Dashboards
|
||||
|
|
@ -516,10 +516,10 @@ analyticsDashboard:
|
|||
configureBanner:
|
||||
case-0:
|
||||
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:
|
||||
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:
|
||||
lastRun: Last run
|
||||
lastOpened: Last opened
|
||||
|
|
@ -577,7 +577,7 @@ homeViews:
|
|||
error: Error fetching the data!
|
||||
noWorkflow:
|
||||
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
|
||||
explore: Explore pre defined workflows
|
||||
recentWorkflowRuns:
|
||||
|
|
@ -585,7 +585,7 @@ homeViews:
|
|||
cardTitle: Browse workflow
|
||||
resilienceRate: 'Overall resilience rate:'
|
||||
lastRun: 'Last Run:'
|
||||
showAnalytics: Show the analytics
|
||||
showStatistics: Show the statistics
|
||||
downloadManifest: Download manifest
|
||||
heading: Recent Workflow runs
|
||||
viewAll: View all workflows
|
||||
|
|
@ -596,7 +596,7 @@ homeViews:
|
|||
deploy: Deploy a new Agent
|
||||
|
||||
chaosWorkflows:
|
||||
browseAnalytics:
|
||||
browseStatistics:
|
||||
workFlowComparisonTable:
|
||||
unableToFetch: Unable to fetch data
|
||||
noRecords: No records available
|
||||
|
|
@ -605,7 +605,7 @@ chaosWorkflows:
|
|||
resilienceScoreComparison: Resilience score comparison
|
||||
comparativeResults: Comparative results of selected workflows which ran successfully
|
||||
once: Once
|
||||
seeAnalytics: See analytics
|
||||
seeStatistics: See statistics
|
||||
browseSchedules:
|
||||
name: Name
|
||||
agent: Agent
|
||||
|
|
@ -655,7 +655,7 @@ chaosWorkflows:
|
|||
experimentsPassed: 'Experiments Passed : '
|
||||
showExperiments: Show Experiments
|
||||
showTheWorkflow: Show the workflow
|
||||
showTheAnalytics: Show the analytics
|
||||
showTheStatistics: Show the statistics
|
||||
na: NA
|
||||
|
||||
settings:
|
||||
|
|
@ -874,7 +874,7 @@ settings:
|
|||
|
||||
workflowDetailsView:
|
||||
logs: Logs
|
||||
headerDesc: Workflow dashboard of
|
||||
headerDesc: Workflow statistics of
|
||||
headerMiniDesc: Description of the workflow
|
||||
argoWorkflow:
|
||||
loading: Loading Graph...
|
||||
|
|
@ -1252,7 +1252,6 @@ workflows:
|
|||
runs: Runs
|
||||
schedules: Schedules
|
||||
templates: Templates
|
||||
analytics: Analytics
|
||||
scheduleAWorkflow: Schedule a workflow
|
||||
|
||||
browseTemplate:
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import * as TabActions from '../../redux/actions/tabs';
|
|||
import { history } from '../../redux/configureStore';
|
||||
import { getProjectID, getProjectRole } from '../../utils/getSearchParams';
|
||||
|
||||
type Variant = 'homePage' | 'returningHome' | 'analytics' | 'community';
|
||||
type Variant = 'homePage' | 'returningHome' | 'observability' | 'community';
|
||||
|
||||
interface LocalQuickActionCardProps {
|
||||
variant?: Variant;
|
||||
|
|
@ -26,7 +26,7 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
|
|||
const userRole = getProjectRole();
|
||||
const homePage = variant === 'homePage';
|
||||
const returningHome = variant === 'returningHome';
|
||||
const analytics = variant === 'analytics';
|
||||
const observability = variant === 'observability';
|
||||
const community = variant === 'community';
|
||||
const emptyData: QuickActionCardProps = {
|
||||
src: '',
|
||||
|
|
@ -34,13 +34,13 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
|
|||
text: '',
|
||||
};
|
||||
const quickActionData: Array<QuickActionCardProps> = [
|
||||
analytics
|
||||
observability
|
||||
? {
|
||||
src: './icons/addDataSource.svg',
|
||||
alt: 'data source',
|
||||
onClick: () =>
|
||||
history.push({
|
||||
pathname: '/analytics/datasource/select',
|
||||
pathname: '/observability/datasource/select',
|
||||
search: `?projectID=${projectID}&projectRole=${userRole}`,
|
||||
}),
|
||||
text: t('quickActionCard.addDataSource'),
|
||||
|
|
@ -58,7 +58,7 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
|
|||
text: t('quickActionCard.scheduleWorkflow'),
|
||||
}
|
||||
: emptyData,
|
||||
homePage || returningHome || analytics
|
||||
homePage || returningHome || observability
|
||||
? {
|
||||
src: './icons/target.svg',
|
||||
alt: 'agent',
|
||||
|
|
@ -72,7 +72,7 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
|
|||
: emptyData,
|
||||
|
||||
// TODO: settings only accessible by Owner
|
||||
(homePage || returningHome || community || analytics) &&
|
||||
(homePage || returningHome || community || observability) &&
|
||||
getProjectRole() === Role.owner
|
||||
? {
|
||||
src: './icons/teamMember.svg',
|
||||
|
|
@ -95,7 +95,7 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
|
|||
text: t('quickActionCard.quickSurvey'),
|
||||
}
|
||||
: emptyData,
|
||||
homePage || community || analytics
|
||||
homePage || community || observability
|
||||
? {
|
||||
src: './icons/docs.svg',
|
||||
alt: 'docs',
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ interface LinearProgressBarProps {
|
|||
isInTable: boolean;
|
||||
}
|
||||
|
||||
const AnalyticsLinearProgressBar: React.FC<LinearProgressBarProps> = ({
|
||||
const StatisticsLinearProgressBar: React.FC<LinearProgressBarProps> = ({
|
||||
value,
|
||||
maxValue,
|
||||
isInTable,
|
||||
|
|
@ -44,4 +44,4 @@ const AnalyticsLinearProgressBar: React.FC<LinearProgressBarProps> = ({
|
|||
);
|
||||
};
|
||||
|
||||
export default AnalyticsLinearProgressBar;
|
||||
export default StatisticsLinearProgressBar;
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
/* eslint-disable no-param-reassign */
|
||||
import { Typography } from '@material-ui/core';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import AceEditor from 'react-ace';
|
||||
import 'ace-builds/src-min-noconflict/ext-beautify';
|
||||
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-themelist';
|
||||
import 'ace-builds/src-min-noconflict/ext-whitespace';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import './prometheus';
|
||||
import useStyles from './styles';
|
||||
|
|
@ -75,7 +75,7 @@ const PrometheusQueryEditor: React.FC<PrometheusQueryEditorProps> = ({
|
|||
<div id={`editor-${index}`} data-cy="WorkflowEditor">
|
||||
<div className={classes.editor}>
|
||||
<Typography className={classes.heading}>
|
||||
{t('analyticsDashboard.applicationDashboards.tuneTheQueries.query')}
|
||||
{t('monitoringDashboard.monitoringDashboards.tuneTheQueries.query')}
|
||||
</Typography>
|
||||
<pre id="prom-query-editor">
|
||||
<AceEditor
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
|
|||
import { useLocation } from 'react-router-dom';
|
||||
import { UserRole } from '../../models/graphql/user';
|
||||
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 CommunityIcon } from '../../svg/community.svg';
|
||||
import { ReactComponent as DocsIcon } from '../../svg/docs.svg';
|
||||
|
|
@ -130,17 +130,17 @@ const SideBar: React.FC = () => {
|
|||
</CustomisedListItem>
|
||||
</div>
|
||||
<CustomisedListItem
|
||||
key="analytics"
|
||||
key="observability"
|
||||
handleClick={() => {
|
||||
history.push({
|
||||
pathname: `/analytics`,
|
||||
pathname: `/observability`,
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
}}
|
||||
label="Analytics"
|
||||
selected={pathName === 'analytics'}
|
||||
label="Observability"
|
||||
selected={pathName === 'observability'}
|
||||
>
|
||||
<AnalyticsIcon />
|
||||
<ObservabilityIcon />
|
||||
</CustomisedListItem>
|
||||
|
||||
{projectRole === 'Owner' && (
|
||||
|
|
|
|||
|
|
@ -30,14 +30,16 @@ const EditSchedule = lazy(() => import('../../pages/EditSchedule'));
|
|||
const SetNewSchedule = lazy(() => import('../../pages/EditSchedule/Schedule'));
|
||||
const ConnectTargets = lazy(() => import('../../pages/ConnectTarget'));
|
||||
const WorkflowInfoStats = lazy(() => import('../../pages/WorkflowInfoStats'));
|
||||
const AnalyticsDashboard = lazy(() => import('../../pages/AnalyticsPage'));
|
||||
const ObservabilityDashboard = lazy(
|
||||
() => import('../../pages/ObservabilityPage')
|
||||
);
|
||||
const DataSourceConfigurePage = lazy(
|
||||
() => import('../../pages/ConfigureDataSources')
|
||||
);
|
||||
const ChooseAndConfigureDashboards = lazy(
|
||||
() => import('../../pages/ChooseAndConfigureDashboards')
|
||||
);
|
||||
const DashboardPage = lazy(() => import('../../pages/ApplicationDashboard'));
|
||||
const DashboardPage = lazy(() => import('../../pages/MonitoringDashboard'));
|
||||
const MyHub = lazy(() => import('../../pages/ChaosHub'));
|
||||
const ChaosChart = lazy(() => import('../../views/MyHub/MyHubCharts'));
|
||||
const MyHubExperiment = lazy(() => import('../../views/MyHub/MyHubExperiment'));
|
||||
|
|
@ -147,32 +149,36 @@ const Routes: React.FC = () => {
|
|||
<Route exact path="/home" component={HomePage} />
|
||||
<Redirect exact path="/" to="/home" />
|
||||
<Route exact path="/workflows" component={Workflows} />
|
||||
<Route exact path="/analytics" component={AnalyticsDashboard} />
|
||||
<Route
|
||||
exact
|
||||
path="/analytics/datasource/create"
|
||||
path="/observability"
|
||||
component={ObservabilityDashboard}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/observability/datasource/create"
|
||||
component={() => <DataSourceConfigurePage configure={false} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/analytics/datasource/configure"
|
||||
path="/observability/datasource/configure"
|
||||
component={() => <DataSourceConfigurePage configure />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/analytics/dashboard/create"
|
||||
path="/observability/dashboard/create"
|
||||
component={() => (
|
||||
<ChooseAndConfigureDashboards configure={false} />
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/analytics/dashboard/configure"
|
||||
path="/observability/dashboard/configure"
|
||||
component={() => <ChooseAndConfigureDashboards configure />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/analytics/application-dashboard"
|
||||
path="/observability/monitoring-dashboard"
|
||||
component={() => <DashboardPage />}
|
||||
/>
|
||||
<Route exact path="/create-workflow" component={CreateWorkflow} />
|
||||
|
|
@ -193,7 +199,7 @@ const Routes: React.FC = () => {
|
|||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/analytics/workflowdashboard/:workflowId"
|
||||
path="/observability/workflowStatistics/:workflowId"
|
||||
component={WorkflowInfoStats}
|
||||
/>
|
||||
<Route exact path="/community" component={Community} />
|
||||
|
|
@ -231,14 +237,26 @@ const Routes: React.FC = () => {
|
|||
<Redirect exact path="/getStarted" to="/home" />
|
||||
<Redirect exact path="/workflows/schedule" to="/workflows" />
|
||||
<Redirect exact path="/workflows/template" to="/workflows" />
|
||||
<Redirect exact path="/analytics/overview" to="/analytics" />
|
||||
<Redirect
|
||||
exact
|
||||
path="/analytics/litmusdashboard"
|
||||
to="/analytics"
|
||||
path="/observability/overview"
|
||||
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 to="/404" />
|
||||
</Switch>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ interface PanelGroup {
|
|||
panels: Panel[];
|
||||
}
|
||||
|
||||
export interface ApplicationDashboard {
|
||||
export interface MonitoringDashboard {
|
||||
dashboardID: string;
|
||||
name: string;
|
||||
information: string;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ export interface TabState {
|
|||
workflows: number;
|
||||
settings: number;
|
||||
node: number;
|
||||
analytics: number;
|
||||
observability: number;
|
||||
myhub: number;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
];
|
||||
|
|
@ -32,7 +32,7 @@ import useActions from '../../redux/actions';
|
|||
import * as AlertActions from '../../redux/actions/alert';
|
||||
import { RootState } from '../../redux/reducers';
|
||||
import { getProjectID } from '../../utils/getSearchParams';
|
||||
import DashboardStepper from '../../views/Analytics/ApplicationDashboards/Stepper';
|
||||
import DashboardStepper from '../../views/Observability/MonitoringDashboards/Stepper';
|
||||
import useStyles from './styles';
|
||||
|
||||
interface ChooseAndConfigureDashboardsProps {
|
||||
|
|
@ -215,9 +215,9 @@ const ChooseAndConfigureDashboards: React.FC<ChooseAndConfigureDashboardsProps>
|
|||
<Loader />
|
||||
<Typography className={classes.loading}>
|
||||
{configure
|
||||
? t('analyticsDashboard.applicationDashboards.loadingDashboard')
|
||||
? t('monitoringDashboard.monitoringDashboards.loadingDashboard')
|
||||
: t(
|
||||
'analyticsDashboard.applicationDashboards.loadingDataSources'
|
||||
'monitoringDashboard.monitoringDashboards.loadingDataSources'
|
||||
)}
|
||||
</Typography>
|
||||
</div>
|
||||
|
|
@ -225,7 +225,7 @@ const ChooseAndConfigureDashboards: React.FC<ChooseAndConfigureDashboardsProps>
|
|||
<div className={classes.center}>
|
||||
<Typography className={classes.error}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.errorFetchingDashboard'
|
||||
'monitoringDashboard.monitoringDashboards.errorFetchingDashboard'
|
||||
)}
|
||||
</Typography>
|
||||
</div>
|
||||
|
|
@ -233,7 +233,7 @@ const ChooseAndConfigureDashboards: React.FC<ChooseAndConfigureDashboardsProps>
|
|||
<div className={classes.center}>
|
||||
<Typography className={classes.error}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.errorFetchingDataSources'
|
||||
'monitoringDashboard.monitoringDashboards.errorFetchingDataSources'
|
||||
)}
|
||||
</Typography>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import {
|
|||
import useStyles from './styles';
|
||||
|
||||
const ConfigurePrometheus = lazy(
|
||||
() => import('../../views/Analytics/DataSources/Forms/prometheus')
|
||||
() => import('../../views/Observability/DataSources/Forms/prometheus')
|
||||
);
|
||||
|
||||
interface DataSourceConfigurePageProps {
|
||||
|
|
@ -190,7 +190,7 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
|
|||
<BackButton />
|
||||
</div>
|
||||
<Typography className={classes.heading}>
|
||||
{t('analyticsDashboard.dataSourceForm.headingAdd')}
|
||||
{t('monitoringDashboard.dataSourceForm.headingAdd')}
|
||||
</Typography>
|
||||
<ConfigurePrometheus
|
||||
configure={configure}
|
||||
|
|
@ -206,7 +206,7 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
|
|||
<BackButton />
|
||||
</div>
|
||||
<Typography className={classes.heading}>
|
||||
{t('analyticsDashboard.dataSourceForm.headingConfigure')} /
|
||||
{t('monitoringDashboard.dataSourceForm.headingConfigure')} /
|
||||
{` ${selectedDataSourceName}`}
|
||||
</Typography>
|
||||
{dataSourceID ? (
|
||||
|
|
@ -230,15 +230,15 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
|
|||
{page === 2 && (
|
||||
<ButtonOutlined onClick={() => setPage(1)} disabled={false}>
|
||||
<Typography>
|
||||
{t('analyticsDashboard.dataSourceForm.back')}
|
||||
{t('monitoringDashboard.dataSourceForm.back')}
|
||||
</Typography>
|
||||
</ButtonOutlined>
|
||||
)}
|
||||
<div className={classes.saveButton}>
|
||||
<Typography className={classes.stepText}>
|
||||
{t('analyticsDashboard.dataSourceForm.step')}
|
||||
{t('monitoringDashboard.dataSourceForm.step')}
|
||||
<strong>{` ${page} `}</strong>
|
||||
{t('analyticsDashboard.dataSourceForm.of2')}
|
||||
{t('monitoringDashboard.dataSourceForm.of2')}
|
||||
</Typography>
|
||||
<ButtonFilled
|
||||
disabled={
|
||||
|
|
@ -259,10 +259,10 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
|
|||
{page === 2
|
||||
? mutate
|
||||
? !configure
|
||||
? t('analyticsDashboard.dataSourceForm.adding')
|
||||
: t('analyticsDashboard.dataSourceForm.updating')
|
||||
: t('analyticsDashboard.dataSourceForm.saveChanges')
|
||||
: t('analyticsDashboard.dataSourceForm.next')}
|
||||
? t('monitoringDashboard.dataSourceForm.adding')
|
||||
: t('monitoringDashboard.dataSourceForm.updating')
|
||||
: t('monitoringDashboard.dataSourceForm.saveChanges')
|
||||
: t('monitoringDashboard.dataSourceForm.next')}
|
||||
</Typography>
|
||||
{mutate && <Loader size={20} />}
|
||||
</ButtonFilled>
|
||||
|
|
@ -277,7 +277,7 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
|
|||
setIsAlertOpen(false);
|
||||
if (success) {
|
||||
history.push({
|
||||
pathname: '/analytics',
|
||||
pathname: '/observability',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
}
|
||||
|
|
@ -288,7 +288,7 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
|
|||
setIsAlertOpen(false);
|
||||
if (success) {
|
||||
history.push({
|
||||
pathname: '/analytics',
|
||||
pathname: '/observability',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
}
|
||||
|
|
@ -297,11 +297,11 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
|
|||
>
|
||||
{!configure
|
||||
? success
|
||||
? t('analyticsDashboard.dataSourceForm.connectionSuccess')
|
||||
: t('analyticsDashboard.dataSourceForm.connectionError')
|
||||
? t('monitoringDashboard.dataSourceForm.connectionSuccess')
|
||||
: t('monitoringDashboard.dataSourceForm.connectionError')
|
||||
: success
|
||||
? t('analyticsDashboard.dataSourceForm.updateSuccess')
|
||||
: t('analyticsDashboard.dataSourceForm.updateError')}
|
||||
? t('monitoringDashboard.dataSourceForm.updateSuccess')
|
||||
: t('monitoringDashboard.dataSourceForm.updateError')}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -44,12 +44,12 @@ import {
|
|||
generatePromQueries,
|
||||
getDashboardQueryMap,
|
||||
} from '../../utils/promUtils';
|
||||
import ChaosAccordion from '../../views/Analytics/ApplicationDashboard/ChaosAccordion';
|
||||
import DataSourceInactiveModal from '../../views/Analytics/ApplicationDashboard/DataSourceInactiveModal';
|
||||
import InfoDropdown from '../../views/Analytics/ApplicationDashboard/InfoDropdown';
|
||||
import DashboardPanelGroup from '../../views/Analytics/ApplicationDashboard/PanelAndGroup/PanelGroup';
|
||||
import ToolBar from '../../views/Analytics/ApplicationDashboard/ToolBar';
|
||||
import TopNavButtons from '../../views/Analytics/ApplicationDashboard/TopNavButtons';
|
||||
import ChaosAccordion from '../../views/Observability/MonitoringDashboard/ChaosAccordion';
|
||||
import DataSourceInactiveModal from '../../views/Observability/MonitoringDashboard/DataSourceInactiveModal';
|
||||
import InfoDropdown from '../../views/Observability/MonitoringDashboard/InfoDropdown';
|
||||
import DashboardPanelGroup from '../../views/Observability/MonitoringDashboard/PanelAndGroup/PanelGroup';
|
||||
import ToolBar from '../../views/Observability/MonitoringDashboard/ToolBar';
|
||||
import TopNavButtons from '../../views/Observability/MonitoringDashboard/TopNavButtons';
|
||||
import {
|
||||
ACTIVE,
|
||||
DEFAULT_REFRESH_RATE,
|
||||
|
|
@ -376,13 +376,13 @@ const DashboardPage: React.FC = () => {
|
|||
<div className={classes.center}>
|
||||
<Loader />
|
||||
<Typography className={classes.loading}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.loadingText')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.loadingText')}
|
||||
</Typography>
|
||||
</div>
|
||||
) : errorFetchingDashboards ? (
|
||||
<div className={classes.center}>
|
||||
<Typography className={classes.error}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.errorText')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.errorText')}
|
||||
</Typography>
|
||||
<div className={classes.flexButtons}>
|
||||
<ButtonOutlined
|
||||
|
|
@ -394,7 +394,7 @@ const DashboardPage: React.FC = () => {
|
|||
variant="highlight"
|
||||
>
|
||||
<Typography>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.tryAgain')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.tryAgain')}
|
||||
</Typography>
|
||||
</ButtonOutlined>
|
||||
<ButtonFilled
|
||||
|
|
@ -403,7 +403,7 @@ const DashboardPage: React.FC = () => {
|
|||
variant="error"
|
||||
>
|
||||
<Typography>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.goBack')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.goBack')}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
</div>
|
||||
|
|
@ -593,7 +593,7 @@ const DashboardPage: React.FC = () => {
|
|||
}}
|
||||
/>
|
||||
<div
|
||||
className={classes.analyticsDiv}
|
||||
className={classes.observabilityDiv}
|
||||
key={selectedDashboardInformation.dashboardKey}
|
||||
>
|
||||
<div className={classes.chaosTableSection}>
|
||||
|
|
@ -642,7 +642,7 @@ const DashboardPage: React.FC = () => {
|
|||
<Loader />
|
||||
<Typography className={classes.loading}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.metricsLoadingText'
|
||||
'monitoringDashboard.monitoringDashboardPage.metricsLoadingText'
|
||||
)}
|
||||
</Typography>
|
||||
</div>
|
||||
|
|
@ -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,
|
||||
},
|
||||
];
|
||||
|
|
@ -41,7 +41,7 @@ const useStyles = makeStyles((theme) => ({
|
|||
marginBottom: theme.spacing(4.5),
|
||||
},
|
||||
|
||||
analyticsDiv: {
|
||||
observabilityDiv: {
|
||||
padding: theme.spacing(1, 0, 2),
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
minHeight: '26rem',
|
||||
|
|
@ -12,31 +12,33 @@ import * as TabActions from '../../redux/actions/tabs';
|
|||
import { RootState } from '../../redux/reducers';
|
||||
import useStyles from './styles';
|
||||
|
||||
const Overview = lazy(() => import('../../views/Analytics/Overview'));
|
||||
const Overview = lazy(() => import('../../views/Observability/Overview'));
|
||||
const DashboardTable = lazy(
|
||||
() => import('../../views/Analytics/ApplicationDashboards/Table')
|
||||
() => import('../../views/Observability/MonitoringDashboards/Table')
|
||||
);
|
||||
const DataSourceTable = lazy(
|
||||
() => import('../../views/Analytics/DataSources/Table')
|
||||
() => import('../../views/Observability/DataSources/Table')
|
||||
);
|
||||
const WorkflowComparisonTable = lazy(
|
||||
() =>
|
||||
import('../../views/Analytics/WorkflowDashboard/WorkflowComparisonTable')
|
||||
import(
|
||||
'../../views/Observability/WorkflowStatistics/WorkflowComparisonTable'
|
||||
)
|
||||
);
|
||||
|
||||
const AnalyticsDashboard = () => {
|
||||
const ObservabilityDashboard = () => {
|
||||
const classes = useStyles();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const analyticsTabValue = useSelector(
|
||||
(state: RootState) => state.tabNumber.analytics
|
||||
const observabilityTabValue = useSelector(
|
||||
(state: RootState) => state.tabNumber.observability
|
||||
);
|
||||
const tabs = useActions(TabActions);
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
|
||||
tabs.changeAnalyticsDashboardTabs(newValue);
|
||||
tabs.changeObservabilityDashboardTabs(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -44,13 +46,13 @@ const AnalyticsDashboard = () => {
|
|||
<section>
|
||||
<div className={classes.header}>
|
||||
<Typography variant="h3">
|
||||
{t('analyticsDashboard.heading')}
|
||||
{t('monitoringDashboard.heading')}
|
||||
</Typography>
|
||||
</div>
|
||||
</section>
|
||||
<AppBar className={classes.appBar}>
|
||||
<Tabs
|
||||
value={analyticsTabValue}
|
||||
value={observabilityTabValue}
|
||||
onChange={handleChange}
|
||||
TabIndicatorProps={{
|
||||
style: {
|
||||
|
|
@ -60,40 +62,40 @@ const AnalyticsDashboard = () => {
|
|||
variant="fullWidth"
|
||||
>
|
||||
<StyledTab
|
||||
label={t('analyticsDashboard.overview')}
|
||||
label={t('monitoringDashboard.overview')}
|
||||
data-cy="overview"
|
||||
/>
|
||||
<StyledTab
|
||||
label={t('analyticsDashboard.workflowDashboard')}
|
||||
label={t('monitoringDashboard.workflowStatistics')}
|
||||
data-cy="litmusDashboard"
|
||||
/>
|
||||
<StyledTab
|
||||
label={t('analyticsDashboard.applicationDashboard')}
|
||||
label={t('monitoringDashboard.monitoringDashboard')}
|
||||
data-cy="kubernetesDashboard"
|
||||
/>
|
||||
<StyledTab
|
||||
label={t('analyticsDashboard.dataSource')}
|
||||
label={t('monitoringDashboard.dataSource')}
|
||||
data-cy="data source"
|
||||
/>
|
||||
</Tabs>
|
||||
</AppBar>
|
||||
|
||||
<TabPanel value={analyticsTabValue} index={0}>
|
||||
<TabPanel value={observabilityTabValue} index={0}>
|
||||
<SuspenseLoader style={{ height: '50vh' }}>
|
||||
<Overview />
|
||||
</SuspenseLoader>
|
||||
</TabPanel>
|
||||
<TabPanel value={analyticsTabValue} index={1}>
|
||||
<TabPanel value={observabilityTabValue} index={1}>
|
||||
<SuspenseLoader style={{ height: '50vh' }}>
|
||||
<WorkflowComparisonTable />
|
||||
</SuspenseLoader>
|
||||
</TabPanel>
|
||||
<TabPanel value={analyticsTabValue} index={2}>
|
||||
<TabPanel value={observabilityTabValue} index={2}>
|
||||
<SuspenseLoader style={{ height: '50vh' }}>
|
||||
<DashboardTable />
|
||||
</SuspenseLoader>
|
||||
</TabPanel>
|
||||
<TabPanel value={analyticsTabValue} index={3}>
|
||||
<TabPanel value={observabilityTabValue} index={3}>
|
||||
<SuspenseLoader style={{ height: '50vh' }}>
|
||||
<DataSourceTable />
|
||||
</SuspenseLoader>
|
||||
|
|
@ -102,4 +104,4 @@ const AnalyticsDashboard = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default AnalyticsDashboard;
|
||||
export default ObservabilityDashboard;
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { Typography } from '@material-ui/core';
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import AnalyticsLinearProgressBar from '../../../components/ProgressBar/AnalyticsLinearProgressBar';
|
||||
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';
|
||||
|
||||
interface WorkFlowTests {
|
||||
|
|
@ -59,7 +59,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
|
|||
{data.test_weight} Points
|
||||
</Typography>
|
||||
<div className={classes.progressBar}>
|
||||
<AnalyticsLinearProgressBar
|
||||
<StatisticsLinearProgressBar
|
||||
value={data.test_weight ?? 0}
|
||||
maxValue={10}
|
||||
isInTable
|
||||
|
|
|
|||
|
|
@ -38,24 +38,24 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
|
|||
<TableRow className={classes.tableHead}>
|
||||
<StyledTableCell className={classes.testName}>
|
||||
<div className={classes.nameContent}>
|
||||
<b>{t('analytics.workflowRunDetailsTable.tableHead0')}</b>
|
||||
<b>{t('observability.workflowRunDetailsTable.tableHead0')}</b>
|
||||
</div>
|
||||
</StyledTableCell>
|
||||
<StyledTableCell>
|
||||
<div className={classes.nameContent}>
|
||||
<b>{t('analytics.workflowRunDetailsTable.tableHead1')}</b>
|
||||
<b>{t('observability.workflowRunDetailsTable.tableHead1')}</b>
|
||||
</div>
|
||||
</StyledTableCell>
|
||||
|
||||
<StyledTableCell>
|
||||
<div className={classes.nameContent}>
|
||||
<b>{t('analytics.workflowRunDetailsTable.tableHead2')}</b>
|
||||
<b>{t('observability.workflowRunDetailsTable.tableHead2')}</b>
|
||||
</div>
|
||||
</StyledTableCell>
|
||||
|
||||
<StyledTableCell>
|
||||
<div className={classes.nameContent}>
|
||||
<b>{t('analytics.workflowRunDetailsTable.tableHead3')}</b>
|
||||
<b>{t('observability.workflowRunDetailsTable.tableHead3')}</b>
|
||||
<div>
|
||||
<IconButton
|
||||
aria-label="sort run ascending"
|
||||
|
|
@ -90,7 +90,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
|
|||
</StyledTableCell>
|
||||
<StyledTableCell>
|
||||
<div className={classes.nameContent}>
|
||||
<b>{t('analytics.workflowRunDetailsTable.tableHead4')}</b>
|
||||
<b>{t('observability.workflowRunDetailsTable.tableHead4')}</b>
|
||||
<div>
|
||||
<IconButton
|
||||
aria-label="sort run ascending"
|
||||
|
|
@ -125,7 +125,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
|
|||
</StyledTableCell>
|
||||
<StyledTableCell>
|
||||
<div className={classes.nameContent}>
|
||||
<b>{t('analytics.workflowRunDetailsTable.tableHead5')}</b>
|
||||
<b>{t('observability.workflowRunDetailsTable.tableHead5')}</b>
|
||||
<div>
|
||||
<IconButton
|
||||
aria-label="sort run ascending"
|
||||
|
|
|
|||
|
|
@ -11,10 +11,6 @@ const useStyles = makeStyles((theme) => ({
|
|||
marginTop: theme.spacing(4.75),
|
||||
},
|
||||
|
||||
analyticsDiv: {
|
||||
paddingRight: theme.spacing(3.75),
|
||||
},
|
||||
|
||||
headerSection: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ const WorkflowInfoStats: React.FC = () => {
|
|||
{data?.ListWorkflow.workflows[0].workflow_name}
|
||||
</Typography>
|
||||
<Typography className={classes.subHeading}>
|
||||
Here’s the analytics of the selected workflow
|
||||
Here’s the statistics of the selected workflow
|
||||
</Typography>
|
||||
</div>
|
||||
{/* For later: */}
|
||||
|
|
@ -198,7 +198,7 @@ const WorkflowInfoStats: React.FC = () => {
|
|||
<div className={classes.heatmapArea}>
|
||||
<div className={classes.heatmapAreaHeading}>
|
||||
<Typography className={classes.sectionHeading}>
|
||||
Analytics
|
||||
Statistics
|
||||
</Typography>
|
||||
{/* Year selection filter */}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export function changeWorkflowDetailsTabs(tabNumber: number): TabAction {
|
|||
};
|
||||
}
|
||||
|
||||
export function changeAnalyticsDashboardTabs(tabNumber: number): TabAction {
|
||||
export function changeObservabilityDashboardTabs(tabNumber: number): TabAction {
|
||||
return {
|
||||
type: TabActions.CHANGE_ANALYTICS_DASHBOARD_TAB,
|
||||
payload: tabNumber,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const initialState: TabState = {
|
|||
workflows: 0,
|
||||
settings: 0,
|
||||
node: 0,
|
||||
analytics: 0,
|
||||
observability: 0,
|
||||
myhub: 0,
|
||||
};
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ export const tabNumber = createReducer<TabState>(initialState, {
|
|||
) {
|
||||
return {
|
||||
...state,
|
||||
analytics: action.payload,
|
||||
observability: action.payload,
|
||||
};
|
||||
},
|
||||
[TabActions.CHANGE_HUB_TABS](state: TabState, action: TabAction) {
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -27,7 +27,7 @@ import {
|
|||
DEFAULT_TSDB_SCRAPE_INTERVAL,
|
||||
PROMETHEUS_QUERY_RESOLUTION_LIMIT,
|
||||
TIME_THRESHOLD_FOR_TSDB,
|
||||
} from '../pages/ApplicationDashboard/constants';
|
||||
} from '../pages/MonitoringDashboard/constants';
|
||||
|
||||
const labelMatchOperators = ['==', '!=', '<=', '<', '>=', '>', '=~', '!~', '='];
|
||||
|
||||
|
|
|
|||
|
|
@ -11,28 +11,28 @@ const GetTimeDiff = (startTime: number, endTime: number, t: TFunction) => {
|
|||
if (days > 0) {
|
||||
timeDiffString = timeDiffString.concat(
|
||||
days === 1
|
||||
? `${days} ${t('analyticsDashboard.timeText.day')} `
|
||||
: `${days} ${t('analyticsDashboard.timeText.days')} `
|
||||
? `${days} ${t('monitoringDashboard.timeText.day')} `
|
||||
: `${days} ${t('monitoringDashboard.timeText.days')} `
|
||||
);
|
||||
}
|
||||
if (hours > 0) {
|
||||
timeDiffString = timeDiffString.concat(
|
||||
hours === 1
|
||||
? `${hours} ${t('analyticsDashboard.timeText.hour')} `
|
||||
: `${hours} ${t('analyticsDashboard.timeText.hours')} `
|
||||
? `${hours} ${t('monitoringDashboard.timeText.hour')} `
|
||||
: `${hours} ${t('monitoringDashboard.timeText.hours')} `
|
||||
);
|
||||
}
|
||||
if (minutes > 0) {
|
||||
timeDiffString = timeDiffString.concat(
|
||||
minutes === 1
|
||||
? `${minutes} ${t('analyticsDashboard.timeText.minute')} `
|
||||
: `${minutes} ${t('analyticsDashboard.timeText.minutes')} `
|
||||
? `${minutes} ${t('monitoringDashboard.timeText.minute')} `
|
||||
: `${minutes} ${t('monitoringDashboard.timeText.minutes')} `
|
||||
);
|
||||
}
|
||||
if (timeDiffString === '') {
|
||||
timeDiffString = timeDiffString.concat(
|
||||
` ${t('analyticsDashboard.timeText.few')} ${t(
|
||||
'analyticsDashboard.timeText.seconds'
|
||||
` ${t('monitoringDashboard.timeText.few')} ${t(
|
||||
'monitoringDashboard.timeText.seconds'
|
||||
)}`
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -421,19 +421,21 @@ const TableData: React.FC<TableDataProps> = ({ data, refetchQuery }) => {
|
|||
value="Analysis"
|
||||
onClick={() => {
|
||||
history.push({
|
||||
pathname: `/analytics/workflowdashboard/${data.workflow_id}`,
|
||||
pathname: `/observability/workflowStatistics/${data.workflow_id}`,
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div className={classes.expDiv} data-cy="workflowAnalytics">
|
||||
<div className={classes.expDiv} data-cy="workflowStatistics">
|
||||
<img
|
||||
src="./icons/show-analytics.svg"
|
||||
alt="Display Analytics"
|
||||
src="./icons/show-statistics.svg"
|
||||
alt="Display Statistics"
|
||||
className={classes.btnImg}
|
||||
/>
|
||||
<Typography className={classes.btnText}>
|
||||
{t('chaosWorkflows.browseWorkflows.tableData.showTheAnalytics')}
|
||||
{t(
|
||||
'chaosWorkflows.browseWorkflows.tableData.showTheStatistics'
|
||||
)}
|
||||
</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
|
|||
|
|
@ -188,15 +188,15 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
{page === 1 ? (
|
||||
<div>
|
||||
<Typography className={classes.heading}>
|
||||
{t('analyticsDashboard.dataSourceForm.general')}
|
||||
{t('monitoringDashboard.dataSourceForm.general')}
|
||||
</Typography>
|
||||
<Typography className={classes.subHeading}>
|
||||
{t('analyticsDashboard.dataSourceForm.generalInfo')}
|
||||
{t('monitoringDashboard.dataSourceForm.generalInfo')}
|
||||
</Typography>
|
||||
<div className={classes.flexDisplay} style={{ width: '80%' }}>
|
||||
<div className={classes.inputDiv}>
|
||||
<InputField
|
||||
label={t('analyticsDashboard.dataSourceForm.name')}
|
||||
label={t('monitoringDashboard.dataSourceForm.name')}
|
||||
data-cy="inputDataSourceName"
|
||||
width="22.5rem"
|
||||
variant={
|
||||
|
|
@ -210,7 +210,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
</div>
|
||||
<div className={classes.inputDiv}>
|
||||
<InputField
|
||||
label={t('analyticsDashboard.dataSourceForm.dataSourceType')}
|
||||
label={t('monitoringDashboard.dataSourceForm.dataSourceType')}
|
||||
data-cy="inputDataSourceType"
|
||||
width="22.5rem"
|
||||
variant={
|
||||
|
|
@ -236,20 +236,20 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
variant="highlight"
|
||||
>
|
||||
<Typography className={classes.infoValue}>
|
||||
{t('analyticsDashboard.dataSourceForm.docsAndSetup')}
|
||||
{t('monitoringDashboard.dataSourceForm.docsAndSetup')}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
<div className={classes.horizontalLine} />
|
||||
<Typography className={classes.heading}>
|
||||
{t('analyticsDashboard.dataSourceForm.endPoint')}
|
||||
{t('monitoringDashboard.dataSourceForm.endPoint')}
|
||||
</Typography>
|
||||
<Typography className={classes.subHeading}>
|
||||
{t('analyticsDashboard.dataSourceForm.endPointInfo')}
|
||||
{t('monitoringDashboard.dataSourceForm.endPointInfo')}
|
||||
</Typography>
|
||||
<div className={classes.flexDisplay} style={{ width: '80%' }}>
|
||||
<div className={classes.inputDiv}>
|
||||
<InputField
|
||||
label={t('analyticsDashboard.dataSourceForm.url')}
|
||||
label={t('monitoringDashboard.dataSourceForm.url')}
|
||||
data-cy="inputDataSourceURL"
|
||||
width="22.5rem"
|
||||
variant={
|
||||
|
|
@ -261,7 +261,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
</div>
|
||||
<div className={classes.inputDiv}>
|
||||
<InputField
|
||||
label={t('analyticsDashboard.dataSourceForm.access')}
|
||||
label={t('monitoringDashboard.dataSourceForm.access')}
|
||||
data-cy="inputDataSourceAccess"
|
||||
width="22.5rem"
|
||||
variant={
|
||||
|
|
@ -279,10 +279,10 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
) : (
|
||||
<div>
|
||||
<Typography className={classes.heading}>
|
||||
{t('analyticsDashboard.dataSourceForm.authentication')}
|
||||
{t('monitoringDashboard.dataSourceForm.authentication')}
|
||||
</Typography>
|
||||
<Typography className={classes.subHeading}>
|
||||
{t('analyticsDashboard.dataSourceForm.authenticationInfo')}
|
||||
{t('monitoringDashboard.dataSourceForm.authenticationInfo')}
|
||||
</Typography>
|
||||
<FormGroup>
|
||||
<div className={classes.inputDivRadioButton}>
|
||||
|
|
@ -295,7 +295,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
name="noAuth"
|
||||
/>
|
||||
}
|
||||
label={t('analyticsDashboard.dataSourceForm.noAuth')}
|
||||
label={t('monitoringDashboard.dataSourceForm.noAuth')}
|
||||
/>
|
||||
<FormControlLabel
|
||||
className={classes.basicAuth}
|
||||
|
|
@ -307,7 +307,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
name="basicAuth"
|
||||
/>
|
||||
}
|
||||
label={t('analyticsDashboard.dataSourceForm.basicAuth')}
|
||||
label={t('monitoringDashboard.dataSourceForm.basicAuth')}
|
||||
/>
|
||||
<FormControlLabel
|
||||
className={classes.withCredentials}
|
||||
|
|
@ -320,7 +320,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
name="withCredentials"
|
||||
/>
|
||||
}
|
||||
label={t('analyticsDashboard.dataSourceForm.withCredentials')}
|
||||
label={t('monitoringDashboard.dataSourceForm.withCredentials')}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.inputDivRadioButton}>
|
||||
|
|
@ -334,7 +334,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
name="tlsClientAuth"
|
||||
/>
|
||||
}
|
||||
label={t('analyticsDashboard.dataSourceForm.tlsClientAuth')}
|
||||
label={t('monitoringDashboard.dataSourceForm.tlsClientAuth')}
|
||||
/>
|
||||
<FormControlLabel
|
||||
className={classes.withCACert}
|
||||
|
|
@ -347,7 +347,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
name="withCACert"
|
||||
/>
|
||||
}
|
||||
label={t('analyticsDashboard.dataSourceForm.withCACert')}
|
||||
label={t('monitoringDashboard.dataSourceForm.withCACert')}
|
||||
/>
|
||||
</div>
|
||||
</FormGroup>
|
||||
|
|
@ -357,7 +357,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
<div className={classes.flexDisplay} style={{ width: '55%' }}>
|
||||
<div className={classes.inputDiv}>
|
||||
<InputField
|
||||
label={t('analyticsDashboard.dataSourceForm.username')}
|
||||
label={t('monitoringDashboard.dataSourceForm.username')}
|
||||
data-cy="inputPrometheusUsername"
|
||||
width="14rem"
|
||||
variant={
|
||||
|
|
@ -371,7 +371,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
</div>
|
||||
<div className={classes.inputDiv}>
|
||||
<InputField
|
||||
label={t('analyticsDashboard.dataSourceForm.password')}
|
||||
label={t('monitoringDashboard.dataSourceForm.password')}
|
||||
type="password"
|
||||
data-cy="inputPrometheusPassword"
|
||||
width="14rem"
|
||||
|
|
@ -391,15 +391,15 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
<div />
|
||||
)}
|
||||
<Typography className={classes.heading}>
|
||||
{t('analyticsDashboard.dataSourceForm.configuration')}
|
||||
{t('monitoringDashboard.dataSourceForm.configuration')}
|
||||
</Typography>
|
||||
<Typography className={classes.subHeading}>
|
||||
{t('analyticsDashboard.dataSourceForm.configurationInfo')}
|
||||
{t('monitoringDashboard.dataSourceForm.configurationInfo')}
|
||||
</Typography>
|
||||
<div className={classes.flexDisplay} style={{ width: '80%' }}>
|
||||
<div className={classes.inputDiv}>
|
||||
<InputField
|
||||
label={t('analyticsDashboard.dataSourceForm.scrapeInterval')}
|
||||
label={t('monitoringDashboard.dataSourceForm.scrapeInterval')}
|
||||
data-cy="inputScrapeInterval"
|
||||
width="13.5rem"
|
||||
variant={
|
||||
|
|
@ -413,7 +413,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
</div>
|
||||
<div className={classes.inputDiv}>
|
||||
<InputField
|
||||
label={t('analyticsDashboard.dataSourceForm.queryTimeOut')}
|
||||
label={t('monitoringDashboard.dataSourceForm.queryTimeOut')}
|
||||
data-cy="inputQueryTimeout"
|
||||
width="13.5rem"
|
||||
variant={
|
||||
|
|
@ -427,7 +427,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
|
|||
</div>
|
||||
<div className={classes.inputDiv}>
|
||||
<InputField
|
||||
label={t('analyticsDashboard.dataSourceForm.httpMethod')}
|
||||
label={t('monitoringDashboard.dataSourceForm.httpMethod')}
|
||||
data-cy="inputHTTPMethod"
|
||||
width="13.5rem"
|
||||
variant={
|
||||
|
|
@ -184,7 +184,7 @@ const TableData: React.FC<TableDataProps> = ({
|
|||
selectedDataSourceName: data.ds_name,
|
||||
});
|
||||
history.push({
|
||||
pathname: '/analytics/datasource/configure',
|
||||
pathname: '/observability/datasource/configure',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
}}
|
||||
|
|
@ -200,7 +200,7 @@ const TableData: React.FC<TableDataProps> = ({
|
|||
data-cy="configureDashboard"
|
||||
className={classes.btnText}
|
||||
>
|
||||
{t('analyticsDashboard.dataSourceTable.configure')}
|
||||
{t('monitoringDashboard.dataSourceTable.configure')}
|
||||
</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
@ -223,7 +223,7 @@ const TableData: React.FC<TableDataProps> = ({
|
|||
data-cy="deleteDashboard"
|
||||
className={`${classes.btnText} ${classes.deleteText}`}
|
||||
>
|
||||
{t('analyticsDashboard.dataSourceTable.delete')}
|
||||
{t('monitoringDashboard.dataSourceTable.delete')}
|
||||
</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
@ -237,12 +237,12 @@ const TableData: React.FC<TableDataProps> = ({
|
|||
>
|
||||
<div className={classes.modal}>
|
||||
<Typography className={classes.modalHeading} align="left">
|
||||
{t('analyticsDashboard.dataSourceTable.modal.removeDataSource')}
|
||||
{t('monitoringDashboard.dataSourceTable.modal.removeDataSource')}
|
||||
</Typography>
|
||||
|
||||
<Typography className={classes.modalBodyText} align="left">
|
||||
{t(
|
||||
'analyticsDashboard.dataSourceTable.modal.removeDataSourceConfirmation'
|
||||
'monitoringDashboard.dataSourceTable.modal.removeDataSourceConfirmation'
|
||||
)}
|
||||
<b>
|
||||
<i>{` ${data.ds_name} `}</i>
|
||||
|
|
@ -258,7 +258,7 @@ const TableData: React.FC<TableDataProps> = ({
|
|||
className={classes.cancelButton}
|
||||
>
|
||||
<Typography className={classes.buttonText}>
|
||||
{t('analyticsDashboard.dataSourceTable.modal.cancel')}
|
||||
{t('monitoringDashboard.dataSourceTable.modal.cancel')}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
<ButtonFilled
|
||||
|
|
@ -271,7 +271,7 @@ const TableData: React.FC<TableDataProps> = ({
|
|||
<Typography
|
||||
className={`${classes.buttonText} ${classes.confirmButtonText}`}
|
||||
>
|
||||
{t('analyticsDashboard.dataSourceTable.modal.delete')}
|
||||
{t('monitoringDashboard.dataSourceTable.modal.delete')}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
</div>
|
||||
|
|
@ -38,7 +38,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
|
|||
<Typography
|
||||
className={`${classes.dataSourceNameHead} ${classes.dataSourceStatusHeadWithoutSort}`}
|
||||
>
|
||||
{t('analyticsDashboard.dataSourceTable.tableHead1')}
|
||||
{t('monitoringDashboard.dataSourceTable.tableHead1')}
|
||||
</Typography>
|
||||
</StyledTableCell>
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
|
|||
>
|
||||
<div className={classes.flexDisplay}>
|
||||
<Typography className={`${classes.dataSourceNameHead}`}>
|
||||
{t('analyticsDashboard.dataSourceTable.tableHead2')}
|
||||
{t('monitoringDashboard.dataSourceTable.tableHead2')}
|
||||
</Typography>
|
||||
<div className={classes.nameContentIcons}>
|
||||
<IconButton
|
||||
|
|
@ -86,7 +86,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
|
|||
<Typography
|
||||
className={`${classes.dataSourceNameHead} ${classes.dataSourceNameHeadWithoutSort}`}
|
||||
>
|
||||
{t('analyticsDashboard.dataSourceTable.tableHead3')}
|
||||
{t('monitoringDashboard.dataSourceTable.tableHead3')}
|
||||
</Typography>
|
||||
</StyledTableCell>
|
||||
|
||||
|
|
@ -94,14 +94,14 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
|
|||
<Typography
|
||||
className={`${classes.dataSourceNameHead} ${classes.dataSourceNameHeadWithoutSort}`}
|
||||
>
|
||||
{t('analyticsDashboard.dataSourceTable.tableHead4')}
|
||||
{t('monitoringDashboard.dataSourceTable.tableHead4')}
|
||||
</Typography>
|
||||
</StyledTableCell>
|
||||
|
||||
<StyledTableCell className={classes.headSpacing}>
|
||||
<div className={classes.flexDisplay}>
|
||||
<Typography className={classes.dataSourceNameHead}>
|
||||
{t('analyticsDashboard.dataSourceTable.tableHead5')}
|
||||
{t('monitoringDashboard.dataSourceTable.tableHead5')}
|
||||
</Typography>
|
||||
<div className={classes.nameContentIcons}>
|
||||
<IconButton
|
||||
|
|
@ -84,7 +84,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
<div className={classes.search}>
|
||||
<Search
|
||||
id="input-with-icon-textfield"
|
||||
placeholder={t('analyticsDashboard.dataSourceTable.search')}
|
||||
placeholder={t('monitoringDashboard.dataSourceTable.search')}
|
||||
value={searchToken}
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
|
|
@ -98,10 +98,10 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
className={`${classes.formControl} ${classes.dataSourceStatusForm}`}
|
||||
>
|
||||
<InputLabel className={classes.selectText}>
|
||||
{t('analyticsDashboard.dataSourceTable.tableHead1')}
|
||||
{t('monitoringDashboard.dataSourceTable.tableHead1')}
|
||||
</InputLabel>
|
||||
<Select
|
||||
label={t('analyticsDashboard.dataSourceTable.tableHead1')}
|
||||
label={t('monitoringDashboard.dataSourceTable.tableHead1')}
|
||||
value={status}
|
||||
onChange={handleStatusChange}
|
||||
className={classes.selectText}
|
||||
|
|
@ -121,11 +121,11 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
}}
|
||||
>
|
||||
<MenuItem value="All" className={classes.menuListItem}>
|
||||
{t('analyticsDashboard.dataSourceTable.all')}
|
||||
{t('monitoringDashboard.dataSourceTable.all')}
|
||||
</MenuItem>
|
||||
{statuses.map((availableStatus: string) => (
|
||||
<MenuItem
|
||||
key={`${availableStatus}-analyticsDashboard-dataSource-toolbar`}
|
||||
key={`${availableStatus}-monitoringDashboard-dataSource-toolbar`}
|
||||
value={availableStatus}
|
||||
className={classes.menuListItem}
|
||||
>
|
||||
|
|
@ -146,7 +146,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
>
|
||||
<Typography className={classes.displayDate}>
|
||||
{range.startDate === ' '
|
||||
? t('analyticsDashboard.dataSourceTable.selectPeriod')
|
||||
? t('monitoringDashboard.dataSourceTable.selectPeriod')
|
||||
: `${range.startDate.split(' ')[2]} ${
|
||||
range.startDate.split(' ')[1]
|
||||
} ${range.startDate.split(' ')[3]} - ${
|
||||
|
|
@ -204,19 +204,19 @@ const DataSourceTable: React.FC = () => {
|
|||
<div className={classes.root}>
|
||||
<div className={classes.tabHeaderFlex}>
|
||||
<Typography className={classes.tabHeaderText}>
|
||||
{t('analyticsDashboard.dataSourceTable.dataSources')}
|
||||
{t('monitoringDashboard.dataSourceTable.dataSources')}
|
||||
</Typography>
|
||||
<ButtonFilled
|
||||
onClick={() =>
|
||||
history.push({
|
||||
pathname: '/analytics/datasource/create',
|
||||
pathname: '/observability/datasource/create',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
})
|
||||
}
|
||||
className={classes.addButton}
|
||||
>
|
||||
<Typography className={classes.buttonText}>
|
||||
{t('analyticsDashboard.dataSourceTable.addDataSource')}
|
||||
{t('monitoringDashboard.dataSourceTable.addDataSource')}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
</div>
|
||||
|
|
@ -285,7 +285,7 @@ const DataSourceTable: React.FC = () => {
|
|||
<TableRow>
|
||||
<TableCell colSpan={6}>
|
||||
<Typography align="center">
|
||||
{t('analyticsDashboard.dataSourceTable.fetchError')}
|
||||
{t('monitoringDashboard.dataSourceTable.fetchError')}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -297,7 +297,7 @@ const DataSourceTable: React.FC = () => {
|
|||
>
|
||||
<Loader />
|
||||
<Typography align="center">
|
||||
{t('analyticsDashboard.dataSourceTable.loading')}
|
||||
{t('monitoringDashboard.dataSourceTable.loading')}
|
||||
</Typography>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
|
@ -312,7 +312,7 @@ const DataSourceTable: React.FC = () => {
|
|||
alt="Data Source"
|
||||
/>
|
||||
<Typography className={classes.noRecordsText}>
|
||||
{t('analyticsDashboard.dataSourceTable.noRecords')}
|
||||
{t('monitoringDashboard.dataSourceTable.noRecords')}
|
||||
</Typography>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
|
@ -352,7 +352,7 @@ const DataSourceTable: React.FC = () => {
|
|||
<TableRow>
|
||||
<TableCell colSpan={6}>
|
||||
<Typography align="center">
|
||||
{t('analyticsDashboard.dataSourceTable.noRecords')}
|
||||
{t('monitoringDashboard.dataSourceTable.noRecords')}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -398,8 +398,8 @@ const DataSourceTable: React.FC = () => {
|
|||
severity={success ? 'success' : 'error'}
|
||||
>
|
||||
{success
|
||||
? t('analyticsDashboard.dataSourceTable.deletionSuccess')
|
||||
: t('analyticsDashboard.dataSourceTable.deletionError')}
|
||||
? t('monitoringDashboard.dataSourceTable.deletionSuccess')
|
||||
: t('monitoringDashboard.dataSourceTable.deletionError')}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
)}
|
||||
|
|
@ -418,7 +418,7 @@ const DataSourceTable: React.FC = () => {
|
|||
<div className={classes.drawerContent}>
|
||||
<div className={classes.flexContainer}>
|
||||
<Typography className={classes.drawerHeading} align="left">
|
||||
{t('analyticsDashboard.dataSourceTable.delete')}
|
||||
{t('monitoringDashboard.dataSourceTable.delete')}
|
||||
<b>
|
||||
<i>{` ${forceDeleteVars.dsName} `}</i>
|
||||
</b>
|
||||
|
|
@ -432,11 +432,11 @@ const DataSourceTable: React.FC = () => {
|
|||
</div>
|
||||
<blockquote className={classes.warningBlock}>
|
||||
<Typography className={classes.warningText} align="left">
|
||||
{t('analyticsDashboard.dataSourceTable.warning.text')}
|
||||
{t('monitoringDashboard.dataSourceTable.warning.text')}
|
||||
</Typography>
|
||||
</blockquote>
|
||||
<Typography className={classes.drawerBodyText} align="left">
|
||||
{t('analyticsDashboard.dataSourceTable.warning.info')}
|
||||
{t('monitoringDashboard.dataSourceTable.warning.info')}
|
||||
</Typography>
|
||||
<Typography
|
||||
className={classes.drawerBodyText}
|
||||
|
|
@ -444,7 +444,7 @@ const DataSourceTable: React.FC = () => {
|
|||
align="left"
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.dataSourceTable.warning.connectedDashboards'
|
||||
'monitoringDashboard.dataSourceTable.warning.connectedDashboards'
|
||||
)}
|
||||
</Typography>
|
||||
<div className={classes.dashboardsList}>
|
||||
|
|
@ -469,9 +469,9 @@ const DataSourceTable: React.FC = () => {
|
|||
>
|
||||
<Typography className={classes.buttonText}>
|
||||
{showAllDashboards
|
||||
? t('analyticsDashboard.dataSourceTable.warning.showLess')
|
||||
? t('monitoringDashboard.dataSourceTable.warning.showLess')
|
||||
: `+${forceDeleteVars.connectedDashboards.length - 3} ${t(
|
||||
'analyticsDashboard.dataSourceTable.warning.dashboards'
|
||||
'monitoringDashboard.dataSourceTable.warning.dashboards'
|
||||
)}`}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
|
|
@ -482,7 +482,7 @@ const DataSourceTable: React.FC = () => {
|
|||
className={classes.cancelButton}
|
||||
>
|
||||
<Typography className={classes.buttonText}>
|
||||
{t('analyticsDashboard.dataSourceTable.modal.cancel')}
|
||||
{t('monitoringDashboard.dataSourceTable.modal.cancel')}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
<ButtonFilled
|
||||
|
|
@ -501,7 +501,7 @@ const DataSourceTable: React.FC = () => {
|
|||
<Typography
|
||||
className={`${classes.buttonText} ${classes.confirmButtonText}`}
|
||||
>
|
||||
{t('analyticsDashboard.dataSourceTable.modal.forceDelete')}
|
||||
{t('monitoringDashboard.dataSourceTable.modal.forceDelete')}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
</div>
|
||||
|
|
@ -109,10 +109,10 @@ const ChaosAccordion: React.FC<ChaosAccordionProps> = ({
|
|||
<Typography className={classes.chaosHelperText}>
|
||||
{!chaosTableOpen
|
||||
? t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.showTable'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.showTable'
|
||||
)
|
||||
: t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.hideTable'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.hideTable'
|
||||
)}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
|
|
@ -201,7 +201,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
<TextField
|
||||
{...params}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.metric'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.metric'
|
||||
)}
|
||||
variant="outlined"
|
||||
size="medium"
|
||||
|
|
@ -245,7 +245,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
>
|
||||
<InputLabel className={classes.selectTextLabel}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.keys'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.keys'
|
||||
)}
|
||||
</InputLabel>
|
||||
<Select
|
||||
|
|
@ -292,7 +292,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
setUpdate(true);
|
||||
}}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.selectKey'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.selectKey'
|
||||
)}
|
||||
className={classes.selectText}
|
||||
disabled={
|
||||
|
|
@ -365,10 +365,10 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
}
|
||||
options={getAvailableValues(selectedLabel ?? '')}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.values'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.values'
|
||||
)}
|
||||
placeholder={`${t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.addValue'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.addValue'
|
||||
)}`}
|
||||
disableCloseOnSelect
|
||||
disableClearable={false}
|
||||
|
|
@ -385,7 +385,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
value: option.name,
|
||||
score: 1,
|
||||
meta: t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.seriesName'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.seriesName'
|
||||
),
|
||||
})) ?? []
|
||||
}
|
||||
|
|
@ -396,10 +396,10 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
score: 2,
|
||||
meta: localQuery.base_query
|
||||
? `${t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.labelFor'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.labelFor'
|
||||
)} ${localQuery.base_query}`
|
||||
: t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.label'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.label'
|
||||
),
|
||||
})
|
||||
) ?? []
|
||||
|
|
@ -443,7 +443,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
<div className={`${classes.flex} ${classes.legend}`}>
|
||||
<InputField
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.legend'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.legend'
|
||||
)}
|
||||
data-cy="queryLegend"
|
||||
fullWidth
|
||||
|
|
@ -453,7 +453,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
/>
|
||||
<InfoTooltip
|
||||
value={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.legendInfo'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.legendInfo'
|
||||
)}
|
||||
className={classes.infoIcon}
|
||||
/>
|
||||
|
|
@ -15,7 +15,7 @@ import {
|
|||
import {
|
||||
DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_LEGEND,
|
||||
DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_RESOLUTION,
|
||||
} from '../../../../pages/ApplicationDashboard/constants';
|
||||
} from '../../../../pages/MonitoringDashboard/constants';
|
||||
import QueryEditor from './QueryEditor';
|
||||
import useStyles from './styles';
|
||||
|
||||
|
|
@ -133,10 +133,10 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
|
|||
>
|
||||
{success
|
||||
? t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.updateSuccess'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.updateSuccess'
|
||||
)
|
||||
: t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.updateError'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.updateError'
|
||||
)}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
|
|
@ -157,7 +157,7 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
|
|||
<div className={classes.flexContainer}>
|
||||
<Typography className={classes.drawerHeading} align="left">
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.heading'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.heading'
|
||||
)}
|
||||
</Typography>
|
||||
<ButtonOutlined
|
||||
|
|
@ -172,7 +172,7 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
|
|||
index={0}
|
||||
promQuery={{
|
||||
queryid: t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.eventQuery'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.eventQuery'
|
||||
),
|
||||
prom_query_name: chaosEventQueryTemplate,
|
||||
legend: DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_LEGEND,
|
||||
|
|
@ -195,7 +195,7 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
|
|||
index={1}
|
||||
promQuery={{
|
||||
queryid: t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.verdictQuery'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.verdictQuery'
|
||||
),
|
||||
prom_query_name: chaosVerdictQueryTemplate,
|
||||
legend: DEFAULT_CHAOS_EVENT_AND_VERDICT_PROMETHEUS_QUERY_LEGEND,
|
||||
|
|
@ -222,7 +222,7 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
|
|||
>
|
||||
<Typography className={classes.buttonText}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.cancel'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.cancel'
|
||||
)}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
|
|
@ -246,7 +246,7 @@ const ChaosAnnotationsEditor: React.FC<ChaosAnnotationsEditorProps> = ({
|
|||
className={`${classes.buttonText} ${classes.confirmButtonText}`}
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosAnnotationsEditor.saveChanges'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosAnnotationsEditor.saveChanges'
|
||||
)}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
|
|
@ -8,7 +8,7 @@ import {
|
|||
CHAOS_EXPERIMENT_VERDICT_FAIL,
|
||||
CHAOS_EXPERIMENT_VERDICT_FAILED_TO_INJECT,
|
||||
CHAOS_EXPERIMENT_VERDICT_PASS,
|
||||
} from '../../../../pages/ApplicationDashboard/constants';
|
||||
} from '../../../../pages/MonitoringDashboard/constants';
|
||||
import useStyles from './styles';
|
||||
|
||||
interface TableDataProps {
|
||||
|
|
@ -36,21 +36,21 @@ const TableHeader: React.FC<TableHeaderProps> = ({
|
|||
<StyledTableCell className={classes.headSpacing}>
|
||||
<div className={classes.nameHead}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead1'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead1'
|
||||
)}
|
||||
</div>
|
||||
</StyledTableCell>
|
||||
<StyledTableCell className={classes.headSpacing}>
|
||||
<div className={classes.nameHead}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead2'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead2'
|
||||
)}
|
||||
</div>
|
||||
</StyledTableCell>
|
||||
<StyledTableCell className={classes.headSpacing}>
|
||||
<div className={classes.nameHead}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead3'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead3'
|
||||
)}
|
||||
</div>
|
||||
</StyledTableCell>
|
||||
|
|
@ -58,12 +58,12 @@ const TableHeader: React.FC<TableHeaderProps> = ({
|
|||
<div className={classes.nameHead}>
|
||||
<div className={classes.verdictText}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead4.title'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead4.title'
|
||||
)}
|
||||
</div>
|
||||
<InfoTooltip
|
||||
value={t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead4.infoText'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead4.infoText'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -69,7 +69,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
<Search
|
||||
id="input-with-icon-textfield"
|
||||
placeholder={t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.search'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.search'
|
||||
)}
|
||||
value={searchToken}
|
||||
onChange={handleSearch}
|
||||
|
|
@ -82,12 +82,12 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
<FormControl variant="outlined" className={classes.formControl}>
|
||||
<InputLabel className={classes.selectText}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead2'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead2'
|
||||
)}
|
||||
</InputLabel>
|
||||
<Select
|
||||
label={t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead2'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead2'
|
||||
)}
|
||||
value={workflow}
|
||||
onChange={handleWorkflowChange}
|
||||
|
|
@ -108,7 +108,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
}}
|
||||
>
|
||||
<MenuItem value="All" className={classes.menuListItem}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.chaosTable.all')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.chaosTable.all')}
|
||||
</MenuItem>
|
||||
{workflows.map((availableWorkflow: string) => (
|
||||
<MenuItem
|
||||
|
|
@ -125,12 +125,12 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
<FormControl variant="outlined" className={classes.formControl}>
|
||||
<InputLabel className={classes.selectText}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead3'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead3'
|
||||
)}
|
||||
</InputLabel>
|
||||
<Select
|
||||
label={t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead3'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead3'
|
||||
)}
|
||||
value={context}
|
||||
onChange={handleContextChange}
|
||||
|
|
@ -151,7 +151,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
}}
|
||||
>
|
||||
<MenuItem value="All" className={classes.menuListItem}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.chaosTable.all')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.chaosTable.all')}
|
||||
</MenuItem>
|
||||
{contexts.map((availableContext: string) => (
|
||||
<MenuItem
|
||||
|
|
@ -171,12 +171,12 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
>
|
||||
<InputLabel className={classes.selectText}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead4.title'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead4.title'
|
||||
)}
|
||||
</InputLabel>
|
||||
<Select
|
||||
label={t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.tableHead4.title'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.tableHead4.title'
|
||||
)}
|
||||
value={verdict}
|
||||
onChange={handleVerdictChange}
|
||||
|
|
@ -197,7 +197,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
}}
|
||||
>
|
||||
<MenuItem value="All" className={classes.menuListItem}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.chaosTable.all')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.chaosTable.all')}
|
||||
</MenuItem>
|
||||
{verdicts.map((availableVerdict: string) => (
|
||||
<MenuItem
|
||||
|
|
@ -235,7 +235,7 @@ const ChaosTable: React.FC<ChaosTableProps> = ({
|
|||
<Loader />
|
||||
<Typography align="center">
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.loading'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.loading'
|
||||
)}
|
||||
</Typography>
|
||||
</div>
|
||||
|
|
@ -255,7 +255,7 @@ const ChaosTable: React.FC<ChaosTableProps> = ({
|
|||
className={classes.noRecordsText}
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.chaosTable.noRecords'
|
||||
'monitoringDashboard.monitoringDashboardPage.chaosTable.noRecords'
|
||||
)}
|
||||
</Typography>
|
||||
</div>
|
||||
|
|
@ -20,7 +20,7 @@ import {
|
|||
import {
|
||||
DEFAULT_REFRESH_RATE,
|
||||
DEFAULT_RELATIVE_TIME_RANGE,
|
||||
} from '../../../../pages/ApplicationDashboard/constants';
|
||||
} from '../../../../pages/MonitoringDashboard/constants';
|
||||
import useActions from '../../../../redux/actions';
|
||||
import * as DashboardActions from '../../../../redux/actions/dashboards';
|
||||
import { getProjectID } from '../../../../utils/getSearchParams';
|
||||
|
|
@ -155,7 +155,7 @@ const DashboardCloneModal: React.FC<DashboardCloneModalProps> = ({
|
|||
<div className={classes.modal}>
|
||||
<Typography className={classes.modalHeading} align="left">
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.dashboardCloneModal.heading'
|
||||
'monitoringDashboard.monitoringDashboardPage.dashboardCloneModal.heading'
|
||||
)}
|
||||
</Typography>
|
||||
<InputField
|
||||
|
|
@ -175,7 +175,7 @@ const DashboardCloneModal: React.FC<DashboardCloneModalProps> = ({
|
|||
>
|
||||
<Typography className={classes.buttonText}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.dashboardCloneModal.cancel'
|
||||
'monitoringDashboard.monitoringDashboardPage.dashboardCloneModal.cancel'
|
||||
)}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
|
|
@ -184,7 +184,7 @@ const DashboardCloneModal: React.FC<DashboardCloneModalProps> = ({
|
|||
className={`${classes.buttonText} ${classes.okButtonText}`}
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.dashboardCloneModal.ok'
|
||||
'monitoringDashboard.monitoringDashboardPage.dashboardCloneModal.ok'
|
||||
)}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
|
|
@ -198,7 +198,7 @@ const DashboardCloneModal: React.FC<DashboardCloneModalProps> = ({
|
|||
>
|
||||
<Alert onClose={() => setIsAlertOpen(false)} severity="error">
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.dashboardCloneModal.error'
|
||||
'monitoringDashboard.monitoringDashboardPage.dashboardCloneModal.error'
|
||||
)}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
|
|
@ -37,11 +37,11 @@ const DataSourceInactiveModal: React.FC<DataSourceInactiveModalProps> = ({
|
|||
<div className={classes.modal}>
|
||||
<Typography className={classes.modalHeading} align="left">
|
||||
{`${t(
|
||||
'analyticsDashboard.monitoringDashboardPage.dataSourceIs'
|
||||
'monitoringDashboard.monitoringDashboardPage.dataSourceIs'
|
||||
)} ${dataSourceStatus}`}
|
||||
</Typography>
|
||||
<Typography align="left" className={classes.modalBody}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.dataSourceError')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.dataSourceError')}
|
||||
</Typography>
|
||||
<div className={classes.flexButtons}>
|
||||
<ButtonOutlined
|
||||
|
|
@ -51,7 +51,7 @@ const DataSourceInactiveModal: React.FC<DataSourceInactiveModalProps> = ({
|
|||
activePanelID: '',
|
||||
});
|
||||
history.push({
|
||||
pathname: '/analytics/dashboard/configure',
|
||||
pathname: '/observability/dashboard/configure',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
}}
|
||||
|
|
@ -63,17 +63,17 @@ const DataSourceInactiveModal: React.FC<DataSourceInactiveModalProps> = ({
|
|||
/>
|
||||
<Typography className={classes.buttonText}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.reConfigureDashboard'
|
||||
'monitoringDashboard.monitoringDashboardPage.reConfigureDashboard'
|
||||
)}
|
||||
</Typography>
|
||||
</ButtonOutlined>
|
||||
<Typography align="left" className={classes.modalBodyText}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.or')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.or')}
|
||||
</Typography>
|
||||
<ButtonOutlined
|
||||
onClick={() =>
|
||||
history.push({
|
||||
pathname: '/analytics/datasource/configure',
|
||||
pathname: '/observability/datasource/configure',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
})
|
||||
}
|
||||
|
|
@ -84,7 +84,9 @@ const DataSourceInactiveModal: React.FC<DataSourceInactiveModalProps> = ({
|
|||
className={classes.buttonIcon}
|
||||
/>
|
||||
<Typography className={classes.buttonText}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.updateDataSource')}
|
||||
{t(
|
||||
'monitoringDashboard.monitoringDashboardPage.updateDataSource'
|
||||
)}
|
||||
</Typography>
|
||||
</ButtonOutlined>
|
||||
</div>
|
||||
|
|
@ -69,20 +69,20 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
|
|||
<div className={classes.root}>
|
||||
<div className={classes.header}>
|
||||
<Typography className={classes.headerText}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.infoDropdown.header')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.infoDropdown.header')}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes.body}>
|
||||
<div className={classes.infoSectionElement}>
|
||||
<Typography className={classes.sectionHeader}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.infoDropdown.subHeading1'
|
||||
'monitoringDashboard.monitoringDashboardPage.infoDropdown.subHeading1'
|
||||
)}
|
||||
</Typography>
|
||||
<div className={classes.dashboardMetaDataItem}>
|
||||
<Typography className={classes.infoKey}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.infoDropdown.metaData1'
|
||||
'monitoringDashboard.monitoringDashboardPage.infoDropdown.metaData1'
|
||||
)}
|
||||
</Typography>
|
||||
<Typography className={classes.infoValue}>
|
||||
|
|
@ -92,7 +92,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
|
|||
<div className={classes.dashboardMetaDataItem}>
|
||||
<Typography className={classes.infoKey}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.infoDropdown.metaData2'
|
||||
'monitoringDashboard.monitoringDashboardPage.infoDropdown.metaData2'
|
||||
)}
|
||||
</Typography>
|
||||
<div className={classes.iconWithTextDiv}>
|
||||
|
|
@ -113,7 +113,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
|
|||
<div className={classes.dashboardMetaDataItem}>
|
||||
<Typography className={classes.infoKey}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.infoDropdown.metaData3'
|
||||
'monitoringDashboard.monitoringDashboardPage.infoDropdown.metaData3'
|
||||
)}
|
||||
</Typography>
|
||||
<TextButton
|
||||
|
|
@ -133,7 +133,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
|
|||
<div className={classes.dashboardMetaDataItem}>
|
||||
<Typography className={classes.infoKey}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.infoDropdown.metaData4'
|
||||
'monitoringDashboard.monitoringDashboardPage.infoDropdown.metaData4'
|
||||
)}
|
||||
</Typography>
|
||||
<Typography className={classes.infoValue}>
|
||||
|
|
@ -144,7 +144,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
|
|||
<div className={classes.infoSectionElement}>
|
||||
<Typography className={classes.sectionHeader}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.infoDropdown.subHeading2'
|
||||
'monitoringDashboard.monitoringDashboardPage.infoDropdown.subHeading2'
|
||||
)}
|
||||
</Typography>
|
||||
<FormGroupApplicationsGrid key="application-group">
|
||||
|
|
@ -154,7 +154,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
|
|||
<div className={classes.namespaceBox}>
|
||||
<Typography className={classes.infoKey}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.infoDropdown.infoKeyNamespace'
|
||||
'monitoringDashboard.monitoringDashboardPage.infoDropdown.infoKeyNamespace'
|
||||
)}
|
||||
</Typography>
|
||||
<Typography className={classes.infoValue}>
|
||||
|
|
@ -192,7 +192,7 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
|
|||
<div className={classes.infoSectionElement}>
|
||||
<Typography className={classes.sectionHeader}>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.infoDropdown.subHeading3'
|
||||
'monitoringDashboard.monitoringDashboardPage.infoDropdown.subHeading3'
|
||||
)}
|
||||
</Typography>
|
||||
<FormGroupGrid key="metric-group">
|
||||
|
|
@ -54,7 +54,7 @@ const DashboardPanel: React.FC<GraphPanelProps> = ({
|
|||
<div className={classes.wrapperIcons}>
|
||||
{viewEventMetric ? (
|
||||
<ToolTip
|
||||
title={`${t('analyticsDashboard.toolTip.hideChaosMetric')}`}
|
||||
title={`${t('monitoringDashboard.toolTip.hideChaosMetric')}`}
|
||||
>
|
||||
<IconButton
|
||||
className={classes.panelIconButton}
|
||||
|
|
@ -67,7 +67,7 @@ const DashboardPanel: React.FC<GraphPanelProps> = ({
|
|||
</ToolTip>
|
||||
) : (
|
||||
<ToolTip
|
||||
title={`${t('analyticsDashboard.toolTip.viewChaosMetric')}`}
|
||||
title={`${t('monitoringDashboard.toolTip.viewChaosMetric')}`}
|
||||
>
|
||||
<IconButton
|
||||
className={classes.panelIconButton}
|
||||
|
|
@ -87,14 +87,14 @@ const DashboardPanel: React.FC<GraphPanelProps> = ({
|
|||
activePanelID: panel_id,
|
||||
});
|
||||
history.push({
|
||||
pathname: '/analytics/dashboard/configure',
|
||||
pathname: '/observability/dashboard/configure',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Edit className={classes.panelIcon} />
|
||||
</IconButton>
|
||||
<ToolTip title={`${t('analyticsDashboard.toolTip.popout')}`}>
|
||||
<ToolTip title={`${t('monitoringDashboard.toolTip.popout')}`}>
|
||||
<IconButton
|
||||
className={classes.panelIconButton}
|
||||
onClick={() => {
|
||||
|
|
@ -17,8 +17,8 @@ import { RangeType } from '../../../../models/dashboardsData';
|
|||
import {
|
||||
INVALID_DATE,
|
||||
INVALID_RELATIVE_TIME_RANGE,
|
||||
} from '../../../../pages/ApplicationDashboard/constants';
|
||||
import refreshData from '../../../../pages/ApplicationDashboard/refreshData';
|
||||
} from '../../../../pages/MonitoringDashboard/constants';
|
||||
import refreshData from '../../../../pages/MonitoringDashboard/refreshData';
|
||||
import useStyles, { useOutlinedInputStyles } from './styles';
|
||||
|
||||
interface RefreshObjectType {
|
||||
|
|
@ -116,7 +116,7 @@ const ToolBar: React.FC<ToolBarProps> = ({
|
|||
return (
|
||||
<div className={classes.headerDiv}>
|
||||
<Typography className={classes.headerInfoText}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.headerInfoText')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.headerInfoText')}
|
||||
</Typography>
|
||||
<div className={classes.controls}>
|
||||
<div ref={dateRangeSelectorRef}>
|
||||
|
|
@ -135,13 +135,13 @@ const ToolBar: React.FC<ToolBarProps> = ({
|
|||
{range.startDate === INVALID_DATE &&
|
||||
range.endDate === INVALID_DATE
|
||||
? `${t(
|
||||
'analyticsDashboard.monitoringDashboardPage.rangeSelector.last30Mins'
|
||||
'monitoringDashboard.monitoringDashboardPage.rangeSelector.last30Mins'
|
||||
)}`
|
||||
: `${moment
|
||||
.unix(Number(range.startDate))
|
||||
.format('YYYY-MM-DD HH:mm:SS')}
|
||||
${t(
|
||||
'analyticsDashboard.monitoringDashboardPage.rangeSelector.to'
|
||||
'monitoringDashboard.monitoringDashboardPage.rangeSelector.to'
|
||||
)}
|
||||
${moment
|
||||
.unix(Number(range.endDate))
|
||||
|
|
@ -186,7 +186,7 @@ const ToolBar: React.FC<ToolBarProps> = ({
|
|||
renderValue={() => (
|
||||
<div>
|
||||
{t(
|
||||
'analyticsDashboard.monitoringDashboardPage.refresh.heading'
|
||||
'monitoringDashboard.monitoringDashboardPage.refresh.heading'
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -166,7 +166,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
|
|||
className={classes.icon}
|
||||
/>
|
||||
<Typography className={classes.infoText}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.infoButtonText')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.infoButtonText')}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
) : (
|
||||
|
|
@ -183,7 +183,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
|
|||
className={classes.icon}
|
||||
/>
|
||||
<Typography className={classes.infoText}>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.infoButtonText')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.infoButtonText')}
|
||||
</Typography>
|
||||
</ButtonOutlined>
|
||||
)}
|
||||
|
|
@ -253,7 +253,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
|
|||
activePanelID: '',
|
||||
});
|
||||
history.push({
|
||||
pathname: '/analytics/dashboard/configure',
|
||||
pathname: '/observability/dashboard/configure',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
}}
|
||||
|
|
@ -269,7 +269,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
|
|||
data-cy="optionsConfigureDashboard"
|
||||
className={classes.btnText}
|
||||
>
|
||||
{t('analyticsDashboard.applicationDashboardTable.configure')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.configure')}
|
||||
</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
@ -291,7 +291,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
|
|||
data-cy="optionsCopyDashboard"
|
||||
className={classes.btnText}
|
||||
>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.options.clone')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.options.clone')}
|
||||
</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
@ -311,7 +311,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
|
|||
data-cy="optionsDownloadDashboard"
|
||||
className={classes.btnText}
|
||||
>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.options.json')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.options.json')}
|
||||
</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
@ -332,7 +332,7 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
|
|||
data-cy="optionsExportDashboard"
|
||||
className={classes.btnText}
|
||||
>
|
||||
{t('analyticsDashboard.monitoringDashboardPage.options.pdf')}
|
||||
{t('monitoringDashboard.monitoringDashboardPage.options.pdf')}
|
||||
</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
@ -48,10 +48,10 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
|
|||
const classes = useStyles();
|
||||
const { t } = useTranslation();
|
||||
const stepsArray: string[] = [
|
||||
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step1')}`,
|
||||
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step2')}`,
|
||||
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step3')}`,
|
||||
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step4')}`,
|
||||
`${t('monitoringDashboard.monitoringDashboards.stepper.steps.step1')}`,
|
||||
`${t('monitoringDashboard.monitoringDashboards.stepper.steps.step2')}`,
|
||||
`${t('monitoringDashboard.monitoringDashboards.stepper.steps.step3')}`,
|
||||
`${t('monitoringDashboard.monitoringDashboards.stepper.steps.step4')}`,
|
||||
];
|
||||
const childRef = useRef<ChildRef>();
|
||||
const [loading, setLoading] = React.useState<boolean>(false);
|
||||
|
|
@ -102,16 +102,16 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
|
|||
(step: string) =>
|
||||
step !==
|
||||
`${t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.steps.step1'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.steps.step1'
|
||||
)}` &&
|
||||
step !==
|
||||
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step3')}`
|
||||
`${t('monitoringDashboard.monitoringDashboards.stepper.steps.step3')}`
|
||||
);
|
||||
} else if (dashboardVars.dashboardTypeID === 'custom') {
|
||||
steps = steps.filter(
|
||||
(step: string) =>
|
||||
step !==
|
||||
`${t('analyticsDashboard.applicationDashboards.stepper.steps.step3')}`
|
||||
`${t('monitoringDashboard.monitoringDashboards.stepper.steps.step3')}`
|
||||
);
|
||||
}
|
||||
// Checks if the button is in loading state or not
|
||||
|
|
@ -253,7 +253,7 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
|
|||
>
|
||||
<Typography>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.buttons.back'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.buttons.back'
|
||||
)}
|
||||
</Typography>
|
||||
</ButtonOutlined>
|
||||
|
|
@ -269,14 +269,14 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
|
|||
<Typography className={classes.buttonText}>
|
||||
{!loading
|
||||
? `${t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.buttons.saveChanges'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.buttons.saveChanges'
|
||||
)}`
|
||||
: configure
|
||||
? `${t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.buttons.status.updating'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.buttons.status.updating'
|
||||
)}`
|
||||
: `${t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.buttons.status.creating'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.buttons.status.creating'
|
||||
)}`}
|
||||
</Typography>
|
||||
{loading && <Loader size={20} />}
|
||||
|
|
@ -292,7 +292,7 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
|
|||
>
|
||||
<Typography>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.buttons.back'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.buttons.back'
|
||||
)}
|
||||
</Typography>
|
||||
</ButtonOutlined>
|
||||
|
|
@ -300,7 +300,7 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
|
|||
<ButtonFilled onClick={() => handleNext()} disabled={disabledNext}>
|
||||
<Typography>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.buttons.next'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.buttons.next'
|
||||
)}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
|
|
@ -346,15 +346,15 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
|
|||
case !configure ? 0 : -1:
|
||||
if (getProjectRole() === 'Viewer') {
|
||||
return t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.errors.step1.messageViewer'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.errors.step1.messageViewer'
|
||||
);
|
||||
}
|
||||
return t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.errors.step1.message'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.errors.step1.message'
|
||||
);
|
||||
case !configure ? 1 : 0:
|
||||
return t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.errors.step2.messageViewer'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.errors.step2.messageViewer'
|
||||
);
|
||||
case !configure
|
||||
? dashboardVars.dashboardTypeID !== 'custom'
|
||||
|
|
@ -362,7 +362,7 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
|
|||
: -1
|
||||
: -1:
|
||||
return t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.errors.step3.message'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.errors.step3.message'
|
||||
);
|
||||
case !configure
|
||||
? dashboardVars.dashboardTypeID !== 'custom'
|
||||
|
|
@ -371,10 +371,10 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
|
|||
: 1:
|
||||
return configure
|
||||
? t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.errors.step4.messageConfigure'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.errors.step4.messageConfigure'
|
||||
)
|
||||
: t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.errors.step4.messageCreate'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.errors.step4.messageCreate'
|
||||
);
|
||||
default:
|
||||
return '';
|
||||
|
|
@ -399,9 +399,9 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
|
|||
<Row justifyContent="space-between">
|
||||
<Typography className={classes.header}>
|
||||
{!configure
|
||||
? t('analyticsDashboard.applicationDashboards.createHeader')
|
||||
? t('monitoringDashboard.monitoringDashboards.createHeader')
|
||||
: `${t(
|
||||
'analyticsDashboard.applicationDashboards.configureHeader'
|
||||
'monitoringDashboard.monitoringDashboards.configureHeader'
|
||||
)} / ${dashboardVars.name}`}
|
||||
</Typography>
|
||||
<ControlButton />
|
||||
|
|
@ -432,14 +432,14 @@ const DashboardStepper: React.FC<DashboardStepperProps> = ({
|
|||
<Typography>
|
||||
{!loading
|
||||
? `${t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.buttons.saveChanges'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.buttons.saveChanges'
|
||||
)}`
|
||||
: configure
|
||||
? `${t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.buttons.status.updating'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.buttons.status.updating'
|
||||
)}`
|
||||
: `${t(
|
||||
'analyticsDashboard.applicationDashboards.stepper.buttons.status.creating'
|
||||
'monitoringDashboard.monitoringDashboards.stepper.buttons.status.creating'
|
||||
)}`}
|
||||
</Typography>
|
||||
</>
|
||||
|
|
@ -79,7 +79,7 @@ const DashboardCards: React.FC<DashboardCardsProps> = ({
|
|||
<div className={classes.modal}>
|
||||
<Typography className={classes.modalHeading} align="left">
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.chooseADashboardType.uploadModal.heading'
|
||||
'monitoringDashboard.monitoringDashboards.chooseADashboardType.uploadModal.heading'
|
||||
)}
|
||||
</Typography>
|
||||
<UploadJSON
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
import { Button, Paper, Typography } from '@material-ui/core';
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ApplicationDashboard } from '../../../../../../../models/redux/dashboards';
|
||||
import { MonitoringDashboard } from '../../../../../../../models/redux/dashboards';
|
||||
import useActions from '../../../../../../../redux/actions';
|
||||
import * as DashboardActions from '../../../../../../../redux/actions/dashboards';
|
||||
import useStyles from './styles';
|
||||
|
|
@ -31,7 +31,7 @@ const UploadJSON: React.FC<UploadJSONProps> = ({
|
|||
setUploadedJSON(readFile);
|
||||
setFileName(file.name);
|
||||
try {
|
||||
const parsedDashboard: ApplicationDashboard = JSON.parse(readFile);
|
||||
const parsedDashboard: MonitoringDashboard = JSON.parse(readFile);
|
||||
dashboard.selectDashboard({
|
||||
selectedDashboardID: 'upload',
|
||||
dashboardJSON: parsedDashboard,
|
||||
|
|
@ -62,7 +62,7 @@ const UploadJSON: React.FC<UploadJSONProps> = ({
|
|||
readFile.text().then((response) => {
|
||||
setUploadedJSON(response);
|
||||
try {
|
||||
const parsedDashboard: ApplicationDashboard = JSON.parse(response);
|
||||
const parsedDashboard: MonitoringDashboard = JSON.parse(response);
|
||||
dashboard.selectDashboard({
|
||||
selectedDashboardID: 'upload',
|
||||
dashboardJSON: parsedDashboard,
|
||||
|
|
@ -105,12 +105,12 @@ const UploadJSON: React.FC<UploadJSONProps> = ({
|
|||
/>
|
||||
<Typography variant="h6">
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.chooseADashboardType.uploadModal.option1'
|
||||
'monitoringDashboard.monitoringDashboards.chooseADashboardType.uploadModal.option1'
|
||||
)}
|
||||
</Typography>
|
||||
<Typography className={classes.orText}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.chooseADashboardType.uploadModal.or'
|
||||
'monitoringDashboard.monitoringDashboards.chooseADashboardType.uploadModal.or'
|
||||
)}
|
||||
</Typography>
|
||||
<input
|
||||
|
|
@ -130,7 +130,7 @@ const UploadJSON: React.FC<UploadJSONProps> = ({
|
|||
component="span"
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.chooseADashboardType.uploadModal.option2'
|
||||
'monitoringDashboard.monitoringDashboards.chooseADashboardType.uploadModal.option2'
|
||||
)}
|
||||
</Button>
|
||||
</label>
|
||||
|
|
@ -145,7 +145,7 @@ const UploadJSON: React.FC<UploadJSONProps> = ({
|
|||
/>
|
||||
<Typography className={classes.uploadSuccessText}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.chooseADashboardType.uploadModal.successMessage'
|
||||
'monitoringDashboard.monitoringDashboards.chooseADashboardType.uploadModal.successMessage'
|
||||
)}{' '}
|
||||
{fileName}
|
||||
</Typography>
|
||||
|
|
@ -15,7 +15,7 @@ import {
|
|||
PortalDashboardsVars,
|
||||
} from '../../../../../models/graphql/dashboardsDetails';
|
||||
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 * as AlertActions from '../../../../../redux/actions/alert';
|
||||
import {
|
||||
|
|
@ -139,12 +139,12 @@ const ChooseADashboardType = forwardRef(
|
|||
<div>
|
||||
<Typography className={classes.heading}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.chooseADashboardType.header'
|
||||
'monitoringDashboard.monitoringDashboards.chooseADashboardType.header'
|
||||
)}
|
||||
</Typography>
|
||||
<Typography className={classes.description}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.chooseADashboardType.description'
|
||||
'monitoringDashboard.monitoringDashboards.chooseADashboardType.description'
|
||||
)}
|
||||
</Typography>
|
||||
<div className={classes.cards}>
|
||||
|
|
@ -32,7 +32,7 @@ import { ListDataSourceResponse } from '../../../../../../models/graphql/dataSou
|
|||
import {
|
||||
DEFAULT_CHAOS_EVENT_PROMETHEUS_QUERY,
|
||||
DEFAULT_CHAOS_VERDICT_PROMETHEUS_QUERY,
|
||||
} from '../../../../../../pages/ApplicationDashboard/constants';
|
||||
} from '../../../../../../pages/MonitoringDashboard/constants';
|
||||
import useActions from '../../../../../../redux/actions';
|
||||
import * as DashboardActions from '../../../../../../redux/actions/dashboards';
|
||||
import { RootState } from '../../../../../../redux/reducers';
|
||||
|
|
@ -433,7 +433,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
<div className={classes.flexDisplay}>
|
||||
<InputField
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.name'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.name'
|
||||
)}
|
||||
data-cy="inputDashboardName"
|
||||
width="20rem"
|
||||
|
|
@ -451,7 +451,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
>
|
||||
<InputLabel className={classes.selectTextLabel}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.agent'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.agent'
|
||||
)}
|
||||
</InputLabel>
|
||||
<Select
|
||||
|
|
@ -464,7 +464,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
setUpdate(true);
|
||||
}}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.agent'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.agent'
|
||||
)}
|
||||
className={classes.selectText}
|
||||
disabled={activeAgents.length === 0 || loading}
|
||||
|
|
@ -478,7 +478,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
{!activeAgents.length && !loading ? (
|
||||
<Typography className={classes.formErrorText}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.noActiveAgent'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.noActiveAgent'
|
||||
)}
|
||||
</Typography>
|
||||
) : !(agentList?.getCluster ?? []).filter((cluster) => {
|
||||
|
|
@ -491,19 +491,19 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
}).length && agentList?.getCluster.length ? (
|
||||
<Typography className={classes.formErrorText}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.agentInactive'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.agentInactive'
|
||||
)}
|
||||
</Typography>
|
||||
) : loading ? (
|
||||
<Typography className={classes.formHelperText}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.fetchingAgents'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.fetchingAgents'
|
||||
)}
|
||||
</Typography>
|
||||
) : error ? (
|
||||
<Typography className={classes.formErrorText}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.errorFetchingAgents'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.errorFetchingAgents'
|
||||
)}
|
||||
</Typography>
|
||||
) : (
|
||||
|
|
@ -520,7 +520,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
>
|
||||
<InputLabel className={classes.selectTextLabel}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.dataSource'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.dataSource'
|
||||
)}
|
||||
</InputLabel>
|
||||
<Select
|
||||
|
|
@ -534,7 +534,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
setUpdate(true);
|
||||
}}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.dataSource'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.dataSource'
|
||||
)}
|
||||
className={classes.selectText}
|
||||
disabled={activeDataSources.length === 0}
|
||||
|
|
@ -548,7 +548,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
{!activeDataSources.length ? (
|
||||
<Typography className={classes.formErrorText}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.noActiveDataSource'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.noActiveDataSource'
|
||||
)}
|
||||
</Typography>
|
||||
) : !dataSourceList.filter((dataSource) => {
|
||||
|
|
@ -559,7 +559,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
}).length ? (
|
||||
<Typography className={classes.formErrorText}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.dataSourceInactive'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.dataSourceInactive'
|
||||
)}
|
||||
</Typography>
|
||||
) : (
|
||||
|
|
@ -569,7 +569,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
|
||||
<InputField
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.dashboardType'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.dashboardType'
|
||||
)}
|
||||
data-cy="inputDashboardType"
|
||||
width="20rem"
|
||||
|
|
@ -588,7 +588,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
<div>
|
||||
<Typography className={classes.heading}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.applications'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.applications'
|
||||
)}
|
||||
</Typography>
|
||||
|
||||
|
|
@ -608,10 +608,10 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
}) ?? []
|
||||
}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.selectNamespaces'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.selectNamespaces'
|
||||
)}
|
||||
placeholder={`${t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.addNamespace'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.addNamespace'
|
||||
)}`}
|
||||
disableCloseOnSelect
|
||||
disableClearable={false}
|
||||
|
|
@ -628,7 +628,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
>
|
||||
<InputLabel className={classes.selectTextLabel}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.selectApplicationType'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.selectApplicationType'
|
||||
)}
|
||||
</InputLabel>
|
||||
<Select
|
||||
|
|
@ -641,7 +641,7 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
);
|
||||
}}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.selectApplicationType'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.selectApplicationType'
|
||||
)}
|
||||
className={classes.selectText}
|
||||
>
|
||||
|
|
@ -711,10 +711,10 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
}
|
||||
options={getAvailableApplications()}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.selectApplications'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.selectApplications'
|
||||
)}
|
||||
placeholder={`${t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.form.addApplication'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.form.addApplication'
|
||||
)}`}
|
||||
disableCloseOnSelect
|
||||
disableClearable={false}
|
||||
|
|
@ -48,12 +48,12 @@ const ConfigureDashboardMetadata = forwardRef(
|
|||
<div>
|
||||
<Typography className={classes.heading}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.header'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.header'
|
||||
)}
|
||||
</Typography>
|
||||
<Typography className={classes.description}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.configureDashboardMetadata.description'
|
||||
'monitoringDashboard.monitoringDashboards.configureDashboardMetadata.description'
|
||||
)}
|
||||
</Typography>
|
||||
<div className={classes.metadataForm}>
|
||||
|
|
@ -94,7 +94,7 @@ const SelectTheMetricsForm: React.FC<SelectTheMetricsFormProps> = ({
|
|||
selectedDashboard.dashboardJSON.panelGroupMap.map(
|
||||
(panelGroup: PanelGroupMap, index: number) => (
|
||||
<div
|
||||
key={`${panelGroup.groupName}-applicationDashboard-form`}
|
||||
key={`${panelGroup.groupName}-monitoringDashboard-form`}
|
||||
className={classes.panelGroupMap}
|
||||
>
|
||||
<Typography
|
||||
|
|
@ -142,7 +142,7 @@ const SelectTheMetricsForm: React.FC<SelectTheMetricsFormProps> = ({
|
|||
className={classes.panelGroupName}
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.selectTheMetrics.errorMessage'
|
||||
'monitoringDashboard.monitoringDashboards.selectTheMetrics.errorMessage'
|
||||
)}
|
||||
</Typography>
|
||||
)}
|
||||
|
|
@ -38,12 +38,12 @@ const SelectTheMetrics = forwardRef(
|
|||
<div>
|
||||
<Typography className={classes.heading}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.selectTheMetrics.header'
|
||||
'monitoringDashboard.monitoringDashboards.selectTheMetrics.header'
|
||||
)}
|
||||
</Typography>
|
||||
<Typography className={classes.description}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.selectTheMetrics.description'
|
||||
'monitoringDashboard.monitoringDashboards.selectTheMetrics.description'
|
||||
)}
|
||||
</Typography>
|
||||
<div className={classes.metricsForm}>
|
||||
|
|
@ -326,7 +326,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
<TextField
|
||||
{...params}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.metric'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.metric'
|
||||
)}
|
||||
variant="outlined"
|
||||
size="medium"
|
||||
|
|
@ -370,7 +370,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
>
|
||||
<InputLabel className={classes.selectTextLabel}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.keys'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.keys'
|
||||
)}
|
||||
</InputLabel>
|
||||
<Select
|
||||
|
|
@ -417,7 +417,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
setUpdate(true);
|
||||
}}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.selectKey'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.selectKey'
|
||||
)}
|
||||
className={classes.selectText}
|
||||
>
|
||||
|
|
@ -481,10 +481,10 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
}
|
||||
options={getAvailableValues(selectedLabel ?? '')}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.values'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.values'
|
||||
)}
|
||||
placeholder={`${t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.addValue'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.addValue'
|
||||
)}`}
|
||||
disableCloseOnSelect
|
||||
disableClearable={false}
|
||||
|
|
@ -501,7 +501,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
value: option.name,
|
||||
score: 1,
|
||||
meta: t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.seriesName'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.seriesName'
|
||||
),
|
||||
})) ?? []
|
||||
}
|
||||
|
|
@ -512,10 +512,10 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
score: 2,
|
||||
meta: localQuery.base_query
|
||||
? `${t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.labelFor'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.labelFor'
|
||||
)} ${localQuery.base_query}`
|
||||
: t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.label'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.label'
|
||||
),
|
||||
})
|
||||
) ?? []
|
||||
|
|
@ -558,7 +558,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
|
||||
<Typography className={classes.configHeader}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.configuration'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.configuration'
|
||||
)}
|
||||
</Typography>
|
||||
|
||||
|
|
@ -568,7 +568,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
<div className={classes.flex}>
|
||||
<InputField
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.legend'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.legend'
|
||||
)}
|
||||
data-cy="queryLegend"
|
||||
width="16rem"
|
||||
|
|
@ -584,7 +584,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
/>
|
||||
<InfoTooltip
|
||||
value={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.legendInfo'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.legendInfo'
|
||||
)}
|
||||
className={classes.infoIcon}
|
||||
/>
|
||||
|
|
@ -593,7 +593,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
<div className={classes.flex}>
|
||||
<InputField
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.minStep'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.minStep'
|
||||
)}
|
||||
data-cy="minStep"
|
||||
width="9rem"
|
||||
|
|
@ -615,7 +615,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
/>
|
||||
<InfoTooltip
|
||||
value={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.minStepInfo'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.minStepInfo'
|
||||
)}
|
||||
className={classes.infoIcon}
|
||||
/>
|
||||
|
|
@ -624,19 +624,19 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
<div className={classes.flex}>
|
||||
<InputField
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.format'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.format'
|
||||
)}
|
||||
data-cy="dataFormat"
|
||||
width="9rem"
|
||||
variant="primary"
|
||||
disabled
|
||||
value={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.timeSeries'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.timeSeries'
|
||||
)}
|
||||
/>
|
||||
<InfoTooltip
|
||||
value={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.formatInfo'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.formatInfo'
|
||||
)}
|
||||
className={classes.infoIcon}
|
||||
/>
|
||||
|
|
@ -656,7 +656,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
>
|
||||
<InputLabel className={classes.selectTextLabel}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.graph'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.graph'
|
||||
)}
|
||||
</InputLabel>
|
||||
<Select
|
||||
|
|
@ -672,35 +672,35 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
setUpdate(true);
|
||||
}}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.graph'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.graph'
|
||||
)}
|
||||
className={classes.selectText}
|
||||
>
|
||||
<MenuItem
|
||||
key={`${t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.lineGraph'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.lineGraph'
|
||||
)}`}
|
||||
value="Line graph"
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.lineGraph'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.lineGraph'
|
||||
)}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
key={`${t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.areaGraph'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.areaGraph'
|
||||
)}`}
|
||||
value="Area graph"
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.areaGraph'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.areaGraph'
|
||||
)}
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<InfoTooltip
|
||||
value={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.graphInfo'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.graphInfo'
|
||||
)}
|
||||
className={classes.infoIcon}
|
||||
/>
|
||||
|
|
@ -716,7 +716,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
>
|
||||
<InputLabel className={classes.selectTextLabel}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.resolution'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.resolution'
|
||||
)}
|
||||
</InputLabel>
|
||||
<Select
|
||||
|
|
@ -729,7 +729,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
setUpdate(true);
|
||||
}}
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.resolution'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.resolution'
|
||||
)}
|
||||
className={classes.selectText}
|
||||
>
|
||||
|
|
@ -742,7 +742,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
|
|||
</FormControl>
|
||||
<InfoTooltip
|
||||
value={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.resolutionInfo'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.resolutionInfo'
|
||||
)}
|
||||
className={classes.infoIcon}
|
||||
/>
|
||||
|
|
@ -273,10 +273,10 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
label={
|
||||
panelInfo.prom_queries.length > 1
|
||||
? t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.queries'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.queries'
|
||||
)
|
||||
: t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.query'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.query'
|
||||
)
|
||||
}
|
||||
icon={
|
||||
|
|
@ -290,7 +290,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
|
||||
<StyledTab
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.visualization'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.visualization'
|
||||
)}
|
||||
/>
|
||||
</Tabs>
|
||||
|
|
@ -333,14 +333,14 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
setUpdate({ triggerUpdate: true, graph: true });
|
||||
}}
|
||||
name={`${t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.points'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.points'
|
||||
)}`}
|
||||
icon={<SwitchIcon />}
|
||||
checkedIcon={<SwitchIcon />}
|
||||
/>
|
||||
}
|
||||
label={`${t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.points'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.points'
|
||||
)}`}
|
||||
labelPlacement="start"
|
||||
/>
|
||||
|
|
@ -362,14 +362,14 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
setUpdate({ triggerUpdate: true, graph: true });
|
||||
}}
|
||||
name={`${t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.grids'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.grids'
|
||||
)}`}
|
||||
icon={<SwitchIcon />}
|
||||
checkedIcon={<SwitchIcon />}
|
||||
/>
|
||||
}
|
||||
label={`${t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.grids'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.grids'
|
||||
)}`}
|
||||
labelPlacement="start"
|
||||
/>
|
||||
|
|
@ -388,7 +388,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
>
|
||||
<Typography>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.addQuery'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.addQuery'
|
||||
)}
|
||||
</Typography>
|
||||
</ButtonOutlined>
|
||||
|
|
@ -400,7 +400,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
>
|
||||
<Typography>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.discardChanges'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.discardChanges'
|
||||
)}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
|
|
@ -418,19 +418,19 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
<Typography className={classes.modalHeading} align="left">
|
||||
<b>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.removeMetric'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.removeMetric'
|
||||
)}
|
||||
</b>
|
||||
</Typography>
|
||||
|
||||
<Typography className={classes.modalBodyText} align="left">
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.removeMetricConfirmation'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.removeMetricConfirmation'
|
||||
)}
|
||||
<b>
|
||||
<i>{` ${panelInfo.panel_name} `}</i>
|
||||
</b>
|
||||
{t('analyticsDashboard.applicationDashboards.tuneTheQueries.under')}
|
||||
{t('monitoringDashboard.monitoringDashboards.tuneTheQueries.under')}
|
||||
<b>
|
||||
<i>{` ${panelInfo.panel_group_name} `}</i>
|
||||
</b>
|
||||
|
|
@ -444,7 +444,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
>
|
||||
<Typography className={classes.buttonText}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.cancel'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.cancel'
|
||||
)}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
|
|
@ -456,7 +456,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
className={`${classes.buttonText} ${classes.confirmButtonText}`}
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.delete'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.delete'
|
||||
)}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
|
|
@ -473,12 +473,12 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
<div className={classes.modal}>
|
||||
<Typography className={classes.modalHeading} align="left">
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.discardChangesConfirmation'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.discardChangesConfirmation'
|
||||
)}
|
||||
<b>
|
||||
<i>{` ${panelInfo.panel_name} `}</i>
|
||||
</b>
|
||||
{t('analyticsDashboard.applicationDashboards.tuneTheQueries.under')}
|
||||
{t('monitoringDashboard.monitoringDashboards.tuneTheQueries.under')}
|
||||
<b>
|
||||
<i>{` ${panelInfo.panel_group_name} `}</i>
|
||||
</b>
|
||||
|
|
@ -487,7 +487,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
|
||||
<Typography className={classes.modalBodyText} align="left">
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.discardChangesInfo'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.discardChangesInfo'
|
||||
)}
|
||||
</Typography>
|
||||
|
||||
|
|
@ -498,7 +498,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
>
|
||||
<Typography className={classes.buttonText}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.cancel'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.cancel'
|
||||
)}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
|
|
@ -510,7 +510,7 @@ const QueryEditingWizard: React.FC<QueryEditingWizardProps> = ({
|
|||
className={`${classes.buttonText} ${classes.confirmButtonText}`}
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.yesProceed'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.yesProceed'
|
||||
)}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
|
|
@ -496,7 +496,7 @@ const EditPanelsWizard: React.FC<EditPanelsWizardProps> = ({
|
|||
))}
|
||||
<StyledTab
|
||||
label={t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.addPanel'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.addPanel'
|
||||
)}
|
||||
{...a11yProps(dashboardDetails.selectedPanels?.length)}
|
||||
/>
|
||||
|
|
@ -19,7 +19,7 @@ import {
|
|||
import {
|
||||
DEFAULT_REFRESH_RATE,
|
||||
DEFAULT_RELATIVE_TIME_RANGE,
|
||||
} from '../../../../../pages/ApplicationDashboard/constants';
|
||||
} from '../../../../../pages/MonitoringDashboard/constants';
|
||||
import useActions from '../../../../../redux/actions';
|
||||
import * as AlertActions from '../../../../../redux/actions/alert';
|
||||
import * as DashboardActions from '../../../../../redux/actions/dashboards';
|
||||
|
|
@ -77,7 +77,7 @@ const TuneTheQueries = forwardRef(
|
|||
setProceed(true);
|
||||
onDashboardLoadRoutine(data.createDashBoard?.db_id ?? '').then(() => {
|
||||
history.push({
|
||||
pathname: '/analytics/application-dashboard',
|
||||
pathname: '/observability/monitoring-dashboard',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
});
|
||||
|
|
@ -97,7 +97,7 @@ const TuneTheQueries = forwardRef(
|
|||
setProceed(true);
|
||||
onDashboardLoadRoutine(dashboardVars.id ?? '').then(() => {
|
||||
history.push({
|
||||
pathname: '/analytics/application-dashboard',
|
||||
pathname: '/observability/monitoring-dashboard',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
});
|
||||
|
|
@ -267,11 +267,11 @@ const TuneTheQueries = forwardRef(
|
|||
return (
|
||||
<div className={classes.root}>
|
||||
<Typography className={classes.heading}>
|
||||
{t('analyticsDashboard.applicationDashboards.tuneTheQueries.header')}
|
||||
{t('monitoringDashboard.monitoringDashboards.tuneTheQueries.header')}
|
||||
</Typography>
|
||||
<Typography className={classes.description}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboards.tuneTheQueries.description'
|
||||
'monitoringDashboard.monitoringDashboards.tuneTheQueries.description'
|
||||
)}
|
||||
</Typography>
|
||||
<div className={classes.editPanelsWizard}>
|
||||
|
|
@ -190,7 +190,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
|
|||
onClick={() => {
|
||||
onDashboardLoadRoutine().then(() => {
|
||||
history.push({
|
||||
pathname: '/analytics/application-dashboard',
|
||||
pathname: '/observability/monitoring-dashboard',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
});
|
||||
|
|
@ -281,7 +281,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
|
|||
onClick={() => {
|
||||
onDashboardLoadRoutine().then(() => {
|
||||
history.push({
|
||||
pathname: '/analytics/application-dashboard',
|
||||
pathname: '/observability/monitoring-dashboard',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
});
|
||||
|
|
@ -290,12 +290,12 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
|
|||
>
|
||||
<div className={classes.flexDisplay}>
|
||||
<img
|
||||
src="./icons/viewAnalytics.svg"
|
||||
src="./icons/viewDashboard.svg"
|
||||
alt="View"
|
||||
className={classes.btnImg}
|
||||
/>
|
||||
<Typography data-cy="openDashboard" className={classes.btnText}>
|
||||
{t('analyticsDashboard.applicationDashboardTable.view')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.view')}
|
||||
</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
@ -308,7 +308,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
|
|||
activePanelID: '',
|
||||
});
|
||||
history.push({
|
||||
pathname: '/analytics/dashboard/configure',
|
||||
pathname: '/observability/dashboard/configure',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
}}
|
||||
|
|
@ -324,7 +324,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
|
|||
data-cy="configureDashboard"
|
||||
className={classes.btnText}
|
||||
>
|
||||
{t('analyticsDashboard.applicationDashboardTable.configure')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.configure')}
|
||||
</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
@ -344,7 +344,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
|
|||
data-cy="downloadDashboard"
|
||||
className={classes.btnText}
|
||||
>
|
||||
{t('analyticsDashboard.applicationDashboardTable.json')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.json')}
|
||||
</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
@ -370,7 +370,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
|
|||
data-cy="deleteDashboard"
|
||||
className={`${classes.btnText} ${classes.deleteText}`}
|
||||
>
|
||||
{t('analyticsDashboard.applicationDashboardTable.delete')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.delete')}
|
||||
</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
@ -385,13 +385,13 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
|
|||
<div className={classes.modal}>
|
||||
<Typography className={classes.modalHeading} align="left">
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboardTable.modal.removeDashboard'
|
||||
'monitoringDashboard.monitoringDashboardTable.modal.removeDashboard'
|
||||
)}
|
||||
</Typography>
|
||||
|
||||
<Typography className={classes.modalBodyText} align="left">
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboardTable.modal.removeDashboardConfirmation'
|
||||
'monitoringDashboard.monitoringDashboardTable.modal.removeDashboardConfirmation'
|
||||
)}
|
||||
<b>
|
||||
<i>{` ${data.db_name} `}</i>
|
||||
|
|
@ -405,7 +405,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
|
|||
className={classes.cancelButton}
|
||||
>
|
||||
<Typography className={classes.buttonText}>
|
||||
{t('analyticsDashboard.applicationDashboardTable.modal.cancel')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.modal.cancel')}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
<ButtonFilled
|
||||
|
|
@ -418,7 +418,7 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
|
|||
<Typography
|
||||
className={`${classes.buttonText} ${classes.confirmButtonText}`}
|
||||
>
|
||||
{t('analyticsDashboard.applicationDashboardTable.modal.delete')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.modal.delete')}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
</div>
|
||||
|
|
@ -41,7 +41,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
|
|||
<Typography
|
||||
className={`${classes.dashboardNameHead} ${classes.dashboardNameCol}`}
|
||||
>
|
||||
{t('analyticsDashboard.applicationDashboardTable.tableHead1')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.tableHead1')}
|
||||
</Typography>
|
||||
<div className={classes.nameContentIcons}>
|
||||
<IconButton
|
||||
|
|
@ -79,27 +79,27 @@ const TableHeader: React.FC<TableHeaderProps> = ({ callBackToSort }) => {
|
|||
<Typography
|
||||
className={`${classes.dashboardNameHead} ${classes.dashboardNameHeadWithoutSort}`}
|
||||
>
|
||||
{t('analyticsDashboard.applicationDashboardTable.tableHead2')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.tableHead2')}
|
||||
</Typography>
|
||||
</StyledTableCell>
|
||||
<StyledTableCell className={classes.headSpacing}>
|
||||
<Typography
|
||||
className={`${classes.dashboardNameHead} ${classes.dashboardNameHeadWithoutSort}`}
|
||||
>
|
||||
{t('analyticsDashboard.applicationDashboardTable.tableHead3')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.tableHead3')}
|
||||
</Typography>
|
||||
</StyledTableCell>
|
||||
<StyledTableCell className={classes.headSpacing}>
|
||||
<Typography
|
||||
className={`${classes.dashboardNameHead} ${classes.dashboardNameHeadWithoutSort}`}
|
||||
>
|
||||
{t('analyticsDashboard.applicationDashboardTable.tableHead4')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.tableHead4')}
|
||||
</Typography>
|
||||
</StyledTableCell>
|
||||
<StyledTableCell className={classes.headSpacing}>
|
||||
<div className={classes.flexDisplay}>
|
||||
<Typography className={classes.dashboardNameHead}>
|
||||
{t('analyticsDashboard.applicationDashboardTable.tableHead5')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.tableHead5')}
|
||||
</Typography>
|
||||
<div className={classes.nameContentIcons}>
|
||||
<IconButton
|
||||
|
|
@ -102,7 +102,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
<div className={classes.search}>
|
||||
<Search
|
||||
id="input-with-icon-textfield"
|
||||
placeholder={t('analyticsDashboard.applicationDashboardTable.search')}
|
||||
placeholder={t('monitoringDashboard.monitoringDashboardTable.search')}
|
||||
value={searchToken}
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
|
|
@ -116,10 +116,10 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
className={`${classes.formControl} ${classes.dashboardTypeForm}`}
|
||||
>
|
||||
<InputLabel className={classes.selectText}>
|
||||
{t('analyticsDashboard.applicationDashboardTable.tableHead2')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.tableHead2')}
|
||||
</InputLabel>
|
||||
<Select
|
||||
label={t('analyticsDashboard.applicationDashboardTable.tableHead2')}
|
||||
label={t('monitoringDashboard.monitoringDashboardTable.tableHead2')}
|
||||
value={agentName}
|
||||
onChange={handleAgentNameChange}
|
||||
className={classes.selectText}
|
||||
|
|
@ -139,7 +139,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
}}
|
||||
>
|
||||
<MenuItem value="All" className={classes.menuListItem}>
|
||||
{t('analyticsDashboard.applicationDashboardTable.all')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.all')}
|
||||
</MenuItem>
|
||||
{agentNames.map((availableAgentName: string) => (
|
||||
<MenuItem
|
||||
|
|
@ -158,10 +158,10 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
className={`${classes.formControl} ${classes.dashboardTypeForm}`}
|
||||
>
|
||||
<InputLabel className={classes.selectText}>
|
||||
{t('analyticsDashboard.applicationDashboardTable.tableHead3')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.tableHead3')}
|
||||
</InputLabel>
|
||||
<Select
|
||||
label={t('analyticsDashboard.applicationDashboardTable.tableHead3')}
|
||||
label={t('monitoringDashboard.monitoringDashboardTable.tableHead3')}
|
||||
value={dashboardType}
|
||||
onChange={handleDashboardTypeChange}
|
||||
className={classes.selectText}
|
||||
|
|
@ -181,7 +181,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
}}
|
||||
>
|
||||
<MenuItem value="All" className={classes.menuListItem}>
|
||||
{t('analyticsDashboard.applicationDashboardTable.all')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.all')}
|
||||
</MenuItem>
|
||||
{dashboardTypes.map((availableDashboardType: string) => (
|
||||
<MenuItem
|
||||
|
|
@ -206,7 +206,7 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
>
|
||||
<Typography className={classes.displayDate}>
|
||||
{range.startDate === ' '
|
||||
? t('analyticsDashboard.applicationDashboardTable.selectPeriod')
|
||||
? t('monitoringDashboard.monitoringDashboardTable.selectPeriod')
|
||||
: `${range.startDate.split(' ')[2]} ${
|
||||
range.startDate.split(' ')[1]
|
||||
} ${range.startDate.split(' ')[3]} - ${
|
||||
|
|
@ -213,12 +213,12 @@ const DashboardTable: React.FC = () => {
|
|||
<div className={classes.root}>
|
||||
<div className={classes.tabHeaderFlex}>
|
||||
<Typography className={classes.tabHeaderText}>
|
||||
{t('analyticsDashboard.applicationDashboardTable.dashboards')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.dashboards')}
|
||||
</Typography>
|
||||
<ButtonFilled
|
||||
onClick={() =>
|
||||
history.push({
|
||||
pathname: '/analytics/dashboard/create',
|
||||
pathname: '/observability/dashboard/create',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
})
|
||||
}
|
||||
|
|
@ -236,7 +236,7 @@ const DashboardTable: React.FC = () => {
|
|||
: ''
|
||||
}`}
|
||||
>
|
||||
{t('analyticsDashboard.applicationDashboardTable.createDashboard')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.createDashboard')}
|
||||
</Typography>
|
||||
</ButtonFilled>
|
||||
</div>
|
||||
|
|
@ -245,17 +245,17 @@ const DashboardTable: React.FC = () => {
|
|||
<Typography className={classes.warningText} align="left">
|
||||
{dataSourceList?.ListDataSource.length
|
||||
? t(
|
||||
'analyticsDashboard.applicationDashboardTable.warning.noActiveDataSource'
|
||||
'monitoringDashboard.monitoringDashboardTable.warning.noActiveDataSource'
|
||||
)
|
||||
: t(
|
||||
'analyticsDashboard.applicationDashboardTable.warning.noAvailableDataSource'
|
||||
'monitoringDashboard.monitoringDashboardTable.warning.noAvailableDataSource'
|
||||
)}
|
||||
</Typography>
|
||||
<div className={classes.warningActions}>
|
||||
{dataSourceList && dataSourceList.ListDataSource.length > 0 && (
|
||||
<>
|
||||
<TextButton
|
||||
onClick={() => tabs.changeAnalyticsDashboardTabs(3)}
|
||||
onClick={() => tabs.changeObservabilityDashboardTabs(3)}
|
||||
variant="highlight"
|
||||
className={classes.warningButton}
|
||||
>
|
||||
|
|
@ -264,19 +264,19 @@ const DashboardTable: React.FC = () => {
|
|||
style={{ fontWeight: 500 }}
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboardTable.warning.configureExisting'
|
||||
'monitoringDashboard.monitoringDashboardTable.warning.configureExisting'
|
||||
)}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
<Typography className={classes.orText}>
|
||||
{t('analyticsDashboard.applicationDashboardTable.warning.or')}
|
||||
{t('monitoringDashboard.monitoringDashboardTable.warning.or')}
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
<TextButton
|
||||
onClick={() =>
|
||||
history.push({
|
||||
pathname: '/analytics/datasource/create',
|
||||
pathname: '/observability/datasource/create',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
})
|
||||
}
|
||||
|
|
@ -288,7 +288,7 @@ const DashboardTable: React.FC = () => {
|
|||
style={{ fontWeight: 500 }}
|
||||
>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboardTable.warning.addNew'
|
||||
'monitoringDashboard.monitoringDashboardTable.warning.addNew'
|
||||
)}
|
||||
</Typography>
|
||||
</TextButton>
|
||||
|
|
@ -369,7 +369,7 @@ const DashboardTable: React.FC = () => {
|
|||
<TableCell colSpan={6}>
|
||||
<Typography align="center">
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboardTable.error'
|
||||
'monitoringDashboard.monitoringDashboardTable.error'
|
||||
)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
|
@ -383,7 +383,7 @@ const DashboardTable: React.FC = () => {
|
|||
<Loader />
|
||||
<Typography align="center">
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboardTable.loading'
|
||||
'monitoringDashboard.monitoringDashboardTable.loading'
|
||||
)}
|
||||
</Typography>
|
||||
</div>
|
||||
|
|
@ -400,7 +400,7 @@ const DashboardTable: React.FC = () => {
|
|||
/>
|
||||
<Typography className={classes.noRecordsText}>
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboardTable.noRecords'
|
||||
'monitoringDashboard.monitoringDashboardTable.noRecords'
|
||||
)}
|
||||
</Typography>
|
||||
</div>
|
||||
|
|
@ -430,7 +430,7 @@ const DashboardTable: React.FC = () => {
|
|||
<TableCell colSpan={6}>
|
||||
<Typography align="center">
|
||||
{t(
|
||||
'analyticsDashboard.applicationDashboardTable.noRecords'
|
||||
'monitoringDashboard.monitoringDashboardTable.noRecords'
|
||||
)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
|
@ -478,9 +478,9 @@ const DashboardTable: React.FC = () => {
|
|||
>
|
||||
{success
|
||||
? t(
|
||||
'analyticsDashboard.applicationDashboardTable.deletionSuccess'
|
||||
'monitoringDashboard.monitoringDashboardTable.deletionSuccess'
|
||||
)
|
||||
: t('analyticsDashboard.applicationDashboardTable.deletionError')}
|
||||
: t('monitoringDashboard.monitoringDashboardTable.deletionError')}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
)}
|
||||
|
|
@ -16,7 +16,7 @@ import {
|
|||
import useActions from '../../../../redux/actions';
|
||||
import * as DashboardActions from '../../../../redux/actions/dashboards';
|
||||
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 DownloadIcon } from '../../../../svg/download.svg';
|
||||
import timeDifferenceForDate from '../../../../utils/datesModifier';
|
||||
|
|
@ -26,11 +26,11 @@ import {
|
|||
} from '../../../../utils/getSearchParams';
|
||||
import useStyles from './styles';
|
||||
|
||||
interface ApplicationDashboardCardProps {
|
||||
interface MonitoringDashboardCardProps {
|
||||
data: ListDashboardResponse;
|
||||
}
|
||||
|
||||
const ApplicationDashboardCard: React.FC<ApplicationDashboardCardProps> = ({
|
||||
const MonitoringDashboardCard: React.FC<MonitoringDashboardCardProps> = ({
|
||||
data,
|
||||
}) => {
|
||||
const classes = useStyles();
|
||||
|
|
@ -173,13 +173,13 @@ const ApplicationDashboardCard: React.FC<ApplicationDashboardCardProps> = ({
|
|||
onClick={() => {
|
||||
onDashboardLoadRoutine().then(() => {
|
||||
history.push({
|
||||
pathname: '/analytics/application-dashboard',
|
||||
pathname: '/observability/monitoring-dashboard',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
});
|
||||
}}
|
||||
>
|
||||
<AnalyticsIcon />
|
||||
<ObservabilityIcon />
|
||||
</IconButton>
|
||||
<Typography align="center">View</Typography>
|
||||
</div>
|
||||
|
|
@ -191,7 +191,7 @@ const ApplicationDashboardCard: React.FC<ApplicationDashboardCardProps> = ({
|
|||
activePanelID: '',
|
||||
});
|
||||
history.push({
|
||||
pathname: '/analytics/dashboard/configure',
|
||||
pathname: '/observability/dashboard/configure',
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
}}
|
||||
|
|
@ -213,4 +213,4 @@ const ApplicationDashboardCard: React.FC<ApplicationDashboardCardProps> = ({
|
|||
);
|
||||
};
|
||||
|
||||
export { ApplicationDashboardCard };
|
||||
export { MonitoringDashboardCard };
|
||||
|
|
@ -4,7 +4,7 @@ import { WorkflowRun } from '../../../../models/graphql/workflowData';
|
|||
import useActions from '../../../../redux/actions';
|
||||
import * as NodeSelectionActions from '../../../../redux/actions/nodeSelection';
|
||||
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 timeDifferenceForDate from '../../../../utils/datesModifier';
|
||||
import {
|
||||
|
|
@ -20,11 +20,11 @@ import {
|
|||
} from '../../../WorkflowDetails/workflowConstants';
|
||||
import useStyles from './styles';
|
||||
|
||||
interface WorkflowDashboardCardProps {
|
||||
interface WorkflowStatisticsCardProps {
|
||||
data: WorkflowRun;
|
||||
}
|
||||
|
||||
const WorkflowDashboardCard: React.FC<WorkflowDashboardCardProps> = ({
|
||||
const WorkflowStatisticsCard: React.FC<WorkflowStatisticsCardProps> = ({
|
||||
data,
|
||||
}) => {
|
||||
const classes = useStyles();
|
||||
|
|
@ -97,14 +97,14 @@ const WorkflowDashboardCard: React.FC<WorkflowDashboardCardProps> = ({
|
|||
<IconButton
|
||||
onClick={() => {
|
||||
history.push({
|
||||
pathname: `/analytics/workflowdashboard/${data.workflow_id}`,
|
||||
pathname: `/observability/workflowStatistics/${data.workflow_id}`,
|
||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<AnalyticsIcon />
|
||||
<ObservabilityIcon />
|
||||
</IconButton>
|
||||
<Typography align="center">See analytics</Typography>
|
||||
<Typography align="center">See statistics</Typography>
|
||||
</div>
|
||||
</section>
|
||||
</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
Loading…
Reference in New Issue