Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Saving time for individual applications #473

Merged
merged 4 commits into from
Feb 16, 2022
Merged

Saving time for individual applications #473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
49e9fa1
Change default time to 24 hours
eugenesk24 Feb 15, 2022
9c619e6
Check that name is unique
eugenesk24 Feb 15, 2022
4b22203
Save time for individual applications
eugenesk24 Feb 15, 2022
a9a1748
Change panels tab to metrics tab
eugenesk24 Feb 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions dashboards-observability/common/constants/application_analytics.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
2 changes: 1 addition & 1 deletion dashboards-observability/public/components/application_analytics/components/app_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export function AppTable(props: AppTableProps) {

const clear = () => {
setFilters([]);
setStartTime('now-24M');
setStartTime('now-24h');
setEndTime('now');
};

Expand Down
47 changes: 35 additions & 12 deletions dashboards-observability/public/components/application_analytics/components/application.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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]: {
Expand Down Expand Up @@ -112,8 +112,8 @@ export function Application(props: AppDetailProps) {
endTime,
query,
filters,
setStartTime,
setEndTime,
setStartTimeWithStorage,
setEndTimeWithStorage,
setFilters,
setToasts,
} = props;
Expand All @@ -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
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -203,7 +213,16 @@ export function Application(props: AppDetailProps) {
};

const getOverview = () => {
return <Dashboard {...props} page="app" appId={appId} appName={application.name} />;
return (
<Dashboard
{...props}
page="app"
appId={appId}
appName={application.name}
setStartTime={setStartTimeForApp}
setEndTime={setEndTimeForApp}
/>
);
};

const getService = () => {
Expand All @@ -214,6 +233,8 @@ export function Application(props: AppDetailProps) {
appId={appId}
appName={application.name}
openServiceFlyout={openServiceFlyout}
setStartTime={setStartTimeForApp}
setEndTime={setEndTimeForApp}
/>
);
};
Expand All @@ -227,6 +248,8 @@ export function Application(props: AppDetailProps) {
appId={appId}
appName={application.name}
openTraceFlyout={openTraceFlyout}
setStartTime={setStartTimeForApp}
setEndTime={setEndTimeForApp}
/>
<EuiSpacer size="m" />
<EuiPanel>
Expand Down Expand Up @@ -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}
/>
);
Expand All @@ -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}
/>
);
Expand Down Expand Up @@ -350,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({
Expand Down
5 changes: 4 additions & 1 deletion dashboards-observability/public/components/application_analytics/helpers/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,17 @@ 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.');
}
if (name.trim().length === 0) {
toast.push('Name must not be empty.');
}
if (existingNames.includes(name)) {
toast.push('Name must be unique.');
}
return toast;
};

Expand Down
35 changes: 23 additions & 12 deletions dashboards-observability/public/components/application_analytics/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -51,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) => {
Expand All @@ -77,7 +75,7 @@ export const Home = (props: HomeProps) => {
);
const [query, setQuery] = useState<string>(sessionStorage.getItem('AppAnalyticsQuery') || '');
const [startTime, setStartTime] = useState<string>(
sessionStorage.getItem('AppAnalyticsStartTime') || 'now-24M'
sessionStorage.getItem('AppAnalyticsStartTime') || 'now-24h'
);
const [endTime, setEndTime] = useState<string>(
sessionStorage.getItem('AppAnalyticsEndTime') || 'now'
Expand All @@ -100,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(() => {
Expand All @@ -129,8 +130,10 @@ export const Home = (props: HomeProps) => {
setFiltersWithStorage,
startTime,
setStartTime: setStartTimeWithStorage,
setStartTimeWithStorage,
endTime,
setEndTime: setEndTimeWithStorage,
setEndTimeWithStorage,
indicesExist,
};

Expand Down Expand Up @@ -184,7 +187,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;
Expand Down Expand Up @@ -215,7 +221,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');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ideally this message should come from isNameValid so user know why it's invalid

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll add this in the next PR!

return;
}
Expand Down
2 changes: 1 addition & 1 deletion dashboards-observability/public/components/explorer/slices/query_slice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
2 changes: 1 addition & 1 deletion dashboards-observability/server/adaptors/custom_panels/custom_panel_adaptor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export class CustomPanelsAdaptor {
panelBody.applicationId = appId;
panelBody.timeRange = {
to: 'now',
from: 'now-24M',
from: 'now-24h',
};
}

Expand Down