merge master

DevenLu · Apr 17, 2019 · 125e7a8 · 125e7a8
2 parents 48ef390 + e5ff8be
commit 125e7a8
Show file tree

Hide file tree

Showing 45 changed files with 1,152 additions and 221 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -34,7 +34,7 @@ module.exports = {
   },
   "overrides": [
     {
-      "files": ["webpack.*.js", "config/setupTests.js", "*.stories.js"],
+      "files": ["webpack.*.js", "config_frontend/setupTests.js", "*.stories.js"],
       "rules": {
         "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
       }

diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
@@ -14,16 +14,18 @@ We would love to accomplish these tasks and to update this document, contributio
 
 You must install these tools:
 
-1. [`go`](https://golang.org/doc/install): The language Tekton Dashboard is
-   built in
+1. [`go`](https://golang.org/doc/install): The language Tekton Dashboard is built in
 1. [`git`](https://help.github.com/articles/set-up-git/): For source control
-1. [`dep`](https://github.com/golang/dep): For managing external Go
-   dependencies. - Please Install dep v0.5.0 or greater.
+1. [`dep`](https://github.com/golang/dep): For managing external Go dependencies. - Please Install dep v0.5.0 or greater.
+1. [`ko`](https://github.com/google/ko): For development. `ko` version v0.1 or higher is required for `dashboard` to work correctly.
 1. [Node.js & npm](https://nodejs.org/): For building and running the frontend locally. See `engines` in [package.json](./package.json) for versions used.
-1. [`kubectl`](https://kubernetes.io/docs/tasks/tools/install-kubectl/): For
-   interacting with your kube cluster. 
+1. [`kubectl`](https://kubernetes.io/docs/tasks/tools/install-kubectl/): For interacting with your kube cluster. 
 
-   Note that there exists a bug in certain versions of `kubectl` whereby the `auth` field is missing from created secrets. Known good versions we've tested are __1.11.3__ and __1.13.2__.
+Your [`$GOPATH`] setting is critical for `ko apply` to function properly: a
+successful run will typically involve building pushing images instead of only
+configuring Kubernetes resources.
+
+Note that there exists a bug in certain versions of `kubectl` whereby the `auth` field is missing from created secrets. Known good versions we've tested are __1.11.3__ and __1.13.2__.
 
 ### Checkout your fork
 
@@ -54,6 +56,44 @@ _Adding the `upstream` remote sets you up nicely for regularly
 - We've had good success using Docker Desktop: ensure your Kubernetes cluster is healthy and you have plenty of disk space allocated as PVs will be created for PipelineRuns.
 - Ensure you can push images to a Docker registry - the above listed requirements are only for local development, otherwise we pull in the tooling for you in the image.
 
+1. `GOPATH`: If you don't have one, simply pick a directory and add
+   `export GOPATH=...`
+1. `$GOPATH/bin` on `PATH`: This is so that tooling installed via `go get` will
+   work properly.
+1. `KO_DOCKER_REPO`: The docker repository to which developer images should be
+   pushed (e.g. `gcr.io/[gcloud-project]` or `docker.io<myusername>`). You can also run a local registry
+   and set `KO_DOCKER_REPO` to reference the registry (e.g. at
+   `localhost:5000/mydashboardimages`).
+
+`.bashrc` example:
+
+```shell
+export GOPATH="$HOME/go"
+export PATH="${PATH}:${GOPATH}/bin"
+export KO_DOCKER_REPO='docker.io/myusername'
+```
+
+Make sure to configure
+[authentication](https://cloud.google.com/container-registry/docs/advanced-authentication#standalone_docker_credential_helper)
+for your `KO_DOCKER_REPO` if required. To be able to push images to
+`gcr.io/<project>`, you need to run this once:
+
+```shell
+gcloud auth configure-docker
+```
+
+The user you are using to interact with your k8s cluster must be a cluster admin
+to create role bindings:
+
+```shell
+# Using gcloud to get your current user
+USER=$(gcloud config get-value core/account)
+# Make that user a cluster admin
+kubectl create clusterrolebinding cluster-admin-binding \
+  --clusterrole=cluster-admin \
+  --user="${USER}"
+```
+
 ### Namespaces
 
 Currently you must install the Tekton dashboard into the same namespace you wish to create and get Tekton resources in.
@@ -62,21 +102,20 @@ Currently you must install the Tekton dashboard into the same namespace you wish
 
 While iterating on the project, you may need to:
 
-1. Docker build and push your image of the dashboard
-1. Run the Go tests with: `docker build -f Dockerfile_test .`
-1. Replace the `image` reference in the yaml located in the `install` folder to reference your built and pushed image's location
+1. Run `dep ensure -v` to retrieve dependencies required to build
+1. Run the Go tests in Docker with: `docker build -f Dockerfile_test .`
 1. Install the dashboard
 1. Interact with the created Kubernetes service - we've had success using Postman on Mac and data provided must be JSON
 
 Tekton Dashboard does not involve any custom resource definitions, we only interact with them.
 
 ## Install dashboard
 
-After you've built and pushed the image, and modified the `install` yaml to refer to your image, you can stand up a version of the dashboard on-cluster (to your
+You can stand up a version of the dashboard on-cluster (to your
 `kubectl config current-context`):
 
 ```shell
-kubectl apply -f `install`
+ko apply -f config/
 ```
 
 ## Access the dashboard
@@ -89,18 +128,14 @@ Note that we have a big TODO which is to link up the frontend to the backend and
 
 ### Redeploy dashboard
 
-As you make changes to the code, you can redeploy your dashboard by killing the pod and so the new container code will be used if it has been pushed. The pod is labelled with `tekton-dashboard` so you can do:
-
-```shell
-kubectl delete pod -l app=tekton-dashboard
-```
+As you make changes to the code, you can redeploy your dashboard by simply using `ko apply` against the `config` directory again.
 
 ### Tear it down
 
-You can remove the deployment and any pods that were created with:
+You can clean up everything with:
 
 ```shell
-kubectl delete deployment -l app=tekton-dashboard-deployment
+ko delete -f config/
 ```
 
 ## Accessing logs
@@ -123,7 +158,7 @@ npm install
 
 Run `npm start` for a dev server. Navigate to `http://localhost:8000/` in your browser. The app will automatically hot-reload any changes to the source files, including CSS. If it is unable to hot-reload it will fallback to a full page refresh.
 
-Note: If you've exposed the backend by some other means than port-forwarding port 9097 as described above, update `API_DOMAIN` in `config/config.json` to provide the correct details.
+Note: If you've exposed the backend by some other means than port-forwarding port 9097 as described above, update `API_DOMAIN` in `config_frontend/config.json` to provide the correct details.
 
 ### Build
 

diff --git a/README.md b/README.md
@@ -16,8 +16,7 @@ $ kubectl port-forward $(kubectl get pod -l app=tekton-dashboard -o name) 9097:9
 ```
 
 **Coming soon**
-- All API definitions!
-- Deploying the dashboard without using the install yaml, and accessing using kubectl proxy. To deploy the dashboard, execute the following command:
+- Deploying the dashboard without using the `config/` yaml, and accessing using kubectl proxy. To deploy the dashboard, execute the following command:
 
 ```sh
 $ kubectl apply -f https://raw.githubusercontent.com/tektoncd/dashboard/...

diff --git a/install/tekton-dashboard-deployment.yaml → config/tekton-dashboard-deployment.yaml b/install/tekton-dashboard-deployment.yaml → config/tekton-dashboard-deployment.yaml
@@ -17,8 +17,7 @@ spec:
     spec:
       containers:
       - name: tekton-dashboard
-        image: "CHANGE_ME/back-end:latest"
-        imagePullPolicy: Always
+        image: github.com/tektoncd/dashboard/cmd/dashboard
         ports:
         - containerPort: 9097
         livenessProbe:

diff --git a/config/__mocks__/fileMock.js → config_frontend/__mocks__/fileMock.js b/config/__mocks__/fileMock.js → config_frontend/__mocks__/fileMock.js
diff --git a/config/__mocks__/styleMock.js → config_frontend/__mocks__/styleMock.js b/config/__mocks__/styleMock.js → config_frontend/__mocks__/styleMock.js
diff --git a/config/config.json → config_frontend/config.json b/config/config.json → config_frontend/config.json
diff --git a/config/setupTests.js → config_frontend/setupTests.js b/config/setupTests.js → config_frontend/setupTests.js
diff --git a/jest.config.js b/jest.config.js
@@ -27,10 +27,10 @@ module.exports = {
     }
   },
   moduleNameMapper: {
-    '\\.(png|svg|ttf|woff|woff2)$': '<rootDir>/config/__mocks__/fileMock.js',
-    '\\.(css|scss)$': '<rootDir>/config/__mocks__/styleMock.js'
+    '\\.(png|svg|ttf|woff|woff2)$': '<rootDir>/config_frontend/__mocks__/fileMock.js',
+    '\\.(css|scss)$': '<rootDir>/config_frontend/__mocks__/styleMock.js'
   },
-  setupFilesAfterEnv: ['<rootDir>/config/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/config_frontend/setupTests.js'],
   testMatch: ['<rootDir>/src/**/*.test.js'],
   testPathIgnorePatterns: ['node_modules']
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,15 +51,20 @@
     "jest": "^24.5.0",
     "js-yaml": "^3.13.0",
     "lint-staged": "^8.1.5",
+    "lodash.keyby": "^4.6.0",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.11.0",
     "prettier": "1.16.4",
     "prop-types": "^15.7.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-hot-loader": "^4.8.0",
+    "react-redux": "^7.0.1",
     "react-router-dom": "^5.0.0",
     "react-testing-library": "^6.0.0",
+    "redux": "^4.0.1",
+    "redux-mock-store": "^1.5.3",
+    "redux-thunk": "^2.3.0",
     "sass-loader": "^7.1.0",
     "storybook-react-router": "^1.0.4",
     "style-loader": "^0.23.1",

diff --git a/src/actions/pipeline.js b/src/actions/pipeline.js
@@ -0,0 +1,29 @@
+/*
+Copyright 2019 The Tekton Authors
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { getPipelines } from '../api';
+
+export function fetchPipelinesSuccess(data) {
+  return {
+    type: 'PIPELINE_FETCH_SUCCESS',
+    data
+  };
+}
+
+export function fetchPipelines() {
+  return async dispatch => {
+    const pipelines = await getPipelines();
+    dispatch(fetchPipelinesSuccess(pipelines));
+    return pipelines;
+  };
+}
diff --git a/src/actions/pipeline.test.js b/src/actions/pipeline.test.js
@@ -0,0 +1,40 @@
+/*
+Copyright 2019 The Tekton Authors
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import * as API from '../api';
+import { fetchPipelines, fetchPipelinesSuccess } from './pipeline';
+
+it('fetchPipelinesSuccess', () => {
+  const data = { fake: 'data' };
+  expect(fetchPipelinesSuccess(data)).toEqual({
+    type: 'PIPELINE_FETCH_SUCCESS',
+    data
+  });
+});
+
+it('fetchPipelines', async () => {
+  const pipelines = { fake: 'pipelines' };
+  const middleware = [thunk];
+  const mockStore = configureStore(middleware);
+  const store = mockStore();
+
+  jest.spyOn(API, 'getPipelines').mockImplementation(() => pipelines);
+
+  const expectedActions = [fetchPipelinesSuccess(pipelines)];
+
+  await store.dispatch(fetchPipelines());
+  expect(store.getActions()).toEqual(expectedActions);
+});
diff --git a/src/components/Pipelines/Pipelines.scss → src/components/Definitions/Definitions.scss b/src/components/Pipelines/Pipelines.scss → src/components/Definitions/Definitions.scss
@@ -13,8 +13,8 @@ limitations under the License.
 
 @import '../../scss/vars';
 
-.pipelines {
-  .pipelines-header {
+.definitions {
+  .definitions-header {
     background: white;
     padding-bottom: 1em;
 
@@ -36,7 +36,7 @@ limitations under the License.
     padding: 2em 5%;
   }
 
-  .pipeline .status {
+  .definition .status {
     .status-icon {
       margin-right: 0.5em;
       vertical-align: sub;