Storybook

.dockerignore

@@ -5,3 +5,5 @@ bin/nebraska
 backend/tools/
 backend/bin
 charts/
+frontend/**/*.stories.*
+frontend/**/*.test.*

backend/api/spec.yaml

@@ -1823,6 +1823,7 @@ components:
     activity:
       type: object
       required:
+        - id
         - appID
         - groupID
         - createdTs
@@ -1834,6 +1835,8 @@ components:
         - channelName
         - instanceID
       properties:
+        id:
+          type: string
         appID:
           type: string
           x-oapi-codegen-extra-tags:

backend/pkg/api/activity.go

@@ -25,6 +25,7 @@ const (
 
 // Activity represents a Nebraska activity entry.
 type Activity struct {
+	ID              string      `db:"id" json:"id"`
 	AppID           null.String `db:"application_id" json:"app_id"`
 	GroupID         null.String `db:"group_id" json:"group_id"`
 	CreatedTs       time.Time   `db:"created_ts" json:"created_ts"`
@@ -115,7 +116,7 @@ func (api *API) activityQuery(teamID string, p ActivityQueryParams, countSelect
 		query = query.Select(goqu.L(`count(a)`))
 	} else {
 		query = query.Select(
-			"a.application_id", "a.group_id", "a.created_ts", "a.class",
+			"a.id", "a.application_id", "a.group_id", "a.created_ts", "a.class",
 			"a.severity", "a.version", "a.instance_id",
 			goqu.I("app.name").As("application_name"), goqu.I("g.name").
 				As("group_name"), goqu.I("c.name").As("channel_name"))

backend/pkg/api/groups_test.go

@@ -189,6 +189,26 @@ func TestGetGroupsFiltered(t *testing.T) {
 	}
 }
 
+func TestVersionBreakDownEmpty(t *testing.T) {
+	a := newForTest(t)
+	defer a.Close()
+
+	tTeam, _ := a.AddTeam(&Team{Name: "test_team"})
+	tApp, _ := a.AddApp(&Application{Name: "test_app", TeamID: tTeam.ID})
+	tPkg, _ := a.AddPackage(&Package{Type: PkgTypeOther, URL: "http://sample.url/pkg", Version: "12.1.0", ApplicationID: tApp.ID})
+	tChannel, _ := a.AddChannel(&Channel{Name: "test_channel", Color: "blue", ApplicationID: tApp.ID, PackageID: null.StringFrom(tPkg.ID)})
+	_, err := a.AddGroup(&Group{Name: "test_group1", ApplicationID: tApp.ID, ChannelID: null.StringFrom(tChannel.ID), PolicyUpdatesEnabled: true, PolicySafeMode: true, PolicyPeriodInterval: "15 minutes", PolicyMaxUpdatesPerPeriod: 2, PolicyUpdateTimeout: "60 minutes"})
+	assert.NoError(t, err)
+
+	groups, err := a.GetGroups(tApp.ID, 0, 0)
+	assert.NoError(t, err)
+	g := groups[0]
+
+	versionBreakdown, vbErr := a.GetGroupVersionBreakdown(g.ID)
+	assert.NoError(t, vbErr)
+	assert.Len(t, versionBreakdown, 0)
+}
+
 func TestGetVersionCountTimeline(t *testing.T) {
 	a := newForTest(t)
 	defer a.Close()

backend/pkg/handler/groups.go

@@ -188,6 +188,7 @@ func (h *Handler) GetGroupInstanceStats(ctx echo.Context, appID string, groupID
 
 func (h *Handler) GetGroupVersionBreakdown(ctx echo.Context, appID string, groupID string) error {
 	versionBreakdown, err := h.db.GetGroupVersionBreakdown(groupID)
+
 	if err != nil {
 		if err == sql.ErrNoRows {
 			return ctx.NoContent(http.StatusNotFound)
@@ -196,6 +197,10 @@ func (h *Handler) GetGroupVersionBreakdown(ctx echo.Context, appID string, group
 		return ctx.NoContent(http.StatusInternalServerError)
 	}
 
+	if len(versionBreakdown) == 0 {
+		// WAT?: because otherwise it serializes to null not []
+		return ctx.JSON(http.StatusOK, []string{})
+	}
 	return ctx.JSON(http.StatusOK, versionBreakdown)
 }
 

backend/test/api/flatcar_package_test.go

@@ -10,10 +10,11 @@ import (
 	"testing"
 
 	"github.com/google/uuid"
-	"github.com/kinvolk/nebraska/backend/pkg/config"
-	"github.com/kinvolk/nebraska/backend/pkg/server"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
+
+	"github.com/kinvolk/nebraska/backend/pkg/config"
+	"github.com/kinvolk/nebraska/backend/pkg/server"
 )
 
 func TestHostFlatcarPackage(t *testing.T) {

frontend/.storybook/NebraskaTheme.js

@@ -0,0 +1,12 @@
+// https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart
+//  To workaround a bug at time of writing, where theme is not refreshed,
+//  you may need to `npm run storybook --no-manager-cache`
+import { create } from '@storybook/theming';
+import logoUrl from '../../docs/nebraska-logo.svg';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Nebraska is an update manager for Flatcar Container Linux and Kubernetes.',
+  brandUrl: 'https://kinvolk.io/docs/nebraska/latest/development/',
+  brandImage: logoUrl,
+});

frontend/.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+  ],
+};

frontend/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import theme from './NebraskaTheme';
+
+addons.setConfig({
+  theme: theme,
+});

frontend/.storybook/preview.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import themesConf from '../src/lib/themes';
+import { StylesProvider } from '@material-ui/core/styles';
+import '../src/i18n/config';
+import ThemeProviderNexti18n from '../src/i18n/ThemeProviderNexti18n';
+
+const darkTheme = themesConf['dark'];
+const lightTheme = themesConf['light'];
+
+const withThemeProvider = (Story, context) => {
+  const backgroundColor = context.globals.backgrounds ? context.globals.backgrounds.value : 'light';
+  const theme = backgroundColor !== 'dark' ? lightTheme : darkTheme;
+
+  const ourThemeProvider = (
+    <ThemeProviderNexti18n theme={theme}>
+      <Story {...context} />
+    </ThemeProviderNexti18n>
+  );
+  if (process.env.NODE_ENV !== 'test') {
+    return ourThemeProvider;
+  } else {
+    const generateClassName = (rule, styleSheet) =>
+      `${styleSheet?.options.classNamePrefix}-${rule.key}`;
+
+    return (
+      <StylesProvider generateClassName={generateClassName}>{ourThemeProvider}</StylesProvider>
+    );
+  }
+};
+export const decorators = [withThemeProvider];
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: ['light', 'dark'],
+    },
+  },
+};
+
+export const parameters = {
+  backgrounds: {
+    values: [
+      { name: 'light', value: 'light' },
+      { name: 'dark', value: 'dark' },
+    ],
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};

frontend/Makefile

@@ -21,7 +21,7 @@ build: install
 
 .PHONY: test
 test:
-	npm run test
+	npm run test -- --coverage
 
 .PHONY: lint
 lint: