Skip to content

Commit

Permalink
feat(pci-load-balancer): logs
Browse files Browse the repository at this point in the history
ref: DTCORE-2664
Signed-off-by: Florian Renaut <[email protected]>
  • Loading branch information
frenautvh committed Oct 10, 2024
1 parent ba191b6 commit 2921eaf
Show file tree
Hide file tree
Showing 15 changed files with 228 additions and 35 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,7 @@
"see_more_label": "Mehr erfahren",
"octavia_load_balancer_logs_breadcrumb_label": "Logs",
"octavia_load_balancer_logs_main_description": "Im Folgenden finden Sie die Logs Ihres Loadbalancers für TCP-, HTTP-, HTTPS- und TERMINATED_HTTPS-Listener (UDP wird nicht unterstützt). Diese Logs werden von der Open-Source-Komponente HAProxy generiert.",
"octavia_load_balancer_data_streams_description_haproxy": "Wenn Sie die HAProxy-Logs Ihres Loadbalancers abonnieren, werden sie auf die Logs Data Platform übertragen. Sie können sie mit Ihren anderen Logs zentralisieren, erweiterte Suchvorgänge durchführen, ihre Aufbewahrung verwalten, Alarme definieren und Dashboards erstellen, um Ihre Anwendungen mit Loadbalancer zu überwachen."
"octavia_load_balancer_data_streams_description_haproxy": "Wenn Sie die HAProxy-Logs Ihres Loadbalancers abonnieren, werden sie auf die Logs Data Platform übertragen. Sie können sie mit Ihren anderen Logs zentralisieren, erweiterte Suchvorgänge durchführen, ihre Aufbewahrung verwalten, Alarme definieren und Dashboards erstellen, um Ihre Anwendungen mit Loadbalancer zu überwachen.",
"logs_list_add_data_stream_button": "Stream hinzufügen",
"logs_list_title": "Streams"
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,7 @@
"see_more_label": "Find out more",
"octavia_load_balancer_logs_breadcrumb_label": "Logs",
"octavia_load_balancer_logs_main_description": "Below are the logs for your load balancer, separated into categories such as TCP, HTTP, HTTPS, and TERMINATED_HTTPS (please note that UDP is not supported). These logs are those generated by the HAProxy OpenSource component.",
"octavia_load_balancer_data_streams_description_haproxy": "By subscribing to your Load Balancer’s haproxy logs, they will be seamlessly transferred to the Logs Data Platform. You can centralise them with your other logs, conduct advanced searches, manage their retention, set alerts, and set up dashboards to monitor your applications using Load Balancers."
"octavia_load_balancer_data_streams_description_haproxy": "By subscribing to your Load Balancer’s haproxy logs, they will be seamlessly transferred to the Logs Data Platform. You can centralise them with your other logs, conduct advanced searches, manage their retention, set alerts, and set up dashboards to monitor your applications using Load Balancers.",
"logs_list_add_data_stream_button": "Add data stream",
"logs_list_title": "Data stream"
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,7 @@
"see_more_label": "Más información",
"octavia_load_balancer_logs_breadcrumb_label": "Logs",
"octavia_load_balancer_logs_main_description": "A continuación encontrará los logs de su Load Balancer para los «listeners» de tipo TCP, HTTP, HTTPS y TERMINATED_HTTPS (UDP no es compatible). Estos son los logs generados por el componente open source HAProxy.",
"octavia_load_balancer_data_streams_description_haproxy": "Al suscribirse a los logs HAProxy de su Load Balancer, estos registros se transferirán a Logs Data Platform, desde donde podrá gestionarlos de forma centralizada junto con el resto de sus logs. Además, podrá realizar búsquedas más avanzadas, gestionar sus retenciones, definir alertas y «dashboards» para monitorizar sus aplicaciones que utilizan Load Balancers."
"octavia_load_balancer_data_streams_description_haproxy": "Al suscribirse a los logs HAProxy de su Load Balancer, estos registros se transferirán a Logs Data Platform, desde donde podrá gestionarlos de forma centralizada junto con el resto de sus logs. Además, podrá realizar búsquedas más avanzadas, gestionar sus retenciones, definir alertas y «dashboards» para monitorizar sus aplicaciones que utilizan Load Balancers.",
"logs_list_add_data_stream_button": "Añadir un flujo de datos",
"logs_list_title": "Flujos de datos"
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,8 @@
"see_more_label": "En savoir plus",
"octavia_load_balancer_logs_breadcrumb_label": "Logs",
"octavia_load_balancer_logs_main_description": "Vous trouverez ci-dessous les logs de votre load balancer pour les listeners de type TCP, HTTP, HTTPS & TERMINATED_HTTPS (UDP n'est pas supporté). Ces logs sont ceux générés par le composant OpenSource HAProxy.",
"octavia_load_balancer_data_streams_description_haproxy": "En vous abonnant aux logs haproxy de votre Load Balancer, ils seront transférés dans Logs Data Platform et vous pourrez les centraliser avec vos autres logs, effectuer des recherches avancées, gérer leurs rétentions, définir des alertes ainsi que des tableaux de bord pour observer vos applications utilisant des Load Balancers."
"octavia_load_balancer_data_streams_description_haproxy": "En vous abonnant aux logs haproxy de votre Load Balancer, ils seront transférés dans Logs Data Platform et vous pourrez les centraliser avec vos autres logs, effectuer des recherches avancées, gérer leurs rétentions, définir des alertes ainsi que des tableaux de bord pour observer vos applications utilisant des Load Balancers.",
"logs_list_add_data_stream_button": "Ajouter un flux de données",
"kube_logs_tab_title": "Logs",
"logs_list_title": "Flux de données"
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,8 @@
"see_more_label": "En savoir plus",
"octavia_load_balancer_logs_breadcrumb_label": "Logs",
"octavia_load_balancer_logs_main_description": "Vous trouverez ci-dessous les logs de votre load balancer pour les listeners de type TCP, HTTP, HTTPS & TERMINATED_HTTPS (UDP n'est pas supporté). Ces logs sont ceux générés par le composant OpenSource HAProxy.",
"octavia_load_balancer_data_streams_description_haproxy": "En vous abonnant aux logs haproxy de votre Load Balancer, ils seront transférés dans Logs Data Platform et vous pourrez les centraliser avec vos autres logs, effectuer des recherches avancées, gérer leurs rétentions, définir des alertes ainsi que des tableaux de bord pour observer vos applications utilisant des Load Balancers."
"octavia_load_balancer_data_streams_description_haproxy": "En vous abonnant aux logs haproxy de votre Load Balancer, ils seront transférés dans Logs Data Platform et vous pourrez les centraliser avec vos autres logs, effectuer des recherches avancées, gérer leurs rétentions, définir des alertes ainsi que des tableaux de bord pour observer vos applications utilisant des Load Balancers.",
"logs_list_add_data_stream_button": "Ajouter un flux de données",
"kube_logs_tab_title": "Logs",
"logs_list_title": "Flux de données"
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,8 @@
"see_more_label": "Scopri di più",
"octavia_load_balancer_logs_breadcrumb_label": "Log",
"octavia_load_balancer_logs_main_description": "Qui sotto sono disponibili i log del tuo Load Balancer per i listener di tipo TCP, HTTP, HTTPS &amp; TERMINATED_HTTPS (UDP non supportato). Questi log sono quelli generati dal componente OpenSource HAProxy.",
"octavia_load_balancer_data_streams_description_haproxy": "Abbonandoti ai log haproxy del tuo Load Balancer, saranno trasferiti in Logs Data Platform e potrai centralizzarli con altri log, effettuare ricerche avanzate, gestire la loro retention, definire allarmi e creare dashboard per osservare le applicazioni che utilizzano i Load Balancer."
"octavia_load_balancer_data_streams_description_haproxy": "Abbonandoti ai log haproxy del tuo Load Balancer, saranno trasferiti in Logs Data Platform e potrai centralizzarli con altri log, effettuare ricerche avanzate, gestire la loro retention, definire allarmi e creare dashboard per osservare le applicazioni che utilizzano i Load Balancer.",
"logs_list_add_data_stream_button": "Aggiungere un flusso di dati",
"kube_logs_tab_title": "Log",
"logs_list_title": "Flussi di dati"
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,8 @@
"see_more_label": "Dowiedz się więcej",
"octavia_load_balancer_logs_breadcrumb_label": "Logi",
"octavia_load_balancer_logs_main_description": "Poniżej znajdziesz logi Load Balancera dla nasłuchów TCP, HTTP, HTTPS i TERMINATED_HTTPS (UDP nie jest obsługiwany). Logi te są generowane przez komponent OpenSource HAProxy.",
"octavia_load_balancer_data_streams_description_haproxy": "Po tym, jak zasubskrybujesz logi haproxy Load Balancera, zostaną one przeniesione do Logs Data Platform. Będziesz mógł je scentralizować z innymi logami, uruchamiać zaawansowane wyszukiwanie, zarządzać retencją, definiować alerty oraz dashboardy umożliwiające obserwację aplikacji korzystających z Load Balancerów."
"octavia_load_balancer_data_streams_description_haproxy": "Po tym, jak zasubskrybujesz logi haproxy Load Balancera, zostaną one przeniesione do Logs Data Platform. Będziesz mógł je scentralizować z innymi logami, uruchamiać zaawansowane wyszukiwanie, zarządzać retencją, definiować alerty oraz dashboardy umożliwiające obserwację aplikacji korzystających z Load Balancerów.",
"logs_list_add_data_stream_button": "Dodaj strumień danych",
"kube_logs_tab_title": "Logi",
"logs_list_title": "Strumień danych"
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,8 @@
"see_more_label": "Saber mais",
"octavia_load_balancer_logs_breadcrumb_label": "Logs",
"octavia_load_balancer_logs_main_description": "Encontrará abaixo os logs do seu Load Balancer para os “listeners” de tipo TCP, HTTP, HTTPS e TERMINATED_HTTPS (UDP não é suportado). Estes são os logs gerados pelo componente open source HAProxy.",
"octavia_load_balancer_data_streams_description_haproxy": "Ao subscrever os logs HAProxy do seu Load Balancer, estes registos serão transferidos para o Logs Data Platform, de onde poderá geri-los de forma centralizada com os seus outros logs. Além disso, poderá efetuar pesquisas mais avançadas, gerir as suas retenções, definir alertas, bem como painéis de controlo para monitorizar as aplicações que utilizam Load Balancers."
"octavia_load_balancer_data_streams_description_haproxy": "Ao subscrever os logs HAProxy do seu Load Balancer, estes registos serão transferidos para o Logs Data Platform, de onde poderá geri-los de forma centralizada com os seus outros logs. Além disso, poderá efetuar pesquisas mais avançadas, gerir as suas retenções, definir alertas, bem como painéis de controlo para monitorizar as aplicações que utilizam Load Balancers.",
"logs_list_add_data_stream_button": "Adicionar um fluxo de dados",
"kube_logs_tab_title": "Logs",
"logs_list_title": "Fluxo de dados"
}
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const sortResults = <T>(items: T[], sorting: ColumnSort): T[] => {
};

export const getFormattedDate = (date: string | null, formatStr = 'PPpp') => {
const { i18n } = useTranslation('common');
const { i18n } = useTranslation();

const locales = useRef({ ...dateFnsLocales }).current;

Expand Down
4 changes: 2 additions & 2 deletions packages/manager/apps/pci-load-balancer/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const init = async (
await initI18n({
context,
reloadOnLocaleChange,
ns: ['common'],
defaultNS: 'common',
ns: ['pci-common'],
defaultNS: 'pci-common',
});

ReactDOM.createRoot(document.getElementById('root')).render(
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { LogProvider } from '@ovh-ux/manager-pci-common';
import { useMe } from '@ovh-ux/manager-react-components';
import { LOAD_BALANCER_LOGS_SERVICE_GUIDE_LINK } from '@/constants';

export interface KubeLogsProviderProps {
loadBalancerId: string;
projectId: string;
region: string;
}

export function LoadBalancerLogsProvider({
children,
loadBalancerId,
projectId,
region,
}: React.PropsWithChildren<KubeLogsProviderProps>) {
const ovhSubsidiary = useMe()?.me?.ovhSubsidiary;
return (
<LogProvider
logsApiURL={`/cloud/project/${projectId}/region/${region}/loadbalancing/loadbalancer/${loadBalancerId}/log`}
logsKeys={[
'client_ip',
'http_verb',
'http_request',
'http_version_num',
'http_status_int',
'bytes_uploaded_int',
]}
logsKind="haproxy"
logsGuideURL={
LOAD_BALANCER_LOGS_SERVICE_GUIDE_LINK[ovhSubsidiary] ||
LOAD_BALANCER_LOGS_SERVICE_GUIDE_LINK.DEFAULT
}
logsTracking={
{
// @TODO wait for implementation
// graylogWatch: '',
// ldpDetails: '',
// subscribe: '',
// unsubscribe: '',
// createAccount: '',
// createDataStream: '',
// transfer: '',
}
}
>
{children}
</LogProvider>
);
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useState } from 'react';
import { clsx } from 'clsx';
import { useNavigate, useParams } from 'react-router-dom';
import { OsdsIcon, OsdsLink, OsdsText } from '@ovhcloud/ods-components/react';
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import {
Expand All @@ -11,20 +10,25 @@ import {
import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
import { Notifications, useMe } from '@ovh-ux/manager-react-components';
import { useTranslation } from 'react-i18next';
// import { useParams } from 'react-router-dom';
import { LogsView } from '@ovh-ux/manager-pci-common';
import { LOAD_BALANCER_LOGS_SERVICE_GUIDE_LINK } from '@/constants';
import { LoadBalancerLogsProvider } from './LoadBalancerLogsProvider';

export default function LogsPage() {
const { t } = useTranslation('logs');
// const { projectId, region, loadBalancerId } = useParams();
const [isFullscreen /* setIsFullscreen */] = useState(false);
const { projectId, loadBalancerId, region } = useParams();
const navigate = useNavigate();
const ovhSubsidiary = useMe()?.me?.ovhSubsidiary;
const infoLink =
LOAD_BALANCER_LOGS_SERVICE_GUIDE_LINK[ovhSubsidiary] ||
LOAD_BALANCER_LOGS_SERVICE_GUIDE_LINK.DEFAULT;

return (
<>
<LoadBalancerLogsProvider
loadBalancerId={loadBalancerId}
projectId={projectId}
region={region}
>
<Notifications />
<OsdsText
size={ODS_TEXT_SIZE._400}
Expand All @@ -50,22 +54,7 @@ export default function LogsPage() {
/>
</span>
</OsdsLink>
<div
className={clsx(
'flex mt-4 md:h-[600px]',
isFullscreen ? 'flex-col' : 'flex-col md:flex-row',
)}
>
<div className={clsx(isFullscreen || 'w-full md:w-[68%] h-full')}></div>

<div
className={clsx(
isFullscreen ||
'w-full md:w-[32%] h-full overflow-y-auto mt-4 md:mt-0 ml-0 md:ml-4',
'min-h-0',
)}
></div>
</div>
</>
<LogsView onGotoStreams={() => navigate('./streams')} />
</LoadBalancerLogsProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import { useHref, useParams } from 'react-router-dom';
import {
ODS_BUTTON_SIZE,
ODS_BUTTON_VARIANT,
ODS_ICON_NAME,
ODS_ICON_SIZE,
ODS_TEXT_LEVEL,
ODS_TEXT_SIZE,
} from '@ovhcloud/ods-components';
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import {
OsdsButton,
OsdsIcon,
OsdsLink,
OsdsText,
} from '@ovhcloud/ods-components/react';
import { useTranslation } from 'react-i18next';
import { useContext, useState } from 'react';
import {
Notifications,
useNotifications,
} from '@ovh-ux/manager-react-components';
import { ShellContext } from '@ovh-ux/manager-react-shell-client';
import {
DbaasLogsAccountSelector,
StreamsList,
TDbaasLog,
} from '@ovh-ux/manager-pci-common';
import { LoadBalancerLogsProvider } from './LoadBalancerLogsProvider';

export default function StreamsPage() {
const { projectId, loadBalancerId, region } = useParams();
const { t } = useTranslation('logs');
const { t: tCommon } = useTranslation('pci-common');
const { navigation } = useContext(ShellContext).shell;
const backHref = useHref('../logs');
const { clearNotifications } = useNotifications();
const [account, setAccount] = useState<TDbaasLog>();

const gotoAddDataStream = async () =>
navigation
.getURL(
'dedicated',
`#/dbaas/logs/${account?.serviceName}/streams/add`,
{},
)
.then((url: string) => window.open(url, '_blank'));

return (
<LoadBalancerLogsProvider
loadBalancerId={loadBalancerId}
projectId={projectId}
region={region}
>
<Notifications />
<div className="mb-6">
<OsdsLink
color={ODS_THEME_COLOR_INTENT.primary}
href={backHref}
onClick={() => {
clearNotifications();
}}
>
<span slot="start">
<OsdsIcon
className="mr-4"
name={ODS_ICON_NAME.ARROW_LEFT}
color={ODS_THEME_COLOR_INTENT.primary}
size={ODS_ICON_SIZE.xxs}
/>
</span>
{tCommon('common_back_button_back_to_previous_page')}
</OsdsLink>
</div>
<OsdsText
level={ODS_TEXT_LEVEL.heading}
size={ODS_TEXT_SIZE._400}
color={ODS_THEME_COLOR_INTENT.text}
>
{t('logs_list_title')}
</OsdsText>
<p>
<OsdsText
level={ODS_TEXT_LEVEL.body}
size={ODS_TEXT_SIZE._400}
color={ODS_THEME_COLOR_INTENT.text}
>
{t('octavia_load_balancer_data_streams_description_haproxy')}
</OsdsText>
</p>

<OsdsButton
className="mt-4"
color={ODS_THEME_COLOR_INTENT.primary}
size={ODS_BUTTON_SIZE.sm}
variant={ODS_BUTTON_VARIANT.stroked}
onClick={() => {
gotoAddDataStream();
}}
inline
>
<span slot="start">
<OsdsIcon
name={ODS_ICON_NAME.ADD}
size={ODS_ICON_SIZE.xxs}
color={ODS_THEME_COLOR_INTENT.primary}
/>
</span>
{t('logs_list_add_data_stream_button')}
</OsdsButton>

<DbaasLogsAccountSelector
account={account}
onAccountChange={setAccount}
/>

{account && (
<div className="mt-4">
<StreamsList account={account} serviceName={loadBalancerId} />
</div>
)}
</LoadBalancerLogsProvider>
);
}
3 changes: 3 additions & 0 deletions packages/manager/apps/pci-load-balancer/src/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const ROUTE_PATHS = {
STATISTICS: 'statistics',
CERTIFICATES: 'certificates',
LOGS: 'logs',
STREAMS: 'logs/streams',
DELETE: ':region/:loadBalancerId/delete',
};

Expand Down Expand Up @@ -90,6 +91,7 @@ const CertificatesPage = lazy(() =>
import('@/pages/detail/certificates/Certificates.page'),
);
const LogsPage = lazy(() => import('@/pages/detail/log/Log.page'));
const StreamsPage = lazy(() => import('@/pages/detail/log/Streams.page'));
const DeletePage = lazy(() => import('@/pages/delete/Delete.page'));
const EditLoadBalancerNamePage = lazy(() =>
import('@/pages/detail/edit/Edit.page'),
Expand Down Expand Up @@ -214,6 +216,7 @@ const Routes = (
Component={CertificatesPage}
/>
<Route id="detail-logs" path={ROUTE_PATHS.LOGS} Component={LogsPage} />
<Route id="streams" path={ROUTE_PATHS.STREAMS} Component={StreamsPage} />
</Route>
<Route path="" element={<>Page not found</>}></Route>
</Route>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,13 @@ export const useLogsDetails = (logsApiURL: string, logsKind: string) => {
return useQueries({
queries:
subscribedLogs?.map(({ serviceName, streamId }) => ({
queryKey: ['dbaas-logs-details', logsApiURL, logsKind],
queryKey: [
'dbaas-logs-details',
logsApiURL,
logsKind,
serviceName,
streamId,
],
queryFn: async () => {
const stream = await getStream(serviceName, streamId);
const streamURL = await getStreamURL(serviceName, streamId);
Expand Down

0 comments on commit 2921eaf

Please sign in to comment.