From 49e9fa189138745d9ca0a34f804dc27a54c6be7b Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Tue, 15 Feb 2022 09:55:59 -0800 Subject: [PATCH 1/4] Change default time to 24 hours Signed-off-by: Eugene Lee --- .../components/application_analytics/components/app_table.tsx | 2 +- .../public/components/application_analytics/home.tsx | 2 +- .../public/components/explorer/slices/query_slice.ts | 2 +- .../server/adaptors/custom_panels/custom_panel_adaptor.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/dashboards-observability/public/components/application_analytics/components/app_table.tsx index 6beebe03e..24a2a43ab 100644 --- a/dashboards-observability/public/components/application_analytics/components/app_table.tsx +++ b/dashboards-observability/public/components/application_analytics/components/app_table.tsx @@ -74,7 +74,7 @@ export function AppTable(props: AppTableProps) { const clear = () => { setFilters([]); - setStartTime('now-24M'); + setStartTime('now-24h'); setEndTime('now'); }; diff --git a/dashboards-observability/public/components/application_analytics/home.tsx b/dashboards-observability/public/components/application_analytics/home.tsx index b80598d2f..3af98c870 100644 --- a/dashboards-observability/public/components/application_analytics/home.tsx +++ b/dashboards-observability/public/components/application_analytics/home.tsx @@ -77,7 +77,7 @@ export const Home = (props: HomeProps) => { ); const [query, setQuery] = useState(sessionStorage.getItem('AppAnalyticsQuery') || ''); const [startTime, setStartTime] = useState( - sessionStorage.getItem('AppAnalyticsStartTime') || 'now-24M' + sessionStorage.getItem('AppAnalyticsStartTime') || 'now-24h' ); const [endTime, setEndTime] = useState( sessionStorage.getItem('AppAnalyticsEndTime') || 'now' diff --git a/dashboards-observability/public/components/explorer/slices/query_slice.ts b/dashboards-observability/public/components/explorer/slices/query_slice.ts index b5f861825..cec323a7d 100644 --- a/dashboards-observability/public/components/explorer/slices/query_slice.ts +++ b/dashboards-observability/public/components/explorer/slices/query_slice.ts @@ -27,7 +27,7 @@ const appBaseQueryState = { [FINAL_QUERY]: '', [INDEX]: '', [SELECTED_TIMESTAMP]: '', - [SELECTED_DATE_RANGE]: ['now-24M', 'now'], + [SELECTED_DATE_RANGE]: ['now-24h', 'now'], }; const initialState = { diff --git a/dashboards-observability/server/adaptors/custom_panels/custom_panel_adaptor.ts b/dashboards-observability/server/adaptors/custom_panels/custom_panel_adaptor.ts index 296d79fb5..0f0ff7480 100644 --- a/dashboards-observability/server/adaptors/custom_panels/custom_panel_adaptor.ts +++ b/dashboards-observability/server/adaptors/custom_panels/custom_panel_adaptor.ts @@ -126,7 +126,7 @@ export class CustomPanelsAdaptor { panelBody.applicationId = appId; panelBody.timeRange = { to: 'now', - from: 'now-24M', + from: 'now-24h', }; } From 9c619e6ac1bec24dfbc580777f46ad5cb73b52d8 Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Tue, 15 Feb 2022 10:58:02 -0800 Subject: [PATCH 2/4] Check that name is unique Signed-off-by: Eugene Lee --- .../application_analytics/helpers/utils.tsx | 5 ++++- .../components/application_analytics/home.tsx | 18 +++++++++++------- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/dashboards-observability/public/components/application_analytics/helpers/utils.tsx b/dashboards-observability/public/components/application_analytics/helpers/utils.tsx index bd3069c87..956668215 100644 --- a/dashboards-observability/public/components/application_analytics/helpers/utils.tsx +++ b/dashboards-observability/public/components/application_analytics/helpers/utils.tsx @@ -11,7 +11,7 @@ import { APP_ANALYTICS_API_PREFIX } from '../../../../common/constants/applicati import { HttpSetup } from '../../../../../../src/core/public'; // Name validation -export const isNameValid = (name: string) => { +export const isNameValid = (name: string, existingNames: string[]) => { const toast: string[] = []; if (name.length >= 50) { toast.push('Name must be less than 50 characters.'); @@ -19,6 +19,9 @@ export const isNameValid = (name: string) => { if (name.trim().length === 0) { toast.push('Name must not be empty.'); } + if (existingNames.includes(name)) { + toast.push('Name must be unique.'); + } return toast; }; diff --git a/dashboards-observability/public/components/application_analytics/home.tsx b/dashboards-observability/public/components/application_analytics/home.tsx index 3af98c870..0af7f7412 100644 --- a/dashboards-observability/public/components/application_analytics/home.tsx +++ b/dashboards-observability/public/components/application_analytics/home.tsx @@ -23,11 +23,7 @@ import { handleIndicesExistRequest } from '../trace_analytics/requests/request_h import { ObservabilitySideBar } from '../common/side_nav'; import { NotificationsStart } from '../../../../../src/core/public'; import { APP_ANALYTICS_API_PREFIX } from '../../../common/constants/application_analytics'; -import { - OptionType, - ApplicationListType, - ApplicationType, -} from '../../../common/types/app_analytics'; +import { ApplicationListType, ApplicationType } from '../../../common/types/app_analytics'; import { isNameValid } from './helpers/utils'; import { CUSTOM_PANELS_API_PREFIX, @@ -184,7 +180,10 @@ export const Home = (props: HomeProps) => { // Create a new application const createApp = (application: ApplicationType) => { - const toast = isNameValid(application.name); + const toast = isNameValid( + application.name, + applicationList.map((obj) => obj.name) + ); if (toast.length > 0) { setToast(toast.join(', '), 'danger'); return; @@ -215,7 +214,12 @@ export const Home = (props: HomeProps) => { // Rename an existing application const renameApp = (newAppName: string, appId: string) => { - if (!isNameValid(newAppName)) { + if ( + !isNameValid( + newAppName, + applicationList.map((obj) => obj.name) + ) + ) { setToast('Invalid Application name', 'danger'); return; } From 4b222033f8f2cae86ed878c97e1f84608f3a442d Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Tue, 15 Feb 2022 13:57:42 -0800 Subject: [PATCH 3/4] Save time for individual applications Signed-off-by: Eugene Lee --- .../components/application.tsx | 37 +++++++++++++++---- .../components/application_analytics/home.tsx | 15 ++++++-- 2 files changed, 41 insertions(+), 11 deletions(-) diff --git a/dashboards-observability/public/components/application_analytics/components/application.tsx b/dashboards-observability/public/components/application_analytics/components/application.tsx index f7e25c8d3..193120682 100644 --- a/dashboards-observability/public/components/application_analytics/components/application.tsx +++ b/dashboards-observability/public/components/application_analytics/components/application.tsx @@ -112,8 +112,8 @@ export function Application(props: AppDetailProps) { endTime, query, filters, - setStartTime, - setEndTime, + setStartTimeWithStorage, + setEndTimeWithStorage, setFilters, setToasts, } = props; @@ -134,6 +134,14 @@ export function Application(props: AppDetailProps) { const handleContentTabClick = (selectedTab: IQueryTab) => setSelectedTab(selectedTab.id); const history = useHistory(); + const setStartTimeForApp = (newStartTime: string) => { + setStartTimeWithStorage(newStartTime, `${application.name}StartTime`); + }; + + const setEndTimeForApp = (newEndTime: string) => { + setEndTimeWithStorage(newEndTime, `${application.name}EndTime`); + }; + // Add visualization to application's panel const addVisualizationToPanel = async (visualizationId: string, visualizationName: string) => { return http @@ -165,6 +173,8 @@ export function Application(props: AppDetailProps) { href: `${parentBreadcrumb.href}${appId}`, }, ]); + setStartTimeForApp(sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h'); + setEndTimeForApp(sessionStorage.getItem(`${application.name}EndTime`) || 'now'); }, [appId, application.name]); useEffect(() => { @@ -203,7 +213,16 @@ export function Application(props: AppDetailProps) { }; const getOverview = () => { - return ; + return ( + + ); }; const getService = () => { @@ -214,6 +233,8 @@ export function Application(props: AppDetailProps) { appId={appId} appName={application.name} openServiceFlyout={openServiceFlyout} + setStartTime={setStartTimeForApp} + setEndTime={setEndTimeForApp} /> ); }; @@ -227,6 +248,8 @@ export function Application(props: AppDetailProps) { appId={appId} appName={application.name} openTraceFlyout={openTraceFlyout} + setStartTime={setStartTimeForApp} + setEndTime={setEndTimeForApp} /> @@ -264,8 +287,8 @@ export function Application(props: AppDetailProps) { addVisualizationToPanel={addVisualizationToPanel} startTime={startTime} endTime={endTime} - setStartTime={setStartTime} - setEndTime={setEndTime} + setStartTime={setStartTimeForApp} + setEndTime={setEndTimeForApp} appBaseQuery={application.baseQuery} /> ); @@ -289,8 +312,8 @@ export function Application(props: AppDetailProps) { appId={appId} startTime={startTime} endTime={endTime} - setStartTime={setStartTime} - setEndTime={setEndTime} + setStartTime={setStartTimeForApp} + setEndTime={setEndTimeForApp} switchToEvent={switchToEvent} /> ); diff --git a/dashboards-observability/public/components/application_analytics/home.tsx b/dashboards-observability/public/components/application_analytics/home.tsx index 0af7f7412..7118549b4 100644 --- a/dashboards-observability/public/components/application_analytics/home.tsx +++ b/dashboards-observability/public/components/application_analytics/home.tsx @@ -47,6 +47,8 @@ export interface AppAnalyticsComponentDeps extends TraceAnalyticsComponentDeps { setDescriptionWithStorage: (newDescription: string) => void; setQueryWithStorage: (newQuery: string) => void; setFiltersWithStorage: (newFilters: FilterType[]) => void; + setStartTimeWithStorage: (newStartTime: string, itemName?: string) => void; + setEndTimeWithStorage: (newEndTime: string, itemName?: string) => void; } export const Home = (props: HomeProps) => { @@ -96,13 +98,16 @@ export const Home = (props: HomeProps) => { setQuery(newQuery); sessionStorage.setItem('AppAnalyticsQuery', newQuery); }; - const setStartTimeWithStorage = (newStartTime: string) => { + const setStartTimeWithStorage = ( + newStartTime: string, + itemName: string = 'AppAnalyticsStartTime' + ) => { setStartTime(newStartTime); - sessionStorage.setItem('AppAnalyticsStartTime', newStartTime); + sessionStorage.setItem(itemName, newStartTime); }; - const setEndTimeWithStorage = (newEndTime: string) => { + const setEndTimeWithStorage = (newEndTime: string, itemName: string = 'AppAnalyticsEndTime') => { setEndTime(newEndTime); - sessionStorage.setItem('AppAnalyticsEndTime', newEndTime); + sessionStorage.setItem(itemName, newEndTime); }; useEffect(() => { @@ -125,8 +130,10 @@ export const Home = (props: HomeProps) => { setFiltersWithStorage, startTime, setStartTime: setStartTimeWithStorage, + setStartTimeWithStorage, endTime, setEndTime: setEndTimeWithStorage, + setEndTimeWithStorage, indicesExist, }; From a9a1748754b9aec087d8a8b7da31ea5d9ffdc5b2 Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Tue, 15 Feb 2022 14:00:09 -0800 Subject: [PATCH 4/4] Change panels tab to metrics tab Signed-off-by: Eugene Lee --- .../common/constants/application_analytics.ts | 4 ++-- .../application_analytics/components/application.tsx | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/dashboards-observability/common/constants/application_analytics.ts b/dashboards-observability/common/constants/application_analytics.ts index 92e2b03f1..4bbb8b549 100644 --- a/dashboards-observability/common/constants/application_analytics.ts +++ b/dashboards-observability/common/constants/application_analytics.ts @@ -7,13 +7,13 @@ export const TAB_OVERVIEW_ID_TXT_PFX = 'app-analytics-overview-'; export const TAB_SERVICE_ID_TXT_PFX = 'app-analytics-service-'; export const TAB_TRACE_ID_TXT_PFX = 'app-analytics-trace-'; export const TAB_LOG_ID_TXT_PFX = 'app-analytics-log-'; -export const TAB_PANEL_ID_TXT_PFX = 'app-analytics-panel-' +export const TAB_METRIC_ID_TXT_PFX = 'app-analytics-panel-'; export const TAB_CONFIG_ID_TXT_PFX = 'app-analytics-config-'; export const TAB_OVERVIEW_TITLE = 'Overview'; export const TAB_SERVICE_TITLE = 'Services'; export const TAB_TRACE_TITLE = 'Traces & Spans'; export const TAB_LOG_TITLE = 'Log Events'; -export const TAB_PANEL_TITLE = 'Panels'; +export const TAB_METRIC_TITLE = 'Metrics'; export const TAB_CONFIG_TITLE = 'Configuration'; export const APP_ANALYTICS_API_PREFIX = '/api/observability/application'; diff --git a/dashboards-observability/public/components/application_analytics/components/application.tsx b/dashboards-observability/public/components/application_analytics/components/application.tsx index 193120682..fa06a2e57 100644 --- a/dashboards-observability/public/components/application_analytics/components/application.tsx +++ b/dashboards-observability/public/components/application_analytics/components/application.tsx @@ -42,8 +42,8 @@ import { TAB_LOG_TITLE, TAB_OVERVIEW_ID_TXT_PFX, TAB_OVERVIEW_TITLE, - TAB_PANEL_ID_TXT_PFX, - TAB_PANEL_TITLE, + TAB_METRIC_ID_TXT_PFX, + TAB_METRIC_TITLE, TAB_SERVICE_ID_TXT_PFX, TAB_SERVICE_TITLE, TAB_TRACE_ID_TXT_PFX, @@ -65,7 +65,7 @@ const TAB_OVERVIEW_ID = uniqueId(TAB_OVERVIEW_ID_TXT_PFX); const TAB_SERVICE_ID = uniqueId(TAB_SERVICE_ID_TXT_PFX); const TAB_TRACE_ID = uniqueId(TAB_TRACE_ID_TXT_PFX); const TAB_LOG_ID = uniqueId(TAB_LOG_ID_TXT_PFX); -const TAB_PANEL_ID = uniqueId(TAB_PANEL_ID_TXT_PFX); +const TAB_METRIC_ID = uniqueId(TAB_METRIC_ID_TXT_PFX); const TAB_CONFIG_ID = uniqueId(TAB_CONFIG_ID_TXT_PFX); const searchBarConfigs = { [TAB_EVENT_ID]: { @@ -373,8 +373,8 @@ export function Application(props: AppDetailProps) { getContent: () => getLog(), }), getAppAnalyticsTab({ - tabId: TAB_PANEL_ID, - tabTitle: TAB_PANEL_TITLE, + tabId: TAB_METRIC_ID, + tabTitle: TAB_METRIC_TITLE, getContent: () => getPanel(), }), getAppAnalyticsTab({