diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..f7d462fb
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+VITE_API_USER_EMAIL="dev.usersen@example.com"
diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index c1849562..333f7b83 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -3,6 +3,7 @@ on:
push:
branches:
- main
+ - refactor_migration
env:
NAME: console-frontend
IMAGE_REPOSITORY: oci://europe-north1-docker.pkg.dev/nais-io/nais
@@ -42,6 +43,8 @@ jobs:
rollout:
needs:
- build_push
+ # Only do this if on main
+ if: endsWith(github.ref, '/main')
runs-on: fasit-deploy
permissions:
id-token: write
@@ -50,4 +53,3 @@ jobs:
with:
chart: ${{ env.IMAGE_REPOSITORY }}/${{ env.NAME }}
version: ${{ needs.build_push.outputs.version }}
- feature_name: ${{ env.NAME }}
diff --git a/Dockerfile b/Dockerfile
index 183e76a8..1ea314a7 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,7 +7,7 @@ RUN npm ci --quiet --legacy-peer-deps
COPY . ./
-ENV VITE_GRAPHQL_ENDPOINT http://console-backend/query
+ENV VITE_GRAPHQL_ENDPOINT http://nais-api/query
RUN npm run build
diff --git a/README.md b/README.md
index 5c91169b..5a45ca66 100644
--- a/README.md
+++ b/README.md
@@ -1,38 +1,39 @@
-# create-svelte
+# Console frontend
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+## Development
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
+The following snippet contains the most important commands for development.
```bash
-# create a new project in the current directory
-npm create svelte@latest
+npm install
+cp .env.example .env # Copy the example environment file
+npm run dev # Starts a development server on port 5173
-# create a new project in my-app
-npm create svelte@latest my-app
+npm run check # Check for various issues
+npm run lint # Lint the code
+npm run format # Format the code (Or use a Prettier extension in your editor)
```
-## Developing
+## User
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+In production `api` uses oauth2 to authenticate users.
+In developmen
-```bash
-npm run dev
+### Local user override
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+When running locally, the frontend will proxy requests to the backend through a Vite Proxy.
+This proxy will add a special header for local development to specify which user to run as.
-## Building
+There's two well known users:
-To create a production version of your app:
+| User | Description |
+| --------------------------- | ---------------------------------------------------- |
+| `dev.usersen@example.com` | A user with tenant wide permissions, but owns a team |
+| `admin.usersen@example.com` | A user with all permissions |
-```bash
-npm run build
-```
+You can specify which user to run as through `.env`.
+See `.env.example` for an example.
-You can preview the production build with `npm run preview`.
+### Using OAUTH
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+To use the oauth flow, you need to configure `api` with correct credentials, and the user has to exist in the database.
diff --git a/charts/Chart.yaml b/charts/Chart.yaml
index 4096a7b1..7d19c6d0 100644
--- a/charts/Chart.yaml
+++ b/charts/Chart.yaml
@@ -2,6 +2,6 @@ apiVersion: v2
name: console-frontend
description: Frontend for NAIS console
type: application
-version: 1.0.0
+version: 2024-02-13-104003-46227aa
sources:
- https://github.com/nais/console-frontend/tree/main/charts
diff --git a/charts/templates/deployment.yaml b/charts/templates/deployment.yaml
index 8aa5dca3..488ec49f 100644
--- a/charts/templates/deployment.yaml
+++ b/charts/templates/deployment.yaml
@@ -32,7 +32,7 @@ spec:
image: '{{ .Values.image.repository }}/{{ .Values.image.name }}:{{ .Chart.Version }}'
ports:
- name: http
- containerPort: 8080
+ containerPort: 3000
protocol: TCP
resources:
requests:
diff --git a/charts/templates/ingress.yaml b/charts/templates/ingress.yaml
index 05826235..d1d307b4 100644
--- a/charts/templates/ingress.yaml
+++ b/charts/templates/ingress.yaml
@@ -6,7 +6,7 @@ metadata:
annotations:
nginx.ingress.kubernetes.io/proxy-buffer-size: 8k
spec:
- ingressClassName: nais-ingress-iap
+ ingressClassName: nais-ingress
rules:
- host: '{{ .Values.host }}'
http:
diff --git a/charts/templates/networkpolicy.yaml b/charts/templates/networkpolicy.yaml
index 33b96503..6c1043bb 100644
--- a/charts/templates/networkpolicy.yaml
+++ b/charts/templates/networkpolicy.yaml
@@ -12,7 +12,7 @@ spec:
- to:
- podSelector:
matchLabels:
- app: console-backend
+ app: nais-api
podSelector:
matchLabels:
app: '{{ .Release.Name }}'
diff --git a/charts/templates/service.yaml b/charts/templates/service.yaml
index 1a99e355..5d70cbf0 100644
--- a/charts/templates/service.yaml
+++ b/charts/templates/service.yaml
@@ -6,7 +6,7 @@ spec:
type: ClusterIP
ports:
- port: 80
- targetPort: 3000
+ targetPort: http
protocol: TCP
name: http
selector:
diff --git a/houdini.config.js b/houdini.config.js
index f1e631e2..4ccb306b 100644
--- a/houdini.config.js
+++ b/houdini.config.js
@@ -3,13 +3,13 @@
/** @type {import('houdini').ConfigFile} */
const config = {
watchSchema: {
- url: 'http://127.0.0.1:4242/query'
+ url: 'http://127.0.0.1:3000/query'
},
plugins: {
'houdini-svelte': {}
},
scalars: {
- Cursor: { type: 'string' },
+ Slug: { type: 'string' },
Date: {
type: 'Date',
unmarshal(val) {
@@ -39,6 +39,11 @@ const config = {
return date.toString();
}
}
+ },
+ types: {
+ Reconciler: {
+ keys: ['name']
+ }
}
};
diff --git a/package-lock.json b/package-lock.json
index f3230c02..24009d45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
"svelte-floating-ui": "^1.5.8"
},
"devDependencies": {
- "@nais/ds-svelte-community": "^0.7.1",
+ "@nais/ds-svelte-community": "^0.7.4",
"@nais/ds-svelte-community-preprocess-svelte": "^0.7.0",
"@navikt/ds-css": "^5.11.4",
"@sveltejs/adapter-auto": "^2.1.1",
@@ -157,6 +157,7 @@
},
"node_modules/@clack/prompts/node_modules/is-unicode-supported": {
"version": "1.3.0",
+ "extraneous": true,
"dev": true,
"inBundle": true,
"license": "MIT",
@@ -854,15 +855,14 @@
}
},
"node_modules/@nais/ds-svelte-community": {
- "version": "0.7.1",
- "resolved": "https://europe-north1-npm.pkg.dev/nais-io/nais-public-npm/@nais/ds-svelte-community/-/@nais/ds-svelte-community-0.7.1.tgz",
- "integrity": "sha512-AMsXeofEIyNaDpMTYlvd6kaKbCYeuM/P4gsmiYIHlUrUpjBPEYDumgHCSoFEfe1gmqa/Pzklpdy4XMOJ2S5PBw==",
+ "version": "0.7.4",
+ "resolved": "https://europe-north1-npm.pkg.dev/nais-io/nais-public-npm/@nais/ds-svelte-community/-/@nais/ds-svelte-community-0.7.4.tgz",
+ "integrity": "sha512-g1sSNl9qVgJ8cSkoSJPQSH69rXM4md87xL3JFe41KcOPcd2wW5x5oQBlxatu82MbBDApLCEVVfXEIOnFix7WqQ==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@navikt/ds-css": "^5.11.3",
- "@navikt/ds-tokens": "^5.11.3",
- "locally-unique-id-generator": "^0.1.5"
+ "@navikt/ds-css": "^5.12.1",
+ "@navikt/ds-tokens": "^5.12.1"
},
"optionalDependencies": {
"svelte-floating-ui": "^1.5.8"
@@ -886,15 +886,15 @@
}
},
"node_modules/@navikt/ds-css": {
- "version": "5.11.4",
- "resolved": "https://registry.npmjs.org/@navikt/ds-css/-/ds-css-5.11.4.tgz",
- "integrity": "sha512-7iRniSsoQAijBA9Bj3OzBDS8dX/ANI8kEImJlaIuR8hssxd3h1NXeZAG2+sbOkqJYq+xG7PCRFDHwTXf/PLL3A==",
+ "version": "5.12.2",
+ "resolved": "https://registry.npmjs.org/@navikt/ds-css/-/ds-css-5.12.2.tgz",
+ "integrity": "sha512-HRlu4Eiqi0zjPWVUV/F7Q/cPLmP71m1dkGPNXlBrIPAZpNcQKutCE2Be1au4CxpiuwzsPPSXKHo3fVDDucWwKQ==",
"dev": true
},
"node_modules/@navikt/ds-tokens": {
- "version": "5.11.3",
- "resolved": "https://registry.npmjs.org/@navikt/ds-tokens/-/ds-tokens-5.11.3.tgz",
- "integrity": "sha512-tUoWAd1otecxdG8XuR0NRmq4Rsxvd0TqyRBXAXeDMpyX54JADyMY+LjqBhBxvieWmjnB541gaQxz02p9VTmrLQ==",
+ "version": "5.12.2",
+ "resolved": "https://registry.npmjs.org/@navikt/ds-tokens/-/ds-tokens-5.12.2.tgz",
+ "integrity": "sha512-OW+imIxLaKRI3XYLi9t1MvTfN8IbBgPnSC46BE6U6bdRZRs6lBZgy8gB5uPgkLrI9iOfx905t9mud6jncIDOvw==",
"dev": true
},
"node_modules/@nodelib/fs.scandir": {
@@ -3443,12 +3443,6 @@
"node": ">=10"
}
},
- "node_modules/locally-unique-id-generator": {
- "version": "0.1.5",
- "resolved": "https://registry.npmjs.org/locally-unique-id-generator/-/locally-unique-id-generator-0.1.5.tgz",
- "integrity": "sha512-cdISIqzCk2IiO9GIfL0oPyvOhz0tOetKOOasYWLfKHD7W/23EpWb12GymG0xCy8nhG+TMon5x+SS9PLaDd+avg==",
- "dev": true
- },
"node_modules/locate-character": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -5084,6 +5078,7 @@
"is-unicode-supported": {
"version": "1.3.0",
"bundled": true,
+ "extraneous": true,
"dev": true
}
}
@@ -5503,14 +5498,13 @@
}
},
"@nais/ds-svelte-community": {
- "version": "0.7.1",
- "resolved": "https://europe-north1-npm.pkg.dev/nais-io/nais-public-npm/@nais/ds-svelte-community/-/@nais/ds-svelte-community-0.7.1.tgz",
- "integrity": "sha512-AMsXeofEIyNaDpMTYlvd6kaKbCYeuM/P4gsmiYIHlUrUpjBPEYDumgHCSoFEfe1gmqa/Pzklpdy4XMOJ2S5PBw==",
+ "version": "0.7.4",
+ "resolved": "https://europe-north1-npm.pkg.dev/nais-io/nais-public-npm/@nais/ds-svelte-community/-/@nais/ds-svelte-community-0.7.4.tgz",
+ "integrity": "sha512-g1sSNl9qVgJ8cSkoSJPQSH69rXM4md87xL3JFe41KcOPcd2wW5x5oQBlxatu82MbBDApLCEVVfXEIOnFix7WqQ==",
"dev": true,
"requires": {
- "@navikt/ds-css": "^5.11.3",
- "@navikt/ds-tokens": "^5.11.3",
- "locally-unique-id-generator": "^0.1.5",
+ "@navikt/ds-css": "^5.12.1",
+ "@navikt/ds-tokens": "^5.12.1",
"svelte-floating-ui": "^1.5.8"
}
},
@@ -5524,15 +5518,15 @@
}
},
"@navikt/ds-css": {
- "version": "5.11.4",
- "resolved": "https://registry.npmjs.org/@navikt/ds-css/-/ds-css-5.11.4.tgz",
- "integrity": "sha512-7iRniSsoQAijBA9Bj3OzBDS8dX/ANI8kEImJlaIuR8hssxd3h1NXeZAG2+sbOkqJYq+xG7PCRFDHwTXf/PLL3A==",
+ "version": "5.12.2",
+ "resolved": "https://registry.npmjs.org/@navikt/ds-css/-/ds-css-5.12.2.tgz",
+ "integrity": "sha512-HRlu4Eiqi0zjPWVUV/F7Q/cPLmP71m1dkGPNXlBrIPAZpNcQKutCE2Be1au4CxpiuwzsPPSXKHo3fVDDucWwKQ==",
"dev": true
},
"@navikt/ds-tokens": {
- "version": "5.11.3",
- "resolved": "https://registry.npmjs.org/@navikt/ds-tokens/-/ds-tokens-5.11.3.tgz",
- "integrity": "sha512-tUoWAd1otecxdG8XuR0NRmq4Rsxvd0TqyRBXAXeDMpyX54JADyMY+LjqBhBxvieWmjnB541gaQxz02p9VTmrLQ==",
+ "version": "5.12.2",
+ "resolved": "https://registry.npmjs.org/@navikt/ds-tokens/-/ds-tokens-5.12.2.tgz",
+ "integrity": "sha512-OW+imIxLaKRI3XYLi9t1MvTfN8IbBgPnSC46BE6U6bdRZRs6lBZgy8gB5uPgkLrI9iOfx905t9mud6jncIDOvw==",
"dev": true
},
"@nodelib/fs.scandir": {
@@ -7385,12 +7379,6 @@
"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
"dev": true
},
- "locally-unique-id-generator": {
- "version": "0.1.5",
- "resolved": "https://registry.npmjs.org/locally-unique-id-generator/-/locally-unique-id-generator-0.1.5.tgz",
- "integrity": "sha512-cdISIqzCk2IiO9GIfL0oPyvOhz0tOetKOOasYWLfKHD7W/23EpWb12GymG0xCy8nhG+TMon5x+SS9PLaDd+avg==",
- "dev": true
- },
"locate-character": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
diff --git a/package.json b/package.json
index ef174ae4..ef1632ee 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
"format": "prettier --write ."
},
"devDependencies": {
- "@nais/ds-svelte-community": "^0.7.1",
+ "@nais/ds-svelte-community": "^0.7.4",
"@nais/ds-svelte-community-preprocess-svelte": "^0.7.0",
"@navikt/ds-css": "^5.11.4",
"@sveltejs/adapter-auto": "^2.1.1",
diff --git a/schema.graphql b/schema.graphql
index a535e747..4cec73e1 100644
--- a/schema.graphql
+++ b/schema.graphql
@@ -1,10 +1,16 @@
+"""
+Require an authenticated user with the admin role for all requests with this directive.
+"""
+directive @admin on FIELD_DEFINITION
+
+"""Require an authenticated user for all requests with this directive."""
+directive @auth on FIELD_DEFINITION
+
"""
The @defer directive may be specified on a fragment spread to imply de-prioritization, that causes the fragment to be omitted in the initial response, and delivered as a subsequent response afterward. A query with @defer directive will cause the request to potentially return multiple responses, where non-deferred data is delivered in the initial response and data deferred delivered in a subsequent response. @include and @skip take precedence over @defer.
"""
directive @defer(if: Boolean = true, label: String) on FRAGMENT_SPREAD | INLINE_FRAGMENT
-directive @goField(forceResolver: Boolean, name: String, omittable: Boolean) on FIELD_DEFINITION | INPUT_FIELD_DEFINITION
-
type AccessPolicy {
inbound: Inbound!
outbound: Outbound!
@@ -13,10 +19,10 @@ type AccessPolicy {
type Acl {
access: String!
application: String!
- team: String!
+ team: Slug!
}
-type App implements Node {
+type App {
accessPolicy: AccessPolicy!
appState: AppState!
authz: [Authz!]!
@@ -33,13 +39,7 @@ type App implements Node {
storage: [Storage!]!
team: Team!
variables: [Variable!]!
- vulnerabilities: VulnerabilitiesNode
-}
-
-type AppConnection implements Connection {
- edges: [AppEdge!]!
- pageInfo: PageInfo!
- totalCount: Int!
+ vulnerabilities: Vulnerability
}
"""App cost type."""
@@ -54,9 +54,9 @@ type AppCost {
sum: Float!
}
-type AppEdge implements Edge {
- cursor: Cursor!
- node: App!
+type AppList {
+ nodes: [App!]!
+ pageInfo: PageInfo!
}
type AppState {
@@ -82,7 +82,7 @@ type AppWithResourceUtilizationOverage {
overageCost: Float!
"""The name of the team who owns the app."""
- team: String!
+ team: Slug!
"""The utilization in percent."""
utilization: Float!
@@ -94,6 +94,46 @@ type AppsStatus {
total: Int!
}
+"""Audit log type."""
+type AuditLog {
+ """String representation of the action performed."""
+ action: String!
+
+ """
+ The identity of the actor who performed the action. When this field is empty it means that some backend process performed the action. The value, when present, is either the name of a service account, or the email address of a user.
+ """
+ actor: String
+
+ """The related component."""
+ componentName: String!
+
+ """The related correlation ID."""
+ correlationID: String!
+
+ """Creation time of the log entry."""
+ createdAt: Time!
+
+ """ID of the log entry."""
+ id: ID!
+
+ """Log entry message."""
+ message: String!
+
+ """The identifier of the target."""
+ targetIdentifier: String!
+
+ """The type of the audit log target."""
+ targetType: String!
+}
+
+type AuditLogList {
+ nodes: [AuditLog!]!
+ pageInfo: PageInfo!
+}
+
+"""Authenticated user type. Can be a user or a service account."""
+union AuthenticatedUser = ServiceAccount | User
+
union Authz = AzureAD | IDPorten | Maskinporten | TokenX
type AutoScaling {
@@ -137,18 +177,6 @@ type Claims {
groups: [Group!]!
}
-"""Connection interface."""
-interface Connection {
- """A list of edges."""
- edges: [Edge]!
-
- """Pagination information."""
- pageInfo: PageInfo!
-
- """The total count of items in the connection."""
- totalCount: Int!
-}
-
type Consume {
name: String!
}
@@ -179,6 +207,18 @@ type CostSeries {
sum: Float!
}
+"""Input for creating a new team."""
+input CreateTeamInput {
+ """Team purpose."""
+ purpose: String!
+
+ """Specify the Slack channel for the team."""
+ slackChannel: String!
+
+ """Team slug. After creation, this value can not be changed."""
+ slug: Slug!
+}
+
"""Current resource utilization type."""
type CurrentResourceUtilization {
"""The CPU utilization."""
@@ -191,11 +231,6 @@ type CurrentResourceUtilization {
timestamp: Time!
}
-"""
-Cursor is a string that can be used to paginate through a list of objects. It is opaque to the client and may change at any time.
-"""
-scalar Cursor
-
"""Daily cost type."""
type DailyCost {
"""The cost series."""
@@ -221,7 +256,7 @@ scalar Date
type DeployInfo {
commitSha: String!
deployer: String!
- history(after: Cursor, before: Cursor, first: Int, last: Int): DeploymentResponse!
+ history(limit: Int, offset: Int): DeploymentResponse!
timestamp: Time
url: String!
}
@@ -236,19 +271,8 @@ type Deployment {
team: Team!
}
-type DeploymentConnection implements Connection {
- edges: [DeploymentEdge!]!
- pageInfo: PageInfo!
- totalCount: Int!
-}
-
-type DeploymentEdge implements Edge {
- cursor: Cursor!
- node: Deployment!
-}
-
"""Deployment key type."""
-type DeploymentKey implements Node {
+type DeploymentKey {
"""The date the deployment key was created."""
created: Time!
@@ -262,6 +286,11 @@ type DeploymentKey implements Node {
key: String!
}
+type DeploymentList {
+ nodes: [Deployment!]!
+ pageInfo: PageInfo!
+}
+
type DeploymentResource {
group: String!
id: ID!
@@ -271,7 +300,7 @@ type DeploymentResource {
version: String!
}
-union DeploymentResponse = DeploymentConnection | Error
+union DeploymentResponse = DeploymentList | Error
type DeploymentStatus {
created: Time!
@@ -295,15 +324,11 @@ type DeprecatedRegistryError implements StateError {
tag: String!
}
-"""Edge interface."""
-interface Edge {
- """A cursor for use in pagination."""
- cursor: Cursor!
-}
-
-type Env implements Node {
+type Env {
+ gcpProjectID: String
id: ID!
name: String!
+ slackAlertsChannel: String!
}
"""Env cost type."""
@@ -324,7 +349,7 @@ input EnvCostFilter {
from: Date!
"""The name of the team to get costs for."""
- team: String!
+ team: Slug!
"""End date for cost series, inclusive."""
to: Date!
@@ -368,54 +393,59 @@ type Flag {
"""GCP project type."""
type GcpProject {
- """The environment for the GCP project."""
+ """The environment for the project."""
environment: String!
- """The unique identifier of the GCP project."""
- id: String!
+ """The GCP project ID."""
+ projectId: String!
- """The name of the GCP project."""
- name: String!
+ """The display name of the project."""
+ projectName: String!
+}
+
+"""Input for filtering GitHub repositories."""
+input GitHubRepositoriesFilter {
+ """Include archived repositories or not. Default is false."""
+ includeArchivedRepositories: Boolean!
}
"""GitHub repository type."""
-type GithubRepository {
+type GitHubRepository {
"""Whether or not the repository is archived."""
archived: Boolean!
- """The authorizations for the GitHub repository."""
- authorizations: [RepositoryAuthorization!]
+ """A list of authorizations granted to the repository by the team."""
+ authorizations: [RepositoryAuthorization!]!
+
+ """ID of the repository."""
id: ID!
- """The name of the GitHub repository."""
+ """Name of the repository, with the org prefix."""
name: String!
- """The permissions the team has for the GitHub repository."""
- permissions: [String!]
+ """A list of permissions given to the team for this repository."""
+ permissions: [GitHubRepositoryPermission!]!
"""The name of the role the team has been granted in the repository."""
roleName: String!
}
-"""GitHub repository connection type."""
-type GithubRepositoryConnection implements Connection {
- """A list of GitHub repository edges."""
- edges: [GithubRepositoryEdge!]!
+"""Paginated GitHub repository type."""
+type GitHubRepositoryList {
+ """The list of GitHub repositories."""
+ nodes: [GitHubRepository!]!
"""Pagination information."""
pageInfo: PageInfo!
-
- """The total count of available GitHub repositories."""
- totalCount: Int!
}
-"""GitHub repository edge type."""
-type GithubRepositoryEdge implements Edge {
- """A cursor for use in pagination."""
- cursor: Cursor!
+"""GitHub repository permission type."""
+type GitHubRepositoryPermission {
+ """Whether or not the permission is granted for the repository."""
+ granted: Boolean!
- """The GitHub repository at the end of the edge."""
- node: GithubRepository!
+ """Name of the permission."""
+ name: String!
}
type Group {
@@ -464,7 +494,7 @@ type Insights {
recordClientAddress: Boolean!
}
-type Instance implements Node {
+type Instance {
created: Time!
id: ID!
image: String!
@@ -520,7 +550,7 @@ input LogSubscriptionInput {
env: String!
instances: [String!]
job: String
- team: String!
+ team: Slug!
}
type Maintenance {
@@ -556,43 +586,281 @@ input MonthlyCostFilter {
env: String!
"""The name of the team to get costs for."""
- team: String!
+ team: Slug!
}
-"""The root query for implementing GraphQL mutations."""
type Mutation {
+ """
+ Add opt-out of a reconciler for a team member. Only reconcilers that are member aware can be opted out from.
+ """
+ addReconcilerOptOut(
+ """The name of the reconciler to opt the team member out of."""
+ reconciler: String!
+
+ """The team slug."""
+ teamSlug: Slug!
+
+ """The user ID of the team member."""
+ userId: ID!
+ ): TeamMember!
+
+ """
+ Add a user to a team
+
+ If the user is already a member or an owner of the team, the mutation will fail.
+
+ The updated team will be returned on success.
+ """
+ addTeamMember(
+ """The new team member."""
+ member: TeamMemberInput!
+
+ """Slug of the team that should receive a new member."""
+ slug: Slug!
+ ): Team!
+
+ """
+ Add users to a team as regular team members
+
+ If one or more users are already added to the team they will not be updated. If a user is already an owner of the
+ team the user will not lose ownership. Regular team members will get read-only access to the team.
+
+ The updated team will be returned on success.
+ """
+ addTeamMembers(
+ """Slug of the team that should receive new members."""
+ slug: Slug!
+
+ """List of user IDs that should be added to the team as members."""
+ userIds: [ID!]!
+ ): Team!
+
+ """
+ Add users to a team as team owners
+
+ If one or more users are already added to the team, they will be granted ownership of the team. If one or more users
+ are already owners of the team, they will not be updated. Team owners will get read/write access to the team.
+
+ The updated team will be returned on success.
+ """
+ addTeamOwners(
+ """Slug of the team that should receive new owners."""
+ slug: Slug!
+
+ """List of user IDs that should be added to the team as owners."""
+ userIds: [ID!]!
+ ): Team!
+
"""Authorize a team to perform an action from a GitHub repository."""
authorizeRepository(
"""The action to authorize."""
authorization: RepositoryAuthorization!
"""Name of the repository, with the org prefix, for instance 'org/repo'."""
- repository: String!
+ repoName: String!
- """The team to authorize the action for."""
- team: String!
- ): GithubRepository!
+ """The slug of the team to authorize the action for."""
+ teamSlug: Slug!
+ ): GitHubRepository!
"""Update the deploy key of a team. Returns the updated deploy key."""
changeDeployKey(
"""The name of the team to update the deploy key for."""
- team: String!
+ team: Slug!
): DeploymentKey!
+ """Configure a reconciler."""
+ configureReconciler(
+ """List of reconciler config inputs."""
+ config: [ReconcilerConfigInput!]!
+
+ """The name of the reconciler to configure."""
+ name: String!
+ ): Reconciler!
+
+ """
+ Confirm a team deletion
+
+ This will start the actual team deletion process, which will be done in an asynchronous manner. All external
+ entities controlled by NAIS will also be deleted.
+
+ WARNING: There is no going back after starting this process.
+
+ Note: Service accounts are not allowed to confirm a team deletion.
+ """
+ confirmTeamDeletion(
+ """Deletion key, acquired using the requestTeamDeletion mutation."""
+ key: String!
+ ): Boolean!
+
+ """
+ Create a new team
+
+ The user creating the team will be granted team ownership, unless the user is a service account, in which case the
+ team will not get an initial owner. To add one or more owners to the team, refer to the `addTeamOwners` mutation.
+
+ The new team will be returned on success.
+ """
+ createTeam(
+ """Input for creation of the new team."""
+ input: CreateTeamInput!
+ ): Team!
+
"""Deauthorize an action from a team."""
deauthorizeRepository(
"""The action to deauthorize."""
authorization: RepositoryAuthorization!
"""Name of the repository, with the org prefix, for instance 'org/repo'."""
- repository: String!
+ repoName: String!
+
+ """The slug of the team to deauthorize the action for."""
+ teamSlug: Slug!
+ ): GitHubRepository!
- """The team to deauthorize the action for."""
- team: String!
- ): GithubRepository!
+ """
+ Disable a reconciler
+
+ The reconciler configuration will be left intact.
+ """
+ disableReconciler(
+ """The name of the reconciler to disable."""
+ name: String!
+ ): Reconciler!
+
+ """
+ Enable a reconciler
+
+ A reconciler must be fully configured before it can be enabled.
+ """
+ enableReconciler(
+ """The name of the reconciler to enable."""
+ name: String!
+ ): Reconciler!
+
+ """Remove opt-out of a reconciler for a team member."""
+ removeReconcilerOptOut(
+ """The name of the reconciler to clear the opt-out from."""
+ reconciler: String!
+
+ """The team slug."""
+ teamSlug: Slug!
+
+ """The user ID of the team member."""
+ userId: ID!
+ ): TeamMember!
+
+ """
+ Remove a user from a team
+
+ The updated team will be returned on success.
+ """
+ removeUserFromTeam(
+ """Team slug that the user should be removed from."""
+ slug: Slug!
+
+ """ID of the user that will be removed from the team."""
+ userId: ID!
+ ): Team!
+
+ """
+ Remove one or more users from a team
+
+ The updated team will be returned on success.
+ """
+ removeUsersFromTeam(
+ """Team slug that users should be removed from."""
+ slug: Slug!
+
+ """List of user IDs that should be removed from the team."""
+ userIds: [ID!]!
+ ): Team!
+
+ """
+ Request a key that can be used to trigger a team deletion process
+
+ Deleting a team is a two step process. First an owner of the team (or an admin) must request a team deletion key, and
+ then a second owner of the team (or an admin) must confirm the deletion using the confirmTeamDeletion mutation.
+
+ Note: Service accounts are not allowed to request team delete keys.
+ """
+ requestTeamDeletion(
+ """The slug of the team that the deletion key will be assigned to."""
+ slug: Slug!
+ ): TeamDeleteKey!
+
+ """
+ Reset all reconciler configuration options to their initial state and disable the reconciler if it is currently enabled.
+ """
+ resetReconciler(
+ """The name of the reconciler to reset."""
+ name: String!
+ ): Reconciler!
+
+ """
+ Set the member role of a user in a team
+
+ The user must already exist in the team for this mutation to succeed.
+
+ The team will be returned on success.
+ """
+ setTeamMemberRole(
+ """The team role to set."""
+ role: TeamRole!
+
+ """The slug of the team."""
+ slug: Slug!
+
+ """The ID of the user."""
+ userId: ID!
+ ): Team!
+
+ """
+ Manually synchronize all teams
+
+ This action will trigger a full synchronization of all teams against the configured third party systems. The action
+ is asynchronous. The operation can take a while, depending on the amount of teams currently managed.
+ """
+ synchronizeAllTeams: TeamSync!
+
+ """
+ Manually synchronize a team
+
+ This action will trigger a full synchronization of the team against the configured third party systems. The action
+ is asynchronous.
+
+ The team will be returned.
+ """
+ synchronizeTeam(
+ """The slug of the team to synchronize."""
+ slug: Slug!
+ ): TeamSync!
+
+ """
+ Trigger a user synchronization
+
+ This mutation will trigger a full user synchronization with the connected Google Workspace, and return a correlation
+ ID that can later be matched to the log entries. The user synchronization itself is asynchronous.
+ """
+ synchronizeUsers: String!
+
+ """
+ Update an existing team
+
+ This mutation can be used to update the team purpose. It is not possible to update the team slug.
+
+ The updated team will be returned on success.
+ """
+ updateTeam(
+ """Input for updating the team."""
+ input: UpdateTeamInput!
+
+ """Slug of the team to update."""
+ slug: Slug!
+ ): Team!
}
-type NaisJob implements Node {
+type NaisJob {
accessPolicy: AccessPolicy!
authz: [Authz!]!
completions: Int!
@@ -612,15 +880,18 @@ type NaisJob implements Node {
team: Team!
}
-type NaisJobConnection implements Connection {
- edges: [NaisJobEdge!]!
+type NaisJobList {
+ nodes: [NaisJob!]!
pageInfo: PageInfo!
- totalCount: Int!
}
-type NaisJobEdge implements Edge {
- cursor: Cursor!
- node: NaisJob!
+"""NAIS namespace type."""
+type NaisNamespace {
+ """The environment for the namespace."""
+ environment: String!
+
+ """The namespace."""
+ namespace: Slug!
}
type NewInstancesFailingError implements StateError {
@@ -634,12 +905,6 @@ type NoRunningInstancesError implements StateError {
revision: String!
}
-"""Node interface."""
-interface Node {
- """The unique ID of an object."""
- id: ID!
-}
-
type OpenSearch implements Storage {
access: String!
@@ -672,9 +937,6 @@ enum OrderByField {
"""Order by risk score"""
RISK_SCORE
- """Order by authorizations"""
- ROLE
-
"""Order apps by vulnerability severity critical"""
SEVERITY_CRITICAL
@@ -705,30 +967,16 @@ type OutboundAccessError implements StateError {
rule: Rule!
}
-"""
-PageInfo is a type that contains pagination information in a Relay style.
-"""
type PageInfo {
- """A cursor corresponding to the last node in the connection."""
- endCursor: Cursor
- from: Int!
-
- """When paginating forwards, are there more items?"""
hasNextPage: Boolean!
-
- """When paginating backwards, are there more items?"""
hasPreviousPage: Boolean!
-
- """A cursor corresponding to the first node in the connection."""
- startCursor: Cursor
- to: Int!
+ totalCount: Int!
}
type Port {
port: Int!
}
-"""The query root for the console-backend GraphQL API."""
type Query {
"""Get an app by name, team and env."""
app(
@@ -739,7 +987,7 @@ type Query {
name: String!
"""The name of the team who owns the application."""
- team: String!
+ team: Slug!
): App!
"""Get the current resource utilization values for a specific app."""
@@ -751,7 +999,7 @@ type Query {
env: String!
"""The name of the team."""
- team: String!
+ team: Slug!
): CurrentResourceUtilization!
"""
@@ -759,7 +1007,7 @@ type Query {
"""
currentResourceUtilizationForTeam(
"""The name of the team."""
- team: String!
+ team: Slug!
): CurrentResourceUtilization!
"""Get the daily cost for a team application in a specific environment."""
@@ -774,7 +1022,7 @@ type Query {
from: Date!
"""The name of the team that owns the application."""
- team: String!
+ team: Slug!
"""End date for cost series, inclusive."""
to: Date!
@@ -786,18 +1034,21 @@ type Query {
from: Date!
"""The name of the team that owns the application."""
- team: String!
+ team: Slug!
"""End date for cost series, inclusive."""
to: Date!
): DailyCost!
"""Get a list of deployments."""
- deployments(after: Cursor, before: Cursor, first: Int, last: Int, limit: Int): DeploymentConnection!
+ deployments(limit: Int, offset: Int): DeploymentList!
"""Get env cost for a team."""
envCost(filter: EnvCostFilter!): [EnvCost!]!
+ """The currently authenticated user."""
+ me: AuthenticatedUser!
+
"""Get monthly costs."""
monthlyCost(filter: MonthlyCostFilter!): MonthlyCost!
@@ -810,14 +1061,11 @@ type Query {
name: String!
"""The name of the team who owns the naisjob."""
- team: String!
+ team: Slug!
): NaisJob!
- """Fetches an object given its ID."""
- node(
- """The ID of an object."""
- id: ID!
- ): Node
+ """Get a collection of reconcilers."""
+ reconcilers(limit: Int, offset: Int): ReconcilerList!
"""Get the date range for resource utilization for an app."""
resourceUtilizationDateRangeForApp(
@@ -828,7 +1076,7 @@ type Query {
env: String!
"""The name of the team."""
- team: String!
+ team: Slug!
): ResourceUtilizationDateRange!
"""
@@ -836,7 +1084,7 @@ type Query {
"""
resourceUtilizationDateRangeForTeam(
"""The name of the team."""
- team: String!
+ team: Slug!
): ResourceUtilizationDateRange!
"""Get the resource utilization for an app."""
@@ -853,7 +1101,7 @@ type Query {
from: Date
"""The name of the team."""
- team: String!
+ team: Slug!
"""Fetch resource utilization until this date. Defaults to today."""
to: Date
@@ -867,7 +1115,7 @@ type Query {
from: Date
"""The team to fetch data for."""
- team: String!
+ team: Slug!
"""Fetch resource utilization until this date. Defaults to today."""
to: Date
@@ -876,39 +1124,125 @@ type Query {
"""Get resource utilization overage data for a team."""
resourceUtilizationOverageForTeam(
"""The name of the team."""
- team: String!
+ team: Slug!
): ResourceUtilizationOverageForTeam!
"""Get the resource utilization trend for a team."""
resourceUtilizationTrendForTeam(
"""The name of the team."""
- team: String!
+ team: Slug!
): ResourceUtilizationTrend!
- search(after: Cursor, before: Cursor, filter: SearchFilter, first: Int, last: Int, query: String!): SearchConnection!
+ search(filter: SearchFilter, limit: Int, offset: Int, query: String!): SearchList!
- """Get a specific NAIS-team by the team name."""
+ """Get a specific team."""
team(
- """The name of the NAIS-team to get."""
- name: String!
+ """Slug of the team."""
+ slug: Slug!
): Team!
- """Get a list of NAIS-teams, in alphabetical order."""
+ """Get a team delete key."""
+ teamDeleteKey(
+ """The key to get."""
+ key: String!
+ ): TeamDeleteKey!
+
+ """Get a collection of teams. Default limit is 20"""
teams(
- """Get entries after the cursor."""
- after: Cursor
+ """Filter teams by GitHub repository permissions."""
+ filter: TeamsFilter
- """Get entries before the cursor."""
- before: Cursor
+ """Limit the number of teams to return. Default is 20."""
+ limit: Int
- """Returns the first n entries from the list."""
- first: Int
+ """Offset to start listing teams from. Default is 0."""
+ offset: Int
+ ): TeamList!
- """Returns the last n entries from the list."""
- last: Int
- ): TeamConnection!
+ """Get a specific user."""
+ user(
+ email: String
- """Get the currently logged in user."""
- user: User!
+ """ID of the user."""
+ id: ID
+ ): User!
+
+ """Get user sync status and logs."""
+ userSync: [UserSyncRun!]!
+
+ """Get a collection of users, sorted by name."""
+ users(limit: Int, offset: Int): UserList!
+}
+
+"""Reconciler type."""
+type Reconciler {
+ """Audit logs for this reconciler."""
+ auditLogs(limit: Int, offset: Int): AuditLogList!
+
+ """Reconciler configuration keys and descriptions."""
+ config: [ReconcilerConfig!]!
+
+ """
+ Whether or not the reconciler is fully configured and ready to be enabled.
+ """
+ configured: Boolean!
+
+ """Description of what the reconciler is responsible for."""
+ description: String!
+
+ """The human-friendly name of the reconciler."""
+ displayName: String!
+
+ """Whether or not the reconciler is enabled."""
+ enabled: Boolean!
+
+ """Whether or not the reconciler uses team memberships when syncing."""
+ memberAware: Boolean!
+
+ """The name of the reconciler."""
+ name: String!
+}
+
+"""Reconciler configuration type."""
+type ReconcilerConfig {
+ """Whether or not the configuration key has a value."""
+ configured: Boolean!
+
+ """Configuration description."""
+ description: String!
+
+ """The human-friendly name of the configuration key."""
+ displayName: String!
+
+ """Configuration key."""
+ key: String!
+
+ """
+ Whether or not the configuration value is considered a secret. Secret values will not be exposed through the API.
+ """
+ secret: Boolean!
+
+ """
+ Configuration value. This will be set to null if the value is considered a secret.
+ """
+ value: String
+}
+
+"""Reconciler configuration input."""
+input ReconcilerConfigInput {
+ """Configuration key."""
+ key: String!
+
+ """Configuration value."""
+ value: String!
+}
+
+"""Paginated reconcilers type."""
+type ReconcilerList {
+ """The list of reconcilers."""
+ nodes: [Reconciler!]!
+
+ """Pagination information."""
+ pageInfo: PageInfo!
}
type Redis implements Storage {
@@ -916,9 +1250,9 @@ type Redis implements Storage {
name: String!
}
-"""Repo authorizations."""
+"""Repository authorizations."""
enum RepositoryAuthorization {
- """Authorized for NAIS deployment."""
+ """Authorize for NAIS deployment."""
DEPLOY
}
@@ -1031,6 +1365,23 @@ type Resources {
requests: Requests!
}
+"""Role binding type."""
+type Role {
+ """Whether or not the role is global."""
+ isGlobal: Boolean!
+
+ """Name of the role."""
+ name: String!
+
+ """
+ Optional service account if the role binding targets a service account.
+ """
+ targetServiceAccount: ServiceAccount
+
+ """Optional team if the role binding targets a team."""
+ targetTeam: Team
+}
+
type Rule {
application: String!
cluster: String!
@@ -1040,7 +1391,7 @@ type Rule {
namespace: String!
}
-type Run implements Node {
+type Run {
completionTime: Time
duration: String!
failed: Boolean!
@@ -1052,21 +1403,15 @@ type Run implements Node {
startTime: Time
}
-type SearchConnection implements Connection {
- edges: [SearchEdge!]!
- pageInfo: PageInfo!
- totalCount: Int!
-}
-
-type SearchEdge implements Edge {
- cursor: Cursor!
- node: SearchNode!
-}
-
input SearchFilter {
type: SearchType
}
+type SearchList {
+ nodes: [SearchNode!]!
+ pageInfo: PageInfo!
+}
+
union SearchNode = App | NaisJob | Team
enum SearchType {
@@ -1075,6 +1420,18 @@ enum SearchType {
TEAM
}
+"""Service account type."""
+type ServiceAccount {
+ """Unique ID of the service account."""
+ id: ID!
+
+ """The name of the service account."""
+ name: String!
+
+ """Roles attached to the service account."""
+ roles: [Role!]!
+}
+
type Sidecar {
autoLogin: Boolean!
autoLoginIgnorePaths: [String!]!
@@ -1083,13 +1440,39 @@ type Sidecar {
"""Slack alerts channel type."""
type SlackAlertsChannel {
- """The environment for the Slack alerts channel."""
- env: String!
+ """The name of the Slack channel."""
+ channelName: String!
- """The name of the Slack alerts channel."""
- name: String!
+ """The environment for the alerts sent to the channel."""
+ environment: String!
}
+"""Slack alerts channel input."""
+input SlackAlertsChannelInput {
+ """The name of the Slack channel."""
+ channelName: String
+
+ """The environment for the alerts sent to the channel."""
+ environment: String!
+}
+
+"""
+The slug must:
+
+- contain only lowercase alphanumeric characters or hyphens
+- contain at least 3 characters and at most 30 characters
+- start with an alphabetic character
+- end with an alphanumeric character
+- not contain two hyphens in a row
+
+Examples of valid slugs:
+
+- `some-value`
+- `someothervalue`
+- `my-team-123`
+"""
+scalar Slug
+
enum SortOrder {
"""Ascending sort order."""
ASC
@@ -1133,211 +1516,241 @@ interface Storage {
name: String!
}
-"""The root subscription type for implementing GraphQL subscriptions."""
type Subscription {
log(input: LogSubscriptionInput): LogLine!
}
+"""Sync error type."""
+type SyncError {
+ """Creation time of the error."""
+ createdAt: Time!
+
+ """Error message."""
+ error: String!
+
+ """The name of the reconciler."""
+ reconciler: String!
+}
+
+type SynchronizationFailingError implements StateError {
+ detail: String!
+ level: ErrorLevel!
+ revision: String!
+}
+
"""Team type."""
-type Team implements Node {
+type Team {
"""The NAIS applications owned by the team."""
apps(
- """Get entries after the cursor."""
- after: Cursor
-
- """Get entries before the cursor."""
- before: Cursor
+ """Returns the last n entries from the list."""
+ limit: Int
"""Returns the first n entries from the list."""
- first: Int
-
- """Returns the last n entries from the list."""
- last: Int
+ offset: Int
"""Order apps by"""
orderBy: OrderBy
- ): AppConnection!
+ ): AppList!
+
+ """Audit logs for this team."""
+ auditLogs(
+ """Limit the number of audit log entries to return. Default is 20."""
+ limit: Int
+
+ """Offset to start listing audit log entries from. Default is 0."""
+ offset: Int
+ ): AuditLogList!
+
+ """
+ The ID of the Azure AD group for the team. This value is managed by the Azure AD reconciler.
+ """
+ azureGroupID: ID
+
+ """Whether or not the team is currently being deleted."""
+ deletionInProgress: Boolean!
"""The deploy key of the team."""
deployKey: DeploymentKey!
"""The deployments of the team's applications."""
deployments(
- """Get entries after the cursor."""
- after: Cursor
-
- """Get entries before the cursor."""
- before: Cursor
+ """Limit the number of entries returned."""
+ limit: Int
"""Returns the first n entries from the list."""
- first: Int
+ offset: Int
+ ): DeploymentList!
- """Returns the last n entries from the list."""
- last: Int
+ """The environments available for the team."""
+ environments: [Env!]!
- """Limit the number of entries returned."""
- limit: Int
- ): DeploymentConnection!
-
- """The description of the team."""
- description: String!
- gcpProjects: [GcpProject!]!
+ """
+ The slug of the GitHub team. This value is managed by the GitHub reconciler.
+ """
+ gitHubTeamSlug: String
"""The GitHub repositories that the team has access to."""
githubRepositories(
- """Get entries after the cursor."""
- after: Cursor
+ """Limit the number of repositories to return. Default is 20."""
+ limit: Int
- """Get entries before the cursor."""
- before: Cursor
+ """Offset to start listing repositories from. Default is 0."""
+ offset: Int
+ ): GitHubRepositoryList!
- """Returns the first n entries from the list."""
- first: Int
+ """The Google artifact registry for the team."""
+ googleArtifactRegistry: String
- """Returns the last n entries from the list."""
- last: Int
+ """
+ The email address of the Google group for the team. This value is managed by the Google Workspace reconciler.
+ """
+ googleGroupEmail: String
+ id: ID!
- """Order apps by"""
- orderBy: OrderBy
- ): GithubRepositoryConnection!
+ """Timestamp of the last successful synchronization of the team."""
+ lastSuccessfulSync: Time
- """The unique identifier of the team."""
- id: ID!
+ """Single team member"""
+ member(
+ """The ID of the user."""
+ userId: ID!
+ ): TeamMember!
"""Team members."""
members(
- """Get entries after the cursor."""
- after: Cursor
-
- """Get entries before the cursor."""
- before: Cursor
-
- """Returns the first n entries from the list."""
- first: Int
+ """Limit the number of team members to return. Default is 20."""
+ limit: Int
- """Returns the last n entries from the list."""
- last: Int
- ): TeamMemberConnection!
+ """Offset to start listing team members from. Default is 0."""
+ offset: Int
+ ): TeamMemberList!
"""The NAIS jobs owned by the team."""
naisjobs(
- """Get entries after the cursor."""
- after: Cursor
-
- """Get entries before the cursor."""
- before: Cursor
+ """Returns the last n entries from the list."""
+ limit: Int
"""Returns the first n entries from the list."""
- first: Int
-
- """Returns the last n entries from the list."""
- last: Int
+ offset: Int
"""Order naisjobs by"""
orderBy: OrderBy
- ): NaisJobConnection!
-
- """The name of the team."""
- name: String!
+ ): NaisJobList!
- """Slack alerts channels for the team."""
- slackAlertsChannels: [SlackAlertsChannel!]!
+ """Purpose of the team."""
+ purpose: String!
- """The main Slack channel for the team."""
+ """Slack channel for the team."""
slackChannel: String!
+ """Unique slug of the team."""
+ slug: Slug!
+
"""The status of the team."""
status: TeamStatus!
- """Whether or not the viewer is an administrator of the team."""
- viewerIsAdmin: Boolean!
+ """
+ Possible issues related to synchronization of the team to configured external systems. If there are no entries the team can be considered fully synchronized.
+ """
+ syncErrors: [SyncError!]!
"""Whether or not the viewer is a member of the team."""
viewerIsMember: Boolean!
+ """Whether or not the viewer is an owner of the team."""
+ viewerIsOwner: Boolean!
+
"""The vulnerabilities for the team's applications."""
vulnerabilities(
- """Get entries after the cursor."""
- after: Cursor
-
- """Get entries before the cursor."""
- before: Cursor
+ """Returns the last n entries from the list."""
+ limit: Int
"""Returns the first n entries from the list."""
- first: Int
-
- """Returns the last n entries from the list."""
- last: Int
+ offset: Int
"""Order apps by"""
orderBy: OrderBy
- ): VulnerabilitiesConnection!
+ ): VulnerabilityList!
vulnerabilitiesSummary: VulnerabilitySummary!
+
+ """The vulnerabilities for the team's applications over time."""
+ vulnerabilityMetrics(environment: String, from: Date!, to: Date!): VulnerabilityMetrics!
}
-"""Team connection type."""
-type TeamConnection implements Connection {
- """A list of team edges."""
- edges: [TeamEdge!]!
+"""Team deletion key type."""
+type TeamDeleteKey {
+ """The creation timestamp of the key."""
+ createdAt: Time!
- """Pagination information."""
- pageInfo: PageInfo!
+ """The user who created the key."""
+ createdBy: User!
- """The total count of available teams."""
- totalCount: Int!
-}
+ """Expiration timestamp of the key."""
+ expires: Time!
-"""Team edge type."""
-type TeamEdge implements Edge {
- """A cursor for use in pagination."""
- cursor: Cursor!
+ """The unique key used to confirm the deletion of a team."""
+ key: String!
- """The team at the end of the edge."""
- node: Team!
+ """The team the delete key is for."""
+ team: Team!
}
-"""Team member type."""
-type TeamMember implements Node {
- """The email of the team member."""
- email: String!
+"""Paginated teams type."""
+type TeamList {
+ """The list of teams."""
+ nodes: [Team!]!
- """The unique identifier of the team member."""
- id: ID!
+ """Pagination information."""
+ pageInfo: PageInfo!
+}
- """The name of the team member."""
- name: String!
+"""Team member."""
+type TeamMember {
+ """Reconcilers for this member in this team."""
+ reconcilers: [TeamMemberReconciler!]!
- """The role of the team member."""
+ """The role that the user has in the team."""
role: TeamRole!
+
+ """Team instance."""
+ team: Team!
+
+ """User instance."""
+ user: User!
}
-"""Team member connection type."""
-type TeamMemberConnection implements Connection {
- """A list of team member edges."""
- edges: [TeamMemberEdge!]!
+"""Team member input."""
+input TeamMemberInput {
+ """Reconcilers to opt the team member out of."""
+ reconcilerOptOuts: [String!]
- """Pagination information."""
- pageInfo: PageInfo!
+ """The role that the user will receive."""
+ role: TeamRole!
- """The total count of available team members."""
- totalCount: Int!
+ """The ID of user."""
+ userId: ID!
}
-"""Team member edge type."""
-type TeamMemberEdge implements Edge {
- """A cursor for use in pagination."""
- cursor: Cursor!
+type TeamMemberList {
+ nodes: [TeamMember!]!
+ pageInfo: PageInfo!
+}
+
+"""Team member reconcilers."""
+type TeamMemberReconciler {
+ """Whether or not the reconciler is enabled for the team member."""
+ enabled: Boolean!
- """The team member at the end of the edge."""
- node: TeamMember!
+ """The reconciler."""
+ reconciler: Reconciler!
}
-"""Team member roles."""
+"""Available team roles."""
enum TeamRole {
- """A regular team member."""
+ """Regular member, read only access."""
MEMBER
- """A team owner/administrator."""
+ """Team owner, full access to the team."""
OWNER
}
@@ -1347,6 +1760,25 @@ type TeamStatus {
jobs: JobsStatus!
}
+"""Team sync type."""
+type TeamSync {
+ """The correlation ID for the sync."""
+ correlationID: ID!
+}
+
+"""Input for filtering teams."""
+input TeamsFilter {
+ github: TeamsFilterGitHub
+}
+
+input TeamsFilterGitHub {
+ """Filter repostiories by permission name"""
+ permissionName: String!
+
+ """Filter repostiories by repo name"""
+ repoName: String!
+}
+
"""
Time is a string in [RFC 3339](https://rfc-editor.org/rfc/rfc3339.html) format, with sub-second precision added if present.
"""
@@ -1361,37 +1793,86 @@ type Topic {
name: String!
}
-type User implements Node {
- """The user's email address."""
+"""Input for updating an existing team."""
+input UpdateTeamInput {
+ """Specify team purpose to update the existing value."""
+ purpose: String
+
+ """A list of Slack channels for NAIS alerts."""
+ slackAlertsChannels: [SlackAlertsChannelInput!]
+
+ """Specify the Slack channel to update the existing value."""
+ slackChannel: String
+}
+
+"""User type."""
+type User {
+ """The email address of the user."""
email: String!
- """The unique identifier for the user."""
+ """The external ID of the user."""
+ externalId: String!
+
+ """Unique ID of the user."""
id: ID!
- """The user's full name."""
+ """This field will only be populated via the me query"""
+ isAdmin: Boolean
+
+ """The name of the user."""
name: String!
- """Teams that the user is a member and/or owner of."""
- teams(after: Cursor, before: Cursor, first: Int, last: Int): TeamConnection!
-}
+ """Roles attached to the user."""
+ roles: [Role!]!
-type Variable {
- name: String!
- value: String!
+ """List of team memberships."""
+ teams(limit: Int, offset: Int): TeamMemberList!
}
-type VulnerabilitiesConnection implements Connection {
- edges: [VulnerabilitiesEdge!]!
+type UserList {
+ nodes: [User!]!
pageInfo: PageInfo!
- totalCount: Int!
}
-type VulnerabilitiesEdge implements Edge {
- cursor: Cursor!
- node: VulnerabilitiesNode!
+"""User sync run type."""
+type UserSyncRun {
+ """Log entries for the sync run."""
+ auditLogs(limit: Int, offset: Int): AuditLogList!
+
+ """The correlation ID of the sync run."""
+ correlationID: ID!
+
+ """Optional error."""
+ error: String
+
+ """Timestamp of when the run finished."""
+ finishedAt: Time
+
+ """Timestamp of when the run started."""
+ startedAt: Time!
+
+ """The status of the sync run."""
+ status: UserSyncRunStatus!
+}
+
+"""User sync run status."""
+enum UserSyncRunStatus {
+ """Failed user sync run."""
+ FAILURE
+
+ """User sync run in progress."""
+ IN_PROGRESS
+
+ """Successful user sync run."""
+ SUCCESS
+}
+
+type Variable {
+ name: String!
+ value: String!
}
-type VulnerabilitiesNode implements Node {
+type Vulnerability {
appName: String!
env: String!
findingsLink: String!
@@ -1400,6 +1881,47 @@ type VulnerabilitiesNode implements Node {
summary: VulnerabilitySummary
}
+type VulnerabilityList {
+ nodes: [Vulnerability!]!
+ pageInfo: PageInfo!
+}
+
+type VulnerabilityMetric {
+ """The number of critical vulnerabilities."""
+ critical: Int!
+
+ """The date of the metric."""
+ date: Time!
+
+ """The number of high vulnerabilities."""
+ high: Int!
+
+ """The number of low vulnerabilities."""
+ low: Int!
+
+ """The number of medium vulnerabilities."""
+ medium: Int!
+
+ """
+ The weighted severity score calculated from the number of vulnerabilities.
+ """
+ riskScore: Int!
+
+ """The number of unassigned vulnerabilities."""
+ unassigned: Int!
+}
+
+type VulnerabilityMetrics {
+ """The metrics for the team's applications."""
+ data: [VulnerabilityMetric!]!
+
+ """The maximum date for the metrics available in the database."""
+ maxDate: Date
+
+ """The minimum date for the metrics available in the database."""
+ minDate: Date
+}
+
type VulnerabilitySummary {
critical: Int!
high: Int!
diff --git a/src/app.d.ts b/src/app.d.ts
index 3e0218d7..f59b884c 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -3,9 +3,7 @@
declare global {
namespace App {
// interface Error {}
- interface Locals {
- tenantDomain: string;
- }
+ // interface Locals {}
// interface PageData {}
// interface Platform {}
}
diff --git a/src/helpers.ts b/src/helpers.ts
deleted file mode 100644
index f193cf8b..00000000
--- a/src/helpers.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { OrderByField } from '$houdini';
-import type { TableSortState } from '@nais/ds-svelte-community';
-
-export const sortTable = (key: string, sortState: TableSortState, fetch: (key: string) => void) => {
- if (!sortState) {
- sortState = {
- orderBy: OrderByField[key as keyof typeof OrderByField],
- direction: 'descending'
- };
- } else if (sortState.orderBy === OrderByField[key as keyof typeof OrderByField]) {
- if (sortState.direction === 'ascending') {
- sortState.direction = 'descending';
- } else {
- sortState.direction = 'ascending';
- }
- } else {
- sortState.orderBy = OrderByField[key as keyof typeof OrderByField];
- if (key === OrderByField.NAME) {
- sortState.direction = 'ascending';
- } else {
- sortState.direction = 'descending';
- }
- }
- fetch(key);
- return sortState;
-};
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index bc224452..41b9953a 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -1,21 +1,10 @@
-import type { HandleFetch, Handle } from '@sveltejs/kit';
-import { env } from '$env/dynamic/private';
+import type { HandleFetch } from '@sveltejs/kit';
export const handleFetch: HandleFetch = async ({ event, request, fetch }) => {
- request.headers.set(
- 'X-Goog-Authenticated-User-Email',
- event.request.headers.get('X-Goog-Authenticated-User-Email') || ''
- );
-
- request.headers.set(
- 'X-Goog-IAP-JWT-Assertion',
- event.request.headers.get('X-Goog-IAP-JWT-Assertion') || ''
- );
+ const cookies = event.request.headers.get('cookie');
+ if (request.url.startsWith('http://nais-api/') && cookies) {
+ request.headers.set('cookie', cookies);
+ }
return fetch(request);
};
-
-export const handle: Handle = async ({ event, resolve }) => {
- event.locals.tenantDomain = env.TENANT_DOMAIN || '';
- return await resolve(event);
-};
diff --git a/src/lib/AppErrorTypeToMessage.svelte b/src/lib/AppErrorTypeToMessage.svelte
index 078d9ed4..ab9249e2 100644
--- a/src/lib/AppErrorTypeToMessage.svelte
+++ b/src/lib/AppErrorTypeToMessage.svelte
@@ -25,6 +25,9 @@
... on InvalidNaisYamlError {
detail
}
+ ... on SynchronizationFailingError {
+ detail
+ }
... on NewInstancesFailingError {
failingInstances
}
@@ -98,7 +101,15 @@
{:else if $data.__typename === 'InvalidNaisYamlError'}
<div class="wrapper">
<Alert variant="error">
- Nais-yaml might be invalid for application <strong>{app}</strong>.
+ The <em>nais.yaml</em> configuration is invalid for application <strong>{app}</strong>:
+ <br />{$data.detail}
+ </Alert>
+ </div>
+ {:else if $data.__typename === 'SynchronizationFailingError'}
+ <div class="wrapper">
+ <Alert variant="error">
+ Application <strong>{app}</strong> failed to synchronize properly.
+ <br />{$data.detail}
</Alert>
</div>
{:else if $data.__typename === 'NewInstancesFailingError'}
diff --git a/src/lib/Card.svelte b/src/lib/Card.svelte
index be762699..17d9d3f3 100644
--- a/src/lib/Card.svelte
+++ b/src/lib/Card.svelte
@@ -6,11 +6,12 @@
export let columns = 0;
export let rows = 0;
export let borderColor = 'var(--a-gray-200)';
+ export let style = '';
</script>
<div
{...$$restProps}
- style="--columns: {columns}; --rows: {rows}; padding-bottom: {paddingBottom}; min-width: {minWidth}; width: {width}; height: {height}; --borderColor: {borderColor};"
+ style="{style}; --columns: {columns}; --rows: {rows}; padding-bottom: {paddingBottom}; min-width: {minWidth}; width: {width}; height: {height}; --borderColor: {borderColor};"
>
<slot />
</div>
diff --git a/src/lib/DeploymentStatus.svelte b/src/lib/DeploymentStatus.svelte
index 721b5c14..fa653225 100644
--- a/src/lib/DeploymentStatus.svelte
+++ b/src/lib/DeploymentStatus.svelte
@@ -1,7 +1,9 @@
<script lang="ts">
import { Tag } from '@nais/ds-svelte-community';
+
export let status: string;
- let asdf = (
+
+ const asdf = (
status: string
): { variant: 'success' | 'error' | 'neutral' | 'warning' | 'info'; title: string } => {
switch (status) {
@@ -17,6 +19,7 @@
return { variant: 'neutral', title: 'Unknown' };
}
};
+
$: statusType = asdf(status);
</script>
diff --git a/src/lib/Pagination.svelte b/src/lib/Pagination.svelte
index d4c29981..b0004ea0 100644
--- a/src/lib/Pagination.svelte
+++ b/src/lib/Pagination.svelte
@@ -1,64 +1,33 @@
<script lang="ts">
import { PendingValue } from '$houdini';
- import { Button } from '@nais/ds-svelte-community';
- import { ChevronLeftIcon, ChevronRightIcon } from '@nais/ds-svelte-community/icons';
- import { createEventDispatcher } from 'svelte';
- export let totalCount: number | typeof PendingValue;
+ import { Pagination } from '@nais/ds-svelte-community';
+ export let limit: number;
+ export let offset: number;
+ export let changePage: (page: number) => void;
+
export let pageInfo:
| {
- readonly hasNextPage: boolean;
- readonly hasPreviousPage: boolean;
- readonly from: number;
- readonly to: number;
+ readonly totalCount: number | typeof PendingValue;
}
- | {
- readonly hasNextPage: typeof PendingValue;
- readonly hasPreviousPage: typeof PendingValue;
- readonly from: typeof PendingValue;
- readonly to: typeof PendingValue;
- };
- const dispatch = createEventDispatcher();
+ | undefined;
+
+ function count(totalCount: number) {
+ return Math.ceil(totalCount / limit);
+ }
+ function page(offset: number, limit: number) {
+ return Math.ceil(offset / limit) + 1;
+ }
</script>
-{#if (!pageInfo.hasNextPage && !pageInfo.hasPreviousPage) || totalCount === PendingValue}
+{#if !pageInfo || pageInfo.totalCount == PendingValue}
+ <div />
+{:else if pageInfo.totalCount <= limit}
<div />
{:else}
- <div>
- <Button
- size="xsmall"
- on:click={() => {
- if (!pageInfo.hasPreviousPage) return;
- dispatch('previousPage');
- }}
- disabled={!pageInfo.hasPreviousPage}
- ><svelte:fragment slot="icon-left"
- ><ChevronLeftIcon aria-label="Previous page" /></svelte:fragment
- ></Button
- >
- <span>
- {pageInfo.from} -
- {pageInfo.to} of
- {totalCount}
- </span>
- <Button
- size="xsmall"
- on:click={() => {
- if (!pageInfo.hasNextPage) return;
- dispatch('nextPage');
- }}
- disabled={!pageInfo.hasNextPage}
- >
- <svelte:fragment slot="icon-left"><ChevronRightIcon aria-label="Next page" /></svelte:fragment
- ></Button
- >
- </div>
+ <Pagination
+ count={count(pageInfo.totalCount)}
+ page={page(offset, limit)}
+ size="small"
+ on:change={(e) => changePage(e.detail.page)}
+ />
{/if}
-
-<style>
- div {
- display: flex;
- justify-content: flex-end;
- margin-top: 1rem;
- gap: 1rem;
- }
-</style>
diff --git a/src/lib/SearchResults.svelte b/src/lib/SearchResults.svelte
index a40946bc..a85265f4 100644
--- a/src/lib/SearchResults.svelte
+++ b/src/lib/SearchResults.svelte
@@ -12,12 +12,12 @@
</script>
<ul>
- {#if data.search.edges.length === 0}
+ {#if data.search.nodes.length === 0}
<li class="nomatch">
No results matching "{query}"
</li>
{/if}
- {#each data.search.edges as { node }, i}
+ {#each data.search.nodes as node, i}
{#if node.__typename === PendingValue}
<li>
<Skeleton variant="rounded" width="350px" height="2.5rem" />
@@ -27,7 +27,7 @@
<li>
<a
class={selected == i ? 'selected' : ''}
- href="/team/{node.team.name}/{node.env.name}/app/{node.name}"
+ href="/team/{node.team.slug}/{node.env.name}/app/{node.name}"
on:click={() => {
query = '';
showSearch = false;
@@ -44,7 +44,7 @@
<div class="searchInfo">
{node.env.name} /
- {node.team.name}
+ {node.team.slug}
</div>
</div>
</a>
@@ -53,7 +53,7 @@
<li>
<a
class={selected == i ? 'selected' : ''}
- href="/team/{node.team.name}/{node.env.name}/job/{node.name}"
+ href="/team/{node.team.slug}/{node.env.name}/job/{node.name}"
on:click={() => {
query = '';
showSearch = false;
@@ -70,7 +70,7 @@
<div class="searchInfo">
{node.env.name} /
- {node.team.name}
+ {node.team.slug}
</div>
</div>
</a>
@@ -79,7 +79,7 @@
<li>
<a
class={selected == i ? 'selected' : ''}
- href="/team/{node.name}"
+ href="/team/{node.slug}"
on:click={() => {
query = '';
showSearch = false;
@@ -89,7 +89,7 @@
<PersonGroupIcon height="1.5rem" />
<div>Team</div>
</div>
- {node.name}</a
+ {node.slug}</a
>
</li>
{/if}
diff --git a/src/lib/chart/vulnerabilies_transformer.ts b/src/lib/chart/vulnerabilies_transformer.ts
new file mode 100644
index 00000000..9b6c4085
--- /dev/null
+++ b/src/lib/chart/vulnerabilies_transformer.ts
@@ -0,0 +1,107 @@
+import type { TeamVulnerabilityMetrics$result } from '$houdini';
+import type { EChartsOption } from 'echarts';
+
+export function vulnerabilitiesTeamTransformLineChart(
+ metrics: TeamVulnerabilityMetrics$result
+): EChartsOption {
+ const dates = new Array<Date>();
+
+ for (let i = 0; i < metrics.team.vulnerabilityMetrics.data.length; i++) {
+ dates.push(metrics.team.vulnerabilityMetrics.data[i].date);
+ }
+
+ const numberOfDays = dates.length;
+
+ const highSeries = new Array<number>();
+ const mediumSeries = new Array<number>();
+ const lowSeries = new Array<number>();
+ const unassignedSeries = new Array<number>();
+ const criticalSeries = new Array<number>();
+ const riskScoreSeries = new Array<number>();
+
+ for (let i = 0; i < numberOfDays; i++) {
+ highSeries.push(metrics.team.vulnerabilityMetrics.data[i].high);
+ mediumSeries.push(metrics.team.vulnerabilityMetrics.data[i].medium);
+ lowSeries.push(metrics.team.vulnerabilityMetrics.data[i].low);
+ unassignedSeries.push(metrics.team.vulnerabilityMetrics.data[i].unassigned);
+ criticalSeries.push(metrics.team.vulnerabilityMetrics.data[i].critical);
+ riskScoreSeries.push(metrics.team.vulnerabilityMetrics.data[i].riskScore);
+ }
+
+ return {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'line'
+ },
+ valueFormatter: (value: number) => (value == null ? '-' : value)
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: dates.map((date) => {
+ return date.toLocaleDateString('en-GB', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric'
+ });
+ })
+ },
+ yAxis: [
+ {
+ name: 'Vulnerabilities',
+ type: 'value'
+ },
+ {
+ name: 'Risk score',
+ type: 'value',
+ inverse: false
+ }
+ ],
+ series: [
+ {
+ type: 'line',
+ name: 'Critical',
+ data: criticalSeries,
+ showSymbol: numberOfDays === 1 ? true : false,
+ color: '#f86c6b'
+ },
+ {
+ type: 'line',
+ name: 'High',
+ data: highSeries,
+ showSymbol: numberOfDays === 1 ? true : false,
+ color: '#fd8b00'
+ },
+ {
+ type: 'line',
+ name: 'Medium',
+ data: mediumSeries,
+ showSymbol: numberOfDays === 1 ? true : false,
+ color: '#ffc107'
+ },
+ {
+ type: 'line',
+ name: 'Low',
+ data: lowSeries,
+ showSymbol: numberOfDays === 1 ? true : false,
+ color: '#4dbd74'
+ },
+ {
+ type: 'line',
+ name: 'Unassigned',
+ data: unassignedSeries,
+ showSymbol: numberOfDays === 1 ? true : false,
+ color: '#777777'
+ },
+ {
+ type: 'line',
+ name: 'Risk score',
+ data: riskScoreSeries,
+ showSymbol: numberOfDays === 1 ? true : false,
+ color: '#ff0000',
+ yAxisIndex: 1
+ }
+ ]
+ } as EChartsOption;
+}
diff --git a/src/lib/components/Confirm.svelte b/src/lib/components/Confirm.svelte
new file mode 100644
index 00000000..9bb9214e
--- /dev/null
+++ b/src/lib/components/Confirm.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+ import { Button, Modal } from '@nais/ds-svelte-community';
+ import type { ButtonProps } from '@nais/ds-svelte-community/dist/components/Button/Button.svelte';
+ import { createEventDispatcher } from 'svelte';
+
+ export let confirmText = 'Confirm';
+ export let open = false;
+ export let variant: ButtonProps['variant'] = 'primary';
+
+ const dispatch = createEventDispatcher();
+
+ const cancel = () => {
+ open = false;
+ dispatch('cancel');
+ };
+
+ const confirm = () => {
+ open = false;
+ dispatch('confirm');
+ };
+</script>
+
+<Modal bind:open on:close>
+ <svelte:fragment slot="header">
+ <slot name="header" />
+ </svelte:fragment>
+
+ <div class="wrapper">
+ <slot />
+ </div>
+
+ <svelte:fragment slot="footer">
+ <Button {variant} type="submit" on:click={confirm}>{confirmText}</Button>
+ <Button variant="tertiary" type="reset" on:click={cancel}>Cancel</Button>
+ </svelte:fragment>
+</Modal>
+
+<style>
+ .wrapper {
+ width: 500px;
+ }
+</style>
diff --git a/src/lib/components/ResourceUtilization.svelte b/src/lib/components/ResourceUtilization.svelte
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/lib/components/TeamStatus.svelte b/src/lib/components/TeamStatus.svelte
index 6560973e..2b3a992c 100644
--- a/src/lib/components/TeamStatus.svelte
+++ b/src/lib/components/TeamStatus.svelte
@@ -11,8 +11,8 @@
};
const status = graphql(`
- query TeamStatus($team: String!) @cache(policy: NetworkOnly) @load {
- team(name: $team) @loading(cascade: true) {
+ query TeamStatus($team: Slug!) @cache(policy: NetworkOnly) @load {
+ team(slug: $team) @loading(cascade: true) {
status {
apps {
failing
diff --git a/src/lib/components/VulnerabilitiesGraph.svelte b/src/lib/components/VulnerabilitiesGraph.svelte
new file mode 100644
index 00000000..717ba634
--- /dev/null
+++ b/src/lib/components/VulnerabilitiesGraph.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+ import { goto } from '$app/navigation';
+ import { page } from '$app/stores';
+ import type { TeamVulnerabilityMetrics$result } from '$houdini';
+ import { graphql } from '$houdini';
+ import EChart from '$lib/chart/EChart.svelte';
+ import { vulnerabilitiesTeamTransformLineChart } from '$lib/chart/vulnerabilies_transformer';
+ import { Alert, Select } from '@nais/ds-svelte-community';
+ import { get } from 'svelte/store';
+ import type { TeamVulnerabilityMetricsVariables } from './$houdini';
+
+ export const _TeamVulnerabilityMetricsVariables: TeamVulnerabilityMetricsVariables = () => {
+ const url = get(page).url;
+
+ const fromParam = url.searchParams.get('from');
+ const toParam = url.searchParams.get('to');
+
+ const fromDate = fromParam
+ ? new Date(fromParam)
+ : new Date(Date.now() - 7 * 1000 * 24 * 60 * 60);
+ const toDate = toParam ? new Date(toParam) : new Date(Date.now());
+
+ from = fromDate.toISOString().split('T')[0];
+ to = toDate.toISOString().split('T')[0];
+
+ return { from: fromDate, to: toDate, slug: team };
+ };
+
+ let from = '';
+ let to = '';
+
+ const vulnerabilities = graphql(`
+ query TeamVulnerabilityMetrics($slug: Slug!, $from: Date!, $to: Date!, $environment: String)
+ @load
+ @cache(policy: NetworkOnly) {
+ team(slug: $slug) {
+ environments {
+ name
+ }
+ vulnerabilityMetrics(from: $from, to: $to, environment: $environment) {
+ minDate
+ maxDate
+ data {
+ date
+ critical
+ high
+ medium
+ low
+ unassigned
+ riskScore
+ }
+ }
+ }
+ }
+ `);
+
+ export let team: string;
+ let selectedEnvironment = '';
+
+ function echartOptionsUsageChart(metrics: TeamVulnerabilityMetrics$result) {
+ const opts = vulnerabilitiesTeamTransformLineChart(metrics);
+ opts.height = '350px';
+ opts.legend = { ...opts.legend, bottom: 10 };
+ return opts;
+ }
+
+ function update() {
+ const params = new URLSearchParams({ from, to });
+ goto(`?${params.toString()}`, { replaceState: true, noScroll: true });
+
+ if (selectedEnvironment === '') {
+ vulnerabilities.fetch({
+ variables: {
+ slug: team,
+ from: new Date(from),
+ to: new Date(to),
+ environment: null
+ }
+ });
+ return;
+ }
+
+ vulnerabilities.fetch({
+ variables: {
+ slug: team,
+ from: new Date(from),
+ to: new Date(to),
+ environment: selectedEnvironment
+ }
+ });
+ return;
+ }
+
+ $: min = $vulnerabilities.data?.team.vulnerabilityMetrics.minDate?.toISOString().split('T')[0];
+ $: max = $vulnerabilities.data?.team.vulnerabilityMetrics.maxDate?.toISOString().split('T')[0];
+</script>
+
+<h3>Vulnerabilities over time for team</h3>
+{#if $vulnerabilities.errors}
+ <Alert variant="error">
+ {#each $vulnerabilities.errors as error}
+ {error.message}
+ {/each}
+ </Alert>
+{:else if $vulnerabilities.data?.team.vulnerabilityMetrics.data.length === 0}
+ <p>No vulnerability metrics available for team.</p>
+{:else if $vulnerabilities.data}
+ <div class="select">
+ <label for="from">From:</label>
+ <input type="date" id="from" {min} max={to} bind:value={from} on:change={update} />
+ <label for="to">To:</label>
+ <input type="date" id="to" min={from} {max} bind:value={to} on:change={update} />
+ <Select
+ size="small"
+ hideLabel={true}
+ bind:value={selectedEnvironment}
+ on:change={update}
+ label="Environment"
+ >
+ <option value="">All environments</option>
+ {#each $vulnerabilities.data?.team.environments as env}
+ <option value={env.name}>{env.name}</option>
+ {/each}
+ </Select>
+ </div>
+ <EChart
+ options={echartOptionsUsageChart($vulnerabilities.data)}
+ style="height: 500px; width: 100%;"
+ />
+{/if}
+
+<style>
+ .select {
+ display: flex;
+ gap: 1rem;
+ margin: 1rem 0;
+ height: 28px;
+ }
+</style>
diff --git a/src/lib/components/VulnerabilitySummary.svelte b/src/lib/components/VulnerabilitySummary.svelte
index 8de685b9..b7626687 100644
--- a/src/lib/components/VulnerabilitySummary.svelte
+++ b/src/lib/components/VulnerabilitySummary.svelte
@@ -12,10 +12,10 @@
};
const vulnerabilities = graphql(`
- query VulnerabilitiesSummary($team: String!) @cache(policy: NetworkOnly) @load {
- team(name: $team) @loading(cascade: true) {
+ query VulnerabilitiesSummary($team: Slug!) @cache(policy: NetworkOnly) @load {
+ team(slug: $team) @loading(cascade: true) {
id
- name
+ slug
vulnerabilitiesSummary {
critical
high
diff --git a/src/lib/icons/Postgres.svelte b/src/lib/icons/Postgres.svelte
index e62746df..1c912667 100644
--- a/src/lib/icons/Postgres.svelte
+++ b/src/lib/icons/Postgres.svelte
@@ -1,40 +1,40 @@
-<script lang="ts">
- export let size = '1em';
-</script>
-
-<svg
- xmlns="http://www.w3.org/2000/svg"
- {...$$restProps}
- width={size}
- height={size}
- xml:space="preserve"
- viewBox="0 0 432.071 445.383"
- ><g
- style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#fff;stroke-width:12.4651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4"
- ><path
- d="M323.205 324.227c2.833-23.601 1.984-27.062 19.563-23.239l4.463.392c13.517.615 31.199-2.174 41.587-7 22.362-10.376 35.622-27.7 13.572-23.148-50.297 10.376-53.755-6.655-53.755-6.655 53.111-78.803 75.313-178.836 56.149-203.322-52.27-66.789-142.748-35.206-144.262-34.386l-.482.089c-9.938-2.062-21.06-3.294-33.554-3.496-22.761-.374-40.032 5.967-53.133 15.904 0 0-161.408-66.498-153.899 83.628 1.597 31.936 45.777 241.655 98.47 178.31 19.259-23.163 37.871-42.748 37.871-42.748 9.242 6.14 20.307 9.272 31.912 8.147l.897-.765c-.281 2.876-.157 5.689.359 9.019-13.572 15.167-9.584 17.83-36.723 23.416-27.457 5.659-11.326 15.734-.797 18.367 12.768 3.193 42.305 7.716 62.268-20.224l-.795 3.188c5.325 4.26 4.965 30.619 5.72 49.452.756 18.834 2.017 36.409 5.856 46.771 3.839 10.36 8.369 37.05 44.036 29.406 29.809-6.388 52.6-15.582 54.677-101.107"
- style="fill:#000;stroke:#000;stroke-width:37.3953;stroke-linecap:butt;stroke-linejoin:miter"
- /><path
- stroke="none"
- d="M402.395 271.23c-50.302 10.376-53.76-6.655-53.76-6.655 53.111-78.808 75.313-178.843 56.153-203.326-52.27-66.785-142.752-35.2-144.262-34.38l-.486.087c-9.938-2.063-21.06-3.292-33.56-3.496-22.761-.373-40.026 5.967-53.127 15.902 0 0-161.411-66.495-153.904 83.63 1.597 31.938 45.776 241.657 98.471 178.312 19.26-23.163 37.869-42.748 37.869-42.748 9.243 6.14 20.308 9.272 31.908 8.147l.901-.765c-.28 2.876-.152 5.689.361 9.019-13.575 15.167-9.586 17.83-36.723 23.416-27.459 5.659-11.328 15.734-.796 18.367 12.768 3.193 42.307 7.716 62.266-20.224l-.796 3.188c5.319 4.26 9.054 27.711 8.428 48.969-.626 21.259-1.044 35.854 3.147 47.254 4.191 11.4 8.368 37.05 44.042 29.406 29.809-6.388 45.256-22.942 47.405-50.555 1.525-19.631 4.976-16.729 5.194-34.28l2.768-8.309c3.192-26.611.507-35.196 18.872-31.203l4.463.392c13.517.615 31.208-2.174 41.591-7 22.358-10.376 35.618-27.7 13.573-23.148z"
- style="fill:#336791;stroke:none"
- /><path
- d="M215.866 286.484c-1.385 49.516.348 99.377 5.193 111.495 4.848 12.118 15.223 35.688 50.9 28.045 29.806-6.39 40.651-18.756 45.357-46.051 3.466-20.082 10.148-75.854 11.005-87.281M173.104 38.256S11.583-27.76 19.092 122.365c1.597 31.938 45.779 241.664 98.473 178.316 19.256-23.166 36.671-41.335 36.671-41.335M260.349 26.207c-5.591 1.753 89.848-34.889 144.087 34.417 19.159 24.484-3.043 124.519-56.153 203.329"
- /><path
- d="M348.282 263.953s3.461 17.036 53.764 6.653c22.04-4.552 8.776 12.774-13.577 23.155-18.345 8.514-59.474 10.696-60.146-1.069-1.729-30.355 21.647-21.133 19.96-28.739-1.525-6.85-11.979-13.573-18.894-30.338-6.037-14.633-82.796-126.849 21.287-110.183 3.813-.789-27.146-99.002-124.553-100.599-97.385-1.597-94.19 119.762-94.19 119.762"
- style="stroke-linejoin:bevel"
- /><path
- d="M188.604 274.334c-13.577 15.166-9.584 17.829-36.723 23.417-27.459 5.66-11.326 15.733-.797 18.365 12.768 3.195 42.307 7.718 62.266-20.229 6.078-8.509-.036-22.086-8.385-25.547-4.034-1.671-9.428-3.765-16.361 3.994z"
- /><path
- d="M187.715 274.069c-1.368-8.917 2.93-19.528 7.536-31.942 6.922-18.626 22.893-37.255 10.117-96.339-9.523-44.029-73.396-9.163-73.436-3.193-.039 5.968 2.889 30.26-1.067 58.548-5.162 36.913 23.488 68.132 56.479 64.938"
- /><path
- d="M172.517 141.7c-.288 2.039 3.733 7.48 8.976 8.207 5.234.73 9.714-3.522 9.998-5.559.284-2.039-3.732-4.285-8.977-5.015-5.237-.731-9.719.333-9.996 2.367z"
- style="fill:#fff;stroke-width:4.155;stroke-linecap:butt;stroke-linejoin:miter"
- /><path
- d="M331.941 137.543c.284 2.039-3.732 7.48-8.976 8.207-5.238.73-9.718-3.522-10.005-5.559-.277-2.039 3.74-4.285 8.979-5.015 5.239-.73 9.718.333 10.002 2.368z"
- style="fill:#fff;stroke-width:2.0775;stroke-linecap:butt;stroke-linejoin:miter"
- /><path
- d="M350.676 123.432c.863 15.994-3.445 26.888-3.988 43.914-.804 24.748 11.799 53.074-7.191 81.435"
- /></g
- ></svg
->
+<script lang="ts">
+ export let size = '1em';
+</script>
+
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ {...$$restProps}
+ width={size}
+ height={size}
+ xml:space="preserve"
+ viewBox="0 0 432.071 445.383"
+ ><g
+ style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#fff;stroke-width:12.4651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4"
+ ><path
+ d="M323.205 324.227c2.833-23.601 1.984-27.062 19.563-23.239l4.463.392c13.517.615 31.199-2.174 41.587-7 22.362-10.376 35.622-27.7 13.572-23.148-50.297 10.376-53.755-6.655-53.755-6.655 53.111-78.803 75.313-178.836 56.149-203.322-52.27-66.789-142.748-35.206-144.262-34.386l-.482.089c-9.938-2.062-21.06-3.294-33.554-3.496-22.761-.374-40.032 5.967-53.133 15.904 0 0-161.408-66.498-153.899 83.628 1.597 31.936 45.777 241.655 98.47 178.31 19.259-23.163 37.871-42.748 37.871-42.748 9.242 6.14 20.307 9.272 31.912 8.147l.897-.765c-.281 2.876-.157 5.689.359 9.019-13.572 15.167-9.584 17.83-36.723 23.416-27.457 5.659-11.326 15.734-.797 18.367 12.768 3.193 42.305 7.716 62.268-20.224l-.795 3.188c5.325 4.26 4.965 30.619 5.72 49.452.756 18.834 2.017 36.409 5.856 46.771 3.839 10.36 8.369 37.05 44.036 29.406 29.809-6.388 52.6-15.582 54.677-101.107"
+ style="fill:#000;stroke:#000;stroke-width:37.3953;stroke-linecap:butt;stroke-linejoin:miter"
+ /><path
+ stroke="none"
+ d="M402.395 271.23c-50.302 10.376-53.76-6.655-53.76-6.655 53.111-78.808 75.313-178.843 56.153-203.326-52.27-66.785-142.752-35.2-144.262-34.38l-.486.087c-9.938-2.063-21.06-3.292-33.56-3.496-22.761-.373-40.026 5.967-53.127 15.902 0 0-161.411-66.495-153.904 83.63 1.597 31.938 45.776 241.657 98.471 178.312 19.26-23.163 37.869-42.748 37.869-42.748 9.243 6.14 20.308 9.272 31.908 8.147l.901-.765c-.28 2.876-.152 5.689.361 9.019-13.575 15.167-9.586 17.83-36.723 23.416-27.459 5.659-11.328 15.734-.796 18.367 12.768 3.193 42.307 7.716 62.266-20.224l-.796 3.188c5.319 4.26 9.054 27.711 8.428 48.969-.626 21.259-1.044 35.854 3.147 47.254 4.191 11.4 8.368 37.05 44.042 29.406 29.809-6.388 45.256-22.942 47.405-50.555 1.525-19.631 4.976-16.729 5.194-34.28l2.768-8.309c3.192-26.611.507-35.196 18.872-31.203l4.463.392c13.517.615 31.208-2.174 41.591-7 22.358-10.376 35.618-27.7 13.573-23.148z"
+ style="fill:#336791;stroke:none"
+ /><path
+ d="M215.866 286.484c-1.385 49.516.348 99.377 5.193 111.495 4.848 12.118 15.223 35.688 50.9 28.045 29.806-6.39 40.651-18.756 45.357-46.051 3.466-20.082 10.148-75.854 11.005-87.281M173.104 38.256S11.583-27.76 19.092 122.365c1.597 31.938 45.779 241.664 98.473 178.316 19.256-23.166 36.671-41.335 36.671-41.335M260.349 26.207c-5.591 1.753 89.848-34.889 144.087 34.417 19.159 24.484-3.043 124.519-56.153 203.329"
+ /><path
+ d="M348.282 263.953s3.461 17.036 53.764 6.653c22.04-4.552 8.776 12.774-13.577 23.155-18.345 8.514-59.474 10.696-60.146-1.069-1.729-30.355 21.647-21.133 19.96-28.739-1.525-6.85-11.979-13.573-18.894-30.338-6.037-14.633-82.796-126.849 21.287-110.183 3.813-.789-27.146-99.002-124.553-100.599-97.385-1.597-94.19 119.762-94.19 119.762"
+ style="stroke-linejoin:bevel"
+ /><path
+ d="M188.604 274.334c-13.577 15.166-9.584 17.829-36.723 23.417-27.459 5.66-11.326 15.733-.797 18.365 12.768 3.195 42.307 7.718 62.266-20.229 6.078-8.509-.036-22.086-8.385-25.547-4.034-1.671-9.428-3.765-16.361 3.994z"
+ /><path
+ d="M187.715 274.069c-1.368-8.917 2.93-19.528 7.536-31.942 6.922-18.626 22.893-37.255 10.117-96.339-9.523-44.029-73.396-9.163-73.436-3.193-.039 5.968 2.889 30.26-1.067 58.548-5.162 36.913 23.488 68.132 56.479 64.938"
+ /><path
+ d="M172.517 141.7c-.288 2.039 3.733 7.48 8.976 8.207 5.234.73 9.714-3.522 9.998-5.559.284-2.039-3.732-4.285-8.977-5.015-5.237-.731-9.719.333-9.996 2.367z"
+ style="fill:#fff;stroke-width:4.155;stroke-linecap:butt;stroke-linejoin:miter"
+ /><path
+ d="M331.941 137.543c.284 2.039-3.732 7.48-8.976 8.207-5.238.73-9.718-3.522-10.005-5.559-.277-2.039 3.74-4.285 8.979-5.015 5.239-.73 9.718.333 10.002 2.368z"
+ style="fill:#fff;stroke-width:2.0775;stroke-linecap:butt;stroke-linejoin:miter"
+ /><path
+ d="M350.676 123.432c.863 15.994-3.445 26.888-3.988 43.914-.804 24.748 11.799 53.074-7.191 81.435"
+ /></g
+ ></svg
+>
diff --git a/src/lib/overview/Deploys.svelte b/src/lib/overview/Deploys.svelte
index 7c72281c..6b072db8 100644
--- a/src/lib/overview/Deploys.svelte
+++ b/src/lib/overview/Deploys.svelte
@@ -12,28 +12,25 @@
};
const store = graphql(`
- query TeamDeploys($team: String!) @load {
- team(name: $team) {
- deployments(first: 20, limit: 20) {
- totalCount
- edges {
- node {
- resources {
- group
- kind
- name
- version
- namespace
- }
- env
+ query TeamDeploys($team: Slug!) @load {
+ team(slug: $team) {
+ deployments(limit: 20) {
+ pageInfo {
+ totalCount
+ }
+ nodes {
+ resources {
+ name
+ kind
+ version
+ }
+ statuses {
+ status
+ message
created
- statuses {
- status
- message
- created
- }
- repository
}
+ env
+ created
}
}
}
@@ -58,34 +55,30 @@
<!--Th>Link</Th-->
</Thead>
<Tbody>
- {#each $store.data.team.deployments.edges as { node: deployment }}
+ {#each $store.data.team.deployments.nodes as { resources, env, created, statuses }}
<Tr>
<Td
- >{#each deployment.resources as resource}
+ >{#each resources as resource}
<span style="color:var(--a-gray-600)">{resource.kind}:</span>
{#if resource.kind === 'Application'}
- <a href="/team/{teamName}/{deployment.env}/app/{resource.name}/deploys"
- >{resource.name}</a
- >
+ <a href="/team/{teamName}/{env}/app/{resource.name}/deploys">{resource.name}</a>
{:else if resource.kind === 'Naisjob'}
- <a href="/team/{teamName}/{deployment.env}/job/{resource.name}/deploys"
- >{resource.name}</a
- >
+ <a href="/team/{teamName}/{env}/job/{resource.name}/deploys">{resource.name}</a>
{:else}
{resource.name}
{/if}
<br />
{/each}</Td
>
- <Td><Time time={deployment.created} distance={true} /></Td>
+ <Td><Time time={created} distance={true} /></Td>
<Td>
- {deployment.env}
+ {env}
</Td>
<Td
- >{#if deployment.statuses.length === 0}<DeploymentStatus
+ >{#if statuses.length === 0}<DeploymentStatus
status={'unknown'}
- />{:else}<DeploymentStatus status={deployment.statuses[0].status} />{/if}</Td
+ />{:else}<DeploymentStatus status={statuses[0].status} />{/if}</Td
>
<!--Td>
{#if deployment.repository}
diff --git a/src/lib/pagination.ts b/src/lib/pagination.ts
new file mode 100644
index 00000000..3b1122fa
--- /dev/null
+++ b/src/lib/pagination.ts
@@ -0,0 +1,87 @@
+import { goto } from '$app/navigation';
+import { page } from '$app/stores';
+import {
+ OrderByField,
+ SortOrder,
+ type OrderByField$options,
+ type SortOrder$options
+} from '$houdini';
+import type { TableSortState } from '@nais/ds-svelte-community';
+import { get } from 'svelte/store';
+
+export const tableGraphDirection = {
+ ascending: SortOrder.ASC,
+ descending: SortOrder.DESC,
+ [SortOrder.ASC]: 'ascending',
+ [SortOrder.DESC]: 'descending'
+};
+
+export const changeParams = (params: Record<string, string>) => {
+ const query = new URLSearchParams(get(page).url.searchParams);
+ for (const [key, value] of Object.entries(params)) {
+ query.set(key, value);
+ }
+ goto(`?${query.toString()}`);
+};
+
+export const limitOffset = (
+ variables: {
+ limit?: number | null;
+ offset?: number | null;
+ } | null
+) => {
+ if (!variables?.limit) {
+ console.warn('limit is not set in graphql query, defaulting to 20');
+ }
+ return {
+ limit: variables?.limit || 20,
+ offset: variables?.offset || 0
+ };
+};
+
+export const tableStateFromVariables = (
+ variables: {
+ limit?: number | null;
+ offset?: number | null;
+ orderBy?: {
+ direction: SortOrder$options;
+ field: string;
+ } | null;
+ } | null,
+ defaultOrderBy: OrderByField$options = OrderByField.STATUS,
+ defaultDirection: TableSortState['direction'] = 'ascending'
+) => {
+ return {
+ limit: variables?.limit || 0,
+ offset: variables?.offset || 0,
+ sortState: variables?.orderBy
+ ? ({
+ orderBy: variables.orderBy.field,
+ direction: tableGraphDirection[variables.orderBy.direction]
+ } as TableSortState)
+ : ({ orderBy: defaultOrderBy, direction: defaultDirection } as TableSortState)
+ };
+};
+
+export const sortTable = (key: string, sortState: TableSortState) => {
+ if (!sortState) {
+ sortState = {
+ orderBy: OrderByField[key as keyof typeof OrderByField],
+ direction: 'descending'
+ };
+ } else if (sortState.orderBy === OrderByField[key as keyof typeof OrderByField]) {
+ if (sortState.direction === 'ascending') {
+ sortState.direction = 'descending';
+ } else {
+ sortState.direction = 'ascending';
+ }
+ } else {
+ sortState.orderBy = OrderByField[key as keyof typeof OrderByField];
+ if (key === OrderByField.NAME) {
+ sortState.direction = 'ascending';
+ } else {
+ sortState.direction = 'descending';
+ }
+ }
+ return sortState;
+};
diff --git a/src/routes/+layout.gql b/src/routes/+layout.gql
deleted file mode 100644
index 1f7ff71f..00000000
--- a/src/routes/+layout.gql
+++ /dev/null
@@ -1,6 +0,0 @@
-query UserInfo {
- user {
- name
- email
- }
-}
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
deleted file mode 100644
index 944192da..00000000
--- a/src/routes/+layout.server.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { LayoutServerLoad } from './$types';
-
-export const load: LayoutServerLoad = async ({ locals }) => {
- return {
- tenantDomain: locals.tenantDomain
- };
-};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 11a388c0..bd7ca983 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,18 +9,32 @@
import '$lib/font.css';
import '../styles/app.css';
import type { PageData } from './$houdini';
+ import Login from './Login.svelte';
export let data: PageData;
$: ({ UserInfo } = data);
- $: user = $UserInfo.data?.user;
+ $: user = UserInfo.data?.me as
+ | {
+ readonly name: string;
+ readonly isAdmin: boolean;
+ readonly __typename: 'User';
+ }
+ | undefined;
</script>
-<Header {user} />
+{#if user == undefined}
+ <!-- logged out -->
+ <Login />
+{:else}
+ {#if user?.__typename === 'User'}
+ <Header {user} />
+ {/if}
-<div class="container">
- <slot />
-</div>
+ <div class="container">
+ <slot />
+ </div>
+{/if}
<style>
.container {
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 00000000..a5acfc0b
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1,11 @@
+import { UserInfoStore } from '$houdini';
+import type { LayoutLoad } from './$houdini';
+
+export const load: LayoutLoad = async (event) => {
+ const ui = new UserInfoStore();
+ const userInfo = await ui.fetch({ event });
+
+ return {
+ UserInfo: userInfo
+ };
+};
diff --git a/src/routes/Deploys.svelte b/src/routes/Deploys.svelte
index 1890dbe9..288d531b 100644
--- a/src/routes/Deploys.svelte
+++ b/src/routes/Deploys.svelte
@@ -1,23 +1,18 @@
<script lang="ts">
import { PendingValue, graphql, type UserDeploys$result } from '$houdini';
- import DeploymentStatus from '$lib/DeploymentStatus.svelte';
+ import Card from '$lib/Card.svelte';
import Time from '$lib/Time.svelte';
import DeploysIcon from '$lib/icons/DeploysIcon.svelte';
import { Alert, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
- type Deploys = Exclude<UserDeploys$result['user']['teams']['edges'], (typeof PendingValue)[]>;
+ const sortTeamDeploys = (userDeploys: UserDeploys$result['me'], slice = 10) => {
+ if (userDeploys === PendingValue)
+ return [PendingValue, PendingValue, PendingValue, PendingValue] as (typeof PendingValue)[];
+ if (userDeploys.__typename !== 'User') return [];
- const sortTeamDeploys = (userDeploys: UserDeploys$result['user'], slice = 20) => {
- if ((userDeploys.teams.edges as (typeof PendingValue)[]).includes(PendingValue))
- return userDeploys.teams.edges as (typeof PendingValue)[];
- if ((userDeploys.teams.edges as unknown as null[]).includes(null))
- return new Array(10).fill(PendingValue);
-
- const edges = userDeploys.teams.edges as unknown as Deploys;
-
- return edges
- .map((team) => team.node.deployments)
- .flatMap((deploys) => deploys.edges.map((deploy) => deploy.node))
+ return userDeploys.teams.nodes
+ .map((team) => team.team.deployments)
+ .flatMap((deploys) => deploys.nodes)
.sort((a, b) => {
return b.created.getTime() - a.created.getTime();
})
@@ -26,19 +21,24 @@
const store = graphql(`
query UserDeploys @load {
- user @loading {
- teams @loading {
- totalCount
- edges @loading(count: 20) {
- node {
- deployments {
- totalCount
- edges {
- node {
+ me @loading {
+ __typename
+ ... on User {
+ teams {
+ pageInfo {
+ totalCount
+ }
+ nodes {
+ team {
+ deployments {
+ pageInfo {
+ totalCount
+ }
+ nodes {
created
env
team {
- name
+ slug
}
resources {
kind
@@ -66,68 +66,56 @@
</Alert>
{/if}
{#if $store.data !== null}
- <h2>
- <DeploysIcon size="1.5rem" />
- My teams latest deploys
- </h2>
- <Table size="small">
- <Thead>
- <Th>Resource(s)</Th>
- <Th>Created</Th>
- <Th>Team</Th>
- <Th>Cluster</Th>
- <Th>Status</Th>
- <!--Th>Links</Th-->
- </Thead>
- <Tbody>
- {#each sortTeamDeploys($store.data.user) as deploy}
- {#if deploy == PendingValue}
- <Tr>
- {#each new Array(5).fill('text') as variant}
+ <Card height="100%">
+ <h2>
+ <DeploysIcon size="1.5rem" />
+ My teams latest deploys
+ </h2>
+ <Table size="small">
+ <Thead>
+ <Th>Team</Th>
+ <Th>App</Th>
+ <Th>Env</Th>
+ <Th>When</Th>
+ </Thead>
+ <Tbody>
+ {#each sortTeamDeploys($store.data.me) as deploy}
+ {#if deploy == PendingValue}
+ <Tr>
+ {#each new Array(4).fill('text') as variant}
+ <Td>
+ <Skeleton {variant} />
+ </Td>
+ {/each}
+ </Tr>
+ {:else}
+ <Tr>
<Td>
- <Skeleton {variant} />
+ <a href="/team/{deploy.team.slug}">{deploy.team.slug}</a>
</Td>
- {/each}
- </Tr>
- {:else}
- <Tr>
- <Td>
- {#each deploy.resources as resource}
- <span style="color:var(--a-gray-600)">{resource.kind}:</span>
- {#if resource.kind === 'Application'}
- <a href="/team/{deploy.team.name}/{deploy.env}/app/{resource.name}/deploys"
- >{resource.name}</a
- >
- {:else if resource.kind === 'Naisjob'}
- <a href="/team/{deploy.team.name}/{deploy.env}/job/{resource.name}/deploys"
- >{resource.name}</a
+ <Td>
+ {#if deploy.resources[0].kind === 'Naisjob'}
+ <a href="/team/{deploy.team.slug}/{deploy.env}/job/{deploy.resources[0].name}">
+ {deploy.resources[0].name}</a
>
{:else}
- {resource.name}
+ <a href="/team/{deploy.team.slug}/{deploy.env}/app/{deploy.resources[0].name}">
+ {deploy.resources[0].name}</a
+ >
{/if}
- <br />
- {/each}
- </Td>
-
- <Td>
- <Time time={deploy.created} distance={true} />
- </Td>
- <Td>
- <a href="/team/{deploy.team.name}">{deploy.team.name}</a>
- </Td>
- <Td>
- {deploy.env}
- </Td>
- <Td
- >{#if deploy.statuses.length === 0}<DeploymentStatus
- status={'unknown'}
- />{:else}<DeploymentStatus status={deploy.statuses[0].status} />{/if}</Td
- >
- </Tr>
- {/if}
- {/each}
- </Tbody>
- </Table>
+ </Td>
+ <Td>
+ {deploy.env}
+ </Td>
+ <Td>
+ <Time time={deploy.created} distance={true} />
+ </Td>
+ </Tr>
+ {/if}
+ {/each}
+ </Tbody>
+ </Table>
+ </Card>
{/if}
<style>
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index 96ab4a21..58d47d2a 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -9,30 +9,28 @@
const store = graphql(`
query SearchQuery($query: String!, $type: SearchType) @loading(cascade: true) {
- search(first: 10, query: $query, filter: { type: $type }) {
- edges @loading(count: 10) {
- node {
- __typename
- ... on App {
- name
- team {
- name
- }
- env {
- name
- }
+ search(limit: 10, query: $query, filter: { type: $type }) {
+ nodes @loading(count: 10) {
+ __typename
+ ... on App {
+ name
+ team {
+ slug
}
- ... on Team {
+ env {
name
}
- ... on NaisJob {
+ }
+ ... on Team {
+ slug
+ }
+ ... on NaisJob {
+ name
+ team {
+ slug
+ }
+ env {
name
- team {
- name
- }
- env {
- name
- }
}
}
}
@@ -43,7 +41,7 @@
export let user:
| {
readonly name: string;
- readonly email: string;
+ readonly isAdmin: boolean;
}
| undefined;
@@ -86,33 +84,33 @@
switch (event.key) {
case 'ArrowDown':
selected += 1;
- selected = Math.min(($store.data?.search.edges.length || 0) - 1, Math.max(-1, selected));
+ selected = Math.min(($store.data?.search.nodes.length || 0) - 1, Math.max(-1, selected));
event.preventDefault();
break;
case 'ArrowUp':
selected -= 1;
- selected = Math.min(($store.data?.search.edges.length || 0) - 1, Math.max(-1, selected));
+ selected = Math.min(($store.data?.search.nodes.length || 0) - 1, Math.max(-1, selected));
event.preventDefault();
break;
case 'Enter':
showHelpText = false;
if (selected >= 0) {
- const node = $store.data?.search.edges[selected].node;
+ const node = $store.data?.search.nodes[selected];
if (!node) return;
query = '';
selected = -1;
if (node.__typename === 'App') {
query = '';
showSearch = false;
- goto(`/team/${node.team.name}/${node.env.name}/app/${node.name}`);
+ goto(`/team/${node.team.slug}/${node.env.name}/app/${node.name}`);
} else if (node.__typename === 'Team') {
query = '';
showSearch = false;
- goto(`/team/${node.name}`);
+ goto(`/team/${node.slug}`);
} else if (node.__typename === 'NaisJob') {
query = '';
showSearch = false;
- goto(`/team/${node.team.name}/${node.env.name}/job/${node.name}`);
+ goto(`/team/${node.team.slug}/${node.env.name}/job/${node.name}`);
}
}
break;
@@ -188,11 +186,16 @@
<nav>
<ul>
<li><a href="/deploys">Deploys</a></li>
- <li><a href="https://teams.nav.cloud.nais.io">Teams</a></li>
<li><a href="https://docs.nais.io">Docs</a></li>
+ {#if user?.isAdmin}
+ <li><a href="/admin">Admin</a></li>
+ {/if}
</ul>
</nav>
- <div class="cap">{user ? user.name : 'unauthorized'}</div>
+ <div class="cap">
+ {user ? user.name : 'unauthorized'}
+ - <a href="/oauth2/logout">Logout</a>
+ </div>
</div>
</div>
@@ -298,4 +301,8 @@
li > a:hover {
background-color: var(--a-surface-inverted-hover);
}
+
+ .cap a {
+ color: var(--a-text-on-inverted);
+ }
</style>
diff --git a/src/routes/Login.svelte b/src/routes/Login.svelte
new file mode 100644
index 00000000..3a34e025
--- /dev/null
+++ b/src/routes/Login.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+ import { page } from '$app/stores';
+ import { Alert, Button } from '@nais/ds-svelte-community';
+ import Logo from '../Logo.svelte';
+</script>
+
+<svelte:head>
+ <title>Console - Log in</title>
+ <style>
+ body {
+ background: var(--a-bg-default);
+ background: linear-gradient(
+ 135deg,
+ var(--a-bg-default) 0%,
+ var(--a-surface-alt-1-moderate) 100%
+ );
+ }
+ </style>
+</svelte:head>
+
+<div class="wrapper">
+ <div class="login">
+ <h1>
+ <Logo height=".8em" />
+ Console
+ </h1>
+
+ {#if $page.url.searchParams?.get('error')}
+ {@const error = $page.url.searchParams.get('error')}
+ <Alert variant="error">
+ {#if error == 'unknown-user'}
+ Error during login. The user is not known in the system.<br />
+ Please contact the system administrator.
+ {:else}
+ <!-- "unable-to-create-session", "invalid-state", and "unauthenticated" are known. -->
+ Error during login, please try again.
+ {/if}
+ </Alert>
+ {/if}
+
+ <p>To access this page you need to log in with your Google account.</p>
+
+ <Button as="a" href="/oauth2/login" variant="primary">Log in with Google</Button>
+ </div>
+</div>
+
+<style>
+ .wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ }
+
+ .login {
+ text-align: center;
+ }
+</style>
diff --git a/src/routes/Teams.svelte b/src/routes/Teams.svelte
index b44a3cfa..878c4e2f 100644
--- a/src/routes/Teams.svelte
+++ b/src/routes/Teams.svelte
@@ -1,33 +1,44 @@
<script lang="ts">
import { PendingValue, graphql } from '$houdini';
+ import Pagination from '$lib/Pagination.svelte';
import {
Alert,
+ Button,
LinkPanel,
LinkPanelDescription,
LinkPanelTitle,
Skeleton
} from '@nais/ds-svelte-community';
- import { PersonGroupIcon } from '@nais/ds-svelte-community/icons';
+ import { PersonGroupIcon, PlusIcon } from '@nais/ds-svelte-community/icons';
+ import type { UserTeamsVariables } from './$houdini';
+
+ const changePage = (page: number) => {
+ offset = (page - 1) * limit;
+ store.fetch({ variables: { offset } });
+ };
+
+ const limit = 3;
+ let offset = 0;
+ export const _UserTeamsVariables: UserTeamsVariables = () => {
+ return { limit, offset };
+ };
const store = graphql(`
- query UserTeams @load {
- user @loading {
- name
- email @loading
- teams @loading {
- totalCount
- pageInfo {
- hasNextPage
- hasPreviousPage
- startCursor
- endCursor
- from
- to
- }
- edges @loading(count: 10) {
- node {
- name
- description
+ query UserTeams($limit: Int, $offset: Int) @load {
+ me @loading {
+ __typename
+ ... on User {
+ teams(limit: $limit, offset: $offset) {
+ pageInfo {
+ totalCount
+ hasNextPage
+ hasPreviousPage
+ }
+ nodes {
+ team {
+ slug
+ purpose
+ }
}
}
}
@@ -43,34 +54,37 @@
</Alert>
{/each}
{:else}
- <h2>
- <PersonGroupIcon />
- My teams
- </h2>
+ <div class="header">
+ <h2>
+ <PersonGroupIcon />
+ My teams
+ </h2>
+ <Button as="a" size="small" href="/team/create" variant="primary"
+ ><svelte:fragment slot="icon-left"><PlusIcon /></svelte:fragment>Create team</Button
+ >
+ </div>
<div class="teams">
{#if $store.data}
- {#each $store.data.user.teams.edges as edge}
- {#if edge === PendingValue}
- <LinkPanel about="" href="" border={true} as="a">
- <LinkPanelTitle
- ><Skeleton variant="rectangle" width="100px" height="32px" /></LinkPanelTitle
- >
- <LinkPanelDescription
- ><Skeleton variant="rectangle" width="450px" /></LinkPanelDescription
- >
- </LinkPanel>
- {:else}
- <LinkPanel
- about={edge.node.description}
- href="/team/{edge.node.name}"
- border={true}
- as="a"
+ {#if $store.data.me == PendingValue}
+ <LinkPanel about="" href="" border={true} as="a">
+ <LinkPanelTitle
+ ><Skeleton variant="rectangle" width="100px" height="32px" /></LinkPanelTitle
>
- <LinkPanelTitle>{edge.node.name}</LinkPanelTitle>
- <LinkPanelDescription>{edge.node.description}</LinkPanelDescription>
+ <LinkPanelDescription><Skeleton variant="rectangle" width="450px" /></LinkPanelDescription
+ >
+ </LinkPanel>
+ {:else if $store.data.me.__typename == 'User'}
+ {#each $store.data.me.teams.nodes as node}
+ {@const team = node.team}
+ <LinkPanel about={team.purpose} href="/team/{team.slug}" border={true} as="a">
+ <LinkPanelTitle>{team.slug}</LinkPanelTitle>
+ <LinkPanelDescription>{team.purpose}</LinkPanelDescription>
</LinkPanel>
- {/if}
- {/each}
+ {:else}
+ <p>You are not a member of any teams.</p>
+ {/each}
+ <Pagination pageInfo={$store.data.me.teams.pageInfo} {limit} {offset} {changePage} />
+ {/if}
{/if}
</div>
{/if}
@@ -80,11 +94,16 @@
display: flex;
align-items: center;
gap: 0.5rem;
- margin-bottom: 1.5rem;
}
.teams {
display: flex;
flex-direction: column;
gap: 1rem;
}
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1.5rem;
+ }
</style>
diff --git a/src/routes/admin/+page.gql b/src/routes/admin/+page.gql
new file mode 100644
index 00000000..abad057d
--- /dev/null
+++ b/src/routes/admin/+page.gql
@@ -0,0 +1,7 @@
+query AdminReconcilers {
+ reconcilers(limit: 100) {
+ nodes {
+ ...ReconcilerFragment
+ }
+ }
+}
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
new file mode 100644
index 00000000..c1d52941
--- /dev/null
+++ b/src/routes/admin/+page.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+ import { graphql } from '$houdini';
+ import { Alert, Button, Heading } from '@nais/ds-svelte-community';
+ import type { PageData } from './$houdini';
+ import Reconciler from './Reconciler.svelte';
+
+ export let data: PageData;
+
+ $: ({ AdminReconcilers } = data);
+ $: reconcilers = $AdminReconcilers.data?.reconcilers.nodes;
+
+ const synchronize = graphql(`
+ mutation Synchronize {
+ synchronizeAllTeams {
+ correlationID
+ }
+ }
+ `);
+
+ let errors: string[] = [];
+
+ let loading = false;
+ const triggerSynchronize = async () => {
+ loading = true;
+ const resp = await synchronize.mutate(null);
+ loading = false;
+
+ if (resp.errors) {
+ errors = resp.errors.filter((e) => e.message != 'unable to resolve').map((e) => e.message);
+ }
+ };
+</script>
+
+<Heading size="large">
+ <div class="h">
+ Admin
+ <Button disabled={loading} {loading} on:click={triggerSynchronize} size="small">
+ Synchronize all teams
+ </Button>
+ </div>
+</Heading>
+<br />
+
+{#each errors as e}
+ <Alert variant="error">{e}</Alert>
+{/each}
+
+{#each reconcilers || [] as r}
+ <Reconciler reconciler={r} />
+{:else}
+ <p>No reconcilers registered</p>
+{/each}
+
+<style>
+ .h {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+</style>
diff --git a/src/routes/admin/Reconciler.svelte b/src/routes/admin/Reconciler.svelte
new file mode 100644
index 00000000..6f6ec556
--- /dev/null
+++ b/src/routes/admin/Reconciler.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+ import { fragment, graphql, type ReconcilerFragment } from '$houdini';
+ import Card from '$lib/Card.svelte';
+ import Confirm from '$lib/components/Confirm.svelte';
+ import {
+ Accordion,
+ AccordionItem,
+ Alert,
+ Button,
+ Heading,
+ Switch,
+ TextField
+ } from '@nais/ds-svelte-community';
+ import { InformationSquareFillIcon } from '@nais/ds-svelte-community/icons';
+
+ export let reconciler: ReconcilerFragment;
+
+ let confirm = false;
+ let errors: string[] = [];
+ let configErrors: string[] = [];
+ let reconcileLoading = false;
+ let configLoading = false;
+
+ $: r = fragment(
+ reconciler,
+ graphql(`
+ fragment ReconcilerFragment on Reconciler {
+ configured
+ description
+ displayName
+ enabled
+ name
+ memberAware
+ config {
+ configured
+ description
+ displayName
+ key
+ value
+ secret
+ }
+ }
+ `)
+ );
+
+ const enableReconciler = graphql(`
+ mutation EnableReconciler($name: String!) {
+ enableReconciler(name: $name) {
+ enabled
+ }
+ }
+ `);
+
+ const disableReconciler = graphql(`
+ mutation DisableReconciler($name: String!) {
+ disableReconciler(name: $name) {
+ enabled
+ }
+ }
+ `);
+
+ const toggle = async () => {
+ errors = [];
+ reconcileLoading = true;
+ let resp: { errors?: { message: string }[] | null } = {};
+ if ($r.enabled) {
+ resp = await disableReconciler.mutate({ name: $r.name });
+ } else {
+ resp = await enableReconciler.mutate({ name: $r.name });
+ }
+
+ reconcileLoading = false;
+ if (resp.errors) {
+ errors = resp.errors.filter((e) => e.message != 'unable to resolve').map((e) => e.message);
+ }
+ };
+
+ // We do not submit secrets with no value
+ let config: { key: string; value: string; secret: boolean }[] = [];
+ $: config = config?.length
+ ? config
+ : $r.config.map((c) => {
+ const r = { key: c.key, value: c.value || '', secret: c.secret };
+ return r;
+ });
+
+ const saveConfigMutation = graphql(`
+ mutation SaveReconcilerConfig($name: String!, $config: [ReconcilerConfigInput!]!) {
+ configureReconciler(name: $name, config: $config) {
+ configured
+ }
+ }
+ `);
+
+ const saveConfig = async () => {
+ configErrors = [];
+ configLoading = true;
+
+ const resp = await saveConfigMutation.mutate({
+ name: $r.name,
+ config: config
+ .filter((c) => {
+ return !c.secret || !!c.value;
+ })
+ .map((c) => ({ key: c.key, value: c.value }))
+ });
+
+ configLoading = false;
+ if (resp.errors) {
+ errors = resp.errors.filter((e) => e.message != 'unable to resolve').map((e) => e.message);
+ }
+ };
+</script>
+
+<Card style="margin-bottom:1rem;">
+ <Heading level="2">{$r.displayName}</Heading>
+ <p>{$r.description}</p>
+
+ {#each errors as error}
+ <Alert variant="error">{error}</Alert>
+ {/each}
+
+ <Switch
+ checked={$r.enabled}
+ loading={reconcileLoading}
+ disabled={reconcileLoading}
+ on:click={(e) => {
+ e.preventDefault();
+ confirm = true;
+ }}
+ >
+ Synchronize {$r.displayName}</Switch
+ >
+ {#if $r.config.length > 0}
+ <Accordion>
+ <AccordionItem heading="Configuration">
+ <form on:submit|preventDefault={saveConfig}>
+ {#each configErrors as error}
+ <Alert variant="error">{error}</Alert>
+ {/each}
+
+ {#each $r.config as c, i}
+ <TextField bind:value={config[i].value} style="width:400px">
+ <svelte:fragment slot="label">{c.displayName}</svelte:fragment>
+ <svelte:fragment slot="description">
+ {c.description}
+ {#if c.secret && c.configured}
+ <br />
+ <InformationSquareFillIcon /> This value is already configured. It is hidden because
+ it is secret.
+ {/if}
+ </svelte:fragment>
+ </TextField>
+ {/each}
+ <Button loading={configLoading} disabled={configLoading}>Save</Button>
+ </form>
+ </AccordionItem>
+ </Accordion>
+ {/if}
+</Card>
+
+<Confirm bind:open={confirm} on:confirm={toggle}>
+ <svelte:fragment slot="header">Confirmation required</svelte:fragment>
+ This will <b>{$r.enabled ? 'disable' : 'enable'} </b>synchronization of <i>{$r.displayName}</i><br
+ />
+ Are you sure?
+</Confirm>
diff --git a/src/routes/deploys/+page.gql b/src/routes/deploys/+page.gql
index 29aeb808..ace51693 100644
--- a/src/routes/deploys/+page.gql
+++ b/src/routes/deploys/+page.gql
@@ -1,36 +1,30 @@
-query Deploys {
- deployments(first: 100, limit: 100) @paginate(mode: SinglePage) @loading(cascade: true) {
- totalCount
+query Deploys($limit: Int = 20, $offset: Int) {
+ deployments(limit: $limit, offset: $offset) @loading(cascade: true) {
pageInfo {
+ totalCount
hasNextPage
hasPreviousPage
- startCursor
- endCursor
- from
- to
}
- edges @loading(count: 10) {
- node {
- id
- team {
- name
- }
- repository
- resources {
- group
- kind
- name
- version
- namespace
- }
- env
- statuses {
- status
- message
- created
- }
+ nodes @loading(count: 10) {
+ id
+ team {
+ slug
+ }
+ repository
+ resources {
+ group
+ kind
+ name
+ version
+ namespace
+ }
+ env
+ statuses {
+ status
+ message
created
}
+ created
}
}
}
diff --git a/src/routes/deploys/+page.svelte b/src/routes/deploys/+page.svelte
index 642c2f6d..8798fea2 100644
--- a/src/routes/deploys/+page.svelte
+++ b/src/routes/deploys/+page.svelte
@@ -4,11 +4,13 @@
import DeploymentStatus from '$lib/DeploymentStatus.svelte';
import Pagination from '$lib/Pagination.svelte';
import Time from '$lib/Time.svelte';
+ import { changeParams, limitOffset } from '$lib/pagination';
import { Alert, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
import type { PageData } from './$houdini';
export let data: PageData;
$: ({ Deploys } = data);
$: deploys = $Deploys.data?.deployments;
+ $: ({ limit, offset } = limitOffset($Deploys.variables));
</script>
<svelte:head><title>Deploys - Console</title></svelte:head>
@@ -34,8 +36,8 @@
<!--Th>Links</Th-->
</Thead>
<Tbody>
- {#each deploys.edges as edge}
- {#if edge.node.id === PendingValue}
+ {#each deploys.nodes as node}
+ {#if node.id === PendingValue}
<Tr>
{#each new Array(5).fill('text') as variant}
<Td><Skeleton {variant} /></Td>
@@ -44,16 +46,14 @@
{:else}
<Tr>
<Td>
- {#each edge.node.resources as resource}
+ {#each node.resources as resource}
<span style="color:var(--a-gray-600)">{resource.kind}:</span>
{#if resource.kind === 'Application'}
- <a
- href="/team/{edge.node.team.name}/{edge.node.env}/app/{resource.name}/deploys"
+ <a href="/team/{node.team.slug}/{node.env}/app/{resource.name}/deploys"
>{resource.name}</a
>
{:else if resource.kind === 'Naisjob'}
- <a
- href="/team/{edge.node.team.name}/{edge.node.env}/job/{resource.name}/deploys"
+ <a href="/team/{node.team.slug}/{node.env}/job/{resource.name}/deploys"
>{resource.name}</a
>
{:else}
@@ -62,23 +62,23 @@
<br />
{/each}
</Td>
- <Td><Time time={edge.node.created} distance={true} /></Td>
+ <Td><Time time={node.created} distance={true} /></Td>
<Td>
- <a href="/team/{edge.node.team.name}/deploy">{edge.node.team.name}</a>
+ <a href="/team/{node.team.slug}/deploy">{node.team.slug}</a>
</Td>
- <Td>{edge.node.env}</Td>
+ <Td>{node.env}</Td>
- {#if edge.node.statuses.length === 0}
+ {#if node.statuses.length === 0}
<Td><DeploymentStatus status={'unknown'} /></Td>
{:else}
- <Td><DeploymentStatus status={edge.node.statuses[0].status} /></Td>
+ <Td><DeploymentStatus status={node.statuses[0].status} /></Td>
{/if}
<!--Td>
{#if edge.node.repository}
<Button
size="xsmall"
variant="secondary"
- href="https://github.com/{edge.node.repository}"
+ href="https://github.com/{node.repository}"
as="a"
>
<svelte:fragment slot="icon-left"><BranchingIcon /></svelte:fragment
@@ -92,15 +92,11 @@
</Tbody>
</Table>
<Pagination
- totalCount={deploys.totalCount}
pageInfo={deploys.pageInfo}
- on:nextPage={() => {
- if (!deploys?.pageInfo.hasNextPage) return;
- Deploys.loadNextPage();
- }}
- on:previousPage={() => {
- if (!deploys?.pageInfo.hasPreviousPage) return;
- Deploys.loadPreviousPage();
+ {limit}
+ {offset}
+ changePage={(page) => {
+ changeParams({ page: page.toString() });
}}
/>
{/if}
diff --git a/src/routes/deploys/+page.ts b/src/routes/deploys/+page.ts
new file mode 100644
index 00000000..c56715cb
--- /dev/null
+++ b/src/routes/deploys/+page.ts
@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+import type { DeploysVariables } from './$houdini';
+export const _DeploysVariables: DeploysVariables = ({ url }) => {
+ const page = parseInt(url.searchParams.get('page') || '1');
+ if (!page || page < 1) {
+ throw error(400, 'Bad pagenumber');
+ }
+ const limit = 10;
+ const offset = (page - 1) * limit;
+
+ return { limit, offset };
+};
diff --git a/src/routes/team/[team]/(teamTabs)/+layout.gql b/src/routes/team/[team]/(teamTabs)/+layout.gql
index fcda8ef9..52bf44a7 100644
--- a/src/routes/team/[team]/(teamTabs)/+layout.gql
+++ b/src/routes/team/[team]/(teamTabs)/+layout.gql
@@ -1,6 +1,6 @@
-query TeamRoles($team: String!) {
- team(name: $team) @loading {
- viewerIsAdmin
+query TeamRoles($team: Slug!) {
+ team(slug: $team) @loading {
+ viewerIsOwner
viewerIsMember
}
}
diff --git a/src/routes/team/[team]/(teamTabs)/+layout.svelte b/src/routes/team/[team]/(teamTabs)/+layout.svelte
index 7bbafa39..cbdb234d 100644
--- a/src/routes/team/[team]/(teamTabs)/+layout.svelte
+++ b/src/routes/team/[team]/(teamTabs)/+layout.svelte
@@ -61,7 +61,7 @@
<Tab href={replacer(routeId, { team })} active={currentRoute == routeId} title={tab} />
{/each}
{#if $TeamRoles.data}
- {#if $TeamRoles.data.team !== PendingValue && ($TeamRoles.data.team.viewerIsMember || $TeamRoles.data.team.viewerIsAdmin)}
+ {#if $TeamRoles.data.team !== PendingValue && ($TeamRoles.data.team.viewerIsMember || $TeamRoles.data.team.viewerIsOwner)}
<Tab
href={replacer('/team/[team]/(teamTabs)/settings', { team })}
active={currentRoute == '/team/[team]/(teamTabs)/settings'}
diff --git a/src/routes/team/[team]/(teamTabs)/+page.gql b/src/routes/team/[team]/(teamTabs)/+page.gql
index d9adf7f8..892a206e 100644
--- a/src/routes/team/[team]/(teamTabs)/+page.gql
+++ b/src/routes/team/[team]/(teamTabs)/+page.gql
@@ -1,4 +1,4 @@
-query Overview($team: String!) @cache(policy: NetworkOnly) {
+query Overview($team: Slug!) @cache(policy: NetworkOnly) {
currentResourceUtilizationForTeam(team: $team) @loading {
cpu {
utilization
diff --git a/src/routes/team/[team]/(teamTabs)/applications/+page.gql b/src/routes/team/[team]/(teamTabs)/applications/+page.gql
index bcf65cbd..8a4eb1c0 100644
--- a/src/routes/team/[team]/(teamTabs)/applications/+page.gql
+++ b/src/routes/team/[team]/(teamTabs)/applications/+page.gql
@@ -1,37 +1,35 @@
-query Workloads($team: String!, $orderBy: OrderBy = { field: STATUS, direction: ASC })
-@loading(count: 5, cascade: true) {
- team(name: $team) {
+query Workloads(
+ $team: Slug!
+ $orderBy: OrderBy = { field: STATUS, direction: ASC }
+ $limit: Int
+ $offset: Int
+) @loading(count: 5, cascade: true) {
+ team(slug: $team) {
id
- apps(first: 50, orderBy: $orderBy) @paginate(mode: SinglePage) {
- totalCount
+ apps(limit: $limit, offset: $offset, orderBy: $orderBy) {
pageInfo {
+ totalCount
hasNextPage
hasPreviousPage
- startCursor
- endCursor
- from
- to
}
- edges {
- node {
- deployInfo {
- timestamp
- }
+ nodes {
+ deployInfo {
+ timestamp
+ }
+ name
+ image
+ ...AppInstancesStatus
+ env {
name
- image
- ...AppInstancesStatus
- env {
- name
- }
+ }
- appState {
- state
- }
+ appState {
+ state
+ }
- instances {
- state
- }
+ instances {
+ state
}
}
}
diff --git a/src/routes/team/[team]/(teamTabs)/applications/+page.svelte b/src/routes/team/[team]/(teamTabs)/applications/+page.svelte
index 1fe54de5..e379c028 100644
--- a/src/routes/team/[team]/(teamTabs)/applications/+page.svelte
+++ b/src/routes/team/[team]/(teamTabs)/applications/+page.svelte
@@ -1,38 +1,27 @@
<script lang="ts">
import { page } from '$app/stores';
- import { OrderByField, PendingValue } from '$houdini';
+ import { PendingValue } from '$houdini';
import Card from '$lib/Card.svelte';
import Pagination from '$lib/Pagination.svelte';
import Status from '$lib/Status.svelte';
import Time from '$lib/Time.svelte';
- import type { TableSortState } from '@nais/ds-svelte-community';
+ import {
+ changeParams,
+ sortTable,
+ tableGraphDirection,
+ tableStateFromVariables
+ } from '$lib/pagination';
import { Alert, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
- import { sortTable } from '../../../../../helpers';
import InstanceStatus from '../../[env]/app/[app]/InstanceStatus.svelte';
import type { PageData } from './$houdini';
- $: teamName = $page.params.team;
export let data: PageData;
+
+ $: teamName = $page.params.team;
$: ({ Workloads } = data);
$: team = $Workloads.data?.team;
- let sortState: TableSortState = {
- orderBy: 'STATUS',
- direction: 'ascending'
- };
-
- const refetch = (key: string) => {
- const field = Object.values(OrderByField).find((value) => value === key);
- Workloads.fetch({
- variables: {
- team: teamName,
- orderBy: {
- field: field !== undefined ? field : 'STATUS',
- direction: sortState.direction === 'descending' ? 'DESC' : 'ASC'
- }
- }
- });
- };
+ $: ({ sortState, limit, offset } = tableStateFromVariables($Workloads.variables));
</script>
{#if $Workloads.errors}
@@ -49,7 +38,8 @@
sort={sortState}
on:sortChange={(e) => {
const { key } = e.detail;
- sortState = sortTable(key, sortState, refetch);
+ const ss = sortTable(key, sortState);
+ changeParams({ col: ss.orderBy, dir: tableGraphDirection[ss.direction] });
}}
>
<Thead>
@@ -63,36 +53,34 @@
{#if team !== undefined}
{#if team.id === PendingValue}
<Tr>
- {#each new Array(team.apps.edges.length).fill('text') as variant}
+ {#each new Array(team.apps.nodes.length).fill('text') as variant}
<Td><Skeleton {variant} /></Td>
{/each}
</Tr>
{:else}
- {#each team.apps.edges as edge}
+ {#each team.apps.nodes as node}
<Tr>
<Td>
<div class="status">
<a
- href="/team/{teamName}/{edge.node.env.name}/app/{edge.node.name}/status"
+ href="/team/{teamName}/{node.env.name}/app/{node.name}/status"
data-sveltekit-preload-data="off"
>
- <Status size="1.5rem" state={edge.node.appState.state} />
+ <Status size="1.5rem" state={node.appState.state} />
</a>
</div>
</Td>
<Td>
- <a href="/team/{teamName}/{edge.node.env.name}/app/{edge.node.name}"
- >{edge.node.name}</a
- >
+ <a href="/team/{teamName}/{node.env.name}/app/{node.name}">{node.name}</a>
</Td>
- <Td>{edge.node.env.name}</Td>
+ <Td>{node.env.name}</Td>
<Td>
- <InstanceStatus app={edge.node} />
+ <InstanceStatus app={node} />
</Td>
<Td>
- {#if edge.node.deployInfo.timestamp}
- <Time time={edge.node.deployInfo.timestamp} distance={true} />
+ {#if node.deployInfo.timestamp}
+ <Time time={node.deployInfo.timestamp} distance={true} />
{/if}
</Td>
</Tr>
@@ -105,22 +93,14 @@
{/if}
</Tbody>
</Table>
- {#if team !== undefined}
- {#if team.id !== PendingValue}
- <Pagination
- totalCount={team.apps.totalCount}
- pageInfo={team.apps.pageInfo}
- on:nextPage={() => {
- if (!$Workloads.pageInfo.hasNextPage) return;
- Workloads.loadNextPage();
- }}
- on:previousPage={() => {
- if (!$Workloads.pageInfo.hasPreviousPage) return;
- Workloads.loadPreviousPage();
- }}
- />
- {/if}
- {/if}
+ <Pagination
+ pageInfo={team?.apps.pageInfo}
+ {limit}
+ {offset}
+ changePage={(e) => {
+ changeParams({ page: e.toString() });
+ }}
+ />
</Card>
</div>
{/if}
diff --git a/src/routes/team/[team]/(teamTabs)/applications/+page.ts b/src/routes/team/[team]/(teamTabs)/applications/+page.ts
new file mode 100644
index 00000000..99e83f6e
--- /dev/null
+++ b/src/routes/team/[team]/(teamTabs)/applications/+page.ts
@@ -0,0 +1,14 @@
+import { error } from '@sveltejs/kit';
+import type { WorkloadsVariables } from './$houdini';
+export const _WorkloadsVariables: WorkloadsVariables = ({ url }) => {
+ const page = parseInt(url.searchParams.get('page') || '1');
+ if (!page || page < 1) {
+ throw error(400, 'Bad pagenumber');
+ }
+ const limit = 25;
+ const offset = (page - 1) * limit;
+ const field = (url.searchParams.get('col') || 'STATUS') as never;
+ const direction = (url.searchParams.get('dir') || 'ASC') as never;
+
+ return { limit, offset, orderBy: { field, direction } };
+};
diff --git a/src/routes/team/[team]/(teamTabs)/cost/+page.gql b/src/routes/team/[team]/(teamTabs)/cost/+page.gql
index 59dc6e77..4838ffb3 100644
--- a/src/routes/team/[team]/(teamTabs)/cost/+page.gql
+++ b/src/routes/team/[team]/(teamTabs)/cost/+page.gql
@@ -1,4 +1,4 @@
-query TeamCost($team: String!, $from: Date!, $to: Date!) @cache(policy: NetworkOnly) {
+query TeamCost($team: Slug!, $from: Date!, $to: Date!) @cache(policy: NetworkOnly) {
dailyCostForTeam(team: $team, from: $from, to: $to) @loading {
series {
costType
diff --git a/src/routes/team/[team]/(teamTabs)/deploy/+page.gql b/src/routes/team/[team]/(teamTabs)/deploy/+page.gql
index e89b6c8f..cee6075d 100644
--- a/src/routes/team/[team]/(teamTabs)/deploy/+page.gql
+++ b/src/routes/team/[team]/(teamTabs)/deploy/+page.gql
@@ -1,32 +1,28 @@
-query TeamDeployments($team: String!) @loading(cascade: true) {
- team(name: $team) {
+query TeamDeployments($limit: Int, $offset: Int, $team: Slug!) @loading(cascade: true) {
+ team(slug: $team) {
id
- deployments(first: 100, limit: 100) @paginate(mode: SinglePage) {
- totalCount
+ deployments(limit: $limit, offset: $offset) {
pageInfo {
+ totalCount
hasNextPage
hasPreviousPage
- from
- to
}
- edges @loading(count: 10) {
- node {
- id
+ nodes @loading(count: 10) {
+ id
+ created
+ env
+ repository
+ resources {
+ group
+ kind
+ version
+ name
+ namespace
+ }
+ statuses {
created
- env
- repository
- resources {
- group
- kind
- version
- name
- namespace
- }
- statuses {
- created
- message
- status
- }
+ message
+ status
}
}
}
diff --git a/src/routes/team/[team]/(teamTabs)/deploy/+page.svelte b/src/routes/team/[team]/(teamTabs)/deploy/+page.svelte
index afac2236..d86a4b4d 100644
--- a/src/routes/team/[team]/(teamTabs)/deploy/+page.svelte
+++ b/src/routes/team/[team]/(teamTabs)/deploy/+page.svelte
@@ -5,6 +5,7 @@
import Status from '$lib/DeploymentStatus.svelte';
import Pagination from '$lib/Pagination.svelte';
import Time from '$lib/Time.svelte';
+ import { changeParams, limitOffset } from '$lib/pagination';
import { Alert, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
import type { PageData } from './$houdini';
@@ -13,6 +14,7 @@
$: team = $page.params.team;
$: ({ TeamDeployments } = data);
$: teamData = $TeamDeployments.data?.team;
+ $: ({ limit, offset } = limitOffset($TeamDeployments.variables));
</script>
{#if $TeamDeployments.errors}
@@ -34,23 +36,21 @@
<!--Th>Link</Th-->
</Thead>
<Tbody>
- {#each teamData.deployments.edges as edge}
+ {#each teamData.deployments.nodes as node}
<Tr>
- {#if edge.node.id === PendingValue}
+ {#if node.id === PendingValue}
{#each new Array(4).fill('text') as variant}
<Td><Skeleton {variant} /></Td>
{/each}
{:else}
<Td>
- {#each edge.node.resources as resource}
+ {#each node.resources as resource}
<span style="color:var(--a-gray-600)">{resource.kind}:</span>
{#if resource.kind === 'Application'}
- <a href="/team/{team}/{edge.node.env}/app/{resource.name}/deploys"
- >{resource.name}</a
+ <a href="/team/{team}/{node.env}/app/{resource.name}/deploys">{resource.name}</a
>
{:else if resource.kind === 'Naisjob'}
- <a href="/team/{team}/{edge.node.env}/job/{resource.name}/deploys"
- >{resource.name}</a
+ <a href="/team/{team}/{node.env}/job/{resource.name}/deploys">{resource.name}</a
>
{:else}
{resource.name}
@@ -59,20 +59,20 @@
{/each}
</Td>
<Td>
- <Time time={new Date(edge.node.created)} distance={true} />
+ <Time time={new Date(node.created)} distance={true} />
</Td>
- <Td>{edge.node.env}</Td>
- {#if edge.node.statuses.length === 0}
+ <Td>{node.env}</Td>
+ {#if node.statuses.length === 0}
<Td><Status status={'unknown'} /></Td>
{:else}
- <Td><Status status={edge.node.statuses[0].status} /></Td>
+ <Td><Status status={node.statuses[0].status} /></Td>
{/if}
<!--Td>
{#if edge.node.repository}
<Button
size="xsmall"
variant="secondary"
- href="https://github.com/{edge.node.repository}"
+ href="https://github.com/{node.repository}"
as="a"
>
<svelte:fragment slot="icon-left"><BranchingIcon /></svelte:fragment
@@ -85,21 +85,14 @@
{/each}
</Tbody>
</Table>
- {#if teamData !== undefined}
- {#if teamData.id !== PendingValue}
- <Pagination
- pageInfo={teamData.deployments.pageInfo}
- totalCount={teamData.deployments.totalCount}
- on:nextPage={() => {
- if (!teamData?.deployments.pageInfo.hasNextPage) return;
- TeamDeployments.loadNextPage();
- }}
- on:previousPage={() => {
- if (!teamData?.deployments.pageInfo.hasPreviousPage) return;
- TeamDeployments.loadPreviousPage();
- }}
- />
- {/if}
- {/if}
+
+ <Pagination
+ pageInfo={teamData.deployments.pageInfo}
+ {limit}
+ {offset}
+ changePage={(page) => {
+ changeParams({ page: page.toString() });
+ }}
+ />
</Card>
{/if}
diff --git a/src/routes/team/[team]/(teamTabs)/deploy/+page.ts b/src/routes/team/[team]/(teamTabs)/deploy/+page.ts
new file mode 100644
index 00000000..6921412e
--- /dev/null
+++ b/src/routes/team/[team]/(teamTabs)/deploy/+page.ts
@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+import type { TeamDeploymentsVariables } from './$houdini';
+export const _TeamDeploymentsVariables: TeamDeploymentsVariables = ({ url }) => {
+ const page = parseInt(url.searchParams.get('page') || '1');
+ if (!page || page < 1) {
+ throw error(400, 'Bad pagenumber');
+ }
+ const limit = 100;
+ const offset = (page - 1) * limit;
+
+ return { limit, offset };
+};
diff --git a/src/routes/team/[team]/(teamTabs)/jobs/+page.gql b/src/routes/team/[team]/(teamTabs)/jobs/+page.gql
index 1777c7f6..e99778c4 100644
--- a/src/routes/team/[team]/(teamTabs)/jobs/+page.gql
+++ b/src/routes/team/[team]/(teamTabs)/jobs/+page.gql
@@ -1,31 +1,29 @@
-query Jobs($team: String!, $orderBy: OrderBy = { field: STATUS, direction: ASC })
-@loading(count: 5, cascade: true) {
- team(name: $team) {
+query Jobs(
+ $limit: Int
+ $offset: Int
+ $team: Slug!
+ $orderBy: OrderBy = { field: STATUS, direction: ASC }
+) @loading(count: 5, cascade: true) {
+ team(slug: $team) {
id
- naisjobs(first: 50, orderBy: $orderBy) @paginate(mode: SinglePage) {
- totalCount
+ naisjobs(limit: $limit, offset: $offset, orderBy: $orderBy) {
pageInfo {
+ totalCount
hasNextPage
hasPreviousPage
- startCursor
- endCursor
- from
- to
}
- edges {
- node {
- deployInfo {
- timestamp
- }
+ nodes {
+ deployInfo {
+ timestamp
+ }
+ name
+ image
+ env {
name
- image
- env {
- name
- }
- jobState {
- state
- }
+ }
+ jobState {
+ state
}
}
}
diff --git a/src/routes/team/[team]/(teamTabs)/jobs/+page.svelte b/src/routes/team/[team]/(teamTabs)/jobs/+page.svelte
index 25f28f19..6ed14ff5 100644
--- a/src/routes/team/[team]/(teamTabs)/jobs/+page.svelte
+++ b/src/routes/team/[team]/(teamTabs)/jobs/+page.svelte
@@ -1,22 +1,17 @@
<script lang="ts">
import { page } from '$app/stores';
- import { OrderByField, PendingValue } from '$houdini';
+ import { PendingValue } from '$houdini';
import Card from '$lib/Card.svelte';
import Pagination from '$lib/Pagination.svelte';
import Status from '$lib/Status.svelte';
import Time from '$lib/Time.svelte';
import {
- Alert,
- Skeleton,
- Table,
- Tbody,
- Td,
- Th,
- Thead,
- Tr,
- type TableSortState
- } from '@nais/ds-svelte-community';
- import { sortTable } from '../../../../../helpers';
+ changeParams,
+ sortTable,
+ tableGraphDirection,
+ tableStateFromVariables
+ } from '$lib/pagination';
+ import { Alert, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
import type { PageData } from './$houdini';
$: teamName = $page.params.team;
@@ -24,23 +19,7 @@
$: ({ Jobs } = data);
$: team = $Jobs.data?.team;
- let sortState: TableSortState = {
- orderBy: 'STATUS',
- direction: 'ascending'
- };
-
- const refetch = (key: string) => {
- const field = Object.values(OrderByField).find((value) => value === key);
- Jobs.fetch({
- variables: {
- team: teamName,
- orderBy: {
- field: field !== undefined ? field : 'STATUS',
- direction: sortState.direction === 'descending' ? 'DESC' : 'ASC'
- }
- }
- });
- };
+ $: ({ sortState, limit, offset } = tableStateFromVariables($Jobs.variables));
</script>
{#if $Jobs.errors}
@@ -57,7 +36,8 @@
sort={sortState}
on:sortChange={(e) => {
const { key } = e.detail;
- sortState = sortTable(key, sortState, refetch);
+ const ss = sortTable(key, sortState);
+ changeParams({ col: ss.orderBy, dir: tableGraphDirection[ss.direction] });
}}
>
<Thead>
@@ -70,32 +50,30 @@
{#if team !== undefined}
{#if team.id === PendingValue}
<Tr>
- {#each new Array(team.naisjobs.edges.length).fill('text') as variant}
+ {#each new Array(team.naisjobs.nodes.length).fill('text') as variant}
<Td><Skeleton {variant} /></Td>
{/each}
</Tr>
{:else}
- {#each team.naisjobs.edges as edge}
+ {#each team.naisjobs.nodes as node}
<Tr>
<Td>
<div class="status">
<a
- href="/team/{teamName}/{edge.node.env.name}/job/{edge.node.name}/status"
+ href="/team/{teamName}/{node.env.name}/job/{node.name}/status"
data-sveltekit-preload-data="off"
>
- <Status size="1.5rem" state={edge.node.jobState.state} />
+ <Status size="1.5rem" state={node.jobState.state} />
</a>
</div>
</Td>
<Td>
- <a href="/team/{teamName}/{edge.node.env.name}/job/{edge.node.name}"
- >{edge.node.name}</a
- >
+ <a href="/team/{teamName}/{node.env.name}/job/{node.name}">{node.name}</a>
</Td>
- <Td>{edge.node.env.name}</Td>
+ <Td>{node.env.name}</Td>
<Td>
- {#if edge.node.deployInfo.timestamp}
- <Time time={edge.node.deployInfo.timestamp} distance={true} />
+ {#if node.deployInfo.timestamp}
+ <Time time={node.deployInfo.timestamp} distance={true} />
{/if}
</Td>
</Tr>
@@ -108,22 +86,15 @@
{/if}
</Tbody>
</Table>
- {#if team !== undefined}
- {#if team.id !== PendingValue}
- <Pagination
- totalCount={team.naisjobs.totalCount}
- pageInfo={team.naisjobs.pageInfo}
- on:nextPage={() => {
- if (!$Jobs.pageInfo.hasNextPage) return;
- Jobs.loadNextPage();
- }}
- on:previousPage={() => {
- if (!$Jobs.pageInfo.hasPreviousPage) return;
- Jobs.loadPreviousPage();
- }}
- />
- {/if}
- {/if}
+
+ <Pagination
+ pageInfo={team?.naisjobs.pageInfo}
+ {limit}
+ {offset}
+ changePage={(e) => {
+ changeParams({ page: e.toString() });
+ }}
+ />
</Card>
{/if}
diff --git a/src/routes/team/[team]/(teamTabs)/jobs/+page.ts b/src/routes/team/[team]/(teamTabs)/jobs/+page.ts
new file mode 100644
index 00000000..1e4739ec
--- /dev/null
+++ b/src/routes/team/[team]/(teamTabs)/jobs/+page.ts
@@ -0,0 +1,14 @@
+import { error } from '@sveltejs/kit';
+import type { JobsVariables } from './$houdini';
+export const _JobsVariables: JobsVariables = ({ url }) => {
+ const page = parseInt(url.searchParams.get('page') || '1');
+ if (!page || page < 1) {
+ throw error(400, 'Bad pagenumber');
+ }
+ const limit = 25;
+ const offset = (page - 1) * limit;
+ const field = (url.searchParams.get('col') || 'STATUS') as never;
+ const direction = (url.searchParams.get('dir') || 'ASC') as never;
+
+ return { limit, offset, orderBy: { field, direction } };
+};
diff --git a/src/routes/team/[team]/(teamTabs)/members/+page.gql b/src/routes/team/[team]/(teamTabs)/members/+page.gql
index 7931fc75..c7934504 100644
--- a/src/routes/team/[team]/(teamTabs)/members/+page.gql
+++ b/src/routes/team/[team]/(teamTabs)/members/+page.gql
@@ -1,22 +1,29 @@
-query Members($team: String!) @loading(cascade: true) {
- team(name: $team) {
- name
- members(first: 50) @paginate(mode: SinglePage) {
- totalCount
+query Members($limit: Int, $offset: Int, $team: Slug!) @loading(cascade: true) {
+ team(slug: $team) {
+ slug
+ viewerIsOwner
+ members(limit: $limit, offset: $offset) {
pageInfo {
+ totalCount
hasNextPage
hasPreviousPage
- startCursor
- endCursor
- from
- to
}
- edges @loading(count: 10) {
- node {
+ nodes @loading(count: 10) {
+ user {
+ id
email
name
- role
}
+
+ reconcilers {
+ enabled
+ reconciler {
+ displayName
+ description
+ name
+ }
+ }
+ role
}
}
}
diff --git a/src/routes/team/[team]/(teamTabs)/members/+page.svelte b/src/routes/team/[team]/(teamTabs)/members/+page.svelte
index 74f55849..aca70781 100644
--- a/src/routes/team/[team]/(teamTabs)/members/+page.svelte
+++ b/src/routes/team/[team]/(teamTabs)/members/+page.svelte
@@ -1,17 +1,56 @@
<script lang="ts">
+ import { graphql } from '$houdini';
import { PendingValue } from '$houdini';
import Card from '$lib/Card.svelte';
import Pagination from '$lib/Pagination.svelte';
- import { Alert, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
+ import Confirm from '$lib/components/Confirm.svelte';
+ import { changeParams, limitOffset } from '$lib/pagination';
+ import {
+ Alert,
+ Button,
+ Heading,
+ Skeleton,
+ Table,
+ Tbody,
+ Td,
+ Th,
+ Thead,
+ Tr
+ } from '@nais/ds-svelte-community';
+ import { PencilIcon, PlusIcon, TrashIcon } from '@nais/ds-svelte-community/icons';
import type { PageData } from './$houdini';
+ import AddMember from './AddMember.svelte';
+ import EditMember from './EditMember.svelte';
export let data: PageData;
$: ({ Members } = data);
$: team = $Members.data?.team;
+ $: ({ limit, offset } = limitOffset($Members.variables));
+
function capitalizeFirstLetterInEachWord(str: string): string {
return str.replaceAll(/(^|\s)[\w]/g, (c) => c.toUpperCase());
}
+
+ const deleteTeamMember = graphql(`
+ mutation DeleteTeamMember($team: Slug!, $userId: ID!) {
+ removeUserFromTeam(slug: $team, userId: $userId) {
+ slug
+ }
+ }
+ `);
+
+ const refetch = () => {
+ Members.fetch({
+ policy: 'CacheAndNetwork'
+ });
+ };
+
+ let addMemberOpen = false;
+ let editUser: string | null = null;
+ let editUserOpen = false;
+ let deleteUser: { id: string; name: string } | null = null;
+ let deleteUserOpen = false;
</script>
{#if $Members.errors}
@@ -22,24 +61,66 @@
</Alert>
{:else if team}
<Card>
- <h3>Members</h3>
+ <div class="header">
+ <h3>Members</h3>
+ {#if team.viewerIsOwner}
+ <Button
+ size="small"
+ on:click={() => {
+ addMemberOpen = !addMemberOpen;
+ }}><svelte:fragment slot="icon-left"><PlusIcon /></svelte:fragment>Add member</Button
+ >
+ {/if}
+ </div>
+
<Table size="small" zebraStripes={true}>
<Thead>
<Th>Name</Th>
<Th>E-mail</Th>
<Th>Role</Th>
+ <Th style="width:100px"> </Th>
</Thead>
<Tbody>
- {#each team.members.edges as edge}
+ {#each team.members.nodes as node}
<Tr>
- {#if team.name === PendingValue}
- {#each new Array(3).fill('text') as variant}
+ {#if team.slug === PendingValue}
+ {#each new Array(4).fill('text') as variant}
<Td><Skeleton {variant} /></Td>
{/each}
{:else}
- <Td>{capitalizeFirstLetterInEachWord(edge.node.name.toString())}</Td>
- <Td>{edge.node.email}</Td>
- <Td>{edge.node.role.toString().toLowerCase()}</Td>
+ <Td>{capitalizeFirstLetterInEachWord(node.user.name.toString())}</Td>
+ <Td>{node.user.email}</Td>
+ <Td>{node.role.toString().toLowerCase()}</Td>
+ <Td>
+ {#if team.viewerIsOwner}
+ <Button
+ iconOnly
+ title="Edit member"
+ size="small"
+ variant="tertiary"
+ on:click={() => {
+ editUser = node.user.id.toString();
+ editUserOpen = true;
+ }}
+ >
+ <svelte:fragment slot="icon-left"><PencilIcon /></svelte:fragment>
+ </Button>
+ <Button
+ iconOnly
+ title="Delete member"
+ size="small"
+ variant="tertiary-neutral"
+ on:click={() => {
+ deleteUser = { id: node.user.id.toString(), name: node.user.name.toString() };
+ deleteUserOpen = true;
+ }}
+ >
+ <svelte:fragment slot="icon-left"
+ ><TrashIcon style="color:var(--a-icon-danger)!important" /></svelte:fragment
+ >
+ </Button>
+ {/if}
+ </Td>
{/if}
</Tr>
{/each}
@@ -47,15 +128,54 @@
</Table>
<Pagination
pageInfo={team.members.pageInfo}
- totalCount={team.members.totalCount}
- on:nextPage={() => {
- if (!$Members.pageInfo.hasNextPage) return;
- Members.loadNextPage();
- }}
- on:previousPage={() => {
- if (!$Members.pageInfo.hasPreviousPage) return;
- Members.loadPreviousPage();
+ {limit}
+ {offset}
+ changePage={(page) => {
+ changeParams({ page: page.toString() });
}}
/>
</Card>
+ {#if team && team.slug != PendingValue}
+ <AddMember bind:open={addMemberOpen} team={team.slug} on:created={refetch} />
+
+ {#if editUser && editUserOpen}
+ <EditMember
+ bind:open={editUserOpen}
+ team={team.slug}
+ userID={editUser}
+ on:updated={refetch}
+ on:closed={() => {
+ editUser = null;
+ }}
+ />
+ {/if}
+ {#if deleteUser && deleteUserOpen}
+ {@const teamSlug = team.slug}
+ {@const userId = deleteUser.id}
+ <Confirm
+ bind:open={deleteUserOpen}
+ confirmText="Delete"
+ variant="danger"
+ on:confirm={async () => {
+ await deleteTeamMember.mutate({ team: teamSlug, userId });
+ refetch();
+ }}
+ >
+ <svelte:fragment slot="header"><Heading>Delete member</Heading></svelte:fragment>
+ Are you sure you want to remove <b>{deleteUser.name} </b>from this team?
+ </Confirm>
+ {/if}
+ {/if}
{/if}
+
+<style>
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1rem;
+ }
+ .header h3 {
+ margin: 0;
+ }
+</style>
diff --git a/src/routes/team/[team]/(teamTabs)/members/+page.ts b/src/routes/team/[team]/(teamTabs)/members/+page.ts
new file mode 100644
index 00000000..aba4993b
--- /dev/null
+++ b/src/routes/team/[team]/(teamTabs)/members/+page.ts
@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+import type { MembersVariables } from './$houdini';
+export const _MembersVariables: MembersVariables = ({ url }) => {
+ const page = parseInt(url.searchParams.get('page') || '1');
+ if (!page || page < 1) {
+ throw error(400, 'Bad pagenumber');
+ }
+ const limit = 25;
+ const offset = (page - 1) * limit;
+
+ return { limit, offset };
+};
diff --git a/src/routes/team/[team]/(teamTabs)/members/AddMember.svelte b/src/routes/team/[team]/(teamTabs)/members/AddMember.svelte
new file mode 100644
index 00000000..161aedd2
--- /dev/null
+++ b/src/routes/team/[team]/(teamTabs)/members/AddMember.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+ import { graphql, type TeamMemberInput } from '$houdini';
+ import {
+ Alert,
+ Button,
+ Checkbox,
+ CheckboxGroup,
+ Heading,
+ HelpText,
+ Modal,
+ Select,
+ TextField
+ } from '@nais/ds-svelte-community';
+ import { PlusIcon } from '@nais/ds-svelte-community/icons';
+ import { createEventDispatcher, onMount } from 'svelte';
+
+ export let open: boolean;
+ export let team: string;
+
+ const dispatcher = createEventDispatcher<{ created: null }>();
+
+ const store = graphql(`
+ query AddMemberQuery @load {
+ users(limit: 10000) {
+ nodes {
+ id
+ email
+ }
+ }
+
+ reconcilers {
+ nodes {
+ displayName
+ name
+ description
+ memberAware
+ }
+ }
+ }
+ `);
+
+ const create = graphql(`
+ mutation CreateMemberMutation($team: Slug!, $input: TeamMemberInput!) {
+ addTeamMember(member: $input, slug: $team) {
+ slug
+ }
+ }
+ `);
+
+ $: emails = $store.data?.users.nodes.map((user) => user.email) ?? [];
+
+ type Reconciler = { name: string; value: string; description: string };
+ let selectedRecs: string[] = [];
+ let reconcilers: Reconciler[] = [];
+
+ onMount(() => {
+ return store.subscribe(async (v) => {
+ if (!v.data) return;
+
+ const recs = v.data.reconcilers.nodes.filter((r) => r.memberAware);
+ reconcilers =
+ recs.map((r) => ({
+ name: r.displayName,
+ value: r.name,
+ description: r.description
+ })) ?? [];
+ });
+ });
+
+ let role: TeamMemberInput['role'] = 'MEMBER';
+ let email: string;
+
+ let errors: string[] = [];
+ const submit = async () => {
+ errors = [];
+ const userID = $store.data?.users.nodes.find((u) => u.email === email)?.id;
+ if (!userID) {
+ errors = ['User not found'];
+ return;
+ }
+
+ const input: TeamMemberInput = {
+ role,
+ userId: userID,
+ reconcilerOptOuts: reconcilers
+ .filter((r) => !selectedRecs.includes(r.value))
+ .map((r) => r.value)
+ };
+
+ const resp = await create.mutate({
+ team: team,
+ input
+ });
+
+ if (resp.errors) {
+ errors = resp.errors.filter((e) => e.message != 'unable to resolve').map((e) => e.message);
+ return;
+ }
+
+ open = false;
+
+ dispatcher('created', null);
+ };
+</script>
+
+<Modal bind:open>
+ <svelte:fragment slot="header"><Heading>Add member</Heading></svelte:fragment>
+
+ {#each errors as error}
+ <Alert variant="error">{error}</Alert>
+ {/each}
+
+ <form on:submit|preventDefault={submit} class="wrapper">
+ <TextField list="add-member-email" type="email" bind:value={email}>
+ <svelte:fragment slot="label">Email</svelte:fragment>
+ </TextField>
+ <datalist id="add-member-email">
+ {#each emails as email}
+ <option value={email} />
+ {/each}
+ </datalist>
+
+ <Select label="Role" style="width:150px" bind:value={role}>
+ <option value="OWNER">Owner</option>
+ <option value="MEMBER">Member</option>
+ </Select>
+
+ <CheckboxGroup legend="Enabled features" bind:value={selectedRecs}>
+ {#each reconcilers as reconciler}
+ <Checkbox value={reconciler.value} checked>
+ <span class="option">
+ {reconciler.name}
+ <HelpText title="" wrapperClass="tooltipAddMemberWrapper">
+ {reconciler.description}
+ </HelpText>
+ </span>
+ </Checkbox>
+ {/each}
+ </CheckboxGroup>
+ </form>
+
+ <svelte:fragment slot="footer">
+ <Button type="submit" on:click={submit}>
+ <svelte:fragment slot="icon-left"><PlusIcon /></svelte:fragment>
+ Add member
+ </Button>
+ </svelte:fragment>
+</Modal>
+
+<style>
+ .wrapper {
+ min-width: 400px;
+ }
+
+ .option {
+ display: inline-flex;
+ gap: 0.5rem;
+ }
+
+ :global(.tooltipAddMemberWrapper) {
+ width: 200px;
+ }
+</style>
diff --git a/src/routes/team/[team]/(teamTabs)/members/EditMember.svelte b/src/routes/team/[team]/(teamTabs)/members/EditMember.svelte
new file mode 100644
index 00000000..85432460
--- /dev/null
+++ b/src/routes/team/[team]/(teamTabs)/members/EditMember.svelte
@@ -0,0 +1,166 @@
+<script lang="ts">
+ import { graphql, type TeamRole$options } from '$houdini';
+ import Label from '$lib/typography/Label.svelte';
+ import {
+ Alert,
+ Checkbox,
+ Fieldset,
+ Heading,
+ HelpText,
+ Modal,
+ Select
+ } from '@nais/ds-svelte-community';
+ import { createEventDispatcher } from 'svelte';
+ import type { TeamMemberVariables } from './$houdini';
+
+ export let open: boolean;
+ export let team: string;
+ export let userID: string;
+
+ const dispatcher = createEventDispatcher<{ updated: null }>();
+ const store = graphql(`
+ query TeamMember($team: Slug!, $userId: ID!) @load {
+ team(slug: $team) {
+ member(userId: $userId) {
+ role
+ user {
+ id
+ name
+ }
+ reconcilers {
+ enabled
+ reconciler {
+ name
+ displayName
+ description
+ }
+ }
+ }
+ }
+ }
+ `);
+
+ export const _TeamMemberVariables: TeamMemberVariables = () => {
+ return {
+ team,
+ userId: userID
+ };
+ };
+
+ const alterRole = graphql(`
+ mutation UpdateMemberRoleMutation($team: Slug!, $userId: ID!, $role: TeamRole!) {
+ setTeamMemberRole(slug: $team, userId: $userId, role: $role) {
+ slug
+ }
+ }
+ `);
+
+ const addReconcilerOptOut = graphql(`
+ mutation AddReconcilerOptOutMutation($team: Slug!, $userId: ID!, $reconciler: String!) {
+ addReconcilerOptOut(teamSlug: $team, userId: $userId, reconciler: $reconciler) {
+ role
+ }
+ }
+ `);
+
+ const removeReconcilerOptOut = graphql(`
+ mutation RemoveReconcilerOptOutMutation($team: Slug!, $userId: ID!, $reconciler: String!) {
+ removeReconcilerOptOut(teamSlug: $team, userId: $userId, reconciler: $reconciler) {
+ role
+ }
+ }
+ `);
+
+ let errors: string[] = [];
+ const updateRole = async (e: Event) => {
+ if (!e.target) return;
+ if (!(e.target instanceof HTMLSelectElement)) return;
+
+ await alterRole.mutate({
+ team,
+ userId: userID,
+ role: e.target?.value as TeamRole$options
+ });
+ dispatcher('updated', null);
+ };
+
+ const updateReconciler = async (enabled: boolean, reconciler: string) => {
+ if (enabled) {
+ await addReconcilerOptOut.mutate({
+ team,
+ userId: userID,
+ reconciler
+ });
+ } else {
+ await removeReconcilerOptOut.mutate({
+ team,
+ userId: userID,
+ reconciler
+ });
+ }
+ dispatcher('updated', null);
+ };
+</script>
+
+<Modal bind:open>
+ <svelte:fragment slot="header"><Heading>Edit member</Heading></svelte:fragment>
+
+ {#if $store.data}
+ {@const member = $store.data.team.member}
+
+ {#each errors as error}
+ <Alert variant="error">{error}</Alert>
+ {/each}
+
+ <div class="wrapper">
+ <Label>Name</Label>
+ <p>{member.user.name}</p>
+
+ <Select label="Role" style="width:150px" value={member.role} on:change={updateRole}>
+ <option value="OWNER">Owner</option>
+ <option value="MEMBER">Member</option>
+ </Select>
+
+ <Fieldset class="navds-checkbox-group navds-checkbox-group--medium">
+ <legend class="navds-fieldset__legend navds-label">Enabled features</legend>
+
+ {#each member.reconcilers as { reconciler, enabled }}
+ <Checkbox
+ value={reconciler.name}
+ checked={enabled}
+ on:change={() => {
+ updateReconciler(!enabled, reconciler.name);
+ }}
+ >
+ <span class="option">
+ {reconciler.displayName}
+ <HelpText title="" wrapperClass="tooltipAddMemberWrapper">
+ {reconciler.description}
+ </HelpText>
+ </span>
+ </Checkbox>
+ {/each}
+ </Fieldset>
+ </div>
+ {/if}
+
+ <svelte:fragment slot="footer"></svelte:fragment>
+</Modal>
+
+<style>
+ p {
+ margin: 0 0 1rem 0;
+ }
+ .wrapper {
+ min-width: 400px;
+ }
+
+ .option {
+ display: inline-flex;
+ gap: 0.5rem;
+ }
+
+ :global(.tooltipAddMemberWrapper) {
+ width: 200px;
+ }
+</style>
diff --git a/src/routes/team/[team]/(teamTabs)/repositories/+page.gql b/src/routes/team/[team]/(teamTabs)/repositories/+page.gql
index 22f87619..db70c6dd 100644
--- a/src/routes/team/[team]/(teamTabs)/repositories/+page.gql
+++ b/src/routes/team/[team]/(teamTabs)/repositories/+page.gql
@@ -1,23 +1,15 @@
-query Repositories($team: String!, $orderBy: OrderBy = { field: NAME, direction: ASC })
-@cache(policy: NetworkOnly) {
- team(name: $team) {
- githubRepositories(first: 20, orderBy: $orderBy) @paginate(mode: SinglePage) {
- totalCount
+query Repositories($team: Slug!, $limit: Int = 50, $offset: Int) @cache(policy: NetworkOnly) {
+ team(slug: $team) {
+ githubRepositories(limit: $limit, offset: $offset) {
pageInfo {
- from
- to
- startCursor
- endCursor
+ totalCount
hasNextPage
hasPreviousPage
}
- edges {
- node {
- name
- authorizations
- permissions
- roleName
- }
+ nodes {
+ name
+ authorizations
+ roleName
}
}
}
diff --git a/src/routes/team/[team]/(teamTabs)/repositories/+page.svelte b/src/routes/team/[team]/(teamTabs)/repositories/+page.svelte
index 440d8ebe..e91fe904 100644
--- a/src/routes/team/[team]/(teamTabs)/repositories/+page.svelte
+++ b/src/routes/team/[team]/(teamTabs)/repositories/+page.svelte
@@ -1,8 +1,9 @@
<script lang="ts">
import { page } from '$app/stores';
- import { OrderByField, PendingValue, RepositoryAuthorization, graphql } from '$houdini';
+ import { PendingValue, RepositoryAuthorization, graphql } from '$houdini';
import Card from '$lib/Card.svelte';
import Pagination from '$lib/Pagination.svelte';
+ import { changeParams, limitOffset, sortTable } from '$lib/pagination';
import {
Button,
HelpText,
@@ -15,9 +16,12 @@
Tr,
type TableSortState
} from '@nais/ds-svelte-community';
- import { sortTable } from '../../../../../helpers';
import type { PageData } from './$houdini';
+ /*
+ TODO: FIX THIS
+ */
+
export let data: PageData;
$: ({ Repositories, TeamRoles } = data);
@@ -27,6 +31,8 @@
$: teamName = $page.params.team;
+ $: ({ limit, offset } = limitOffset($Repositories.variables));
+
let sortState: TableSortState = {
orderBy: 'NAME',
direction: 'ascending'
@@ -45,33 +51,19 @@
case 'ADMIN':
return 'Can read, clone, and push to this repository. Can also manage issues, pull requests, and repository settings, including adding collaborators.';
case 'ISOC_TRIAGE_FOLLOWUP':
- return 'Gir ISOC mulighet til å følge opp';
+ return 'Give ISOC the opportunity to follow up';
default:
- return 'Ukjent rolle';
+ return 'Unknown role';
}
};
- const refetch = (key: string) => {
- const field = Object.values(OrderByField).find((value) => value === key);
- Repositories.fetch({
- variables: {
- team: teamName,
- orderBy: {
- field: field !== undefined ? field : 'NAME',
- direction: sortState.direction === 'descending' ? 'DESC' : 'ASC'
- }
- }
- });
- };
-
const authorizeRepositoryForDeploy = graphql(`
mutation AuthorizeRepository(
$authorization: RepositoryAuthorization!
$repository: String!
- $team: String!
+ $team: Slug!
) {
- authorizeRepository(authorization: $authorization, repository: $repository, team: $team) {
- name
+ authorizeRepository(authorization: $authorization, repoName: $repository, teamSlug: $team) {
authorizations
}
}
@@ -81,10 +73,9 @@
mutation DeauthorizeRepository(
$authorization: RepositoryAuthorization!
$repository: String!
- $team: String!
+ $team: Slug!
) {
- deauthorizeRepository(authorization: $authorization, repository: $repository, team: $team) {
- name
+ deauthorizeRepository(authorization: $authorization, repoName: $repository, teamSlug: $team) {
authorizations
}
}
@@ -106,7 +97,7 @@
};
</script>
-{#if team && team !== undefined}
+{#if team}
<Card>
<h3>Repositories</h3>
@@ -115,7 +106,7 @@
sort={sortState}
on:sortChange={(e) => {
const { key } = e.detail;
- sortState = sortTable(key, sortState, refetch);
+ sortState = sortTable(key, sortState);
}}
>
<Thead>
@@ -128,56 +119,63 @@
</Tr>
</Thead>
<Tbody>
- {#each team.githubRepositories.edges as repo}
+ {#each team.githubRepositories.nodes as repo}
<Tr>
- <Td><Link href="https://github.com/{repo.node.name}">{repo.node.name}</Link></Td>
+ <Td><Link href="https://github.com/{repo.name}">{repo.name}</Link></Td>
{#if teamRoles && teamRoles !== PendingValue && teamRoles.viewerIsMember}
- {#if repo.node.authorizations !== null && repo.node.name !== null}
+ {#if repo.authorizations !== null && repo.name !== null}
<Td>
- {#if repo.node.authorizations.includes('DEPLOY')}
+ {#if repo.authorizations.includes('DEPLOY')}
<Button
size="xsmall"
variant="danger"
on:click={() => {
- deauthorizeDeploy(teamName, repo.node.name);
- }}>Deauthorize</Button
+ deauthorizeDeploy(teamName, repo.name);
+ }}
>
+ Deauthorize
+ </Button>
{:else}
<Button
size="xsmall"
variant="primary-neutral"
on:click={() => {
- authorizeDeploy(teamName, repo.node.name);
- }}>Authorize</Button
+ authorizeDeploy(teamName, repo.name);
+ }}
>
+ Authorize
+ </Button>
{/if}
</Td>
{/if}
- <Td
- ><div class="roleHelpText">
- {repo.node.roleName}<HelpText placement={'left'} title="Role description"
- >The team's role for the repository.<br />{repo.node.roleName.toUpperCase()}: {roleDesc(
- repo.node.roleName.toUpperCase()
- )}</HelpText
- >
- </div></Td
- >
+ <Td>
+ <div class="roleHelpText">
+ {repo.roleName}
+ <HelpText placement={'left'} title="Role description">
+ The team's role for the repository.<br />{repo.roleName.toUpperCase()}:
+ {roleDesc(repo.roleName.toUpperCase())}
+ </HelpText>
+ </div>
+ </Td>
{/if}
</Tr>
+ {:else}
+ <Tr>
+ <Td colspan={99} style="background:var(--a-surface-info-subtle)">
+ No GitHub repositories for this team. You can link a repository to this team by giving
+ the team permissions on the repository on GitHub.
+ </Td>
+ </Tr>
{/each}
</Tbody>
</Table>
<Pagination
pageInfo={team.githubRepositories.pageInfo}
- totalCount={team.githubRepositories.totalCount}
- on:nextPage={() => {
- if (!$Repositories.pageInfo.hasNextPage) return;
- Repositories.loadNextPage();
- }}
- on:previousPage={() => {
- if (!$Repositories.pageInfo.hasPreviousPage) return;
- Repositories.loadPreviousPage();
+ {limit}
+ {offset}
+ changePage={(page) => {
+ changeParams({ page: page.toString() });
}}
/>
</Card>
diff --git a/src/routes/team/[team]/(teamTabs)/repositories/+page.ts b/src/routes/team/[team]/(teamTabs)/repositories/+page.ts
new file mode 100644
index 00000000..bd09d5a5
--- /dev/null
+++ b/src/routes/team/[team]/(teamTabs)/repositories/+page.ts
@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+import type { RepositoriesVariables } from './$houdini';
+export const _RepositoriesVariables: RepositoriesVariables = ({ url }) => {
+ const page = parseInt(url.searchParams.get('page') || '1');
+ if (!page || page < 1) {
+ throw error(400, 'Bad pagenumber');
+ }
+ const limit = 50;
+ const offset = (page - 1) * limit;
+
+ return { limit, offset };
+};
diff --git a/src/routes/team/[team]/(teamTabs)/settings/+page.gql b/src/routes/team/[team]/(teamTabs)/settings/+page.gql
index 2859e0e0..7265258f 100644
--- a/src/routes/team/[team]/(teamTabs)/settings/+page.gql
+++ b/src/routes/team/[team]/(teamTabs)/settings/+page.gql
@@ -1,22 +1,17 @@
-query TeamSettings($team: String!) @loading(cascade: true) {
- team(name: $team) {
- id
- name
- deployKey {
- key
- created
- expires
- }
- slackAlertsChannels {
- env
+query TeamSettings($team: Slug!) {
+ team(slug: $team) @loading {
+ id @loading
+ slug
+ purpose
+ slackChannel @loading
+ gitHubTeamSlug
+ azureGroupID
+ googleGroupEmail
+ googleArtifactRegistry
+ environments @loading(count: 2) {
name
+ gcpProjectID
+ slackAlertsChannel
}
- gcpProjects {
- id
- environment
- }
-
- slackChannel
- description
}
}
diff --git a/src/routes/team/[team]/(teamTabs)/settings/+page.svelte b/src/routes/team/[team]/(teamTabs)/settings/+page.svelte
index b9bc5593..303e17eb 100644
--- a/src/routes/team/[team]/(teamTabs)/settings/+page.svelte
+++ b/src/routes/team/[team]/(teamTabs)/settings/+page.svelte
@@ -4,11 +4,20 @@
import { PendingValue, graphql } from '$houdini';
import Card from '$lib/Card.svelte';
import Time from '$lib/Time.svelte';
- import { Alert, Button, CopyButton, Modal, Skeleton } from '@nais/ds-svelte-community';
- import { ArrowsCirclepathIcon, EyeIcon, EyeSlashIcon } from '@nais/ds-svelte-community/icons';
+ import { Alert, Button, CopyButton, Loader, Modal, Skeleton } from '@nais/ds-svelte-community';
+ import {
+ ArrowsCirclepathIcon,
+ ChatExclamationmarkIcon,
+ EyeIcon,
+ EyeSlashIcon
+ } from '@nais/ds-svelte-community/icons';
import type { PageData } from './$houdini';
+ import EditText from './EditText.svelte';
+
+ export let data: PageData;
+
const rotateKey = graphql(`
- mutation RotateDeployKey($team: String!) {
+ mutation RotateDeployKey($team: Slug!) {
changeDeployKey(team: $team) {
key
created
@@ -17,7 +26,30 @@
}
`);
- export let data: PageData;
+ const updateTeam = graphql(`
+ mutation UpdateTeam($slug: Slug!, $input: UpdateTeamInput!) {
+ updateTeam(slug: $slug, input: $input) {
+ purpose
+ slackChannel
+ environments {
+ slackAlertsChannel
+ }
+ }
+ }
+ `);
+
+ $: hookdResponse = graphql(`
+ query HookdDeployKey($team: Slug!) @load {
+ team(slug: $team) @loading(cascade: true) {
+ id
+ deployKey {
+ key
+ created
+ expires
+ }
+ }
+ }
+ `);
$: ({ TeamSettings } = data);
@@ -27,6 +59,50 @@
let showKey = false;
let showRotateKey = false;
+
+ let descriptionError = false;
+ let defaultSlackChannelError = false;
+ let slackChannelsError = false;
+
+ const globalAttributes = (obj: {
+ readonly azureGroupID: string | null;
+ readonly gitHubTeamSlug: string | null;
+ readonly googleGroupEmail: string | null;
+ readonly googleArtifactRegistry: string | null;
+ }) => {
+ const lines: { key: string; value: string }[] = [];
+
+ if (obj.googleArtifactRegistry) {
+ lines.push({
+ key: 'Artifact Registry repository',
+ value: formatGARRepo(obj.googleArtifactRegistry)
+ });
+ }
+ if (obj.gitHubTeamSlug) {
+ lines.push({ key: 'GitHub team', value: obj.gitHubTeamSlug });
+ }
+ if (obj.googleGroupEmail) {
+ lines.push({ key: 'Google group email', value: obj.googleGroupEmail });
+ }
+ if (obj.azureGroupID) {
+ lines.push({ key: 'Azure AD group ID', value: obj.azureGroupID });
+ }
+ return lines;
+ };
+
+ const envResources = (obj: { readonly gcpProjectID: string | null }) => {
+ const lines: { key: string; value: string }[] = [];
+
+ if (obj.gcpProjectID) {
+ lines.push({ key: 'GCP project ID', value: obj.gcpProjectID });
+ }
+ return lines;
+ };
+
+ const formatGARRepo = (repo: string) => {
+ const [, projectId, , location, , repository] = repo.split('/');
+ return `${location}-docker.pkg.dev/${projectId}/${repository}`;
+ };
</script>
{#if $TeamSettings.errors}
@@ -36,108 +112,212 @@
{/each}
</Alert>
{:else if teamSettings}
- <div style="margin-bottom: 1rem;">
- <Alert variant="info">
- Team settings currently managed by <a href="https://teams.nav.cloud.nais.io">Teams</a>
- <br />
- This functionality will be incorporated into this app eventually
- </Alert>
- </div>
<div class="grid">
<Card columns={6}>
<h3>{team}</h3>
{#if teamSettings.id === PendingValue}
<Skeleton variant="text" width="400px" />
{:else}
- <i>{teamSettings.description}</i>
+ <i>
+ <EditText
+ text={teamSettings.purpose}
+ on:save={async (e) => {
+ descriptionError = false;
+ const data = await updateTeam.mutate({
+ slug: team,
+ input: {
+ purpose: e.detail
+ }
+ });
+
+ if (data.errors) {
+ descriptionError = true;
+ }
+ }}
+ />
+ </i>
+
+ {#if descriptionError}
+ <Alert variant="error" size="small">
+ Error updating description. Please try again later.
+ </Alert>
+ {/if}
{/if}
- <h4>Slack channels</h4>
+ <h4><ChatExclamationmarkIcon /> Slack channels</h4>
{#if teamSettings.slackChannel !== PendingValue && teamSettings.slackChannel !== ''}
- <dl>
- <dt>Default slack-channel:</dt>
- <dd>{teamSettings.slackChannel}</dd>
- </dl>
+ <p>
+ <b>Default slack-channel:</b>
+ <EditText
+ text={teamSettings.slackChannel}
+ variant="textfield"
+ on:save={async (e) => {
+ defaultSlackChannelError = false;
+ const data = await updateTeam.mutate({
+ slug: team,
+ input: {
+ slackChannel: e.detail
+ }
+ });
+
+ if (data.errors) {
+ defaultSlackChannelError = true;
+ }
+ }}
+ />
+ </p>
+ {#if defaultSlackChannelError}
+ <Alert variant="error" size="small">
+ Error updating default slack-channel. Please try again later.
+ </Alert>
+ {/if}
{/if}
- {#if teamSettings.slackAlertsChannels && teamSettings.slackAlertsChannels.length > 0 && teamSettings.slackAlertsChannels[0].env !== PendingValue}
- <dl>
- <dh>Per-environment slack-channels to be used for alerts sent by the platform.</dh>
- {#each teamSettings.slackAlertsChannels as channel}
- <dt>{channel.env}:</dt>
- <dd>{channel.name}</dd>
+ {#if teamSettings.environments && teamSettings.environments.length > 0}
+ <p>
+ Per-environment slack-channels to be used for alerts sent by the platform.
+ {#each teamSettings.environments as env}
+ {#if env !== PendingValue}
+ <div class="channel">
+ <b>{env.name}:</b>
+ <EditText
+ text={env.slackAlertsChannel}
+ variant="textfield"
+ on:save={async (e) => {
+ slackChannelsError = false;
+ if (!teamSettings) {
+ return;
+ }
+
+ const updates = teamSettings.environments.map((c) => {
+ if (c === PendingValue || env === PendingValue) {
+ return {
+ environment: '',
+ channelName: ''
+ };
+ }
+
+ if (c.name === env.name) {
+ return {
+ environment: c.name,
+ channelName: e.detail
+ };
+ }
+
+ return {
+ environment: c.name,
+ channelName: c.slackAlertsChannel
+ };
+ });
+
+ const data = await updateTeam.mutate({
+ slug: team,
+ input: {
+ slackAlertsChannels: updates
+ }
+ });
+
+ if (data.errors) {
+ slackChannelsError = true;
+ }
+ }}
+ />
+ </div>
+ {/if}
{/each}
- </dl>
+ </p>
+ {#if slackChannelsError}
+ <Alert variant="error" size="small">
+ Error updating slack-channels. Please try again later.
+ </Alert>
+ {/if}
{/if}
</Card>
<Card columns={6}>
<h3>Managed resources</h3>
- {#if teamSettings.gcpProjects.length > 0 && teamSettings.gcpProjects[0].environment !== PendingValue}
- {#each teamSettings.gcpProjects as project}
- {#if project.environment !== 'ci-gcp'}
- <dl>
- <dt>GCP project ID ({project.environment}):</dt>
- <dd>{project.id}</dd>
- </dl>
- {/if}
+ {#if teamSettings.id === PendingValue}
+ <Loader />
+ {:else}
+ <h4>Global</h4>
+ <dl>
+ {#each globalAttributes(teamSettings) as { key, value }}
+ <dt>{key}:</dt>
+ <dd>{value}</dd>
+ {:else}
+ <Alert variant="info" size="small">No managed resources</Alert>
+ {/each}
+ </dl>
+
+ {#each teamSettings.environments as env}
+ <h4>{env.name}</h4>
+ <dl>
+ {#each envResources(env) as { key, value }}
+ <dt>{key}:</dt>
+ <dd>{value}</dd>
+ {:else}
+ <Alert variant="info" size="small">No managed resources</Alert>
+ {/each}
+ </dl>
{/each}
{/if}
</Card>
<Card columns={12}>
<h3>Deploy key</h3>
- <dl>
- <dt>Created:</dt>
- {#if teamSettings.deployKey.key === PendingValue}
- <dd><Skeleton variant="text" /></dd>
- {:else}
- <dd><Time time={teamSettings.deployKey.created} distance={true} /></dd>
- {/if}
- <dt>Expires:</dt>
- {#if teamSettings.deployKey.expires === PendingValue}
- <dd><Skeleton variant="text" /></dd>
- {:else}
- <dd><Time time={teamSettings?.deployKey?.expires} distance={true} /></dd>
- {/if}
- <dt>Key:</dt>
- <dd>
- <div class="deployKey">
- {#if showKey}
- {teamSettings?.deployKey?.key}
- <Button
- size="xsmall"
- variant="tertiary"
- on:click={() => {
- showKey = !showKey;
- }}
- >
- <svelte:fragment slot="icon-left"><EyeSlashIcon /></svelte:fragment></Button
- >
- {:else}
- {#if teamSettings.deployKey.key === PendingValue}
- <dd><Skeleton variant="text" /></dd>
+
+ {#if $hookdResponse.data?.team}
+ {@const deployKey = $hookdResponse.data.team.deployKey}
+ <dl>
+ <dt>Created:</dt>
+ {#if deployKey.key === PendingValue}
+ <dd><Skeleton variant="text" /></dd>
+ {:else}
+ <dd><Time time={deployKey.created} distance={true} /></dd>
+ {/if}
+ <dt>Expires:</dt>
+ {#if deployKey.expires === PendingValue}
+ <dd><Skeleton variant="text" /></dd>
+ {:else}
+ <dd><Time time={deployKey.expires} distance={true} /></dd>
+ {/if}
+ <dt>Key:</dt>
+ <dd>
+ <div class="deployKey">
+ {#if showKey}
+ {deployKey.key}
+ <Button
+ size="xsmall"
+ variant="tertiary"
+ on:click={() => {
+ showKey = !showKey;
+ }}
+ >
+ <svelte:fragment slot="icon-left"><EyeSlashIcon /></svelte:fragment></Button
+ >
{:else}
- {teamSettings?.deployKey?.key.replaceAll(/./g, '*')}
+ {#if deployKey.key === PendingValue}
+ <dd><Skeleton variant="text" /></dd>
+ {:else}
+ {deployKey.key.replaceAll(/./g, '*')}
+ {/if}
+ <Button
+ size="xsmall"
+ variant="tertiary"
+ on:click={() => {
+ showKey = !showKey;
+ }}
+ >
+ <svelte:fragment slot="icon-left"><EyeIcon /></svelte:fragment></Button
+ >
{/if}
- <Button
- size="xsmall"
- variant="tertiary"
- on:click={() => {
- showKey = !showKey;
- }}
- >
- <svelte:fragment slot="icon-left"><EyeIcon /></svelte:fragment></Button
- >
- {/if}
- </div>
- </dd>
- </dl>
- <div class="buttons">
- {#if teamSettings?.deployKey?.key !== PendingValue}
+ </div>
+ </dd>
+ </dl>
+ <div class="buttons">
<div class="button">
<CopyButton
text="Copy key"
activeText="Key copied"
variant="action"
- copyText={teamSettings?.deployKey?.key || ''}
+ copyText={deployKey.key === PendingValue ? '' : deployKey.key}
size="small"
/>
</div>
@@ -153,8 +333,10 @@
Rotate key</Button
>
</div>
- {/if}
- </div>
+ </div>
+ {:else}
+ <Alert variant="error">Error getting deploy key. Please try again later.</Alert>
+ {/if}
</Card>
{#if browser}
<Modal bind:open={showRotateKey} closeButton={false}>
@@ -184,7 +366,7 @@
<style>
dl {
display: block;
- margin-block-start: 1em;
+ margin-block-start: 0.2em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
@@ -205,7 +387,7 @@
margin-bottom: 0.5rem;
}
h4 {
- margin: 0.8rem 0rem;
+ margin: 0.8rem 0rem 0.2rem 0;
}
i {
margin-bottom: 0.5rem;
@@ -224,4 +406,10 @@
column-gap: 1rem;
row-gap: 1rem;
}
+
+ .channel {
+ display: flex;
+ flex-direction: row;
+ gap: 0.5rem;
+ }
</style>
diff --git a/src/routes/team/[team]/(teamTabs)/settings/EditText.svelte b/src/routes/team/[team]/(teamTabs)/settings/EditText.svelte
new file mode 100644
index 00000000..78ef05cb
--- /dev/null
+++ b/src/routes/team/[team]/(teamTabs)/settings/EditText.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+ import { Button, TextField } from '@nais/ds-svelte-community';
+ import { PencilIcon } from '@nais/ds-svelte-community/icons';
+ import { createEventDispatcher } from 'svelte';
+
+ export let text: string;
+ export let variant: 'textfield' | 'textarea' = 'textarea';
+
+ const distpatch = createEventDispatcher<{ save: string }>();
+
+ let newText = text;
+ let edit = false;
+ let height: number | undefined = undefined;
+
+ const reset = () => {
+ newText = text;
+ edit = false;
+ };
+
+ const save = () => {
+ distpatch('save', newText);
+ edit = false;
+ };
+</script>
+
+{#if edit}
+ <div style:height={height + 'px'} class:hidden={!edit}>
+ {#if variant === 'textfield'}
+ <TextField size="small" bind:value={newText} hideLabel={true} />
+ {:else}
+ <textarea
+ class="navds-text-field__input navds-body-short navds-body-short--medium"
+ bind:value={newText}
+ />
+ {/if}
+ <Button on:click={save} size="xsmall">Save</Button>
+ <Button on:click={reset} size="xsmall" variant="secondary-neutral">Cancel</Button>
+ </div>
+{:else if height !== undefined}
+ <div bind:clientHeight={height} class:hidden={edit}>
+ <span class:tall={variant == 'textarea'}>{text}</span>
+ <Button
+ on:click={() => {
+ edit = true;
+ }}
+ size="xsmall"
+ iconOnly={true}
+ variant="tertiary"
+ >
+ <svelte:fragment slot="icon-left"><PencilIcon /></svelte:fragment>
+ </Button>
+ </div>
+{:else}
+ <!--
+ some weird problems when doing server side rendering. Reduce jumping by rendering with less components
+ -->
+ <span bind:clientHeight={height}>{text}</span>
+{/if}
+
+<style>
+ div {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ textarea {
+ height: 100%;
+ }
+
+ .hidden {
+ display: none;
+ }
+
+ span {
+ margin: 0;
+ }
+ span.tall {
+ margin: 0.5rem 0;
+ }
+</style>
diff --git a/src/routes/team/[team]/(teamTabs)/utilization/+page.gql b/src/routes/team/[team]/(teamTabs)/utilization/+page.gql
index 0bace740..37070fe3 100644
--- a/src/routes/team/[team]/(teamTabs)/utilization/+page.gql
+++ b/src/routes/team/[team]/(teamTabs)/utilization/+page.gql
@@ -1,4 +1,4 @@
-query ResourceUtilizationForTeam($team: String!, $from: Date!, $to: Date!) {
+query ResourceUtilizationForTeam($team: Slug!, $from: Date!, $to: Date!) {
resourceUtilizationForTeam(team: $team, from: $from, to: $to) @loading(count: 2) {
env @loading
cpu {
diff --git a/src/routes/team/[team]/(teamTabs)/vulnerabilities/+page.gql b/src/routes/team/[team]/(teamTabs)/vulnerabilities/+page.gql
index f579bd00..37b4f0a4 100644
--- a/src/routes/team/[team]/(teamTabs)/vulnerabilities/+page.gql
+++ b/src/routes/team/[team]/(teamTabs)/vulnerabilities/+page.gql
@@ -1,37 +1,34 @@
-query TeamVulnerabilities($team: String!, $orderBy: OrderBy = {
- field: SEVERITY_CRITICAL
- direction: DESC
-}) @loading(count: 5, cascade: true) {
- team(name: $team) {
- id
- vulnerabilities(first: 30, orderBy: $orderBy) @loading @paginate(mode: SinglePage) {
- totalCount
- pageInfo {
- hasNextPage
- hasPreviousPage
- startCursor
- endCursor
- from
- to
- }
+query TeamVulnerabilities(
+ $limit: Int
+ $offset: Int
+ $team: Slug!
+ $orderBy: OrderBy = { field: SEVERITY_CRITICAL, direction: DESC }
+) {
+ team(slug: $team) @loading {
+ id @loading
+ slug
+ vulnerabilities(limit: $limit, offset: $offset, orderBy: $orderBy) @loading {
+ pageInfo @loading {
+ totalCount
+ hasNextPage
+ hasPreviousPage
+ }
- edges {
- node {
- appName
- env
- findingsLink
- hasBom
- summary{
- riskScore
- unassigned
- total
- critical
- high
- medium
- low
- }
- }
- }
- }
- }
+ nodes {
+ appName
+ env
+ findingsLink
+ hasBom
+ summary {
+ riskScore
+ unassigned
+ total
+ critical
+ high
+ medium
+ low
+ }
+ }
+ }
+ }
}
diff --git a/src/routes/team/[team]/(teamTabs)/vulnerabilities/+page.svelte b/src/routes/team/[team]/(teamTabs)/vulnerabilities/+page.svelte
index 24e25647..030a7b35 100644
--- a/src/routes/team/[team]/(teamTabs)/vulnerabilities/+page.svelte
+++ b/src/routes/team/[team]/(teamTabs)/vulnerabilities/+page.svelte
@@ -5,8 +5,14 @@
import Card from '$lib/Card.svelte';
import Pagination from '$lib/Pagination.svelte';
import { logEvent } from '$lib/amplitude';
+ import VulnerabilitiesGraph from '$lib/components/VulnerabilitiesGraph.svelte';
import Vulnerability from '$lib/components/Vulnerability.svelte';
- import type { TableSortState } from '@nais/ds-svelte-community';
+ import {
+ changeParams,
+ sortTable,
+ tableGraphDirection,
+ tableStateFromVariables
+ } from '$lib/pagination';
import {
Alert,
Skeleton,
@@ -19,18 +25,19 @@
Tr
} from '@nais/ds-svelte-community';
import { ExclamationmarkTriangleFillIcon } from '@nais/ds-svelte-community/icons';
- import { sortTable } from '../../../../../helpers';
import type { PageData } from './$houdini';
- $: teamName = $page.params.team;
export let data: PageData;
$: ({ TeamVulnerabilities } = data);
$: team = $TeamVulnerabilities.data?.team;
- let sortState: TableSortState = {
- orderBy: 'SEVERITY_CRITICAL',
- direction: 'descending'
- };
+ $: teamName = $page.params.team;
+
+ $: ({ sortState, limit, offset } = tableStateFromVariables(
+ $TeamVulnerabilities.variables,
+ OrderByField.SEVERITY_CRITICAL,
+ 'descending'
+ ));
const onClick = () => {
let props = {};
@@ -39,19 +46,6 @@
};
logEvent('pageview', props);
};
-
- const refetch = (key: string) => {
- const field = Object.values(OrderByField).find((value) => value === key);
- TeamVulnerabilities.fetch({
- variables: {
- team: teamName,
- orderBy: {
- field: field !== undefined ? field : 'SEVERITY_CRITICAL',
- direction: sortState.direction === 'descending' ? 'DESC' : 'ASC'
- }
- }
- });
- };
</script>
{#if $TeamVulnerabilities.errors}
@@ -62,13 +56,17 @@
</Alert>
{:else}
<div class="grid">
+ <Card columns={12}>
+ <VulnerabilitiesGraph team={teamName} />
+ </Card>
<Card columns={12}>
<Table
size="small"
sort={sortState}
on:sortChange={(e) => {
const { key } = e.detail;
- sortState = sortTable(key, sortState, refetch);
+ const ss = sortTable(key, sortState);
+ changeParams({ col: ss.orderBy, dir: tableGraphDirection[ss.direction] });
}}
>
<Thead>
@@ -93,20 +91,18 @@
{/each}
</Tr>
{:else}
- {#each team.vulnerabilities.edges as edge}
+ {#each team.vulnerabilities.nodes as node}
<Tr>
<Td>
- <a href="/team/{teamName}/{edge.node.env}/app/{edge.node.appName}"
- >{edge.node.appName}</a
- >
+ <a href="/team/{teamName}/{node.env}/app/{node.appName}">{node.appName}</a>
</Td>
- <Td>{edge.node.env}</Td>
- {#if edge.node.summary !== null}
- {#if !edge.node.hasBom}
+ <Td>{node.env}</Td>
+ {#if node.summary !== null}
+ {#if !node.hasBom}
<Td colspan={8}>
<div style="display: flex; align-items: center">
<span style="color:lightslategray; font-size:16px">
- <a href={edge.node.findingsLink}>View</a>
+ <a href={node.findingsLink}>View</a>
</span>
<div class="sbom">
<Tooltip
@@ -123,47 +119,44 @@
{:else}
<Td>
<span style="color:lightslategray; font-size:16px">
- <a href={edge.node.findingsLink} on:click={onClick}>View</a>
+ <a href={node.findingsLink} on:click={onClick}>View</a>
</span>
</Td>
<Td>
<div class="vulnerability">
- <Vulnerability severity="critical" count={edge.node.summary.critical} />
+ <Vulnerability severity="critical" count={node.summary.critical} />
</div>
</Td>
<Td>
<div class="vulnerability">
- <Vulnerability severity="high" count={edge.node.summary.high} />
+ <Vulnerability severity="high" count={node.summary.high} />
</div>
</Td>
<Td>
<div class="vulnerability">
- <Vulnerability severity="medium" count={edge.node.summary.medium} />
+ <Vulnerability severity="medium" count={node.summary.medium} />
</div>
</Td>
<Td>
<div class="vulnerability">
- <Vulnerability severity="low" count={edge.node.summary.low} />
+ <Vulnerability severity="low" count={node.summary.low} />
</div>
</Td>
<Td>
<div class="vulnerability">
- <Vulnerability
- severity="unassigned"
- count={edge.node.summary.unassigned}
- />
+ <Vulnerability severity="unassigned" count={node.summary.unassigned} />
</div>
</Td>
<Td>
<div class="vulnerability">
- {#if edge.node.summary.riskScore === -1}
- <Vulnerability severity="low" count={edge.node.summary.riskScore} />
+ {#if node.summary.riskScore === -1}
+ <Vulnerability severity="low" count={node.summary.riskScore} />
{:else}
<Tooltip
placement="left"
content="Calculated based on the number of vulnerabilities, includes unassigned"
>
- <span class="na">{edge.node.summary.riskScore}</span>
+ <span class="na">{node.summary.riskScore}</span>
</Tooltip>
{/if}
</div>
@@ -197,26 +190,24 @@
</Td>
{/if}
</Tr>
+ {:else}
+ <Tr>
+ <Td colspan={9}>No applications with vulnerability data found</Td>
+ </Tr>
{/each}
{/if}
{/if}
</Tbody>
</Table>
- {#if team !== undefined}
- {#if team.id !== PendingValue}
- <Pagination
- totalCount={team.vulnerabilities.totalCount}
- pageInfo={team.vulnerabilities.pageInfo}
- on:nextPage={() => {
- if (!$TeamVulnerabilities.pageInfo.hasNextPage) return;
- TeamVulnerabilities.loadNextPage();
- }}
- on:previousPage={() => {
- if (!$TeamVulnerabilities.pageInfo.hasPreviousPage) return;
- TeamVulnerabilities.loadPreviousPage();
- }}
- />
- {/if}
+ {#if team?.vulnerabilities.pageInfo !== PendingValue}
+ <Pagination
+ pageInfo={team?.vulnerabilities.pageInfo}
+ {limit}
+ {offset}
+ changePage={(e) => {
+ changeParams({ page: e.toString() });
+ }}
+ />
{/if}
</Card>
</div>
diff --git a/src/routes/team/[team]/(teamTabs)/vulnerabilities/+page.ts b/src/routes/team/[team]/(teamTabs)/vulnerabilities/+page.ts
new file mode 100644
index 00000000..10249600
--- /dev/null
+++ b/src/routes/team/[team]/(teamTabs)/vulnerabilities/+page.ts
@@ -0,0 +1,14 @@
+import { error } from '@sveltejs/kit';
+import type { TeamVulnerabilitiesVariables } from './$houdini';
+export const _TeamVulnerabilitiesVariables: TeamVulnerabilitiesVariables = ({ url }) => {
+ const page = parseInt(url.searchParams.get('page') || '1');
+ if (!page || page < 1) {
+ throw error(400, 'Bad pagenumber');
+ }
+ const limit = 10;
+ const offset = (page - 1) * limit;
+ const field = (url.searchParams.get('col') || 'STATUS') as never;
+ const direction = (url.searchParams.get('dir') || 'ASC') as never;
+
+ return { limit, offset, orderBy: { field, direction } };
+};
diff --git a/src/routes/team/[team]/[env]/app/[app]/+layout.gql b/src/routes/team/[team]/[env]/app/[app]/+layout.gql
index 2714baab..8486e27d 100644
--- a/src/routes/team/[team]/[env]/app/[app]/+layout.gql
+++ b/src/routes/team/[team]/[env]/app/[app]/+layout.gql
@@ -1,4 +1,4 @@
-query AppNotificationDot($app: String!, $team: String!, $env: String!) {
+query AppNotificationDot($app: String!, $team: Slug!, $env: String!) {
app(name: $app, team: $team, env: $env) {
appState {
state
diff --git a/src/routes/team/[team]/[env]/app/[app]/+page.gql b/src/routes/team/[team]/[env]/app/[app]/+page.gql
index 9a17367f..eda313e5 100644
--- a/src/routes/team/[team]/[env]/app/[app]/+page.gql
+++ b/src/routes/team/[team]/[env]/app/[app]/+page.gql
@@ -1,4 +1,4 @@
-query App($app: String!, $team: String!, $env: String!) @cache(policy: NetworkOnly) {
+query App($app: String!, $team: Slug!, $env: String!) @cache(policy: NetworkOnly) {
app(name: $app, team: $team, env: $env) @loading(cascade: true) {
name
ingresses
diff --git a/src/routes/team/[team]/[env]/app/[app]/+page.svelte b/src/routes/team/[team]/[env]/app/[app]/+page.svelte
index 52e6d6b5..e5eae663 100644
--- a/src/routes/team/[team]/[env]/app/[app]/+page.svelte
+++ b/src/routes/team/[team]/[env]/app/[app]/+page.svelte
@@ -21,7 +21,7 @@
};
const utilization = graphql(`
- query CurrentResourceUtilizationForApp($app: String!, $team: String!, $env: String!) @load {
+ query CurrentResourceUtilizationForApp($app: String!, $team: Slug!, $env: String!) @load {
currentResourceUtilizationForApp(app: $app, team: $team, env: $env) @loading {
cpu {
utilization
diff --git a/src/routes/team/[team]/[env]/app/[app]/Image.svelte b/src/routes/team/[team]/[env]/app/[app]/Image.svelte
index df019f14..82edfd18 100644
--- a/src/routes/team/[team]/[env]/app/[app]/Image.svelte
+++ b/src/routes/team/[team]/[env]/app/[app]/Image.svelte
@@ -35,7 +35,7 @@
};
const vulnerabilities = graphql(`
- query VulnerabilitiesForApp($app: String!, $team: String!, $env: String!) @load {
+ query VulnerabilitiesForApp($app: String!, $team: Slug!, $env: String!) @load {
app(name: $app, team: $team, env: $env) @loading {
vulnerabilities @loading {
findingsLink
diff --git a/src/routes/team/[team]/[env]/app/[app]/cost/+page.gql b/src/routes/team/[team]/[env]/app/[app]/cost/+page.gql
index 0819a3ba..02c01a42 100644
--- a/src/routes/team/[team]/[env]/app/[app]/cost/+page.gql
+++ b/src/routes/team/[team]/[env]/app/[app]/cost/+page.gql
@@ -1,4 +1,4 @@
-query AppCost($app: String!, $team: String!, $env: String!, $from: Date!, $to: Date!)
+query AppCost($app: String!, $team: Slug!, $env: String!, $from: Date!, $to: Date!)
@cache(policy: NetworkOnly) {
dailyCostForApp(app: $app, team: $team, env: $env, from: $from, to: $to) {
series {
diff --git a/src/routes/team/[team]/[env]/app/[app]/deploys/+page.gql b/src/routes/team/[team]/[env]/app/[app]/deploys/+page.gql
index 725140a0..3b665cae 100644
--- a/src/routes/team/[team]/[env]/app/[app]/deploys/+page.gql
+++ b/src/routes/team/[team]/[env]/app/[app]/deploys/+page.gql
@@ -1,26 +1,24 @@
-query AppDeploys($app: String!, $team: String!, $env: String!) @loading {
+query AppDeploys($app: String!, $team: Slug!, $env: String!) @loading {
app(name: $app, team: $team, env: $env) {
name @loading
deployInfo {
history {
- ... on DeploymentConnection {
- edges @loading(count: 5) {
- node {
- id
- resources {
- group
- kind
- name
- version
- }
- statuses {
- status
- message
- created
- }
+ ... on DeploymentList {
+ nodes @loading(count: 5) {
+ id
+ resources {
+ group
+ kind
+ name
+ version
+ }
+ statuses {
+ status
+ message
created
- repository
}
+ created
+ repository
}
}
... on Error {
diff --git a/src/routes/team/[team]/[env]/app/[app]/deploys/+page.svelte b/src/routes/team/[team]/[env]/app/[app]/deploys/+page.svelte
index 2c03af5e..f3a37dfd 100644
--- a/src/routes/team/[team]/[env]/app/[app]/deploys/+page.svelte
+++ b/src/routes/team/[team]/[env]/app/[app]/deploys/+page.svelte
@@ -53,30 +53,30 @@
{/each}
</Tr>
{/each}
- {:else if $AppDeploys.data.app.deployInfo.history.__typename === 'DeploymentConnection'}
- {#each $AppDeploys.data.app.deployInfo.history.edges as edge}
+ {:else if $AppDeploys.data.app.deployInfo.history.__typename === 'DeploymentList'}
+ {#each $AppDeploys.data.app.deployInfo.history.nodes as node}
<Tr>
<Td>
- {#each edge.node.resources as resource}
+ {#each node.resources as resource}
<span style="color:var(--a-gray-600)">{resource.kind}:</span>
{resource.name}
<br />
{/each}
</Td>
<Td>
- <Time time={new Date(edge.node.created)} distance={true} />
+ <Time time={new Date(node.created)} distance={true} />
</Td>
<Td>
- <Tooltip content={edge.node.statuses[0]?.message || ''}
- ><DeploymentStatus status={edge.node.statuses[0]?.status} /></Tooltip
+ <Tooltip content={node.statuses[0]?.message || ''}
+ ><DeploymentStatus status={node.statuses[0]?.status} /></Tooltip
>
</Td>
<Td>
- {#if edge.node.repository}
+ {#if node.repository}
<Button
size="xsmall"
variant="secondary"
- href="https://github.com/{edge.node.repository}"
+ href="https://github.com/{node.repository}"
as="a"
>
<svelte:fragment slot="icon-left"><BranchingIcon /></svelte:fragment
diff --git a/src/routes/team/[team]/[env]/app/[app]/logs/+page.gql b/src/routes/team/[team]/[env]/app/[app]/logs/+page.gql
index 30c4adbc..0df40bef 100644
--- a/src/routes/team/[team]/[env]/app/[app]/logs/+page.gql
+++ b/src/routes/team/[team]/[env]/app/[app]/logs/+page.gql
@@ -1,4 +1,4 @@
-query Instances($app: String!, $team: String!, $env: String!) {
+query Instances($app: String!, $team: Slug!, $env: String!) {
app(name: $app, team: $team, env: $env) {
instances {
name
diff --git a/src/routes/team/[team]/[env]/app/[app]/status/+page.gql b/src/routes/team/[team]/[env]/app/[app]/status/+page.gql
index 5c02ad3b..3db18f61 100644
--- a/src/routes/team/[team]/[env]/app/[app]/status/+page.gql
+++ b/src/routes/team/[team]/[env]/app/[app]/status/+page.gql
@@ -1,4 +1,4 @@
-query AppNotificationState($app: String!, $team: String!, $env: String!)
+query AppNotificationState($app: String!, $team: Slug!, $env: String!)
@cache(policy: NetworkOnly)
@loading {
app(name: $app, team: $team, env: $env) @loading {
diff --git a/src/routes/team/[team]/[env]/app/[app]/utilization/+page.gql b/src/routes/team/[team]/[env]/app/[app]/utilization/+page.gql
index d7c890e9..e98bad79 100644
--- a/src/routes/team/[team]/[env]/app/[app]/utilization/+page.gql
+++ b/src/routes/team/[team]/[env]/app/[app]/utilization/+page.gql
@@ -1,6 +1,6 @@
query ResourceUtilizationForApp(
$app: String!
- $team: String!
+ $team: Slug!
$env: String!
$from: Date
$to: Date!
diff --git a/src/routes/team/[team]/[env]/app/[app]/yaml/+page.gql b/src/routes/team/[team]/[env]/app/[app]/yaml/+page.gql
index 9078b332..b66bb152 100644
--- a/src/routes/team/[team]/[env]/app/[app]/yaml/+page.gql
+++ b/src/routes/team/[team]/[env]/app/[app]/yaml/+page.gql
@@ -1,4 +1,4 @@
-query AppManifest($app: String!, $team: String!, $env: String!) @loading(cascade: true) {
+query AppManifest($app: String!, $team: Slug!, $env: String!) @loading(cascade: true) {
app(name: $app, team: $team, env: $env) {
name
manifest
diff --git a/src/routes/team/[team]/[env]/job/[job]/+layout.gql b/src/routes/team/[team]/[env]/job/[job]/+layout.gql
index a6c563b0..3ed68683 100644
--- a/src/routes/team/[team]/[env]/job/[job]/+layout.gql
+++ b/src/routes/team/[team]/[env]/job/[job]/+layout.gql
@@ -1,4 +1,4 @@
-query JobNotificationState($job: String!, $team: String!, $env: String!) @loading(cascade: true) {
+query JobNotificationState($job: String!, $team: Slug!, $env: String!) @loading(cascade: true) {
naisjob(name: $job, team: $team, env: $env) {
jobState {
state
diff --git a/src/routes/team/[team]/[env]/job/[job]/+page.gql b/src/routes/team/[team]/[env]/job/[job]/+page.gql
index 3c131425..08f9ac00 100644
--- a/src/routes/team/[team]/[env]/job/[job]/+page.gql
+++ b/src/routes/team/[team]/[env]/job/[job]/+page.gql
@@ -1,4 +1,4 @@
-query Job($job: String!, $team: String!, $env: String!) @cache(policy: NetworkOnly) {
+query Job($job: String!, $team: Slug!, $env: String!) @cache(policy: NetworkOnly) {
naisjob(name: $job, team: $team, env: $env) @loading(cascade: true) {
name
schedule
diff --git a/src/routes/team/[team]/[env]/job/[job]/cost/+page.gql b/src/routes/team/[team]/[env]/job/[job]/cost/+page.gql
index fc9e19a0..28ab34d7 100644
--- a/src/routes/team/[team]/[env]/job/[job]/cost/+page.gql
+++ b/src/routes/team/[team]/[env]/job/[job]/cost/+page.gql
@@ -1,4 +1,4 @@
-query JobCost($job: String!, $team: String!, $env: String!, $from: Date!, $to: Date!) {
+query JobCost($job: String!, $team: Slug!, $env: String!, $from: Date!, $to: Date!) {
dailyCostForApp(app: $job, team: $team, env: $env, from: $from, to: $to) {
series {
costType
diff --git a/src/routes/team/[team]/[env]/job/[job]/deploys/+page.gql b/src/routes/team/[team]/[env]/job/[job]/deploys/+page.gql
index 7cea157f..7acfa2cd 100644
--- a/src/routes/team/[team]/[env]/job/[job]/deploys/+page.gql
+++ b/src/routes/team/[team]/[env]/job/[job]/deploys/+page.gql
@@ -1,26 +1,24 @@
-query JobDeploys($job: String!, $team: String!, $env: String!) @loading {
+query JobDeploys($job: String!, $team: Slug!, $env: String!) @loading {
naisjob(name: $job, team: $team, env: $env) {
name @loading
deployInfo {
history {
- ... on DeploymentConnection {
- edges @loading(count: 5) {
- node {
- id
- resources {
- group
- kind
- name
- version
- }
- statuses {
- status
- message
- created
- }
+ ... on DeploymentList {
+ nodes @loading(count: 5) {
+ id
+ resources {
+ group
+ kind
+ name
+ version
+ }
+ statuses {
+ status
+ message
created
- repository
}
+ created
+ repository
}
}
... on Error {
diff --git a/src/routes/team/[team]/[env]/job/[job]/deploys/+page.svelte b/src/routes/team/[team]/[env]/job/[job]/deploys/+page.svelte
index ac7fee6e..444aa710 100644
--- a/src/routes/team/[team]/[env]/job/[job]/deploys/+page.svelte
+++ b/src/routes/team/[team]/[env]/job/[job]/deploys/+page.svelte
@@ -53,30 +53,30 @@
{/each}
</Tr>
{/each}
- {:else if $JobDeploys.data.naisjob.deployInfo.history.__typename === 'DeploymentConnection'}
- {#each $JobDeploys.data.naisjob.deployInfo.history.edges as edge}
+ {:else if $JobDeploys.data.naisjob.deployInfo.history.__typename === 'DeploymentList'}
+ {#each $JobDeploys.data.naisjob.deployInfo.history.nodes as node}
<Tr>
<Td>
- {#each edge.node.resources as resource}
+ {#each node.resources as resource}
<span style="color:var(--a-gray-600)">{resource.kind}:</span>
{resource.name}
<br />
{/each}
</Td>
<Td>
- <Time time={new Date(edge.node.created)} distance={true} />
+ <Time time={new Date(node.created)} distance={true} />
</Td>
<Td>
- <Tooltip content={edge.node.statuses[0].message || ''}
- ><DeploymentStatus status={edge.node.statuses[0].status} /></Tooltip
+ <Tooltip content={node.statuses[0].message || ''}
+ ><DeploymentStatus status={node.statuses[0].status} /></Tooltip
>
</Td>
<Td>
- {#if edge.node.repository}
+ {#if node.repository}
<Button
size="xsmall"
variant="secondary"
- href="https://github.com/{edge.node.repository}"
+ href="https://github.com/{node.repository}"
as="a"
>
<svelte:fragment slot="icon-left"><BranchingIcon /></svelte:fragment
diff --git a/src/routes/team/[team]/[env]/job/[job]/logs/+page.gql b/src/routes/team/[team]/[env]/job/[job]/logs/+page.gql
index a773ec08..5a6ed722 100644
--- a/src/routes/team/[team]/[env]/job/[job]/logs/+page.gql
+++ b/src/routes/team/[team]/[env]/job/[job]/logs/+page.gql
@@ -1,4 +1,4 @@
-query RunsWithPodNames($job: String!, $team: String!, $env: String!) {
+query RunsWithPodNames($job: String!, $team: Slug!, $env: String!) {
naisjob(name: $job, env: $env, team: $team) {
name
runs {
diff --git a/src/routes/team/[team]/[env]/job/[job]/status/+page.gql b/src/routes/team/[team]/[env]/job/[job]/status/+page.gql
index b2575218..b5ec9953 100644
--- a/src/routes/team/[team]/[env]/job/[job]/status/+page.gql
+++ b/src/routes/team/[team]/[env]/job/[job]/status/+page.gql
@@ -1,4 +1,4 @@
-query JobStatusDetailed($job: String!, $team: String!, $env: String!) {
+query JobStatusDetailed($job: String!, $team: Slug!, $env: String!) {
naisjob(name: $job, team: $team, env: $env) @loading(cascade: true) {
name @loading
diff --git a/src/routes/team/[team]/[env]/job/[job]/yaml/+page.gql b/src/routes/team/[team]/[env]/job/[job]/yaml/+page.gql
index ed16bd3d..005cda91 100644
--- a/src/routes/team/[team]/[env]/job/[job]/yaml/+page.gql
+++ b/src/routes/team/[team]/[env]/job/[job]/yaml/+page.gql
@@ -1,4 +1,4 @@
-query JobManifest($job: String!, $team: String!, $env: String!) @loading(cascade: true) {
+query JobManifest($job: String!, $team: Slug!, $env: String!) @loading(cascade: true) {
naisjob(name: $job, team: $team, env: $env) {
name
manifest
diff --git a/src/routes/team/create/+page.server.ts b/src/routes/team/create/+page.server.ts
new file mode 100644
index 00000000..b316ff09
--- /dev/null
+++ b/src/routes/team/create/+page.server.ts
@@ -0,0 +1,33 @@
+import { graphql } from '$houdini';
+import { redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+
+export const actions = {
+ default: async (event) => {
+ const query = graphql(`
+ mutation CreateTeam($input: CreateTeamInput!) {
+ createTeam(input: $input) {
+ slug
+ }
+ }
+ `);
+ const data = await event.request.formData();
+
+ const resp = await query.mutate(
+ {
+ input: {
+ slug: (data.get('name') as string) || '',
+ purpose: (data.get('description') as string) || '',
+ slackChannel: (data.get('slackChannel') as string) || ''
+ }
+ },
+ { event }
+ );
+ if (resp.errors) {
+ return { errors: resp.errors };
+ }
+ if (resp.data?.createTeam.slug) {
+ throw redirect(303, `/team/${resp.data.createTeam.slug}`);
+ }
+ }
+} satisfies Actions;
diff --git a/src/routes/team/create/+page.svelte b/src/routes/team/create/+page.svelte
new file mode 100644
index 00000000..1e3d0964
--- /dev/null
+++ b/src/routes/team/create/+page.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+ import Card from '$lib/Card.svelte';
+ import WarningIcon from '$lib/icons/WarningIcon.svelte';
+ import { Button, ErrorSummary, ErrorSummaryItem, TextField } from '@nais/ds-svelte-community';
+ import { FloppydiskIcon } from '@nais/ds-svelte-community/icons';
+ import type { ActionData } from './$types';
+ import { enhance } from '$app/forms';
+
+ export let form: ActionData;
+ let saving = false;
+</script>
+
+<div class="container">
+ <Card>
+ <h1>Create new team</h1>
+ {#if form?.errors && form.errors.length > 0}
+ <ErrorSummary heading="Error creating team">
+ {#each form.errors as error}
+ <ErrorSummaryItem href="">{error.message}</ErrorSummaryItem>
+ {/each}
+ </ErrorSummary>
+ {/if}
+ <p>
+ Creating a team in NAIS Teams will grant access to certain NAIS features, such as Google Cloud
+ projects, Kubernetes namespaces, or your own GitHub team. After the team is created, you will
+ become the administrator of that team, granting privileges to add and remove team members. The
+ identifier is the primary key, and will be used across systems so that they are easily
+ recognizable.
+ </p>
+ <form method="POST" use:enhance on:submit={() => (saving = !saving)}>
+ <TextField name="name">
+ <svelte:fragment slot="label">Identifier / Name</svelte:fragment>
+ <svelte:fragment slot="description"
+ >Example: my-team-name<br />
+
+ <WarningIcon style="color:var(--a-icon-warning)" /> It is not possible to change the identifier
+ after creation, so choose wisely. Also, the identifier can not start with "nais" or "team".
+ </svelte:fragment>
+ </TextField>
+ <br />
+ <TextField name="description"
+ ><svelte:fragment slot="label">Purpose of the team</svelte:fragment>
+ <svelte:fragment slot="description"
+ >Example: Making sure users have a good experience</svelte:fragment
+ >
+ </TextField>
+ <br />
+ <TextField name="slackChannel"
+ ><svelte:fragment slot="label">Slack channel</svelte:fragment>
+ <svelte:fragment slot="description">Example: #my-team-slack</svelte:fragment>
+ </TextField>
+ <br />
+ <Button loading={saving}
+ ><svelte:fragment slot="icon-left"><FloppydiskIcon /></svelte:fragment>Create team</Button
+ >
+ </form>
+ </Card>
+</div>
+
+<style>
+ .container {
+ margin: auto;
+ max-width: 1432px;
+ }
+</style>
diff --git a/src/routes/teams/+page.gql b/src/routes/teams/+page.gql
index 667d2b5a..37b2fbd1 100644
--- a/src/routes/teams/+page.gql
+++ b/src/routes/teams/+page.gql
@@ -1,19 +1,13 @@
-query Teams {
- teams(first: 50) @paginate(mode: SinglePage) {
- totalCount
+query Teams($limit: Int, $offset: Int) {
+ teams(limit: $limit, offset: $offset) {
+ nodes {
+ slug
+ purpose
+ }
pageInfo {
+ totalCount
hasNextPage
hasPreviousPage
- startCursor
- endCursor
- from
- to
- }
- edges {
- node {
- description
- name
- }
}
}
}
diff --git a/src/routes/teams/+page.svelte b/src/routes/teams/+page.svelte
index 00b162c7..58396bb2 100644
--- a/src/routes/teams/+page.svelte
+++ b/src/routes/teams/+page.svelte
@@ -1,35 +1,34 @@
<script lang="ts">
+ import Pagination from '$lib/Pagination.svelte';
+ import { changeParams, limitOffset } from '$lib/pagination';
import { LinkPanel, LinkPanelDescription, LinkPanelTitle } from '@nais/ds-svelte-community';
import type { PageData } from './$houdini';
- import Pagination from '$lib/Pagination.svelte';
export let data: PageData;
$: ({ Teams } = data);
+ $: ({ limit, offset } = limitOffset($Teams.variables));
</script>
<svelte:head><title>Teams - Console</title></svelte:head>
{#if $Teams.data}
<div>
- {#each $Teams.data.teams.edges as edge}
- <LinkPanel about={edge.node.description} href="/team/{edge.node.name}" border={true} as="a">
- <LinkPanelTitle>{edge.node.name}</LinkPanelTitle>
- <LinkPanelDescription
- >{edge.node.description ? edge.node.description : 'no description'}</LinkPanelDescription
- >
+ {#each $Teams.data.teams.nodes as node}
+ <LinkPanel about={node.purpose} href="/team/{node.slug}" border={true} as="a">
+ <LinkPanelTitle>{node.slug}</LinkPanelTitle>
+ <LinkPanelDescription>
+ {node.purpose ? node.purpose : 'no description'}
+ </LinkPanelDescription>
</LinkPanel>
{/each}
</div>
+
<Pagination
- pageInfo={$Teams.data.teams.pageInfo}
- totalCount={$Teams.data.teams.totalCount}
- on:nextPage={() => {
- if (!$Teams.pageInfo.hasNextPage) return;
- Teams.loadNextPage();
- }}
- on:previousPage={() => {
- if (!$Teams.pageInfo.hasPreviousPage) return;
- Teams.loadPreviousPage();
+ pageInfo={$Teams.data?.teams?.pageInfo}
+ {limit}
+ {offset}
+ changePage={(page) => {
+ changeParams({ page: page.toString() });
}}
/>
{/if}
diff --git a/src/routes/teams/+page.ts b/src/routes/teams/+page.ts
new file mode 100644
index 00000000..7507e352
--- /dev/null
+++ b/src/routes/teams/+page.ts
@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+import type { TeamsVariables } from './$houdini';
+export const _TeamsVariables: TeamsVariables = ({ url }) => {
+ const page = parseInt(url.searchParams.get('page') || '1');
+ if (!page || page < 1) {
+ throw error(400, 'Bad pagenumber');
+ }
+ const limit = 10;
+ const offset = (page - 1) * limit;
+
+ return { limit, offset };
+};
diff --git a/src/routes/userInfo.gql b/src/routes/userInfo.gql
new file mode 100644
index 00000000..b95adc7a
--- /dev/null
+++ b/src/routes/userInfo.gql
@@ -0,0 +1,8 @@
+query UserInfo {
+ me {
+ ... on User {
+ name
+ isAdmin
+ }
+ }
+}
diff --git a/vite.config.ts b/vite.config.ts
index ca8e679f..8e7134d1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,20 +1,38 @@
import { sveltekit } from '@sveltejs/kit/vite';
import houdini from 'houdini/vite';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
-export default defineConfig({
- plugins: [houdini(), sveltekit()],
- server: {
- proxy: {
- '/query': {
- target: 'http://127.0.0.1:4242',
- rewrite: (path) => {
- return path;
+export default defineConfig((mode) => {
+ const env = loadEnv(mode.mode, process.cwd());
+
+ const headers = (): { [header: string]: string } => {
+ const email = env?.VITE_API_USER_EMAIL;
+
+ if (!email) {
+ return {};
+ }
+
+ console.log('Using email for proxy:', email);
+ return {
+ 'X-User-Email': email
+ };
+ };
+
+ return {
+ plugins: [houdini(), sveltekit()],
+ server: {
+ proxy: {
+ '/query': {
+ target: 'http://127.0.0.1:3000',
+ headers: headers()
+ },
+ '/oauth2': {
+ target: 'http://127.0.0.1:3000'
}
}
+ },
+ ssr: {
+ noExternal: ['@navikt/ds-css']
}
- },
- ssr: {
- noExternal: ['@navikt/ds-css']
- }
+ };
});