Skip to content
This repository has been archived by the owner on Apr 17, 2024. It is now read-only.

Commit

Permalink
chore: prettier all files and fix helm chart issue
Browse files Browse the repository at this point in the history
Signed-off-by: Alexander Trost <galexrt@googlemail.com>
  • Loading branch information
galexrt committed Sep 20, 2023
1 parent 1c7332e commit 4738a2f
Show file tree
Hide file tree
Showing 37 changed files with 1,119 additions and 1,036 deletions.
39 changes: 23 additions & 16 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
{
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": ["source.fixAll.eslint"],
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
"protoc": {
"options": ["--proto_path=./.build/validate", "--proto_path=./"]
},
"volar.takeOverMode.extension": "Vue.volar",
"[go]": {
"editor.defaultFormatter": "golang.go"
}
}
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"volar.takeOverMode.extension": "Vue.volar",
"protoc": {
"options": [
"--proto_path=./.build/validate",
"--proto_path=./"
]
},
"inlineFold.maskChar": "...",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
}
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,18 @@ Nice dashboard and controls for managing Rook Ceph data storage.
* `yarn` for, e.g., `yarn dev` to preview the frontend.
* [`buf` cli](https://buf.build/docs/installation) installed (you can use `make buf` to install it to your Go bin path)
* `go-licenses`: Run `go install github.com/google/go-licenses@latest`.
* `prettier` is installed when running `yarn`.

### Tasks

* Installing the frontend dependencies: `yarn`
* Run frontend dev server: `yarn dev`
* Generate Protobuf code: `make gen-proto`

### Contributing

* Must run `prettier` format on any changed files. For Codium/VSCode users that should automatically be configured due to the settings in [`.vscode/` folder](.vscode/).

## License

The project is licensed under the [MIT License](/LICENSE).
Expand Down
19 changes: 19 additions & 0 deletions charts/data-control-center/templates/rbac.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,23 @@ rules:
- get
- list
- watch
---
kind: RoleBinding
apiVersion: rbac.authorization.k8s.io/v1
metadata:
name: {{ include "data-control-center.serviceAccountName" . }}
labels:
{{- include "data-control-center.labels" . | nindent 4 }}
{{- with .Values.rbac.annotations }}
annotations:
{{- toYaml . | nindent 4 }}
{{- end }}
subjects:
- kind: ServiceAccount
name: {{ include "data-control-center.serviceAccountName" . }}
namespace: {{ .Release.Namespace }}
roleRef:
kind: ClusterRole
name: {{ include "data-control-center.serviceAccountName" . }}
apiGroup: rbac.authorization.k8s.io
{{- end }}
9 changes: 4 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,9 @@
"@connectrpc/connect-fastify": "^1.0.0",
"@connectrpc/connect-node": "^1.0.0",
"@connectrpc/connect-web": "^1.0.0",
"@fastify/cors": "^8.3.0",
"@fastify/cors": "^8.4.0",
"@fontsource/inter": "^5.0.8",
"@headlessui/vue": "^1.7.16",
"@heroicons/vue": "^2.0.18",
"@improbable-eng/grpc-web": "^0.15.0",
"@nuxtjs/robots": "^3.0.0",
"@originjs/vite-plugin-commonjs": "^1.0.3",
Expand All @@ -48,15 +47,15 @@
"vue3-apexcharts": "^1.4.4"
},
"devDependencies": {
"@nuxt/devtools": "^0.8.3",
"@nuxt/devtools": "^0.8.4",
"@nuxtjs/tailwindcss": "^6.8.0",
"@pinia-plugin-persistedstate/nuxt": "^1.1.2",
"@tailwindcss/forms": "^0.5.6",
"@tailwindcss/typography": "^0.5.10",
"@total-typescript/ts-reset": "^0.5.1",
"@types/d3": "^7.4.0",
"@types/google-protobuf": "^3.15.6",
"@types/node": "^20.6.2",
"@types/node": "^20.6.3",
"@unhead/vue": "^1.7.4",
"@vitejs/plugin-vue": "^4.3.4",
"@volar/vue-typescript": "^1.6.5",
Expand All @@ -79,6 +78,6 @@
"typescript": "^5.2.2",
"vite": "^4.4.9",
"vite-plugin-mkcert": "^1.16.0",
"vue-tsc": "^1.8.11"
"vue-tsc": "^1.8.12"
}
}
10 changes: 6 additions & 4 deletions src/app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,11 @@ await loadConfig();

<template>
<NuxtLayout>
<NuxtPage :transition="{
name: 'page',
mode: 'out-in',
}" />
<NuxtPage
:transition="{
name: 'page',
mode: 'out-in',
}"
/>
</NuxtLayout>
</template>
145 changes: 71 additions & 74 deletions src/components/BarChartWidget.vue
Original file line number Diff line number Diff line change
@@ -1,97 +1,94 @@
<template>
<div class="chart-tile">
<svg id="bar"></svg>
</div>
<div class="chart-tile">
<svg id="bar"></svg>
</div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import * as d3 from 'd3';
import { onMounted } from 'vue';
// const props = defineProps(['data'])
const data = [
{ disc: 'vol 1', used: 24.2, capacity: 40, capacityUnits: 'GiB' },
{ disc: 'vol 2', used: 37.9, capacity: 40, capacityUnits: 'GiB' },
{ disc: 'vol 3', used: 45.7, capacity: 60, capacityUnits: 'GiB' },
{ disc: 'vol 4', used: 6.4, capacity: 60, capacityUnits: 'GiB' },
{ disc: 'vol 1', used: 24.2, capacity: 40, capacityUnits: 'GiB' },
{ disc: 'vol 2', used: 37.9, capacity: 40, capacityUnits: 'GiB' },
{ disc: 'vol 3', used: 45.7, capacity: 60, capacityUnits: 'GiB' },
{ disc: 'vol 4', used: 6.4, capacity: 60, capacityUnits: 'GiB' },
];
onMounted(() => {
const width = 464;
const height = 250;
const marginTop = 30;
const marginRight = 0;
const marginBottom = 30;
const marginLeft = 40;
const width = 464;
const height = 250;
const marginTop = 30;
const marginRight = 0;
const marginBottom = 30;
const marginLeft = 40;
// Declare the x (horizontal position) scale.
const x = d3
.scaleBand()
.domain(
d3.groupSort(
data,
([d]) => -d.disc,
(d) => d.disc
)
) // descending used
.range([marginLeft, width - marginRight])
.padding(0.1);
// Declare the x (horizontal position) scale.
const x = d3
.scaleBand()
.domain(
d3.groupSort(
data,
([d]) => -d.disc,
(d) => d.disc,
),
) // descending used
.range([marginLeft, width - marginRight])
.padding(0.1);
// Declare the y (vertical position) scale.
const y = d3
.scaleLinear()
.domain([0, 100])
.range([height - marginBottom, marginTop])
// Declare the y (vertical position) scale.
const y = d3
.scaleLinear()
.domain([0, 100])
.range([height - marginBottom, marginTop]);
// Create the SVG container.
const svg = d3
.select('#bar')
.attr('width', width)
.attr('height', height)
.attr('viewBox', [0, 0, width, height])
.attr('style', 'max-width: 100%; height: auto;')
// Create the SVG container.
const svg = d3
.select('#bar')
.attr('width', width)
.attr('height', height)
.attr('viewBox', [0, 0, width, height])
.attr('style', 'max-width: 100%; height: auto;');
// Add a rect for each bar.
svg
.append('g')
.attr('fill', 'steelblue')
.selectAll()
.data(data)
.join('rect')
.attr('x', (d) => x(d.disc))
.attr('y', (d) => y((d.used / d.capacity) * 100))
.attr('height', (d) => y(0) - y((d.used / d.capacity) * 100))
.attr('width', x.bandwidth())
.attr('fill', (d) => ((d.used / d.capacity) * 100 > 80 ? 'firebrick' : null))
// Add a rect for each bar.
svg.append('g')
.attr('fill', 'steelblue')
.selectAll()
.data(data)
.join('rect')
.attr('x', (d) => x(d.disc))
.attr('y', (d) => y((d.used / d.capacity) * 100))
.attr('height', (d) => y(0) - y((d.used / d.capacity) * 100))
.attr('width', x.bandwidth())
.attr('fill', (d) => ((d.used / d.capacity) * 100 > 80 ? 'firebrick' : null));
// Add the x-axis and label.
svg
.append('g')
.attr('transform', `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
// Add the x-axis and label.
svg.append('g')
.attr('transform', `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0));
// Add the y-axis and label, and remove the domain line.
svg
.append('g')
.attr('transform', `translate(${marginLeft},0)`)
.call(d3.axisLeft(y))
.call((g) => g.select('.domain').remove())
.call((g) =>
g
.append('text')
.attr('x', -marginLeft)
.attr('y', 10)
.attr('fill', 'currentColor')
.attr('text-anchor', 'start')
.text('↑ used (%)')
)
})
// Add the y-axis and label, and remove the domain line.
svg.append('g')
.attr('transform', `translate(${marginLeft},0)`)
.call(d3.axisLeft(y))
.call((g) => g.select('.domain').remove())
.call((g) =>
g
.append('text')
.attr('x', -marginLeft)
.attr('y', 10)
.attr('fill', 'currentColor')
.attr('text-anchor', 'start')
.text('↑ used (%)'),
);
});
</script>

<style lang="scss" scoped>
.chart-tile {
margin: 1em;
padding: 1em;
border: 1px solid black;
margin: 1em;
padding: 1em;
border: 1px solid black;
}
</style>
12 changes: 9 additions & 3 deletions src/components/ClusterRadar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,14 @@ const series = ref([

<!-- Chart -->
<div>
<VueApexCharts class="flex justify-center py-1" height="250px" width="250px" type="radar" :options="options"
:series="series" />
<VueApexCharts
class="flex justify-center py-1"
height="250px"
width="250px"
type="radar"
:options="options"
:series="series"
/>
</div>
</div>
</template>
</template>
Loading

0 comments on commit 4738a2f

Please sign in to comment.