Refactor cluster and application handling

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-NOTE: As semantic versioning states all 0.y.z releases can contain breaking changes in API (flags, grpc API, any backward compatibility). We use :warning: Breaking change :warning: to mark changes that are not backward compatible (relates only to v0.y.z releases).
+NOTE: As semantic versioning states all 0.y.z releases can contain breaking changes in API (flags, grpc API, any backward compatibility). We use :warning: *Breaking change:* :warning: to mark changes that are not backward compatible (relates only to v0.y.z releases).
 
 ## Unreleased
 
@@ -23,3 +23,4 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 ### Changed
 
 - [#7](https://github.com/kobsio/kobs/pull/7): Share datasource options between components and allow sharing of URLs.
+- [#11](https://github.com/kobsio/kobs/pull/11): :warning: *Breaking change:* :warning: Refactor cluster and application handling.

CONTRIBUTING.md

@@ -34,7 +34,7 @@ The following section explains various suggestions and procedures to note during
 ### Prerequisites
 
 - It is strongly recommended that you use macOS or Linux distributions for development.
-- You have Go 1.15.0 or newer installed.
+- You have Go 1.16.0 or newer installed.
 - You have Node.js 14.0.0 or newer installed.
 - For the React UI, you will need a working NodeJS environment and the Yarn package manager to compile the Web UI assets.
 

Makefile

@@ -5,6 +5,8 @@ REPO        ?= github.com/kobsio/kobs
 REVISION    ?= $(shell git rev-parse HEAD)
 VERSION     ?= $(shell git describe --tags)
 
+PLUGINS ?= $(shell find ./proto -name '*.proto' | sed -e 's/^.\/proto\///' | sed -e 's/.proto//')
+
 .PHONY: build
 build:
 	@go build -ldflags "-X ${REPO}/pkg/version.Version=${VERSION} \
@@ -19,28 +21,26 @@ generate: generate-proto generate-crd
 
 .PHONY: generate-proto
 generate-proto:
-	@protoc --proto_path=proto --go_out=pkg/generated/proto --go_opt=paths=source_relative --go-grpc_out=pkg/generated/proto --go-grpc_opt=paths=source_relative --deepcopy_out=pkg/generated/proto --js_out=import_style=commonjs:app/src/generated/proto --plugin=protoc-gen-ts=app/node_modules/.bin/protoc-gen-ts --ts_out=service=grpc-web:app/src/generated/proto --grpc-web_out=import_style=commonjs,mode=grpcwebtext:app/src/generated/proto proto/clusters.proto
-	@protoc --proto_path=proto --go_out=pkg/generated/proto --go_opt=paths=source_relative --go-grpc_out=pkg/generated/proto --go-grpc_opt=paths=source_relative --deepcopy_out=pkg/generated/proto --js_out=import_style=commonjs:app/src/generated/proto --plugin=protoc-gen-ts=app/node_modules/.bin/protoc-gen-ts --ts_out=service=grpc-web:app/src/generated/proto --grpc-web_out=import_style=commonjs,mode=grpcwebtext:app/src/generated/proto proto/datasources.proto
-	@protoc --proto_path=proto --go_out=pkg/generated/proto --go_opt=paths=source_relative --go-grpc_out=pkg/generated/proto --go-grpc_opt=paths=source_relative --deepcopy_out=pkg/generated/proto --js_out=import_style=commonjs:app/src/generated/proto --plugin=protoc-gen-ts=app/node_modules/.bin/protoc-gen-ts --ts_out=service=grpc-web:app/src/generated/proto --grpc-web_out=import_style=commonjs,mode=grpcwebtext:app/src/generated/proto proto/application.proto
-	@rm -rf ./pkg/generated/proto/clusters_deepcopy.gen.go
-	@rm -rf ./pkg/generated/proto/datasources_deepcopy.gen.go
-	@rm -rf ./pkg/generated/proto/application_deepcopy.gen.go
-	@mv ./pkg/generated/proto/github.com/kobsio/kobs/pkg/generated/proto/clusters_deepcopy.gen.go ./pkg/generated/proto
-	@mv ./pkg/generated/proto/github.com/kobsio/kobs/pkg/generated/proto/datasources_deepcopy.gen.go ./pkg/generated/proto
-	@mv ./pkg/generated/proto/github.com/kobsio/kobs/pkg/generated/proto/application_deepcopy.gen.go ./pkg/generated/proto
-	@rm -rf ./pkg/generated/proto/github.com
+	for plugin in $(PLUGINS); do \
+		mkdir -p pkg/api/plugins/$$plugin/proto; \
+		mkdir -p app/src/proto; \
+		protoc --proto_path=proto --go_out=pkg/api/plugins/$$plugin/proto --go_opt=paths=source_relative --go-grpc_out=pkg/api/plugins/$$plugin/proto --go-grpc_opt=paths=source_relative --deepcopy_out=pkg/api/plugins/$$plugin/proto --js_out=import_style=commonjs:app/src/proto --plugin=protoc-gen-ts=app/node_modules/.bin/protoc-gen-ts --ts_out=service=grpc-web:app/src/proto --grpc-web_out=import_style=commonjs,mode=grpcwebtext:app/src/proto proto/$$plugin.proto; \
+		rm -rf ./pkg/api/plugins/$$plugin/proto/$$plugin\_deepcopy.gen.go; \
+		mv ./pkg/api/plugins/$$plugin/proto/github.com/kobsio/kobs/pkg/api/plugins/$$plugin/proto/$$plugin\_deepcopy.gen.go ./pkg/api/plugins/$$plugin/proto; \
+		rm -rf ./pkg/api/plugins/$$plugin/proto/github.com; \
+	done
 
 .PHONY: generate-crd
 generate-crd:
-	@${GOPATH}/src/k8s.io/code-generator/generate-groups.sh "deepcopy,client,informer,lister" github.com/kobsio/kobs/pkg/generated github.com/kobsio/kobs/pkg/api/kubernetes/apis application:v1alpha1 --output-base ./tmp
-	@rm -rf ./pkg/api/kubernetes/apis/application/v1alpha1/zz_generated.deepcopy.go
-	@rm -rf ./pkg/generated/clientset
-	@rm -rf ./pkg/generated/informers
-	@rm -rf ./pkg/generated/listers
-	@mv ./tmp/github.com/kobsio/kobs/pkg/api/kubernetes/apis/application/v1alpha1/zz_generated.deepcopy.go ./pkg/api/kubernetes/apis/application/v1alpha1
-	@mv ./tmp/github.com/kobsio/kobs/pkg/generated/clientset ./pkg/generated/clientset
-	@mv ./tmp/github.com/kobsio/kobs/pkg/generated/informers ./pkg/generated/informers
-	@mv ./tmp/github.com/kobsio/kobs/pkg/generated/listers ./pkg/generated/listers
+	@${GOPATH}/src/k8s.io/code-generator/generate-groups.sh "deepcopy,client,informer,lister" github.com/kobsio/kobs/pkg/api/plugins/application github.com/kobsio/kobs/pkg/api/plugins/application/apis application:v1alpha1 --output-base ./tmp
+	@rm -rf ./pkg/api/plugins/application/apis/application/v1alpha1/zz_generated.deepcopy.go
+	@rm -rf ./pkg/api/plugins/application/clientset
+	@rm -rf ./pkg/api/plugins/application/informers
+	@rm -rf ./pkg/api/plugins/application/listers
+	@mv ./tmp/github.com/kobsio/kobs/pkg/api/plugins/application/apis/application/v1alpha1/zz_generated.deepcopy.go ./pkg/api/plugins/application/apis/application/v1alpha1
+	@mv ./tmp/github.com/kobsio/kobs/pkg/api/plugins/application/clientset ./pkg/api/plugins/application/clientset
+	@mv ./tmp/github.com/kobsio/kobs/pkg/api/plugins/application/informers ./pkg/api/plugins/application/informers
+	@mv ./tmp/github.com/kobsio/kobs/pkg/api/plugins/application/listers ./pkg/api/plugins/application/listers
 	@rm -rf ./tmp
 	-controller-gen "crd:trivialVersions=true" paths="./..." output:crd:artifacts:config=deploy/kustomize/crds
 

app/.eslintignore

@@ -1 +1 @@
-src/generated
+src/proto

app/package.json

@@ -146,16 +146,16 @@
     "@patternfly/react-core": "^4.90.2",
     "@patternfly/react-table": "^4.20.15",
     "@types/google-protobuf": "^3.7.4",
-    "@types/highlight.js": "^10.1.0",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.7",
     "google-protobuf": "^3.15.0-rc.1",
     "grpc-web": "^1.2.1",
-    "highlight.js": "^10.6.0",
     "js-yaml": "^4.0.0",
+    "jsonpath-plus": "^5.0.4",
     "react": "^17.0.1",
+    "react-ace": "^9.3.0",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",

app/src/App.tsx

@@ -1,5 +1,5 @@
-import { Page, PageHeader } from '@patternfly/react-core';
-import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
+import { Brand, Page, PageHeader } from '@patternfly/react-core';
+import { Link, Route, BrowserRouter as Router, Switch } from 'react-router-dom';
 import React from 'react';
 
 import '@patternfly/react-core/dist/styles/base.css';
@@ -9,31 +9,31 @@ import '@patternfly/patternfly/patternfly-charts.css';
 
 import Application from 'components/applications/Application';
 import Applications from 'components/applications/Applications';
-import Datasource from 'components/datasources/Datasource';
-import Datasources from 'components/datasources/Datasources';
-import HeaderLogo from 'components/shared/HeaderLogo';
-import Overview from 'components/overview/Overview';
+import { ClustersContextProvider } from 'context/ClustersContext';
+import Home from 'components/Home';
 import Resources from 'components/resources/Resources';
 
 import 'app.css';
 
 // App is used to set all routes for the react-router and the header for all pages.
 const App: React.FunctionComponent = () => {
-  const Header = <PageHeader logo={<HeaderLogo />} />;
+  const Header = (
+    <PageHeader logoComponent={Link} logoProps={{ to: '/' }} logo={<Brand src="/img/header-logo.png" alt="kobs" />} />
+  );
 
   return (
-    <Router>
-      <Page header={Header}>
-        <Switch>
-          <Route exact={true} path="/" component={Overview} />
-          <Route exact={true} path="/applications" component={Applications} />
-          <Route exact={true} path="/applications/:cluster/:namespace/:name" component={Application} />
-          <Route exact={true} path="/datasources" component={Datasources} />
-          <Route exact={true} path="/datasources/:type/:name" component={Datasource} />
-          <Route exact={true} path="/resources/:kind" component={Resources} />
-        </Switch>
-      </Page>
-    </Router>
+    <ClustersContextProvider>
+      <Router>
+        <Page header={Header}>
+          <Switch>
+            <Route exact={true} path="/" component={Home} />
+            <Route exact={true} path="/applications" component={Applications} />
+            <Route exact={true} path="/applications/:cluster/:namespace/:name" component={Application} />
+            <Route exact={true} path="/resources" component={Resources} />
+          </Switch>
+        </Page>
+      </Router>
+    </ClustersContextProvider>
   );
 };
 

app/src/app.css

@@ -4,121 +4,3 @@
 #root {
   height: 100%;
 }
-
-/* kobs-home-item
- * The items on the home page are clickable, so we have to set the correct cursor style */
-.kobs-home-item {
-  cursor: pointer;
-}
-
-/* kobs-drawer-pagesection
- * When we use a PageSection component within a Drawer component, we have to explicit set the height of the PageSection
- * to 100%. */
-.kobs-drawer-pagesection {
-  min-height: 100%;
-}
-
-/* kobs-drawer-actions
- * Customize the drawer actions. For example we remove the padding from the action buttons, so that they are displayed
- * in one line with the drawer title. */
-.kobs-drawer-actions button {
-  padding: 0;
-}
-
-/* kobs-drawer-panel-body
- * Is used to modify the style of the drawer panel body. For example we have to set the maximum width for tabs used
- * within the drawer and apply some margin for the top and bottom of the tabs content. */
-.kobs-drawer-panel-body .pf-c-tab-content {
-  margin: 16px 0px;
-  max-width: 100%;
-  overflow-x: scroll;
-}
-
-/* kobsio-pagesection-toolbar
- * Is used to display the toolbar within a page section. For that we have to adjust the z-index, so that the toolbar is
- * always displayed above the other components. We also remove the bottom, because the padding is already applied by the
- * PageSection component.
- * We also remove the padding for the ToolbarContent component, so that the ToolbarItems are aligned with the other
- * content in the PageSection. */
-.kobsio-pagesection-toolbar {
-  padding-bottom: 0px;
-  z-index: 300;
-}
-
-.kobsio-pagesection-toolbar .pf-c-toolbar__content {
-  padding: 0px;
-}
-
-/* kobsio-pagesection-tabs
- * This is used if we display tabs at the bottom of a PageSection component, to remove the padding. This allows us to
- * align the tabs line with the end of the PageSection. */
-.kobsio-pagesection-tabs {
-  padding-bottom: 0px;
-}
-
-/* kobs-fullwidth
- * We often need to modify the width of elements, so that they are taken the full width of the parent. For example to
- * display an item in the toolbar, which is aligned on the right side. For that the following class can be used. */
-.kobs-fullwidth {
-  width: 100%;
-}
-
-/* kobsio-options-list
- * Do not center the items vertically and apply some padding between the list items for smaller screens. */
-.kobsio-options-list {
-  align-items: flex-start;
-}
-
-.kobsio-options-list-item {
-  padding-bottom: 16px;
-}
-
-/* kobsio-charts-grid
- * Apply some marging on the top of the charts grid. */
-.kobsio-charts-grid {
-  margin-top: 16px;
-}
-
-/* kobsio-chart-container
- * Set the width and height for a chart. The width and height is applied to the chart container and then used via
- * useRef within the chart. */
-.kobsio-chart-container-default {
-  width: 100%;
-  height: 300px;
-}
-
-.kobsio-chart-container-default-small {
-  width: 100%;
-  height: 200px;
-}
-
-.kobsio-chart-container-sparkline {
-  width: 100%;
-  height: 150px;
-  position: relative;
-}
-
-.kobsio-chart-container-sparkline.small {
-  height: 75px;
-}
-
-.kobsio-chart-container-sparkline-value {
-  width: 100%;
-  top: 63px;
-  font-size: 24px;
-  position: absolute;
-  text-align: center
-}
-
-/* kobsis-table-wrapper
- * Wrap a table component, so it looks nice within a page, but allow scrolling so the user can see all the data. */
-.kobsis-table-wrapper {
-  max-width: 100%;
-  overflow-x: scroll;
-}
-
-/* kobsio-tab-content
- * Set a min height of 100% for the tab content. */
-.kobsio-tab-content {
-  min-height: 100%;
-}

app/src/components/Editor.tsx

@@ -0,0 +1,48 @@
+import React, { useRef } from 'react';
+import AceEditor from 'react-ace';
+
+import 'ace-builds/src-noconflict/mode-yaml';
+import 'ace-builds/src-noconflict/theme-nord_dark';
+
+// IEditorProps is the interface for the Editor props. The editor requires a value, which is shown in the Editor field,
+// a mode, which defines the language. If the editor isn't set to read only the user can also pass in a onChange
+// function to retrieve the changes from the editor.
+interface IEditorProps {
+  value: string;
+  mode: string;
+  readOnly: boolean;
+  onChange?: (newValue: string) => void;
+}
+
+// Editor is the editor component, which can be used to show for example the yaml representation of a resource.
+const Editor: React.FunctionComponent<IEditorProps> = ({ value, mode, readOnly, onChange }: IEditorProps) => {
+  const editor = useRef<AceEditor>(null);
+
+  const changeValue = (newValue: string): void => {
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+
+  return (
+    <AceEditor
+      height="100%"
+      maxLines={Infinity}
+      mode={mode}
+      name="yaml-editor"
+      onChange={changeValue}
+      readOnly={readOnly}
+      ref={editor}
+      setOptions={{
+        useSoftTabs: true,
+      }}
+      showPrintMargin={false}
+      tabSize={2}
+      theme="nord_dark"
+      value={value}
+      width="100%"
+    />
+  );
+};
+
+export default Editor;

app/src/components/Home.tsx

@@ -0,0 +1,26 @@
+import { Gallery, GalleryItem, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import React from 'react';
+
+import { applicationsDescription, resourcesDescription } from 'utils/constants';
+import HomeItem from 'components/HomeItem';
+
+// Home is the root component of kobs. It is used to render a list of pages, which can be used by the user. The items
+// which are displayed to the user are the applications and resources page and a list of all configured plugins.
+// The items for the gallery should always use the HomeItem component, this will render a card, which are selectable. By
+// a click on the item the user is navigated to the corresponding page.
+const Home: React.FunctionComponent = () => {
+  return (
+    <PageSection variant={PageSectionVariants.default}>
+      <Gallery hasGutter={true}>
+        <GalleryItem>
+          <HomeItem title="Applications" body={applicationsDescription} link="/applications" />
+        </GalleryItem>
+        <GalleryItem>
+          <HomeItem title="Resources" body={resourcesDescription} link="/resources" />
+        </GalleryItem>
+      </Gallery>
+    </PageSection>
+  );
+};
+
+export default Home;

app/src/components/HomeItem.tsx

@@ -0,0 +1,29 @@
+import { Card, CardBody, CardTitle } from '@patternfly/react-core';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+// IHomeItemProps is the interface for an item on the home page. Each item contains a title, body and a link.
+interface IHomeItemProps {
+  body: string;
+  link: string;
+  title: string;
+}
+
+// HomeItem is used to render an item in the home page. It requires a title, body and a link. When the card is  clicked,
+// the user is redirected to the provided link.
+const HomeItem: React.FunctionComponent<IHomeItemProps> = ({ body, link, title }: IHomeItemProps) => {
+  const history = useHistory();
+
+  const handleClick = (): void => {
+    history.push(link);
+  };
+
+  return (
+    <Card style={{ cursor: 'pointer' }} isHoverable={true} onClick={handleClick}>
+      <CardTitle>{title}</CardTitle>
+      <CardBody>{body}</CardBody>
+    </Card>
+  );
+};
+
+export default HomeItem;

app/src/components/shared/Title.tsx → app/src/components/Title.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 
+// TTitleSize are is the size type. We support the lg and xl property of Patternfly for the text size of the title.
 type TTitleSize = 'lg' | 'xl';
 
+// ITitleProps are the properties for the Title component. The user must provide the title, subtitle and the size for
+// the title.
 interface ITitleProps {
   title: string;
   subtitle: string;