From ed4e67145945ebe074ec121c454739470da8360d Mon Sep 17 00:00:00 2001 From: ricoberger Date: Thu, 30 Jun 2022 14:23:43 +0200 Subject: [PATCH] [app] Add hasDivider prop for PageContentSection The PageContentSection component has now a "hasDivider" property to explicit enable and disable the Divider component. This allows us to also show an diver when no toolbar is set. Before this the divider was only enabled when also a toolbar was provided. --- CHANGELOG.md | 1 + plugins/app/public/browserconfig.xml | 2 +- plugins/app/public/index.html | 4 ++-- plugins/app/public/manifest.json | 6 +++++- .../app/src/components/applications/Application.tsx | 2 +- .../app/src/components/applications/Applications.tsx | 1 + .../app/src/components/dashboards/DashboardPage.tsx | 2 +- plugins/app/src/components/plugins/PluginInstances.tsx | 1 + .../app/src/components/plugins/PluginPageLoading.tsx | 2 +- plugins/app/src/components/profile/Profile.tsx | 2 +- plugins/app/src/components/resources/Resources.tsx | 1 + plugins/app/src/components/settings/Settings.tsx | 2 +- plugins/app/src/components/teams/Team.tsx | 2 +- plugins/app/src/components/teams/Teams.tsx | 1 + plugins/app/src/components/topology/Applications.tsx | 1 + .../src/components/containerinstances/Page.tsx | 2 +- .../src/components/costmanagement/Page.tsx | 1 + .../src/components/kubernetesservices/Page.tsx | 2 +- .../plugin-azure/src/components/page/OverviewPage.tsx | 2 +- .../src/components/virtualmachinescalesets/Page.tsx | 2 +- .../plugin-elasticsearch/src/components/page/Page.tsx | 1 + plugins/plugin-flux/src/components/page/Page.tsx | 1 + plugins/plugin-grafana/src/components/page/Page.tsx | 1 + .../src/components/page/ArtifactsPage.tsx | 1 + .../plugin-harbor/src/components/page/ProjectsPage.tsx | 2 +- .../src/components/page/RepositoriesPage.tsx | 1 + plugins/plugin-helm/src/components/page/Page.tsx | 1 + .../plugin-istio/src/components/page/Application.tsx | 1 + .../plugin-istio/src/components/page/Applications.tsx | 1 + plugins/plugin-jaeger/src/components/page/Traces.tsx | 1 + plugins/plugin-kiali/src/components/page/Page.tsx | 3 ++- .../src/components/page/AggregationPage.tsx | 1 + plugins/plugin-klogs/src/components/page/LogsPage.tsx | 1 + plugins/plugin-opsgenie/src/components/page/Page.tsx | 1 + plugins/plugin-prometheus/src/components/page/Page.tsx | 1 + plugins/plugin-rss/src/components/page/Page.tsx | 2 +- plugins/plugin-sonarqube/src/components/page/Page.tsx | 1 + plugins/plugin-sql/src/components/page/Page.tsx | 1 + .../src/components/page/ServicePage.tsx | 2 +- .../src/components/page/TechDocsPage.tsx | 2 +- .../shared/src/components/misc/PageContentSection.tsx | 10 ++++------ 41 files changed, 50 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ad3c8f5e7..8a84de577 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan - [#367](https://github.com/kobsio/kobs/pull/#367): [app] Change filtering for select components, by using `item.includes(value)`. - [#369](https://github.com/kobsio/kobs/pull/#369): [app] Add `insights` panel, to display the insights of an application within a dashboard. - [#370](https://github.com/kobsio/kobs/pull/#370): [app] Change toolbar handling by replacing the Patternfly `Toolbar` and `ToolbarItem` components with a custom `Toolbar` and `ToolbarItem` component. +- [#371](https://github.com/kobsio/kobs/pull/#371): [app] Change `hasDivider` property to `PageContentSection` component to explicit enable / disable the diver. ## [v0.8.0](https://github.com/kobsio/kobs/releases/tag/v0.8.0) (2022-03-24) diff --git a/plugins/app/public/browserconfig.xml b/plugins/app/public/browserconfig.xml index 7604d97d7..ca3c911ce 100644 --- a/plugins/app/public/browserconfig.xml +++ b/plugins/app/public/browserconfig.xml @@ -1,2 +1,2 @@ -#0066cc +#000000 diff --git a/plugins/app/public/index.html b/plugins/app/public/index.html index 77670f0b3..5da65be8b 100644 --- a/plugins/app/public/index.html +++ b/plugins/app/public/index.html @@ -22,8 +22,8 @@ - - + + kobs diff --git a/plugins/app/public/manifest.json b/plugins/app/public/manifest.json index fcf336834..14b12ff6c 100644 --- a/plugins/app/public/manifest.json +++ b/plugins/app/public/manifest.json @@ -38,5 +38,9 @@ "type": "image/png", "density": "4.0" } - ] + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" } diff --git a/plugins/app/src/components/applications/Application.tsx b/plugins/app/src/components/applications/Application.tsx index 6e9189e01..7f6e1bfc3 100644 --- a/plugins/app/src/components/applications/Application.tsx +++ b/plugins/app/src/components/applications/Application.tsx @@ -104,7 +104,7 @@ const Application: React.FunctionComponent = () => { } /> - + {data.dashboards ? ( ) : ( diff --git a/plugins/app/src/components/applications/Applications.tsx b/plugins/app/src/components/applications/Applications.tsx index 01d949fc1..d8e56a559 100644 --- a/plugins/app/src/components/applications/Applications.tsx +++ b/plugins/app/src/components/applications/Applications.tsx @@ -45,6 +45,7 @@ const Applications: React.FunctionComponent = () => { : undefined} panelContent={ selectedApplication ? ( diff --git a/plugins/app/src/components/dashboards/DashboardPage.tsx b/plugins/app/src/components/dashboards/DashboardPage.tsx index 429e9d3e6..586464387 100644 --- a/plugins/app/src/components/dashboards/DashboardPage.tsx +++ b/plugins/app/src/components/dashboards/DashboardPage.tsx @@ -97,7 +97,7 @@ const DashboardPage: React.FunctionComponent = () => { } /> - + diff --git a/plugins/app/src/components/plugins/PluginInstances.tsx b/plugins/app/src/components/plugins/PluginInstances.tsx index 867f77bc7..8469bae1d 100644 --- a/plugins/app/src/components/plugins/PluginInstances.tsx +++ b/plugins/app/src/components/plugins/PluginInstances.tsx @@ -49,6 +49,7 @@ const PluginInstances: React.FunctionComponent = () => { diff --git a/plugins/app/src/components/plugins/PluginPageLoading.tsx b/plugins/app/src/components/plugins/PluginPageLoading.tsx index e8d9294a3..ab3ed0c29 100644 --- a/plugins/app/src/components/plugins/PluginPageLoading.tsx +++ b/plugins/app/src/components/plugins/PluginPageLoading.tsx @@ -11,7 +11,7 @@ const PluginPageLoading: React.FunctionComponent = () => {
- +

diff --git a/plugins/app/src/components/profile/Profile.tsx b/plugins/app/src/components/profile/Profile.tsx index 154ea1287..386a970cb 100644 --- a/plugins/app/src/components/profile/Profile.tsx +++ b/plugins/app/src/components/profile/Profile.tsx @@ -23,7 +23,7 @@ const Profile: React.FunctionComponent = () => { - + diff --git a/plugins/app/src/components/resources/Resources.tsx b/plugins/app/src/components/resources/Resources.tsx index 31cbd353d..cdb0ce14a 100644 --- a/plugins/app/src/components/resources/Resources.tsx +++ b/plugins/app/src/components/resources/Resources.tsx @@ -43,6 +43,7 @@ const Resources: React.FunctionComponent = () => { : undefined} panelContent={details ? details : undefined} > diff --git a/plugins/app/src/components/settings/Settings.tsx b/plugins/app/src/components/settings/Settings.tsx index cd823db28..3b4f1b30d 100644 --- a/plugins/app/src/components/settings/Settings.tsx +++ b/plugins/app/src/components/settings/Settings.tsx @@ -10,7 +10,7 @@ const Settings: React.FunctionComponent = () => { description="The settings for you hub and all the satellites. You can also view the resources, which are available via each satellite." /> - +
TODO: Show settings
 diff --git a/plugins/app/src/components/teams/Team.tsx b/plugins/app/src/components/teams/Team.tsx index 138d05158..d53806269 100644 --- a/plugins/app/src/components/teams/Team.tsx +++ b/plugins/app/src/components/teams/Team.tsx @@ -108,7 +108,7 @@ const Team: React.FunctionComponent = () => { } /> - + {data.dashboards ? ( ) : ( diff --git a/plugins/app/src/components/teams/Teams.tsx b/plugins/app/src/components/teams/Teams.tsx index d5a46c1f5..966b2cb3f 100644 --- a/plugins/app/src/components/teams/Teams.tsx +++ b/plugins/app/src/components/teams/Teams.tsx @@ -57,6 +57,7 @@ const Teams: React.FunctionComponent = () => { diff --git a/plugins/app/src/components/topology/Applications.tsx b/plugins/app/src/components/topology/Applications.tsx index 009b0fede..d21038def 100644 --- a/plugins/app/src/components/topology/Applications.tsx +++ b/plugins/app/src/components/topology/Applications.tsx @@ -43,6 +43,7 @@ const Applications: React.FunctionComponent = () => { : undefined} panelContent={details} > diff --git a/plugins/plugin-azure/src/components/containerinstances/Page.tsx b/plugins/plugin-azure/src/components/containerinstances/Page.tsx index 7efc3d49d..bfec803ec 100644 --- a/plugins/plugin-azure/src/components/containerinstances/Page.tsx +++ b/plugins/plugin-azure/src/components/containerinstances/Page.tsx @@ -29,7 +29,7 @@ const ContainerInstancesPage: React.FunctionComponent - + diff --git a/plugins/plugin-azure/src/components/costmanagement/Page.tsx b/plugins/plugin-azure/src/components/costmanagement/Page.tsx index bb7f1ddc6..9af7a7996 100644 --- a/plugins/plugin-azure/src/components/costmanagement/Page.tsx +++ b/plugins/plugin-azure/src/components/costmanagement/Page.tsx @@ -52,6 +52,7 @@ const CostManagementPage: React.FunctionComponent = ({ } diff --git a/plugins/plugin-azure/src/components/kubernetesservices/Page.tsx b/plugins/plugin-azure/src/components/kubernetesservices/Page.tsx index e9a059198..0258b2975 100644 --- a/plugins/plugin-azure/src/components/kubernetesservices/Page.tsx +++ b/plugins/plugin-azure/src/components/kubernetesservices/Page.tsx @@ -29,7 +29,7 @@ const KubernetesServicesPage: React.FunctionComponent - + diff --git a/plugins/plugin-azure/src/components/page/OverviewPage.tsx b/plugins/plugin-azure/src/components/page/OverviewPage.tsx index 8e34f2628..55545e645 100644 --- a/plugins/plugin-azure/src/components/page/OverviewPage.tsx +++ b/plugins/plugin-azure/src/components/page/OverviewPage.tsx @@ -29,7 +29,7 @@ const OverviewPage: React.FunctionComponent = ({ instance }: } /> - + {Object.keys(services).map((service) => ( diff --git a/plugins/plugin-azure/src/components/virtualmachinescalesets/Page.tsx b/plugins/plugin-azure/src/components/virtualmachinescalesets/Page.tsx index 2e609d2e5..ea52c354c 100644 --- a/plugins/plugin-azure/src/components/virtualmachinescalesets/Page.tsx +++ b/plugins/plugin-azure/src/components/virtualmachinescalesets/Page.tsx @@ -29,7 +29,7 @@ const VirtualMachineScaleSetsPage: React.FunctionComponent - + diff --git a/plugins/plugin-elasticsearch/src/components/page/Page.tsx b/plugins/plugin-elasticsearch/src/components/page/Page.tsx index 3c8b238e9..3a08065b0 100644 --- a/plugins/plugin-elasticsearch/src/components/page/Page.tsx +++ b/plugins/plugin-elasticsearch/src/components/page/Page.tsx @@ -80,6 +80,7 @@ const Page: React.FunctionComponent = ({ instance }: IPluginPa } panelContent={undefined} > diff --git a/plugins/plugin-flux/src/components/page/Page.tsx b/plugins/plugin-flux/src/components/page/Page.tsx index e246281eb..253fcf025 100644 --- a/plugins/plugin-flux/src/components/page/Page.tsx +++ b/plugins/plugin-flux/src/components/page/Page.tsx @@ -45,6 +45,7 @@ const Page: React.FunctionComponent = ({ instance }: IPluginPa } panelContent={details} > diff --git a/plugins/plugin-grafana/src/components/page/Page.tsx b/plugins/plugin-grafana/src/components/page/Page.tsx index d73976813..c633a6199 100644 --- a/plugins/plugin-grafana/src/components/page/Page.tsx +++ b/plugins/plugin-grafana/src/components/page/Page.tsx @@ -41,6 +41,7 @@ const Page: React.FunctionComponent = ({ instance }: IPluginPa } panelContent={undefined} > diff --git a/plugins/plugin-harbor/src/components/page/ArtifactsPage.tsx b/plugins/plugin-harbor/src/components/page/ArtifactsPage.tsx index 5b64fd6a2..2a4ec8015 100644 --- a/plugins/plugin-harbor/src/components/page/ArtifactsPage.tsx +++ b/plugins/plugin-harbor/src/components/page/ArtifactsPage.tsx @@ -99,6 +99,7 @@ const ArtifactsPage: React.FunctionComponent = ({ instance } panelContent={details} > diff --git a/plugins/plugin-harbor/src/components/page/ProjectsPage.tsx b/plugins/plugin-harbor/src/components/page/ProjectsPage.tsx index e5222bd9d..9b494c7cc 100644 --- a/plugins/plugin-harbor/src/components/page/ProjectsPage.tsx +++ b/plugins/plugin-harbor/src/components/page/ProjectsPage.tsx @@ -89,7 +89,7 @@ const ProjectsPage: React.FunctionComponent = ({ instance }: } /> - + {isLoading ? (
diff --git a/plugins/plugin-harbor/src/components/page/RepositoriesPage.tsx b/plugins/plugin-harbor/src/components/page/RepositoriesPage.tsx index ba3f2dbbb..93600dec2 100644 --- a/plugins/plugin-harbor/src/components/page/RepositoriesPage.tsx +++ b/plugins/plugin-harbor/src/components/page/RepositoriesPage.tsx @@ -97,6 +97,7 @@ const RepositoriesPage: React.FunctionComponent = ({ ins } panelContent={undefined} > diff --git a/plugins/plugin-helm/src/components/page/Page.tsx b/plugins/plugin-helm/src/components/page/Page.tsx index 15748cb19..31249b7e4 100644 --- a/plugins/plugin-helm/src/components/page/Page.tsx +++ b/plugins/plugin-helm/src/components/page/Page.tsx @@ -50,6 +50,7 @@ const Page: React.FunctionComponent = ({ instance }: IPluginPa } panelContent={details} > diff --git a/plugins/plugin-istio/src/components/page/Application.tsx b/plugins/plugin-istio/src/components/page/Application.tsx index c7621e201..0f743986a 100644 --- a/plugins/plugin-istio/src/components/page/Application.tsx +++ b/plugins/plugin-istio/src/components/page/Application.tsx @@ -74,6 +74,7 @@ const Application: React.FunctionComponent = ({ instance }: I } panelContent={details} > diff --git a/plugins/plugin-istio/src/components/page/Applications.tsx b/plugins/plugin-istio/src/components/page/Applications.tsx index e41342bdb..cc126f669 100644 --- a/plugins/plugin-istio/src/components/page/Applications.tsx +++ b/plugins/plugin-istio/src/components/page/Applications.tsx @@ -58,6 +58,7 @@ const Applications: React.FunctionComponent = ({ instance }: } panelContent={undefined} > diff --git a/plugins/plugin-jaeger/src/components/page/Traces.tsx b/plugins/plugin-jaeger/src/components/page/Traces.tsx index 7d28a3d0b..3ae30d20c 100644 --- a/plugins/plugin-jaeger/src/components/page/Traces.tsx +++ b/plugins/plugin-jaeger/src/components/page/Traces.tsx @@ -54,6 +54,7 @@ const Traces: React.FunctionComponent = ({ instance }: ITracesProp } panelContent={details} > diff --git a/plugins/plugin-kiali/src/components/page/Page.tsx b/plugins/plugin-kiali/src/components/page/Page.tsx index a200d49bf..b05a51632 100644 --- a/plugins/plugin-kiali/src/components/page/Page.tsx +++ b/plugins/plugin-kiali/src/components/page/Page.tsx @@ -47,8 +47,9 @@ const Page: React.FunctionComponent = ({ instance }: IPluginPa } /> } hasPadding={true} + hasDivider={true} + toolbarContent={} panelContent={details} > {options.namespaces && options.namespaces.length > 0 ? ( diff --git a/plugins/plugin-klogs/src/components/page/AggregationPage.tsx b/plugins/plugin-klogs/src/components/page/AggregationPage.tsx index f0bb3d0ec..d1dea63f9 100644 --- a/plugins/plugin-klogs/src/components/page/AggregationPage.tsx +++ b/plugins/plugin-klogs/src/components/page/AggregationPage.tsx @@ -60,6 +60,7 @@ const AggregationPage: React.FunctionComponent = ({ insta } panelContent={undefined} > diff --git a/plugins/plugin-klogs/src/components/page/LogsPage.tsx b/plugins/plugin-klogs/src/components/page/LogsPage.tsx index aee2470e2..10eec3c39 100644 --- a/plugins/plugin-klogs/src/components/page/LogsPage.tsx +++ b/plugins/plugin-klogs/src/components/page/LogsPage.tsx @@ -106,6 +106,7 @@ const LogsPage: React.FunctionComponent = ({ instance }: ILogsPa } panelContent={undefined} > diff --git a/plugins/plugin-opsgenie/src/components/page/Page.tsx b/plugins/plugin-opsgenie/src/components/page/Page.tsx index f492be79b..107491216 100644 --- a/plugins/plugin-opsgenie/src/components/page/Page.tsx +++ b/plugins/plugin-opsgenie/src/components/page/Page.tsx @@ -48,6 +48,7 @@ const Page: React.FunctionComponent = ({ instance }: IPluginPa } panelContent={details} > diff --git a/plugins/plugin-prometheus/src/components/page/Page.tsx b/plugins/plugin-prometheus/src/components/page/Page.tsx index af541c806..f5a9267e4 100644 --- a/plugins/plugin-prometheus/src/components/page/Page.tsx +++ b/plugins/plugin-prometheus/src/components/page/Page.tsx @@ -47,6 +47,7 @@ const Page: React.FunctionComponent = ({ instance }: IPluginPa } panelContent={undefined} > diff --git a/plugins/plugin-rss/src/components/page/Page.tsx b/plugins/plugin-rss/src/components/page/Page.tsx index ac0b7d1a6..1ed83af88 100644 --- a/plugins/plugin-rss/src/components/page/Page.tsx +++ b/plugins/plugin-rss/src/components/page/Page.tsx @@ -16,7 +16,7 @@ const Page: React.FunctionComponent = ({ instance }: IPluginPa } /> - +
diff --git a/plugins/plugin-sonarqube/src/components/page/Page.tsx b/plugins/plugin-sonarqube/src/components/page/Page.tsx index 92347a4f4..a81ccdc40 100644 --- a/plugins/plugin-sonarqube/src/components/page/Page.tsx +++ b/plugins/plugin-sonarqube/src/components/page/Page.tsx @@ -92,6 +92,7 @@ const Page: React.FunctionComponent = ({ instance }: IPluginPa } panelContent={undefined} > diff --git a/plugins/plugin-sql/src/components/page/Page.tsx b/plugins/plugin-sql/src/components/page/Page.tsx index 507d43e50..c1193e7cc 100644 --- a/plugins/plugin-sql/src/components/page/Page.tsx +++ b/plugins/plugin-sql/src/components/page/Page.tsx @@ -41,6 +41,7 @@ const Page: React.FunctionComponent = ({ instance }: IPluginPa } panelContent={undefined} > diff --git a/plugins/plugin-techdocs/src/components/page/ServicePage.tsx b/plugins/plugin-techdocs/src/components/page/ServicePage.tsx index 4d14da352..1637bf4a8 100644 --- a/plugins/plugin-techdocs/src/components/page/ServicePage.tsx +++ b/plugins/plugin-techdocs/src/components/page/ServicePage.tsx @@ -94,7 +94,7 @@ const ServicePage: React.FunctionComponent = ({ instance }: I component={} /> - + = ({ instance }: } /> - + diff --git a/plugins/shared/src/components/misc/PageContentSection.tsx b/plugins/shared/src/components/misc/PageContentSection.tsx index 2f80d05a2..508792b1b 100644 --- a/plugins/shared/src/components/misc/PageContentSection.tsx +++ b/plugins/shared/src/components/misc/PageContentSection.tsx @@ -3,6 +3,7 @@ import React from 'react'; interface IPageContentSectionProps { hasPadding: boolean; + hasDivider: boolean; panelContent: React.ReactNode; toolbarContent: React.ReactNode; children: React.ReactElement; @@ -10,6 +11,7 @@ interface IPageContentSectionProps { export const PageContentSection: React.FunctionComponent = ({ hasPadding, + hasDivider, panelContent, toolbarContent, children, @@ -17,12 +19,8 @@ export const PageContentSection: React.FunctionComponent - {toolbarContent && ( - - {toolbarContent} - - - )} + {toolbarContent && {toolbarContent}} + {hasDivider && } {children}