kobsio · ricoberger · Feb 28, 2021 · Feb 28, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 ### Added
 
 - [#4](https://github.com/kobsio/kobs/pull/4): Add Custom Resource Definition for Applications.
+- [#6](https://github.com/kobsio/kobs/pull/6): Add Prometheus as datasource for Application metrics.
 
 ### Fixed
 

diff --git a/Makefile b/Makefile
@@ -20,11 +20,14 @@ 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/applications.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/applications_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/applications_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
 
 .PHONY: generate-crd

diff --git a/app/package.json b/app/package.json
@@ -23,9 +23,36 @@
     ],
     "rules": {
       "react-hooks/exhaustive-deps": "error",
-      "sort-imports": ["error", {"ignoreCase": false, "ignoreDeclarationSort": false, "ignoreMemberSort": false, "memberSyntaxSortOrder": ["none", "all", "multiple", "single"], "allowSeparatedGroups": true}],
-      "sort-keys": ["error", "asc", {"caseSensitive": true, "natural": false, "minKeys": 2}],
-      "sort-vars": ["error", { "ignoreCase": false }],
+      "sort-imports": [
+        "error",
+        {
+          "ignoreCase": false,
+          "ignoreDeclarationSort": false,
+          "ignoreMemberSort": false,
+          "memberSyntaxSortOrder": [
+            "none",
+            "all",
+            "multiple",
+            "single"
+          ],
+          "allowSeparatedGroups": true
+        }
+      ],
+      "sort-keys": [
+        "error",
+        "asc",
+        {
+          "caseSensitive": true,
+          "natural": false,
+          "minKeys": 2
+        }
+      ],
+      "sort-vars": [
+        "error",
+        {
+          "ignoreCase": false
+        }
+      ],
       "@typescript-eslint/explicit-function-return-type": "error",
       "@typescript-eslint/no-empty-function": "error",
       "@typescript-eslint/no-empty-interface": "error",
@@ -35,12 +62,61 @@
       "@typescript-eslint/no-use-before-define": "off",
       "@typescript-eslint/naming-convention": [
         "error",
-        {"format": ["camelCase"], "selector": "default", "leadingUnderscore": "forbid", "trailingUnderscore": "forbid"},
-        {"format": ["camelCase", "UPPER_CASE", "PascalCase"], "selector": "variable", "leadingUnderscore": "forbid", "trailingUnderscore": "forbid"},
-        {"format": ["camelCase", "UPPER_CASE", "PascalCase"], "selector": "property", "leadingUnderscore": "forbid", "trailingUnderscore": "forbid"},
-        {"format": ["PascalCase"], "selector": "interface", "leadingUnderscore": "forbid", "trailingUnderscore": "forbid", "prefix": ["I"]},
-        {"format": ["PascalCase"], "selector": "typeAlias", "leadingUnderscore": "forbid", "trailingUnderscore": "forbid"},
-        {"format": ["PascalCase"], "selector": "typeParameter", "leadingUnderscore": "forbid", "trailingUnderscore": "forbid"}
+        {
+          "format": [
+            "camelCase"
+          ],
+          "selector": "default",
+          "leadingUnderscore": "forbid",
+          "trailingUnderscore": "forbid"
+        },
+        {
+          "format": [
+            "camelCase",
+            "UPPER_CASE",
+            "PascalCase"
+          ],
+          "selector": "variable",
+          "leadingUnderscore": "forbid",
+          "trailingUnderscore": "forbid"
+        },
+        {
+          "format": [
+            "camelCase",
+            "UPPER_CASE",
+            "PascalCase"
+          ],
+          "selector": "property",
+          "leadingUnderscore": "forbid",
+          "trailingUnderscore": "forbid"
+        },
+        {
+          "format": [
+            "PascalCase"
+          ],
+          "selector": "interface",
+          "leadingUnderscore": "forbid",
+          "trailingUnderscore": "forbid",
+          "prefix": [
+            "I"
+          ]
+        },
+        {
+          "format": [
+            "PascalCase"
+          ],
+          "selector": "typeAlias",
+          "leadingUnderscore": "forbid",
+          "trailingUnderscore": "forbid"
+        },
+        {
+          "format": [
+            "PascalCase"
+          ],
+          "selector": "typeParameter",
+          "leadingUnderscore": "forbid",
+          "trailingUnderscore": "forbid"
+        }
       ]
     }
   },
@@ -66,6 +142,7 @@
   "dependencies": {
     "@kubernetes/client-node": "^0.13.2",
     "@patternfly/patternfly": "^4.80.3",
+    "@patternfly/react-charts": "^6.14.2",
     "@patternfly/react-core": "^4.90.2",
     "@patternfly/react-table": "^4.20.15",
     "@types/google-protobuf": "^3.7.4",

diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/patternfly/patternfly.css';
 import '@patternfly/patternfly/patternfly-addons.css';
+import '@patternfly/patternfly/patternfly-charts.css';
 
 import Application from 'components/applications/Application';
 import Applications from 'components/applications/Applications';

diff --git a/app/src/app.css b/app/src/app.css
@@ -48,3 +48,55 @@
 .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-item
+ * Apply some padding between the list items for smaller screens. */
+.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-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
+}
diff --git a/app/src/components/applications/Application.tsx b/app/src/components/applications/Application.tsx
@@ -16,8 +16,9 @@ import { Link, useHistory, useParams } from 'react-router-dom';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { GetApplicationRequest, GetApplicationResponse } from 'generated/proto/clusters_pb';
-import { Application } from 'generated/proto/applications_pb';
+import { Application } from 'generated/proto/application_pb';
 import { ClustersPromiseClient } from 'generated/proto/clusters_grpc_web_pb';
+import Metrics from 'components/applications/details/metrics/Metrics';
 import Resources from 'components/applications/details/resources/Resources';
 import Title from 'components/shared/Title';
 import { apiURL } from 'utils/constants';
@@ -40,6 +41,7 @@ const Applications: React.FunctionComponent = () => {
   const [error, setError] = useState<string>('');
   const [activeTabKey, setActiveTabKey] = useState<string>('resources');
   const refResourcesContent = useRef<HTMLElement>(null);
+  const refMetricsContent = useRef<HTMLElement>(null);
 
   const goToOverview = (): void => {
     history.push('/');
@@ -98,7 +100,7 @@ const Applications: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection className="kobsio-pagesection-tabs" variant={PageSectionVariants.light}>
         <Title
           title={application.getName()}
           subtitle={`${application.getNamespace()} (${application.getCluster()})`}
@@ -126,12 +128,24 @@ const Applications: React.FunctionComponent = () => {
             tabContentId="refResources"
             tabContentRef={refResourcesContent}
           />
+          <Tab
+            eventKey="metrics"
+            title={<TabTitleText>Metrics</TabTitleText>}
+            tabContentId="refMetrics"
+            tabContentRef={refMetricsContent}
+          />
         </Tabs>
       </PageSection>
 
       <PageSection variant={PageSectionVariants.default}>
-        <TabContent eventKey={0} id="refResources" ref={refResourcesContent} aria-label="Resources">
-          <Resources application={application} />
+        <TabContent eventKey="resources" id="refResources" ref={refResourcesContent} aria-label="Resources">
+          <div>
+            <Resources application={application} />
+          </div>
+        </TabContent>
+        <TabContent eventKey="metrics" id="refMetrics" ref={refMetricsContent} aria-label="Metrics">
+          {/* We have to check if the refMetricsContent is not null, because otherwise the Metrics component will be shown below the resources component. */}
+          <div>{refMetricsContent.current ? <Metrics application={application} /> : null}</div>
         </TabContent>
       </PageSection>
     </React.Fragment>

diff --git a/app/src/components/applications/Applications.tsx b/app/src/components/applications/Applications.tsx
@@ -14,8 +14,8 @@ import React, { useState } from 'react';
 
 import { GetApplicationsRequest, GetApplicationsResponse } from 'generated/proto/clusters_pb';
 import { apiURL, applicationsDescription } from 'utils/constants';
-import { Application } from 'generated/proto/applications_pb';
-import Card from 'components/applications/details/Card';
+import { Application } from 'generated/proto/application_pb';
+import Card from 'components/applications/overview/Card';
 import { ClustersPromiseClient } from 'generated/proto/clusters_grpc_web_pb';
 import DrawerPanel from 'components/applications/details/DrawerPanel';
 import Filter from 'components/resources/shared/Filter';

diff --git a/app/src/components/applications/details/Card.tsx b/app/src/components/applications/details/Card.tsx
diff --git a/app/src/components/applications/details/DrawerPanel.tsx b/app/src/components/applications/details/DrawerPanel.tsx
@@ -14,7 +14,8 @@ import {
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Application } from 'generated/proto/applications_pb';
+import { Application } from 'generated/proto/application_pb';
+import Metrics from 'components/applications/details/metrics/Metrics';
 import Resources from 'components/applications/details/resources/Resources';
 import Title from 'components/shared/Title';
 
@@ -66,7 +67,14 @@ const DrawerPanel: React.FunctionComponent<IDrawerPanelProps> = ({ application,
           onSelect={(event, tabIndex): void => setActiveTabKey(tabIndex.toString())}
         >
           <Tab eventKey="resources" title={<TabTitleText>Resources</TabTitleText>}>
-            <Resources application={application} />
+            <div>
+              <Resources application={application} />
+            </div>
+          </Tab>
+          <Tab eventKey="metrics" title={<TabTitleText>Metrics</TabTitleText>}>
+            <div>
+              <Metrics application={application} />
+            </div>
           </Tab>
         </Tabs>
       </DrawerPanelBody>